@carbon/elements 10.55.0 → 11.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +1 -1
- package/lib/index.js +0 -4
- package/package.json +12 -13
- package/src/__tests__/__snapshots__/PublicAPI-test.js.snap +44 -131
- package/src/index.js +0 -1
- package/umd/index.js +0 -4
- package/scss/colors/colors.scss +0 -12
- package/scss/colors/index.scss +0 -12
- package/scss/colors/mixins.scss +0 -1456
- package/scss/elements.scss +0 -17
- package/scss/grid/12.scss +0 -41
- package/scss/grid/_inlined/12.scss +0 -41
- package/scss/grid/_inlined/_mixins.import.scss +0 -431
- package/scss/grid/_inlined/_mixins.scss +0 -415
- package/scss/grid/_inlined/_prefix.scss +0 -12
- package/scss/grid/_mixins.import.scss +0 -431
- package/scss/grid/_mixins.scss +0 -415
- package/scss/grid/_prefix.scss +0 -12
- package/scss/grid/grid.scss +0 -10
- package/scss/grid/index.scss +0 -10
- package/scss/grid/modules/_breakpoint.scss +0 -198
- package/scss/grid/modules/_config.scss +0 -94
- package/scss/grid/modules/_css-grid.scss +0 -470
- package/scss/grid/modules/_flex-grid.scss +0 -363
- package/scss/grid/modules/_mixins.scss +0 -336
- package/scss/grid/vendor/@carbon/import-once/import-once.scss +0 -27
- package/scss/grid/vendor/@carbon/import-once/index.scss +0 -8
- package/scss/grid/vendor/@carbon/layout/_breakpoint.scss +0 -246
- package/scss/grid/vendor/@carbon/layout/_convert.import.scss +0 -65
- package/scss/grid/vendor/@carbon/layout/_convert.scss +0 -54
- package/scss/grid/vendor/@carbon/layout/_key-height.import.scss +0 -117
- package/scss/grid/vendor/@carbon/layout/_key-height.scss +0 -111
- package/scss/grid/vendor/@carbon/layout/_mini-unit.scss +0 -23
- package/scss/grid/vendor/@carbon/layout/_spacing.scss +0 -12
- package/scss/grid/vendor/@carbon/layout/_utilities.scss +0 -41
- package/scss/grid/vendor/@carbon/layout/generated/_container.scss +0 -73
- package/scss/grid/vendor/@carbon/layout/generated/_fluid-spacing.scss +0 -61
- package/scss/grid/vendor/@carbon/layout/generated/_icon-size.scss +0 -34
- package/scss/grid/vendor/@carbon/layout/generated/_layout.scss +0 -97
- package/scss/grid/vendor/@carbon/layout/generated/_size.scss +0 -17
- package/scss/grid/vendor/@carbon/layout/generated/_spacing.scss +0 -169
- package/scss/grid/vendor/@carbon/layout/index.scss +0 -8
- package/scss/grid/vendor/@carbon/layout/layout.scss +0 -12
- package/scss/grid/vendor/@carbon/layout/modules/_convert.scss +0 -51
- package/scss/grid/vendor/@carbon/layout/modules/_spacing.scss +0 -9
- package/scss/grid/vendor/@carbon/layout/modules/_utilities.scss +0 -41
- package/scss/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +0 -37
- package/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss +0 -91
- package/scss/icons/icons.scss +0 -10
- package/scss/icons/index.scss +0 -8
- package/scss/icons/mixins.scss +0 -18
- package/scss/import-once/import-once.scss +0 -27
- package/scss/import-once/index.scss +0 -8
- package/scss/index.scss +0 -15
- package/scss/layout/_breakpoint.scss +0 -246
- package/scss/layout/_convert.import.scss +0 -65
- package/scss/layout/_convert.scss +0 -54
- package/scss/layout/_key-height.import.scss +0 -117
- package/scss/layout/_key-height.scss +0 -111
- package/scss/layout/_mini-unit.scss +0 -23
- package/scss/layout/_spacing.scss +0 -12
- package/scss/layout/_utilities.scss +0 -41
- package/scss/layout/generated/_container.scss +0 -73
- package/scss/layout/generated/_fluid-spacing.scss +0 -61
- package/scss/layout/generated/_icon-size.scss +0 -34
- package/scss/layout/generated/_layout.scss +0 -97
- package/scss/layout/generated/_size.scss +0 -17
- package/scss/layout/generated/_spacing.scss +0 -169
- package/scss/layout/index.scss +0 -8
- package/scss/layout/layout.scss +0 -12
- package/scss/layout/modules/_convert.scss +0 -51
- package/scss/layout/modules/_spacing.scss +0 -9
- package/scss/layout/modules/_utilities.scss +0 -41
- package/scss/layout/modules/generated/_fluid-spacing.scss +0 -37
- package/scss/layout/modules/generated/_spacing.scss +0 -91
- package/scss/motion/index.scss +0 -8
- package/scss/motion/motion.scss +0 -78
- package/scss/themes/_mixins.scss +0 -39
- package/scss/themes/_theme-maps.scss +0 -9
- package/scss/themes/_tokens.scss +0 -8
- package/scss/themes/compat/_themes.scss +0 -8
- package/scss/themes/compat/_tokens.scss +0 -8
- package/scss/themes/compat/generated/_themes.scss +0 -271
- package/scss/themes/compat/generated/_tokens.scss +0 -206
- package/scss/themes/generated/_mixins.scss +0 -3622
- package/scss/themes/generated/_themes.scss +0 -2955
- package/scss/themes/generated/_tokens.scss +0 -3179
- package/scss/themes/index.scss +0 -8
- package/scss/themes/modules/_config.scss +0 -11
- package/scss/themes/modules/_theme.scss +0 -120
- package/scss/themes/modules/_themes.scss +0 -8
- package/scss/themes/modules/_tokens.scss +0 -8
- package/scss/themes/modules/_utilities.scss +0 -18
- package/scss/themes/modules/generated/_themes.scss +0 -432
- package/scss/themes/modules/generated/_tokens.scss +0 -308
- package/scss/themes/themes.scss +0 -10
- package/scss/type/_classes.scss +0 -41
- package/scss/type/_font-family.scss +0 -70
- package/scss/type/_inlined/_classes.scss +0 -41
- package/scss/type/_inlined/_font-family.scss +0 -70
- package/scss/type/_inlined/_prefix.scss +0 -11
- package/scss/type/_inlined/_reset.scss +0 -90
- package/scss/type/_inlined/_scale.scss +0 -59
- package/scss/type/_inlined/_styles.import.scss +0 -766
- package/scss/type/_inlined/_styles.scss +0 -924
- package/scss/type/_inlined/font-face/_mono.scss +0 -1166
- package/scss/type/_inlined/font-face/_sans-condensed.scss +0 -1009
- package/scss/type/_inlined/font-face/_sans.scss +0 -1326
- package/scss/type/_inlined/font-face/_serif.scss +0 -1166
- package/scss/type/_inlined/font-face/_settings.scss +0 -12
- package/scss/type/_prefix.scss +0 -11
- package/scss/type/_reset.scss +0 -90
- package/scss/type/_scale.scss +0 -59
- package/scss/type/_styles.import.scss +0 -766
- package/scss/type/_styles.scss +0 -924
- package/scss/type/font-face/_mono.scss +0 -1166
- package/scss/type/font-face/_sans-condensed.scss +0 -1009
- package/scss/type/font-face/_sans.scss +0 -1326
- package/scss/type/font-face/_serif.scss +0 -1166
- package/scss/type/font-face/_settings.scss +0 -12
- package/scss/type/index.scss +0 -8
- package/scss/type/modules/_classes.scss +0 -42
- package/scss/type/modules/_default-type.scss +0 -55
- package/scss/type/modules/_font-family.scss +0 -104
- package/scss/type/modules/_prefix.scss +0 -11
- package/scss/type/modules/_reset.scss +0 -44
- package/scss/type/modules/_scale.scss +0 -57
- package/scss/type/modules/_styles.scss +0 -876
- package/scss/type/type.scss +0 -8
- package/scss/type/vendor/@carbon/grid/12.scss +0 -41
- package/scss/type/vendor/@carbon/grid/_inlined/12.scss +0 -41
- package/scss/type/vendor/@carbon/grid/_inlined/_mixins.import.scss +0 -431
- package/scss/type/vendor/@carbon/grid/_inlined/_mixins.scss +0 -415
- package/scss/type/vendor/@carbon/grid/_inlined/_prefix.scss +0 -12
- package/scss/type/vendor/@carbon/grid/_mixins.import.scss +0 -431
- package/scss/type/vendor/@carbon/grid/_mixins.scss +0 -415
- package/scss/type/vendor/@carbon/grid/_prefix.scss +0 -12
- package/scss/type/vendor/@carbon/grid/grid.scss +0 -10
- package/scss/type/vendor/@carbon/grid/index.scss +0 -10
- package/scss/type/vendor/@carbon/grid/modules/_breakpoint.scss +0 -198
- package/scss/type/vendor/@carbon/grid/modules/_config.scss +0 -94
- package/scss/type/vendor/@carbon/grid/modules/_css-grid.scss +0 -470
- package/scss/type/vendor/@carbon/grid/modules/_flex-grid.scss +0 -363
- package/scss/type/vendor/@carbon/grid/modules/_mixins.scss +0 -336
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/import-once/import-once.scss +0 -27
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/import-once/index.scss +0 -8
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_breakpoint.scss +0 -246
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_convert.import.scss +0 -65
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_convert.scss +0 -54
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_key-height.import.scss +0 -117
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_key-height.scss +0 -111
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_mini-unit.scss +0 -23
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_spacing.scss +0 -12
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_utilities.scss +0 -41
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_container.scss +0 -73
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_fluid-spacing.scss +0 -61
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_icon-size.scss +0 -34
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_layout.scss +0 -97
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_size.scss +0 -17
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_spacing.scss +0 -169
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/index.scss +0 -8
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/layout.scss +0 -12
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/_convert.scss +0 -51
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/_spacing.scss +0 -9
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/_utilities.scss +0 -41
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +0 -37
- package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/generated/_spacing.scss +0 -91
- package/scss/type/vendor/@carbon/import-once/import-once.scss +0 -27
- package/scss/type/vendor/@carbon/import-once/index.scss +0 -8
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2018, 2018
|
|
3
|
-
//
|
|
4
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
// LICENSE file in the root directory of this source tree.
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
/// Used by `exports` mixin to track which modules have been imported
|
|
9
|
-
/// @type Map
|
|
10
|
-
/// @access public
|
|
11
|
-
/// @group @carbon/import-once
|
|
12
|
-
$imported-modules: () !default;
|
|
13
|
-
|
|
14
|
-
/// Module export mixin that helps making sure a module is imported once and only once
|
|
15
|
-
/// @access public
|
|
16
|
-
/// @param {String} $name - Name of exported module
|
|
17
|
-
/// @param {Bool} $warn [false] - Warn when a module has been already imported
|
|
18
|
-
/// @content Declaration blocks to be imported
|
|
19
|
-
/// @group @carbon/import-once
|
|
20
|
-
@mixin exports($name, $warn: false) {
|
|
21
|
-
@if not(index($imported-modules, $name)) {
|
|
22
|
-
$imported-modules: append($imported-modules, $name) !global;
|
|
23
|
-
@content;
|
|
24
|
-
} @else if $warn == true {
|
|
25
|
-
@warn 'Module `#{$name}` has already been imported.';
|
|
26
|
-
}
|
|
27
|
-
}
|
|
@@ -1,246 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2018, 2018
|
|
3
|
-
//
|
|
4
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
// LICENSE file in the root directory of this source tree.
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
|
|
9
|
-
@import 'convert';
|
|
10
|
-
@import 'utilities';
|
|
11
|
-
|
|
12
|
-
/// Carbon gutter size in rem
|
|
13
|
-
/// @type Number
|
|
14
|
-
/// @access public
|
|
15
|
-
/// @group @carbon/layout
|
|
16
|
-
$carbon--grid-gutter: carbon--rem(32px);
|
|
17
|
-
|
|
18
|
-
/// Carbon condensed gutter size in rem
|
|
19
|
-
/// @type Number
|
|
20
|
-
/// @access public
|
|
21
|
-
/// @group @carbon/layout
|
|
22
|
-
$carbon--grid-gutter--condensed: carbon--rem(1px);
|
|
23
|
-
|
|
24
|
-
// Initial map of our breakpoints and their values
|
|
25
|
-
/// @type Map
|
|
26
|
-
/// @access public
|
|
27
|
-
/// @group @carbon/layout
|
|
28
|
-
$carbon--grid-breakpoints: (
|
|
29
|
-
sm: (
|
|
30
|
-
columns: 4,
|
|
31
|
-
margin: 0,
|
|
32
|
-
width: carbon--rem(320px),
|
|
33
|
-
),
|
|
34
|
-
md: (
|
|
35
|
-
columns: 8,
|
|
36
|
-
margin: carbon--rem(16px),
|
|
37
|
-
width: carbon--rem(672px),
|
|
38
|
-
),
|
|
39
|
-
lg: (
|
|
40
|
-
columns: 16,
|
|
41
|
-
margin: carbon--rem(16px),
|
|
42
|
-
width: carbon--rem(1056px),
|
|
43
|
-
),
|
|
44
|
-
xlg: (
|
|
45
|
-
columns: 16,
|
|
46
|
-
margin: carbon--rem(16px),
|
|
47
|
-
width: carbon--rem(1312px),
|
|
48
|
-
),
|
|
49
|
-
max: (
|
|
50
|
-
columns: 16,
|
|
51
|
-
margin: carbon--rem(24px),
|
|
52
|
-
width: carbon--rem(1584px),
|
|
53
|
-
),
|
|
54
|
-
) !default;
|
|
55
|
-
|
|
56
|
-
/// Get the value of the next breakpoint, or null for the last breakpoint
|
|
57
|
-
/// @param {String} $name - The name of the breakpoint
|
|
58
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
|
|
59
|
-
/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
|
|
60
|
-
/// @return {String}
|
|
61
|
-
/// @access public
|
|
62
|
-
/// @group @carbon/layout
|
|
63
|
-
@function carbon--breakpoint-next(
|
|
64
|
-
$name,
|
|
65
|
-
$breakpoints: $carbon--grid-breakpoints,
|
|
66
|
-
$breakpoint-names: map-keys($breakpoints)
|
|
67
|
-
) {
|
|
68
|
-
$n: index($breakpoint-names, $name);
|
|
69
|
-
@if $n != null and $n < length($breakpoint-names) {
|
|
70
|
-
@return nth($breakpoint-names, $n + 1);
|
|
71
|
-
}
|
|
72
|
-
@return null;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/// Get the value of the previous breakpoint, or null for the first breakpoint
|
|
76
|
-
/// @param {String} $name - The name of the breakpoint
|
|
77
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
|
|
78
|
-
/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
|
|
79
|
-
/// @return {String}
|
|
80
|
-
/// @access public
|
|
81
|
-
/// @group @carbon/layout
|
|
82
|
-
@function carbon--breakpoint-prev(
|
|
83
|
-
$name,
|
|
84
|
-
$breakpoints: $carbon--grid-breakpoints,
|
|
85
|
-
$breakpoint-names: map-keys($breakpoints)
|
|
86
|
-
) {
|
|
87
|
-
$n: index($breakpoint-names, $name);
|
|
88
|
-
@if $n != null and $n > 1 {
|
|
89
|
-
@return nth($breakpoint-names, $n - 1);
|
|
90
|
-
}
|
|
91
|
-
@return null;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/// Check to see if the given breakpoint name
|
|
95
|
-
/// @param {String} $name - The name of the breakpoint
|
|
96
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
|
|
97
|
-
/// @return {Bool}
|
|
98
|
-
/// @access public
|
|
99
|
-
/// @group @carbon/layout
|
|
100
|
-
@function carbon--is-smallest-breakpoint(
|
|
101
|
-
$name,
|
|
102
|
-
$breakpoints: $carbon--grid-breakpoints
|
|
103
|
-
) {
|
|
104
|
-
@return index(map-keys($breakpoints), $name) == 1;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
/// Returns the largest breakpoint name
|
|
108
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
|
|
109
|
-
/// @return {String}
|
|
110
|
-
/// @access public
|
|
111
|
-
/// @group @carbon/layout
|
|
112
|
-
@function carbon--largest-breakpoint-name(
|
|
113
|
-
$breakpoints: $carbon--grid-breakpoints
|
|
114
|
-
) {
|
|
115
|
-
$total-breakpoints: length($breakpoints);
|
|
116
|
-
@return carbon--key-by-index($breakpoints, $total-breakpoints);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
|
|
120
|
-
/// @param {String} $name - The name of the breakpoint
|
|
121
|
-
/// @return {String}
|
|
122
|
-
/// @access public
|
|
123
|
-
/// @group @carbon/layout
|
|
124
|
-
@function carbon--breakpoint-infix($name) {
|
|
125
|
-
@return '-#{$name}';
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
/// Generate a media query from the width of the given breakpoint to infinity
|
|
129
|
-
/// @param {String | Number} $name
|
|
130
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
|
|
131
|
-
/// @content
|
|
132
|
-
/// @access public
|
|
133
|
-
/// @group @carbon/layout
|
|
134
|
-
@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
|
|
135
|
-
@if type-of($name) == 'number' {
|
|
136
|
-
@media (min-width: $name) {
|
|
137
|
-
@content;
|
|
138
|
-
}
|
|
139
|
-
} @else if map-has-key($breakpoints, $name) {
|
|
140
|
-
$breakpoint: map-get($breakpoints, $name);
|
|
141
|
-
$width: map-get($breakpoint, width);
|
|
142
|
-
@if carbon--is-smallest-breakpoint($name, $breakpoints) {
|
|
143
|
-
@content;
|
|
144
|
-
} @else {
|
|
145
|
-
@media (min-width: $width) {
|
|
146
|
-
@content;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
} @else {
|
|
150
|
-
@error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
/// Generate a media query for the maximum width of the given styles
|
|
155
|
-
/// @param {String | Number} $name
|
|
156
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
|
|
157
|
-
/// @content
|
|
158
|
-
/// @access public
|
|
159
|
-
/// @group @carbon/layout
|
|
160
|
-
@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
|
|
161
|
-
@if type-of($name) == 'number' {
|
|
162
|
-
@media (max-width: $name) {
|
|
163
|
-
@content;
|
|
164
|
-
}
|
|
165
|
-
} @else if map-has-key($breakpoints, $name) {
|
|
166
|
-
// We borrow this logic from bootstrap for specifying the value of the
|
|
167
|
-
// max-width. The maximum width is calculated by finding the breakpoint and
|
|
168
|
-
// subtracting .02 from its value. This value is used instead of .01 to
|
|
169
|
-
// avoid rounding issues in Safari
|
|
170
|
-
// https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
|
|
171
|
-
$breakpoint: map-get($breakpoints, $name);
|
|
172
|
-
$width: map-get($breakpoint, width) - 0.02;
|
|
173
|
-
@media (max-width: $width) {
|
|
174
|
-
@content;
|
|
175
|
-
}
|
|
176
|
-
} @else {
|
|
177
|
-
@error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/// Generate a media query for the range between the lower and upper breakpoints
|
|
182
|
-
/// @param {String | Number} $lower
|
|
183
|
-
/// @param {String | Number} $upper
|
|
184
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
|
|
185
|
-
/// @content
|
|
186
|
-
/// @access public
|
|
187
|
-
/// @group @carbon/layout
|
|
188
|
-
@mixin carbon--breakpoint-between(
|
|
189
|
-
$lower,
|
|
190
|
-
$upper,
|
|
191
|
-
$breakpoints: $carbon--grid-breakpoints
|
|
192
|
-
) {
|
|
193
|
-
$is-number-lower: type-of($lower) == 'number';
|
|
194
|
-
$is-number-upper: type-of($upper) == 'number';
|
|
195
|
-
$min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
|
|
196
|
-
$max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
|
|
197
|
-
|
|
198
|
-
@if $min and $max {
|
|
199
|
-
$min-width: if(
|
|
200
|
-
not $is-number-lower and $min,
|
|
201
|
-
map-get($min, width) + 0.02,
|
|
202
|
-
$min
|
|
203
|
-
);
|
|
204
|
-
$max-width: if(
|
|
205
|
-
not $is-number-upper and $max,
|
|
206
|
-
map-get($max, width) - 0.02,
|
|
207
|
-
$max
|
|
208
|
-
);
|
|
209
|
-
@media (min-width: $min-width) and (max-width: $max-width) {
|
|
210
|
-
@content;
|
|
211
|
-
}
|
|
212
|
-
} @else if $min != null and $max == null {
|
|
213
|
-
@include carbon--breakpoint-up($lower) {
|
|
214
|
-
@content;
|
|
215
|
-
}
|
|
216
|
-
} @else if $min == null and $max != null {
|
|
217
|
-
@include carbon--breakpoint-down($upper) {
|
|
218
|
-
@content;
|
|
219
|
-
}
|
|
220
|
-
} @else {
|
|
221
|
-
@error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).';
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
/// Generate media query for the largest breakpoint
|
|
226
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
|
|
227
|
-
/// @content
|
|
228
|
-
/// @access public
|
|
229
|
-
/// @group @carbon/layout
|
|
230
|
-
@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
|
|
231
|
-
@include carbon--breakpoint(carbon--largest-breakpoint-name()) {
|
|
232
|
-
@content;
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
/// Generate a media query for a given breakpoint
|
|
237
|
-
/// @param {String | Number} $name
|
|
238
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
|
|
239
|
-
/// @content
|
|
240
|
-
/// @access public
|
|
241
|
-
/// @group @carbon/layout
|
|
242
|
-
@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
|
|
243
|
-
@include carbon--breakpoint-up($name, $breakpoints) {
|
|
244
|
-
@content;
|
|
245
|
-
}
|
|
246
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2018, 2018
|
|
3
|
-
//
|
|
4
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
// LICENSE file in the root directory of this source tree.
|
|
6
|
-
//
|
|
7
|
-
//-------------------------------------------
|
|
8
|
-
// Compatibility notes (*.import.scss)
|
|
9
|
-
// ------------------------------------------
|
|
10
|
-
//
|
|
11
|
-
// This file is intended to be consumed and processed with dart-sass.
|
|
12
|
-
// It is incompatible with node-sass/libsass as it contains sass language features
|
|
13
|
-
// or functions that are unavailable in node-sass/libsass, such as `math.div`.
|
|
14
|
-
//
|
|
15
|
-
// The non-`.import` suffixed version of this file eg. `_filename.scss`
|
|
16
|
-
// is intended to be compatible with node-sass/libsass.
|
|
17
|
-
//
|
|
18
|
-
// Styles authored within this file must be duplicated to the corresponding
|
|
19
|
-
// compatibility file to ensure we continue to support node-sass and dart-sass
|
|
20
|
-
// in v10.
|
|
21
|
-
|
|
22
|
-
@use 'sass:meta';
|
|
23
|
-
@use 'sass:math';
|
|
24
|
-
|
|
25
|
-
/// Default font size
|
|
26
|
-
/// @type Number
|
|
27
|
-
/// @access public
|
|
28
|
-
/// @group @carbon/layout
|
|
29
|
-
$carbon--base-font-size: 16px !default;
|
|
30
|
-
|
|
31
|
-
/// Convert a given px unit to a rem unit
|
|
32
|
-
/// @param {Number} $px - Number with px unit
|
|
33
|
-
/// @return {Number} Number with rem unit
|
|
34
|
-
/// @access public
|
|
35
|
-
/// @group @carbon/layout
|
|
36
|
-
@function carbon--rem($px) {
|
|
37
|
-
@if unit($px) != 'px' {
|
|
38
|
-
// TODO: update to @error in v11
|
|
39
|
-
@warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@if meta.function-exists('div', 'math') {
|
|
43
|
-
@return math.div($px, $carbon--base-font-size) * 1rem;
|
|
44
|
-
} @else {
|
|
45
|
-
@return ($px / $carbon--base-font-size) * 1rem;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/// Convert a given px unit to a em unit
|
|
50
|
-
/// @param {Number} $px - Number with px unit
|
|
51
|
-
/// @return {Number} Number with em unit
|
|
52
|
-
/// @access public
|
|
53
|
-
/// @group @carbon/layout
|
|
54
|
-
@function carbon--em($px) {
|
|
55
|
-
@if unit($px) != 'px' {
|
|
56
|
-
// TODO: update to @error in v11
|
|
57
|
-
@warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@if meta.function-exists('div', 'math') {
|
|
61
|
-
@return math.div($px, $carbon--base-font-size) * 1em;
|
|
62
|
-
} @else {
|
|
63
|
-
@return ($px / $carbon--base-font-size) * 1em;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2018, 2018
|
|
3
|
-
//
|
|
4
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
// LICENSE file in the root directory of this source tree.
|
|
6
|
-
//
|
|
7
|
-
//-------------------------------------------
|
|
8
|
-
// Compatibility notes
|
|
9
|
-
// ------------------------------------------
|
|
10
|
-
//
|
|
11
|
-
// This file is intended to be consumed and processed with node-sass/libsass.
|
|
12
|
-
// Sass language features only available in dart-sass, such as `math.div`,
|
|
13
|
-
// should not be used.
|
|
14
|
-
//
|
|
15
|
-
// The `.import` suffixed version of this file eg. `_filename.import.scss`
|
|
16
|
-
// is intended to be compatible with dart-sass.
|
|
17
|
-
//
|
|
18
|
-
// Styles authored within this file must be duplicated to the corresponding
|
|
19
|
-
// compatibility file to ensure we continue to support node-sass and dart-sass
|
|
20
|
-
// in v10.
|
|
21
|
-
|
|
22
|
-
/// Default font size
|
|
23
|
-
/// @type Number
|
|
24
|
-
/// @access public
|
|
25
|
-
/// @group @carbon/layout
|
|
26
|
-
$carbon--base-font-size: 16px !default;
|
|
27
|
-
|
|
28
|
-
/// Convert a given px unit to a rem unit
|
|
29
|
-
/// @param {Number} $px - Number with px unit
|
|
30
|
-
/// @return {Number} Number with rem unit
|
|
31
|
-
/// @access public
|
|
32
|
-
/// @group @carbon/layout
|
|
33
|
-
@function carbon--rem($px) {
|
|
34
|
-
@if unit($px) != 'px' {
|
|
35
|
-
// TODO: update to @error in v11
|
|
36
|
-
@warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
@return ($px / $carbon--base-font-size) * 1rem;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
/// Convert a given px unit to a em unit
|
|
43
|
-
/// @param {Number} $px - Number with px unit
|
|
44
|
-
/// @return {Number} Number with em unit
|
|
45
|
-
/// @access public
|
|
46
|
-
/// @group @carbon/layout
|
|
47
|
-
@function carbon--em($px) {
|
|
48
|
-
@if unit($px) != 'px' {
|
|
49
|
-
// TODO: update to @error in v11
|
|
50
|
-
@warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
@return ($px / $carbon--base-font-size) * 1em;
|
|
54
|
-
}
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2018, 2018
|
|
3
|
-
//
|
|
4
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
// LICENSE file in the root directory of this source tree.
|
|
6
|
-
//
|
|
7
|
-
//-------------------------------------------
|
|
8
|
-
// Compatibility notes (*.import.scss)
|
|
9
|
-
// ------------------------------------------
|
|
10
|
-
//
|
|
11
|
-
// This file is intended to be consumed and processed with dart-sass.
|
|
12
|
-
// It is incompatible with node-sass/libsass as it contains sass language features
|
|
13
|
-
// or functions that are unavailable in node-sass/libsass, such as `math.div`.
|
|
14
|
-
//
|
|
15
|
-
// The non-`.import` suffixed version of this file eg. `_filename.scss`
|
|
16
|
-
// is intended to be compatible with node-sass/libsass.
|
|
17
|
-
//
|
|
18
|
-
// Styles authored within this file must be duplicated to the corresponding
|
|
19
|
-
// compatibility file to ensure we continue to support node-sass and dart-sass
|
|
20
|
-
// in v10.
|
|
21
|
-
|
|
22
|
-
@use 'sass:meta';
|
|
23
|
-
@use "sass:math";
|
|
24
|
-
@import 'breakpoint';
|
|
25
|
-
@import 'utilities';
|
|
26
|
-
|
|
27
|
-
/// Get the column width for a given breakpoint
|
|
28
|
-
/// @param {String} $breakpoint
|
|
29
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints]
|
|
30
|
-
/// @return {Number} In rem
|
|
31
|
-
/// @access public
|
|
32
|
-
/// @group @carbon/layout
|
|
33
|
-
@function carbon--get-column-width(
|
|
34
|
-
$breakpoint,
|
|
35
|
-
$breakpoints: $carbon--grid-breakpoints
|
|
36
|
-
) {
|
|
37
|
-
@if map-has-key($breakpoints, $breakpoint) {
|
|
38
|
-
$values: map-get($breakpoints, $breakpoint);
|
|
39
|
-
$width: map-get($values, width);
|
|
40
|
-
$margin: map-get($values, margin);
|
|
41
|
-
$columns: map-get($values, columns);
|
|
42
|
-
|
|
43
|
-
@if meta.function-exists('div', 'math') {
|
|
44
|
-
@return math.div($width - (2 * $margin), $columns);
|
|
45
|
-
} @else {
|
|
46
|
-
@return (($width - (2 * $margin)) / $columns);
|
|
47
|
-
}
|
|
48
|
-
} @else {
|
|
49
|
-
@warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/// @type Map
|
|
54
|
-
/// @access public
|
|
55
|
-
/// @group @carbon/layout
|
|
56
|
-
$carbon--key-height-scales: (
|
|
57
|
-
sm: (
|
|
58
|
-
carbon--get-column-width(sm),
|
|
59
|
-
carbon--get-column-width(sm) * 2,
|
|
60
|
-
carbon--get-column-width(sm) * 3,
|
|
61
|
-
carbon--get-column-width(sm) * 4,
|
|
62
|
-
carbon--get-column-width(sm) * 5,
|
|
63
|
-
carbon--get-column-width(sm) * 6,
|
|
64
|
-
),
|
|
65
|
-
md: (
|
|
66
|
-
carbon--get-column-width(md),
|
|
67
|
-
carbon--get-column-width(md) * 2,
|
|
68
|
-
carbon--get-column-width(md) * 3,
|
|
69
|
-
carbon--get-column-width(md) * 4,
|
|
70
|
-
carbon--get-column-width(md) * 5,
|
|
71
|
-
carbon--get-column-width(md) * 6,
|
|
72
|
-
),
|
|
73
|
-
lg: (
|
|
74
|
-
carbon--get-column-width(lg),
|
|
75
|
-
carbon--get-column-width(lg) * 2,
|
|
76
|
-
carbon--get-column-width(lg) * 3,
|
|
77
|
-
carbon--get-column-width(lg) * 4,
|
|
78
|
-
carbon--get-column-width(lg) * 5,
|
|
79
|
-
carbon--get-column-width(lg) * 6,
|
|
80
|
-
carbon--get-column-width(lg) * 7,
|
|
81
|
-
carbon--get-column-width(lg) * 8,
|
|
82
|
-
),
|
|
83
|
-
xlg: (
|
|
84
|
-
carbon--get-column-width(xlg),
|
|
85
|
-
carbon--get-column-width(xlg) * 2,
|
|
86
|
-
carbon--get-column-width(xlg) * 3,
|
|
87
|
-
carbon--get-column-width(xlg) * 4,
|
|
88
|
-
carbon--get-column-width(xlg) * 5,
|
|
89
|
-
carbon--get-column-width(xlg) * 6,
|
|
90
|
-
carbon--get-column-width(xlg) * 7,
|
|
91
|
-
carbon--get-column-width(xlg) * 8,
|
|
92
|
-
),
|
|
93
|
-
max: (
|
|
94
|
-
carbon--get-column-width(max),
|
|
95
|
-
carbon--get-column-width(max) * 2,
|
|
96
|
-
carbon--get-column-width(max) * 3,
|
|
97
|
-
carbon--get-column-width(max) * 4,
|
|
98
|
-
carbon--get-column-width(max) * 5,
|
|
99
|
-
carbon--get-column-width(max) * 6,
|
|
100
|
-
carbon--get-column-width(max) * 7,
|
|
101
|
-
carbon--get-column-width(max) * 8,
|
|
102
|
-
),
|
|
103
|
-
);
|
|
104
|
-
|
|
105
|
-
/// Get the value of a key height step at a given breakpoint
|
|
106
|
-
/// @param {String} $breakpoint
|
|
107
|
-
/// @param {Number} $step
|
|
108
|
-
/// @return {Number} In rem
|
|
109
|
-
/// @access public
|
|
110
|
-
/// @group @carbon/layout
|
|
111
|
-
@function carbon--key-height($breakpoint, $step) {
|
|
112
|
-
@if map-has-key($carbon--key-height-scales, $breakpoint) {
|
|
113
|
-
@return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
|
|
114
|
-
} @else {
|
|
115
|
-
@warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
|
|
116
|
-
}
|
|
117
|
-
}
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2018, 2018
|
|
3
|
-
//
|
|
4
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
// LICENSE file in the root directory of this source tree.
|
|
6
|
-
//
|
|
7
|
-
//-------------------------------------------
|
|
8
|
-
// Compatibility notes
|
|
9
|
-
// ------------------------------------------
|
|
10
|
-
//
|
|
11
|
-
// This file is intended to be consumed and processed with node-sass/libsass.
|
|
12
|
-
// Sass language features only available in dart-sass, such as `math.div`,
|
|
13
|
-
// should not be used.
|
|
14
|
-
//
|
|
15
|
-
// The `.import` suffixed version of this file eg. `_filename.import.scss`
|
|
16
|
-
// is intended to be compatible with dart-sass.
|
|
17
|
-
//
|
|
18
|
-
// Styles authored within this file must be duplicated to the corresponding
|
|
19
|
-
// compatibility file to ensure we continue to support node-sass and dart-sass
|
|
20
|
-
// in v10.
|
|
21
|
-
|
|
22
|
-
@import 'breakpoint';
|
|
23
|
-
@import 'utilities';
|
|
24
|
-
|
|
25
|
-
/// Get the column width for a given breakpoint
|
|
26
|
-
/// @param {String} $breakpoint
|
|
27
|
-
/// @param {Map} $breakpoints [$carbon--grid-breakpoints]
|
|
28
|
-
/// @return {Number} In rem
|
|
29
|
-
/// @access public
|
|
30
|
-
/// @group @carbon/layout
|
|
31
|
-
@function carbon--get-column-width(
|
|
32
|
-
$breakpoint,
|
|
33
|
-
$breakpoints: $carbon--grid-breakpoints
|
|
34
|
-
) {
|
|
35
|
-
@if map-has-key($breakpoints, $breakpoint) {
|
|
36
|
-
$values: map-get($breakpoints, $breakpoint);
|
|
37
|
-
$width: map-get($values, width);
|
|
38
|
-
$margin: map-get($values, margin);
|
|
39
|
-
$columns: map-get($values, columns);
|
|
40
|
-
|
|
41
|
-
@return ($width - (2 * $margin)) / $columns;
|
|
42
|
-
} @else {
|
|
43
|
-
@warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/// @type Map
|
|
48
|
-
/// @access public
|
|
49
|
-
/// @group @carbon/layout
|
|
50
|
-
$carbon--key-height-scales: (
|
|
51
|
-
sm: (
|
|
52
|
-
carbon--get-column-width(sm),
|
|
53
|
-
carbon--get-column-width(sm) * 2,
|
|
54
|
-
carbon--get-column-width(sm) * 3,
|
|
55
|
-
carbon--get-column-width(sm) * 4,
|
|
56
|
-
carbon--get-column-width(sm) * 5,
|
|
57
|
-
carbon--get-column-width(sm) * 6,
|
|
58
|
-
),
|
|
59
|
-
md: (
|
|
60
|
-
carbon--get-column-width(md),
|
|
61
|
-
carbon--get-column-width(md) * 2,
|
|
62
|
-
carbon--get-column-width(md) * 3,
|
|
63
|
-
carbon--get-column-width(md) * 4,
|
|
64
|
-
carbon--get-column-width(md) * 5,
|
|
65
|
-
carbon--get-column-width(md) * 6,
|
|
66
|
-
),
|
|
67
|
-
lg: (
|
|
68
|
-
carbon--get-column-width(lg),
|
|
69
|
-
carbon--get-column-width(lg) * 2,
|
|
70
|
-
carbon--get-column-width(lg) * 3,
|
|
71
|
-
carbon--get-column-width(lg) * 4,
|
|
72
|
-
carbon--get-column-width(lg) * 5,
|
|
73
|
-
carbon--get-column-width(lg) * 6,
|
|
74
|
-
carbon--get-column-width(lg) * 7,
|
|
75
|
-
carbon--get-column-width(lg) * 8,
|
|
76
|
-
),
|
|
77
|
-
xlg: (
|
|
78
|
-
carbon--get-column-width(xlg),
|
|
79
|
-
carbon--get-column-width(xlg) * 2,
|
|
80
|
-
carbon--get-column-width(xlg) * 3,
|
|
81
|
-
carbon--get-column-width(xlg) * 4,
|
|
82
|
-
carbon--get-column-width(xlg) * 5,
|
|
83
|
-
carbon--get-column-width(xlg) * 6,
|
|
84
|
-
carbon--get-column-width(xlg) * 7,
|
|
85
|
-
carbon--get-column-width(xlg) * 8,
|
|
86
|
-
),
|
|
87
|
-
max: (
|
|
88
|
-
carbon--get-column-width(max),
|
|
89
|
-
carbon--get-column-width(max) * 2,
|
|
90
|
-
carbon--get-column-width(max) * 3,
|
|
91
|
-
carbon--get-column-width(max) * 4,
|
|
92
|
-
carbon--get-column-width(max) * 5,
|
|
93
|
-
carbon--get-column-width(max) * 6,
|
|
94
|
-
carbon--get-column-width(max) * 7,
|
|
95
|
-
carbon--get-column-width(max) * 8,
|
|
96
|
-
),
|
|
97
|
-
);
|
|
98
|
-
|
|
99
|
-
/// Get the value of a key height step at a given breakpoint
|
|
100
|
-
/// @param {String} $breakpoint
|
|
101
|
-
/// @param {Number} $step
|
|
102
|
-
/// @return {Number} In rem
|
|
103
|
-
/// @access public
|
|
104
|
-
/// @group @carbon/layout
|
|
105
|
-
@function carbon--key-height($breakpoint, $step) {
|
|
106
|
-
@if map-has-key($carbon--key-height-scales, $breakpoint) {
|
|
107
|
-
@return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
|
|
108
|
-
} @else {
|
|
109
|
-
@warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
|
|
110
|
-
}
|
|
111
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2018, 2018
|
|
3
|
-
//
|
|
4
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
// LICENSE file in the root directory of this source tree.
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
@import 'convert';
|
|
9
|
-
|
|
10
|
-
/// Default mini-unit value
|
|
11
|
-
/// @type Number
|
|
12
|
-
/// @access public
|
|
13
|
-
/// @group @carbon/layout
|
|
14
|
-
$carbon--mini-unit-size: 8px !default;
|
|
15
|
-
|
|
16
|
-
/// Get the value of the corresponding number of units
|
|
17
|
-
/// @param {Number} $count - The number of units to get the value for
|
|
18
|
-
/// @return {Number} In rem units
|
|
19
|
-
/// @access public
|
|
20
|
-
/// @group @carbon/layout
|
|
21
|
-
@function carbon--mini-units($count) {
|
|
22
|
-
@return carbon--rem($carbon--mini-unit-size * $count);
|
|
23
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2018, 2018
|
|
3
|
-
//
|
|
4
|
-
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
// LICENSE file in the root directory of this source tree.
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
@import './generated/spacing';
|
|
9
|
-
@import './generated/layout';
|
|
10
|
-
@import './generated/fluid-spacing';
|
|
11
|
-
@import './generated/container';
|
|
12
|
-
@import './generated/icon-size';
|