aboutsummaryrefslogtreecommitdiff
path: root/src/scss/objects/_media.scss
blob: 580c4ad98892918bd38df2a28d1134e3fa4cc711 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/**
 * Enable / Disable aligment modifiers.
 * .o-media--middle Align columns at middle vertically
 * .o-media--bottom Align columns at bottom vertically.
 *
 * Type: Boolean
 */

$iota-objs-media-aligned: true;


/**
 * Enable / Disable reversed modifier
 * .o-media--rev Reverse columns order
 *
 * Type: Boolean
 */

$iota-objs-media-rev: false;


/**
 * Default gutter size. Use a number for a single size or
 * a map for a responsive size.
 *
 * Type: Number / Map
 */

$iota-objs-media-gutter-default: $iota-global-gutter-default;


/**
 * Extra gutters map. Each gutter size will be available as
 * a modifier that will be named according to the gutter name.
 * Use a map for a single size or a nested map for a responsive
 * size. E.g. If $iota-objs-media-gutter-extra: ('compact': '10px');
 * then .o-media--compact will be available for use.
 *
 * Type: Map
 */

$iota-objs-media-gutter-extra: ();


/**
 * Enable / Disable flexbox
 *
 * Type: Boolean
 */

$iota-objs-media-flex: $iota-global-flex;


/**
 * Enable / Disable responsive modifier.
 * .o-media--res Collapse fluid section bellow fixed one,
 * at a specific max-width breakpoint.
 *
 * Type: Boolean
 */

$iota-objs-media-res: false;


/**
 * Specify max-width for breakpoint to collapse at.
 *
 * Type: Number
 */

$iota-objs-media-collapse-at: 767px;


/**
 * Namespace classes
 *
 * Type: String
 */

$iota-objs-media-namespace          : 'media';
$iota-objs-media-fixed-name         : 'fixed';
$iota-objs-media-fluid-name         : 'fluid';
$iota-objs-media-reversed-name      : 'rev';
$iota-objs-media-align-middle-name  : 'middle';
$iota-objs-media-align-bottom-name  : 'bottom';
$iota-objs-media-responsive-name    : 'res';


@import 'node_modules/iotacss/objects/media';