@carbon/type 10.42.0 → 10.43.2
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/index.scss +1 -0
- package/package.json +4 -4
- package/scss/modules/_default-type.scss +55 -0
- package/scss/modules/_reset.scss +0 -48
- package/scss/modules/_styles.scss +8 -3
- package/scss/vendor/@carbon/grid/modules/_breakpoint.scss +3 -71
- package/scss/vendor/@carbon/grid/modules/_config.scss +77 -1
- package/scss/vendor/@carbon/grid/modules/_css-grid.scss +377 -254
- package/scss/vendor/@carbon/grid/modules/_flex-grid.scss +28 -39
package/index.scss
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/type",
|
|
3
3
|
"description": "Typography for digital and software products using the Carbon Design System",
|
|
4
|
-
"version": "10.
|
|
4
|
+
"version": "10.43.2",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
"clean": "rimraf css es lib umd scss/_inlined scss/vendor"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@carbon/grid": "^10.
|
|
40
|
+
"@carbon/grid": "^10.43.1",
|
|
41
41
|
"@carbon/import-once": "^10.7.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@carbon/cli": "^10.34.0",
|
|
45
|
-
"@carbon/test-utils": "^10.21.
|
|
45
|
+
"@carbon/test-utils": "^10.21.1",
|
|
46
46
|
"change-case": "^4.1.1",
|
|
47
47
|
"rimraf": "^3.0.0"
|
|
48
48
|
},
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"sassDir": "scss",
|
|
53
53
|
"needs": "^1.3.0"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "9b11eecab91c41ae4ffda711c5e1f631f2fb33db"
|
|
56
56
|
}
|
|
@@ -0,0 +1,55 @@
|
|
|
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
|
+
@use 'styles' as *;
|
|
9
|
+
|
|
10
|
+
/// Include default type styles
|
|
11
|
+
/// @access public
|
|
12
|
+
/// @group @carbon/type
|
|
13
|
+
@mixin default-type {
|
|
14
|
+
h1 {
|
|
15
|
+
@include type-style('productive-heading-06');
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
h2 {
|
|
19
|
+
@include type-style('productive-heading-05');
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
h3 {
|
|
23
|
+
@include type-style('productive-heading-04');
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
h4 {
|
|
27
|
+
@include type-style('productive-heading-03');
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h5 {
|
|
31
|
+
@include type-style('productive-heading-02');
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
h6 {
|
|
35
|
+
@include type-style('productive-heading-01');
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
p {
|
|
39
|
+
@include type-style('body-long-02');
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
a {
|
|
43
|
+
@if meta.global-variable-exists('carbon--theme') and
|
|
44
|
+
map.has-key($carbon--theme, 'link-01')
|
|
45
|
+
{
|
|
46
|
+
color: map.get($carbon--theme, 'link-01');
|
|
47
|
+
} @else {
|
|
48
|
+
color: #0062fe;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
em {
|
|
53
|
+
font-style: italic;
|
|
54
|
+
}
|
|
55
|
+
}
|
package/scss/modules/_reset.scss
CHANGED
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
@use 'sass:meta';
|
|
10
10
|
@use '@carbon/layout';
|
|
11
11
|
@use 'font-family' as *;
|
|
12
|
-
@use 'styles' as *;
|
|
13
12
|
|
|
14
13
|
/// Include a type reset for a given body and mono font family
|
|
15
14
|
/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
|
|
@@ -43,50 +42,3 @@
|
|
|
43
42
|
@include font-weight('semibold');
|
|
44
43
|
}
|
|
45
44
|
}
|
|
46
|
-
|
|
47
|
-
/// Include default type styles
|
|
48
|
-
/// @access public
|
|
49
|
-
/// @group @carbon/type
|
|
50
|
-
@mixin default-type {
|
|
51
|
-
h1 {
|
|
52
|
-
@include type-style('productive-heading-06');
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
h2 {
|
|
56
|
-
@include type-style('productive-heading-05');
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
h3 {
|
|
60
|
-
@include type-style('productive-heading-04');
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
h4 {
|
|
64
|
-
@include type-style('productive-heading-03');
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
h5 {
|
|
68
|
-
@include type-style('productive-heading-02');
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
h6 {
|
|
72
|
-
@include type-style('productive-heading-01');
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
p {
|
|
76
|
-
@include type-style('body-long-02');
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
a {
|
|
80
|
-
@if meta.global-variable-exists('carbon--theme') and
|
|
81
|
-
map.has-key($carbon--theme, 'link-01')
|
|
82
|
-
{
|
|
83
|
-
color: map.get($carbon--theme, 'link-01');
|
|
84
|
-
} @else {
|
|
85
|
-
color: #0062fe;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
em {
|
|
90
|
-
font-style: italic;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
@use 'sass:map';
|
|
11
11
|
@use 'sass:math';
|
|
12
|
+
@use '@carbon/grid/scss/modules/config' as gridconfig;
|
|
12
13
|
@use '@carbon/grid/scss/modules/breakpoint' as grid;
|
|
13
14
|
@use 'font-family';
|
|
14
15
|
@use 'scale';
|
|
@@ -716,7 +717,7 @@ $tokens: (
|
|
|
716
717
|
/// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use
|
|
717
718
|
/// @access public
|
|
718
719
|
/// @group @carbon/type
|
|
719
|
-
@mixin fluid-type($type-styles, $breakpoints:
|
|
720
|
+
@mixin fluid-type($type-styles, $breakpoints: gridconfig.$grid-breakpoints) {
|
|
720
721
|
// Include the initial styles for the given token by default without any
|
|
721
722
|
// media query guard. This includes `font-size` as a fallback in the case
|
|
722
723
|
// that a browser does not support `calc()`
|
|
@@ -745,7 +746,7 @@ $tokens: (
|
|
|
745
746
|
@mixin fluid-type-size(
|
|
746
747
|
$type-styles,
|
|
747
748
|
$name,
|
|
748
|
-
$breakpoints:
|
|
749
|
+
$breakpoints: gridconfig.$grid-breakpoints
|
|
749
750
|
) {
|
|
750
751
|
// Get the information about the breakpoint we're currently working in. Useful
|
|
751
752
|
// for getting initial width information
|
|
@@ -846,7 +847,11 @@ $custom-property-prefix: 'cds' !default;
|
|
|
846
847
|
/// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use
|
|
847
848
|
/// @access public
|
|
848
849
|
/// @group @carbon/type
|
|
849
|
-
@mixin type-style(
|
|
850
|
+
@mixin type-style(
|
|
851
|
+
$name,
|
|
852
|
+
$fluid: false,
|
|
853
|
+
$breakpoints: gridconfig.$grid-breakpoints
|
|
854
|
+
) {
|
|
850
855
|
@if not map.has-key($tokens, $name) {
|
|
851
856
|
@error 'Unable to find a token with the name: `#{$name}`';
|
|
852
857
|
}
|
|
@@ -5,25 +5,11 @@
|
|
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
|
6
6
|
//
|
|
7
7
|
|
|
8
|
-
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
|
|
9
8
|
@use 'sass:list';
|
|
10
9
|
@use 'sass:map';
|
|
11
10
|
@use 'sass:meta';
|
|
12
11
|
@use '@carbon/layout/scss/modules/convert';
|
|
13
|
-
|
|
14
|
-
/// Map deep get
|
|
15
|
-
/// @author Hugo Giraudel
|
|
16
|
-
/// @access public
|
|
17
|
-
/// @param {Map} $map - Map
|
|
18
|
-
/// @param {Arglist} $keys - Key chain
|
|
19
|
-
/// @return {*} Desired value
|
|
20
|
-
/// @group @carbon/layout
|
|
21
|
-
@function map-deep-get($map, $keys...) {
|
|
22
|
-
@each $key in $keys {
|
|
23
|
-
$map: map.get($map, $key);
|
|
24
|
-
}
|
|
25
|
-
@return $map;
|
|
26
|
-
}
|
|
12
|
+
@use 'config' as *;
|
|
27
13
|
|
|
28
14
|
/// Provide a map and index, and get back the relevant key value
|
|
29
15
|
/// @access public
|
|
@@ -31,65 +17,11 @@
|
|
|
31
17
|
/// @param {Integer} $index - Key chain
|
|
32
18
|
/// @return {String} Desired value
|
|
33
19
|
/// @group @carbon/layout
|
|
34
|
-
@function key-by-index($map, $index) {
|
|
20
|
+
@function -key-by-index($map, $index) {
|
|
35
21
|
$keys: map.keys($map);
|
|
36
22
|
@return nth($keys, $index);
|
|
37
23
|
}
|
|
38
24
|
|
|
39
|
-
/// Pass in a map, and get the last one in the list back
|
|
40
|
-
/// @access public
|
|
41
|
-
/// @param {Map} $map - Map
|
|
42
|
-
/// @return {*} Desired value
|
|
43
|
-
/// @group @carbon/layout
|
|
44
|
-
@function last-map-item($map) {
|
|
45
|
-
$total-length: list.length($map);
|
|
46
|
-
@return map-get($map, key-by-index($map, $total-length));
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/// Carbon gutter size in rem
|
|
50
|
-
/// @type Number
|
|
51
|
-
/// @access public
|
|
52
|
-
/// @group @carbon/layout
|
|
53
|
-
$grid-gutter: convert.rem(32px);
|
|
54
|
-
|
|
55
|
-
/// Carbon condensed gutter size in rem
|
|
56
|
-
/// @type Number
|
|
57
|
-
/// @access public
|
|
58
|
-
/// @group @carbon/layout
|
|
59
|
-
$grid-gutter--condensed: convert.rem(1px);
|
|
60
|
-
|
|
61
|
-
// Initial map of our breakpoints and their values
|
|
62
|
-
/// @type Map
|
|
63
|
-
/// @access public
|
|
64
|
-
/// @group @carbon/layout
|
|
65
|
-
$grid-breakpoints: (
|
|
66
|
-
sm: (
|
|
67
|
-
columns: 4,
|
|
68
|
-
margin: 0,
|
|
69
|
-
width: convert.rem(320px),
|
|
70
|
-
),
|
|
71
|
-
md: (
|
|
72
|
-
columns: 8,
|
|
73
|
-
margin: convert.rem(16px),
|
|
74
|
-
width: convert.rem(672px),
|
|
75
|
-
),
|
|
76
|
-
lg: (
|
|
77
|
-
columns: 16,
|
|
78
|
-
margin: convert.rem(16px),
|
|
79
|
-
width: convert.rem(1056px),
|
|
80
|
-
),
|
|
81
|
-
xlg: (
|
|
82
|
-
columns: 16,
|
|
83
|
-
margin: convert.rem(16px),
|
|
84
|
-
width: convert.rem(1312px),
|
|
85
|
-
),
|
|
86
|
-
max: (
|
|
87
|
-
columns: 16,
|
|
88
|
-
margin: convert.rem(24px),
|
|
89
|
-
width: convert.rem(1584px),
|
|
90
|
-
),
|
|
91
|
-
) !default;
|
|
92
|
-
|
|
93
25
|
/// Get the value of the next breakpoint, or null for the last breakpoint
|
|
94
26
|
/// @param {String} $name - The name of the breakpoint
|
|
95
27
|
/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
|
|
@@ -145,7 +77,7 @@ $grid-breakpoints: (
|
|
|
145
77
|
/// @group @carbon/layout
|
|
146
78
|
@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
|
|
147
79
|
$total-breakpoints: list.length($breakpoints);
|
|
148
|
-
@return key-by-index($breakpoints, $total-breakpoints);
|
|
80
|
+
@return -key-by-index($breakpoints, $total-breakpoints);
|
|
149
81
|
}
|
|
150
82
|
|
|
151
83
|
/// 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`.
|
|
@@ -5,14 +5,90 @@
|
|
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
|
6
6
|
//
|
|
7
7
|
|
|
8
|
+
@use 'sass:map';
|
|
9
|
+
@use '@carbon/layout/scss/modules/convert';
|
|
10
|
+
|
|
8
11
|
/// Namespace prefix
|
|
9
12
|
/// @type String
|
|
10
13
|
/// @access public
|
|
11
14
|
/// @group @carbon/grid
|
|
12
|
-
$prefix: '
|
|
15
|
+
$prefix: 'cds' !default;
|
|
13
16
|
|
|
14
17
|
/// Total columns used in the flex grid
|
|
15
18
|
/// @type Number
|
|
16
19
|
/// @access public
|
|
17
20
|
/// @group @carbon/grid
|
|
18
21
|
$flex-grid-columns: 16 !default;
|
|
22
|
+
|
|
23
|
+
/// Carbon gutter size in rem
|
|
24
|
+
/// @type Number
|
|
25
|
+
/// @access public
|
|
26
|
+
/// @group @carbon/layout
|
|
27
|
+
$grid-gutter: convert.rem(32px) !default;
|
|
28
|
+
|
|
29
|
+
/// Carbon condensed gutter size in rem
|
|
30
|
+
/// @type Number
|
|
31
|
+
/// @access public
|
|
32
|
+
/// @group @carbon/layout
|
|
33
|
+
$grid-gutter-condensed: convert.rem(1px) !default;
|
|
34
|
+
|
|
35
|
+
// Initial map of our breakpoints and their values
|
|
36
|
+
/// @type Map
|
|
37
|
+
/// @access public
|
|
38
|
+
/// @group @carbon/layout
|
|
39
|
+
$grid-breakpoints: (
|
|
40
|
+
sm: (
|
|
41
|
+
columns: 4,
|
|
42
|
+
margin: 0,
|
|
43
|
+
width: convert.rem(320px),
|
|
44
|
+
),
|
|
45
|
+
md: (
|
|
46
|
+
columns: 8,
|
|
47
|
+
margin: convert.rem(16px),
|
|
48
|
+
width: convert.rem(672px),
|
|
49
|
+
),
|
|
50
|
+
lg: (
|
|
51
|
+
columns: 16,
|
|
52
|
+
margin: convert.rem(16px),
|
|
53
|
+
width: convert.rem(1056px),
|
|
54
|
+
),
|
|
55
|
+
xlg: (
|
|
56
|
+
columns: 16,
|
|
57
|
+
margin: convert.rem(16px),
|
|
58
|
+
width: convert.rem(1312px),
|
|
59
|
+
),
|
|
60
|
+
max: (
|
|
61
|
+
columns: 16,
|
|
62
|
+
margin: convert.rem(24px),
|
|
63
|
+
width: convert.rem(1584px),
|
|
64
|
+
),
|
|
65
|
+
) !default;
|
|
66
|
+
|
|
67
|
+
@if $flex-grid-columns == 12 {
|
|
68
|
+
$grid-breakpoints: map.merge(
|
|
69
|
+
$grid-breakpoints,
|
|
70
|
+
(
|
|
71
|
+
lg:
|
|
72
|
+
map.merge(
|
|
73
|
+
map.get($grid-breakpoints, lg),
|
|
74
|
+
(
|
|
75
|
+
columns: 12,
|
|
76
|
+
)
|
|
77
|
+
),
|
|
78
|
+
xlg:
|
|
79
|
+
map.merge(
|
|
80
|
+
map.get($grid-breakpoints, xlg),
|
|
81
|
+
(
|
|
82
|
+
columns: 12,
|
|
83
|
+
)
|
|
84
|
+
),
|
|
85
|
+
max:
|
|
86
|
+
map.merge(
|
|
87
|
+
map.get($grid-breakpoints, max),
|
|
88
|
+
(
|
|
89
|
+
columns: 12,
|
|
90
|
+
)
|
|
91
|
+
),
|
|
92
|
+
)
|
|
93
|
+
);
|
|
94
|
+
}
|
|
@@ -7,341 +7,464 @@
|
|
|
7
7
|
|
|
8
8
|
@use 'sass:list';
|
|
9
9
|
@use 'sass:map';
|
|
10
|
-
@use
|
|
10
|
+
@use 'sass:math';
|
|
11
11
|
@use 'sass:meta';
|
|
12
12
|
@use 'config' as *;
|
|
13
13
|
@use 'breakpoint' as *;
|
|
14
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
|
-
|
|
15
|
+
/// Emit all the styles related to the CSS Grid, these include:
|
|
16
|
+
/// - The base grid class
|
|
17
|
+
/// - The various grid modes
|
|
18
|
+
/// - The ability to specifiy column span
|
|
19
|
+
/// - The ability to specifiy column start,end position
|
|
20
|
+
/// - Support for subgrid
|
|
21
|
+
/// - Support for hanging content on a grid column
|
|
22
|
+
/// - Support for controlling grid gutter on a cell basis
|
|
23
|
+
/// - Support for specifying content alignment
|
|
24
|
+
///
|
|
25
|
+
///
|
|
26
|
+
/// In general, this mixin is structured in a way to emit the fewest CSS styles
|
|
27
|
+
/// as possible. To do this, we will (as much as possible) not emit a value if
|
|
28
|
+
/// one is already defined at a previous breakpoint.
|
|
29
|
+
///
|
|
30
|
+
/// In addition, this mixin will break down emitting styles into several stages:
|
|
31
|
+
/// 1. Emit styles for the smallest breakpoint without any breakpoint. By
|
|
32
|
+
/// default, these styles will be on
|
|
33
|
+
/// 2. For every other breakpoint, wrap it in a breakpoint so that it only is
|
|
34
|
+
/// triggered when that breakpoint is applied
|
|
35
|
+
/// 3. In situations where it is appropriate, we also will emit "unconditional"
|
|
36
|
+
/// selectors that will always apply. For example, if you wanted a column to
|
|
37
|
+
/// always span four columns
|
|
38
|
+
@mixin css-grid($breakpoints: $grid-breakpoints) {
|
|
39
|
+
/// The :root selector is responsible for setting several top-level CSS Custom
|
|
40
|
+
/// Properties, including the overall grid gutter, grid column count, and grid
|
|
41
|
+
/// margin
|
|
42
|
+
:root {
|
|
43
|
+
--cds-grid-gutter: #{$grid-gutter};
|
|
44
|
+
|
|
45
|
+
// Iterate through the grid breakpoints and only emit the grid-columns and
|
|
46
|
+
// grid-margin CSS Custom Properties if they've changed from the previous
|
|
47
|
+
// breakpoint. By default, we emit the smallest breakpoint values on the
|
|
48
|
+
// :root selector
|
|
49
|
+
@each $key, $value in $breakpoints {
|
|
50
|
+
@if is-smallest-breakpoint($key, $breakpoints) {
|
|
51
|
+
--cds-grid-columns: #{get-column-count($breakpoints, $key)};
|
|
52
|
+
--cds-grid-margin: #{get-margin($breakpoints, $key)};
|
|
53
|
+
} @else {
|
|
54
|
+
$previous-breakpoint: breakpoint-prev($key, $breakpoints);
|
|
55
|
+
$changes: ();
|
|
56
|
+
|
|
57
|
+
@if get-column-count($breakpoints, $key) !=
|
|
58
|
+
get-column-count($breakpoints, $previous-breakpoint)
|
|
59
|
+
{
|
|
60
|
+
$changes: map.set(
|
|
61
|
+
$changes,
|
|
62
|
+
grid-columns,
|
|
63
|
+
get-column-count($breakpoints, $key)
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@if get-margin($breakpoints, $key) !=
|
|
68
|
+
get-margin($breakpoints, $previous-breakpoint)
|
|
69
|
+
{
|
|
70
|
+
$changes: map.set(
|
|
71
|
+
$changes,
|
|
72
|
+
grid-margin,
|
|
73
|
+
get-margin($breakpoints, $key)
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@include breakpoint($key) {
|
|
78
|
+
@each $name, $value in $changes {
|
|
79
|
+
--cds-#{$name}: #{$value};
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
50
84
|
}
|
|
51
85
|
|
|
52
|
-
|
|
53
|
-
|
|
86
|
+
// -----------------------------------------------------------------------------
|
|
87
|
+
// Base CSS Grid
|
|
88
|
+
// -----------------------------------------------------------------------------
|
|
89
|
+
.#{$prefix}--css-grid {
|
|
90
|
+
--cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);
|
|
91
|
+
--cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
|
|
92
|
+
// We split out a separate "column hang" since "gutter-start" is set
|
|
93
|
+
// dynamically and could be 0
|
|
94
|
+
--cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
|
|
95
|
+
|
|
96
|
+
display: grid;
|
|
97
|
+
max-width: get-grid-width(
|
|
98
|
+
$breakpoints,
|
|
99
|
+
largest-breakpoint-name($breakpoints)
|
|
100
|
+
);
|
|
101
|
+
padding-right: var(--cds-grid-margin);
|
|
102
|
+
padding-left: var(--cds-grid-margin);
|
|
103
|
+
margin-right: auto;
|
|
104
|
+
margin-left: auto;
|
|
105
|
+
grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
|
54
106
|
}
|
|
55
107
|
|
|
56
|
-
|
|
57
|
-
|
|
108
|
+
// -----------------------------------------------------------------------------
|
|
109
|
+
// Full width
|
|
110
|
+
// -----------------------------------------------------------------------------
|
|
111
|
+
.#{$prefix}--css-grid--full-width {
|
|
112
|
+
max-width: 100%;
|
|
58
113
|
}
|
|
59
|
-
}
|
|
60
114
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
115
|
+
// -----------------------------------------------------------------------------
|
|
116
|
+
// Column
|
|
117
|
+
// -----------------------------------------------------------------------------
|
|
118
|
+
|
|
119
|
+
// Add gutter to columns in a CSS Grid. Unfortunately, we cannot use
|
|
120
|
+
// `grid-gap`, `column-gap`, etc. as we need to conditionally remove leading
|
|
121
|
+
// and trailing gutter from a column.
|
|
122
|
+
.#{$prefix}--css-grid-column {
|
|
123
|
+
// grid-mode-start, grid-mode-end are meant to capture the "grid settings"
|
|
124
|
+
// so that subgrids can correctly fit in parent grids by reverting the
|
|
125
|
+
// grid's outer padding
|
|
126
|
+
--cds-grid-mode-start: var(--cds-grid-gutter-start);
|
|
127
|
+
--cds-grid-mode-end: var(--cds-grid-gutter-end);
|
|
128
|
+
|
|
129
|
+
margin-right: var(--cds-grid-gutter-end);
|
|
130
|
+
margin-left: var(--cds-grid-gutter-start);
|
|
131
|
+
|
|
132
|
+
[dir='rtl'] & {
|
|
133
|
+
margin-right: var(--cds-grid-gutter-start);
|
|
134
|
+
margin-left: var(--cds-grid-gutter-end);
|
|
135
|
+
}
|
|
69
136
|
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.#{$prefix}--subgrid {
|
|
73
|
-
@include subgrid();
|
|
74
|
-
}
|
|
75
137
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
// -----------------------------------------------------------------------------
|
|
81
|
-
// Condensed
|
|
82
|
-
// -----------------------------------------------------------------------------
|
|
83
|
-
.#{$prefix}--css-grid--condensed {
|
|
84
|
-
--cds-grid-gutter: 1px;
|
|
85
|
-
|
|
86
|
-
column-gap: var(--cds-grid-gutter);
|
|
87
|
-
row-gap: var(--cds-grid-gutter);
|
|
88
|
-
}
|
|
138
|
+
// -----------------------------------------------------------------------------
|
|
139
|
+
// Grid modes
|
|
140
|
+
// -----------------------------------------------------------------------------
|
|
89
141
|
|
|
90
|
-
//
|
|
91
|
-
.#{$prefix}--css-grid
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// -----------------------------------------------------------------------------
|
|
97
|
-
// No Gutter
|
|
98
|
-
// -----------------------------------------------------------------------------
|
|
99
|
-
.#{$prefix}--css-grid--no-gutter {
|
|
100
|
-
// This is set to 0px (versus 0) so that the calc expression for padding for
|
|
101
|
-
// a grid container works as expected. Without the unit, the calc() will
|
|
102
|
-
// result in a value of 0.
|
|
103
|
-
// stylelint-disable-next-line length-zero-no-unit
|
|
104
|
-
--cds-grid-gutter: 0px;
|
|
105
|
-
|
|
106
|
-
column-gap: var(--cds-grid-gutter);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
// -----------------------------------------------------------------------------
|
|
110
|
-
// Full width
|
|
111
|
-
// -----------------------------------------------------------------------------
|
|
112
|
-
.#{$prefix}--css-grid--full-width {
|
|
113
|
-
max-width: 100%;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
// -----------------------------------------------------------------------------
|
|
117
|
-
// Column span
|
|
118
|
-
// -----------------------------------------------------------------------------
|
|
119
|
-
@mixin -column-span($i) {
|
|
120
|
-
@if $i == 0 {
|
|
121
|
-
display: none;
|
|
122
|
-
} @else {
|
|
123
|
-
--cds-grid-columns: #{$i};
|
|
142
|
+
// Narrow
|
|
143
|
+
.#{$prefix}--css-grid--narrow {
|
|
144
|
+
--cds-grid-gutter-start: 0;
|
|
145
|
+
}
|
|
124
146
|
|
|
125
|
-
|
|
126
|
-
|
|
147
|
+
// Condensed
|
|
148
|
+
.#{$prefix}--css-grid--condensed {
|
|
149
|
+
--cds-grid-gutter: #{$grid-gutter-condensed};
|
|
150
|
+
--cds-grid-column-hang: #{math.div($grid-gutter, 2) -
|
|
151
|
+
math.div($grid-gutter-condensed, 2)};
|
|
127
152
|
}
|
|
128
|
-
}
|
|
129
153
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
154
|
+
// -----------------------------------------------------------------------------
|
|
155
|
+
// Subgrid
|
|
156
|
+
// -----------------------------------------------------------------------------
|
|
157
|
+
.#{$prefix}--subgrid {
|
|
158
|
+
display: grid;
|
|
159
|
+
margin-right: calc(var(--cds-grid-mode-end) * -1);
|
|
160
|
+
margin-left: calc(var(--cds-grid-mode-start) * -1);
|
|
161
|
+
grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
|
162
|
+
|
|
163
|
+
[dir='rtl'] & {
|
|
164
|
+
margin-right: calc(var(--cds-grid-mode-start) * -1);
|
|
165
|
+
margin-left: calc(var(--cds-grid-mode-end) * -1);
|
|
166
|
+
}
|
|
133
167
|
}
|
|
134
|
-
}
|
|
135
168
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
169
|
+
// Support the grid modes in subgrids
|
|
170
|
+
.#{$prefix}--subgrid--wide {
|
|
171
|
+
--cds-grid-gutter-start: #{math.div($grid-gutter, 2)};
|
|
172
|
+
--cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
|
|
173
|
+
--cds-grid-column-hang: 0;
|
|
174
|
+
}
|
|
139
175
|
|
|
140
|
-
.#{$prefix}--
|
|
141
|
-
|
|
142
|
-
}
|
|
176
|
+
.#{$prefix}--subgrid--narrow {
|
|
177
|
+
--cds-grid-gutter-start: 0;
|
|
178
|
+
--cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
|
|
179
|
+
--cds-grid-column-hang: #{math.div($grid-gutter, 2)};
|
|
180
|
+
}
|
|
143
181
|
|
|
144
|
-
.#{$prefix}--
|
|
145
|
-
|
|
182
|
+
.#{$prefix}--subgrid--condensed {
|
|
183
|
+
--cds-grid-gutter-start: #{math.div($grid-gutter-condensed, 2)};
|
|
184
|
+
--cds-grid-gutter-end: #{math.div($grid-gutter-condensed, 2)};
|
|
185
|
+
--cds-grid-column-hang: #{math.div($grid-gutter, 2) -
|
|
186
|
+
math.div($grid-gutter-condensed, 2)};
|
|
187
|
+
}
|
|
146
188
|
|
|
147
|
-
|
|
189
|
+
// -----------------------------------------------------------------------------
|
|
190
|
+
// Column hang
|
|
191
|
+
// -----------------------------------------------------------------------------
|
|
148
192
|
|
|
149
|
-
|
|
150
|
-
|
|
193
|
+
// Helper class to allow for text alignment in columns where the leading
|
|
194
|
+
// gutter is missing (like narrow) or is reduced (like in condensed).
|
|
195
|
+
.#{$prefix}--grid-column-hang {
|
|
196
|
+
margin-left: var(--cds-grid-column-hang);
|
|
151
197
|
|
|
152
|
-
|
|
198
|
+
[dir='rtl'] & {
|
|
199
|
+
margin-right: var(--cds-grid-column-hang);
|
|
200
|
+
margin-left: initial;
|
|
201
|
+
}
|
|
153
202
|
}
|
|
154
203
|
|
|
155
|
-
|
|
156
|
-
|
|
204
|
+
// -----------------------------------------------------------------------------
|
|
205
|
+
// Column span
|
|
206
|
+
// -----------------------------------------------------------------------------
|
|
157
207
|
|
|
158
|
-
|
|
208
|
+
// Generate col-span-{0-16} classes which unconditionally set column span
|
|
209
|
+
// regardless of breakpoint
|
|
210
|
+
@for $i from 0 through get-grid-columns($breakpoints) {
|
|
211
|
+
.#{$prefix}--col-span-#{$i} {
|
|
212
|
+
@include -column-span($i);
|
|
213
|
+
}
|
|
159
214
|
}
|
|
160
|
-
}
|
|
161
215
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
216
|
+
// Responsive column span
|
|
217
|
+
@each $name, $value in $breakpoints {
|
|
218
|
+
// Column span per breakpoint
|
|
219
|
+
@for $i from 0 through get-column-count($breakpoints, $name) {
|
|
220
|
+
@if is-smallest-breakpoint($name, $breakpoints) {
|
|
221
|
+
.#{$prefix}--#{$name}\:col-span-#{$i} {
|
|
222
|
+
@include -column-span($i);
|
|
223
|
+
}
|
|
224
|
+
} @else {
|
|
225
|
+
@include breakpoint($name) {
|
|
226
|
+
.#{$prefix}--#{$name}\:col-span-#{$i} {
|
|
227
|
+
@include -column-span($i);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
166
232
|
|
|
167
|
-
|
|
168
|
-
|
|
233
|
+
// Percent column span per breakpoint
|
|
234
|
+
@if is-smallest-breakpoint($name, $breakpoints) {
|
|
235
|
+
.#{$prefix}--#{$name}\:col-span-auto {
|
|
236
|
+
grid-column: auto;
|
|
237
|
+
}
|
|
169
238
|
|
|
170
|
-
|
|
171
|
-
|
|
239
|
+
.#{$prefix}--#{$name}\:col-span-100 {
|
|
240
|
+
grid-column: 1 / -1;
|
|
241
|
+
}
|
|
172
242
|
|
|
173
|
-
|
|
174
|
-
--cds-grid-columns: 8;
|
|
243
|
+
$columns: get-column-count($breakpoints, $name);
|
|
175
244
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
}
|
|
245
|
+
.#{$prefix}--#{$name}\:col-span-75 {
|
|
246
|
+
$span: $columns * 0.75;
|
|
247
|
+
--cds-grid-columns: #{$span};
|
|
179
248
|
|
|
180
|
-
|
|
181
|
-
|
|
249
|
+
grid-column: span #{$span} / span #{$span};
|
|
250
|
+
}
|
|
182
251
|
|
|
183
|
-
|
|
252
|
+
.#{$prefix}--#{$name}\:col-span-50 {
|
|
253
|
+
$span: $columns * 0.5;
|
|
254
|
+
--cds-grid-columns: #{$span};
|
|
184
255
|
|
|
185
|
-
|
|
186
|
-
|
|
256
|
+
grid-column: span #{$span} / span #{$span};
|
|
257
|
+
}
|
|
187
258
|
|
|
188
|
-
|
|
189
|
-
|
|
259
|
+
.#{$prefix}--#{$name}\:col-span-25 {
|
|
260
|
+
$span: $columns * 0.25;
|
|
261
|
+
--cds-grid-columns: #{$span};
|
|
190
262
|
|
|
191
|
-
|
|
192
|
-
|
|
263
|
+
grid-column: span #{$span} / span #{$span};
|
|
264
|
+
}
|
|
265
|
+
} @else {
|
|
266
|
+
@include breakpoint($name) {
|
|
267
|
+
.#{$prefix}--#{$name}\:col-span-auto {
|
|
268
|
+
grid-column: auto;
|
|
269
|
+
}
|
|
193
270
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
}
|
|
271
|
+
.#{$prefix}--#{$name}\:col-span-100 {
|
|
272
|
+
grid-column: 1 / -1;
|
|
273
|
+
}
|
|
197
274
|
|
|
198
|
-
|
|
199
|
-
$columns: map.get($value, columns);
|
|
275
|
+
$columns: get-column-count($breakpoints, $name);
|
|
200
276
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
@include -column-span($i);
|
|
205
|
-
}
|
|
206
|
-
}
|
|
277
|
+
.#{$prefix}--#{$name}\:col-span-75 {
|
|
278
|
+
$span: $columns * 0.75;
|
|
279
|
+
--cds-grid-columns: #{$span};
|
|
207
280
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
}
|
|
281
|
+
grid-column: span #{$span} / span #{$span};
|
|
282
|
+
}
|
|
211
283
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
284
|
+
.#{$prefix}--#{$name}\:col-span-50 {
|
|
285
|
+
$span: $columns * 0.5;
|
|
286
|
+
--cds-grid-columns: #{$span};
|
|
215
287
|
|
|
216
|
-
|
|
288
|
+
grid-column: span #{$span} / span #{$span};
|
|
289
|
+
}
|
|
217
290
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
291
|
+
.#{$prefix}--#{$name}\:col-span-25 {
|
|
292
|
+
$span: $columns * 0.25;
|
|
293
|
+
--cds-grid-columns: #{$span};
|
|
221
294
|
|
|
222
|
-
|
|
295
|
+
grid-column: span #{$span} / span #{$span};
|
|
296
|
+
}
|
|
297
|
+
}
|
|
223
298
|
}
|
|
299
|
+
}
|
|
224
300
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
301
|
+
// -----------------------------------------------------------------------------
|
|
302
|
+
// Column percent span
|
|
303
|
+
// -----------------------------------------------------------------------------
|
|
304
|
+
.#{$prefix}--col-span-auto {
|
|
305
|
+
grid-column: auto;
|
|
306
|
+
}
|
|
228
307
|
|
|
229
|
-
|
|
230
|
-
|
|
308
|
+
.#{$prefix}--col-span-100 {
|
|
309
|
+
grid-column: 1 / -1;
|
|
310
|
+
}
|
|
231
311
|
|
|
232
|
-
|
|
233
|
-
|
|
312
|
+
.#{$prefix}--col-span-75 {
|
|
313
|
+
@include -percent-column-span($breakpoints, 0.75);
|
|
314
|
+
}
|
|
234
315
|
|
|
235
|
-
|
|
236
|
-
|
|
316
|
+
.#{$prefix}--col-span-50 {
|
|
317
|
+
@include -percent-column-span($breakpoints, 0.5);
|
|
237
318
|
}
|
|
238
|
-
}
|
|
239
319
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
// -----------------------------------------------------------------------------
|
|
243
|
-
@for $i from 1 through 17 {
|
|
244
|
-
.#{$prefix}--col-start-#{$i} {
|
|
245
|
-
grid-column-start: $i;
|
|
320
|
+
.#{$prefix}--col-span-25 {
|
|
321
|
+
@include -percent-column-span($breakpoints, 0.25);
|
|
246
322
|
}
|
|
247
323
|
|
|
248
|
-
|
|
249
|
-
|
|
324
|
+
// -----------------------------------------------------------------------------
|
|
325
|
+
// Column offset
|
|
326
|
+
// -----------------------------------------------------------------------------
|
|
327
|
+
// Unconditional column start
|
|
328
|
+
// Note: we start at 1 and end at column-count to match grid lines. We do not
|
|
329
|
+
// start at column-count + 1 since starting at the end of the grid would mean
|
|
330
|
+
// a column would have no width available
|
|
331
|
+
@for $i from 1 through get-grid-columns($breakpoints) {
|
|
332
|
+
.#{$prefix}--col-start-#{$i} {
|
|
333
|
+
grid-column-start: $i;
|
|
334
|
+
}
|
|
250
335
|
}
|
|
251
|
-
}
|
|
252
336
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
337
|
+
// Unconditional column end
|
|
338
|
+
// Note: we start at 2 since a column ending at line 1 would have no width. We
|
|
339
|
+
// end at column-count + 1 since grid lines start at 1
|
|
340
|
+
@for $i from 2 through get-grid-columns($breakpoints) + 1 {
|
|
341
|
+
.#{$prefix}--col-end-#{$i} {
|
|
342
|
+
grid-column-end: $i;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
256
345
|
|
|
257
|
-
.#{$prefix}--col-
|
|
258
|
-
|
|
259
|
-
}
|
|
346
|
+
.#{$prefix}--col-start-auto {
|
|
347
|
+
grid-column-start: auto;
|
|
348
|
+
}
|
|
260
349
|
|
|
261
|
-
|
|
262
|
-
|
|
350
|
+
.#{$prefix}--col-end-auto {
|
|
351
|
+
grid-column-end: auto;
|
|
352
|
+
}
|
|
263
353
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
354
|
+
// Responsive column start, end
|
|
355
|
+
@each $name, $value in $breakpoints {
|
|
356
|
+
@if is-smallest-breakpoint($name, $breakpoints) {
|
|
357
|
+
// Responsive column start
|
|
358
|
+
@for $i from 1 through get-grid-columns($breakpoints) {
|
|
359
|
+
.#{$prefix}--#{$name}\:col-start-#{$i} {
|
|
360
|
+
grid-column-start: $i;
|
|
361
|
+
}
|
|
271
362
|
}
|
|
272
363
|
|
|
273
|
-
|
|
274
|
-
|
|
364
|
+
// Responsive column end
|
|
365
|
+
@for $i from 2 through get-grid-columns($breakpoints) + 1 {
|
|
366
|
+
.#{$prefix}--#{$name}\:col-end-#{$i} {
|
|
367
|
+
grid-column-end: $i;
|
|
368
|
+
}
|
|
275
369
|
}
|
|
276
|
-
}
|
|
277
370
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
371
|
+
.#{$prefix}--#{$name}\:col-start-auto {
|
|
372
|
+
grid-column-start: auto;
|
|
373
|
+
}
|
|
281
374
|
|
|
282
|
-
|
|
283
|
-
|
|
375
|
+
.#{$prefix}--#{$name}\:col-end-auto {
|
|
376
|
+
grid-column-end: auto;
|
|
377
|
+
}
|
|
378
|
+
} @else {
|
|
379
|
+
@include breakpoint($name) {
|
|
380
|
+
// Responsive column start
|
|
381
|
+
@for $i from 1 through get-grid-columns($breakpoints) {
|
|
382
|
+
.#{$prefix}--#{$name}\:col-start-#{$i} {
|
|
383
|
+
grid-column-start: $i;
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
// Responsive column end
|
|
388
|
+
@for $i from 2 through get-grid-columns($breakpoints) + 1 {
|
|
389
|
+
.#{$prefix}--#{$name}\:col-end-#{$i} {
|
|
390
|
+
grid-column-end: $i;
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.#{$prefix}--#{$name}\:col-start-auto {
|
|
395
|
+
grid-column-start: auto;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.#{$prefix}--#{$name}\:col-end-auto {
|
|
399
|
+
grid-column-end: auto;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
284
402
|
}
|
|
285
403
|
}
|
|
286
404
|
}
|
|
287
405
|
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
// -----------------------------------------------------------------------------
|
|
296
|
-
// Column gutter
|
|
297
|
-
// -----------------------------------------------------------------------------
|
|
298
|
-
.#{$prefix}--gutter {
|
|
299
|
-
padding-right: var(--cds-grid-hang);
|
|
300
|
-
padding-left: var(--cds-grid-hang);
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.#{$prefix}--gutter-start {
|
|
304
|
-
padding-left: var(--cds-grid-hang);
|
|
305
|
-
}
|
|
406
|
+
/// Generate the styles for a grid column
|
|
407
|
+
@mixin -column-span($i) {
|
|
408
|
+
@if $i == 0 {
|
|
409
|
+
display: none;
|
|
410
|
+
} @else {
|
|
411
|
+
--cds-grid-columns: #{$i};
|
|
306
412
|
|
|
307
|
-
|
|
308
|
-
|
|
413
|
+
display: block;
|
|
414
|
+
grid-column: span $i / span $i;
|
|
415
|
+
}
|
|
309
416
|
}
|
|
310
417
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
418
|
+
/// Generate the styles for an unconditional class that represents a percent
|
|
419
|
+
/// span of a grid
|
|
420
|
+
@mixin -percent-column-span($breakpoints, $percent) {
|
|
421
|
+
@each $key, $value in $breakpoints {
|
|
422
|
+
$columns: get-column-count($breakpoints, $key);
|
|
423
|
+
$span: $columns * $percent;
|
|
314
424
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
}
|
|
425
|
+
@if is-smallest-breakpoint($key, $breakpoints) {
|
|
426
|
+
--cds-grid-columns: #{$span};
|
|
318
427
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
428
|
+
grid-column: span #{$span} / span #{$span};
|
|
429
|
+
} @else {
|
|
430
|
+
$previous-breakpoint: breakpoint-prev($key, $breakpoints);
|
|
431
|
+
$previous-column-count: get-column-count(
|
|
432
|
+
$breakpoints,
|
|
433
|
+
$previous-breakpoint
|
|
434
|
+
);
|
|
435
|
+
$previous-span: $previous-column-count * $percent;
|
|
322
436
|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
}
|
|
437
|
+
@if $span != $previous-span {
|
|
438
|
+
@include breakpoint($key) {
|
|
439
|
+
--cds-grid-columns: #{$span};
|
|
327
440
|
|
|
328
|
-
|
|
329
|
-
|
|
441
|
+
grid-column: span #{$span} / span #{$span};
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
}
|
|
330
446
|
}
|
|
331
447
|
|
|
332
|
-
|
|
333
|
-
|
|
448
|
+
/// Get the grid width for a specific breakpoint name
|
|
449
|
+
@function get-grid-width($breakpoints, $breakpoint) {
|
|
450
|
+
@return map.get(map.get($breakpoints, $breakpoint), width);
|
|
334
451
|
}
|
|
335
452
|
|
|
336
|
-
///
|
|
337
|
-
|
|
338
|
-
|
|
453
|
+
/// Get the grid column count for a specific breakpoint name
|
|
454
|
+
@function get-column-count($breakpoints, $breakpoint) {
|
|
455
|
+
@return map.get(map.get($breakpoints, $breakpoint), columns);
|
|
339
456
|
}
|
|
340
457
|
|
|
341
|
-
|
|
342
|
-
|
|
458
|
+
/// Get the grid margin for a specific breakpoint name
|
|
459
|
+
@function get-margin($breakpoints, $breakpoint) {
|
|
460
|
+
$value: map.get(map.get($breakpoints, $breakpoint), margin);
|
|
461
|
+
@if $value == 0 {
|
|
462
|
+
@return 0;
|
|
463
|
+
}
|
|
464
|
+
@return $value;
|
|
343
465
|
}
|
|
344
466
|
|
|
345
|
-
|
|
346
|
-
|
|
467
|
+
/// Return the largest column count from a set of breakpoints
|
|
468
|
+
@function get-grid-columns($breakpoints) {
|
|
469
|
+
@return get-column-count($breakpoints, largest-breakpoint-name($breakpoints));
|
|
347
470
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
// and often derived from, bootstrap:
|
|
10
10
|
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
|
|
11
11
|
|
|
12
|
+
@use 'sass:list';
|
|
12
13
|
@use 'sass:meta';
|
|
13
14
|
@use 'sass:math';
|
|
14
15
|
@use 'sass:map';
|
|
@@ -24,12 +25,12 @@
|
|
|
24
25
|
/// for setting width and default gutters when a column's breakpoint has not been
|
|
25
26
|
/// hit yet.
|
|
26
27
|
/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
|
|
27
|
-
/// @param {Number} $collapsed-gutter [$grid-gutter
|
|
28
|
+
/// @param {Number} $collapsed-gutter [$grid-gutter-condensed] - The condensed mode gutter
|
|
28
29
|
/// @access private
|
|
29
30
|
/// @group @carbon/grid
|
|
30
31
|
@mixin -make-col-ready(
|
|
31
32
|
$gutter: $grid-gutter,
|
|
32
|
-
$condensed-gutter: $grid-gutter
|
|
33
|
+
$condensed-gutter: $grid-gutter-condensed
|
|
33
34
|
) {
|
|
34
35
|
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
35
36
|
// always setting `width: 100%;`. This works because we use `flex` values
|
|
@@ -254,7 +255,7 @@
|
|
|
254
255
|
margin-right: auto;
|
|
255
256
|
margin-left: auto;
|
|
256
257
|
|
|
257
|
-
@include -set-largest-breakpoint();
|
|
258
|
+
@include -set-largest-breakpoint($breakpoints);
|
|
258
259
|
|
|
259
260
|
@each $name, $value in $breakpoints {
|
|
260
261
|
$prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
|
|
@@ -282,7 +283,7 @@
|
|
|
282
283
|
/// @access private
|
|
283
284
|
/// @group @carbon/grid
|
|
284
285
|
@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
|
|
285
|
-
$largest-breakpoint: last-map-item($breakpoints);
|
|
286
|
+
$largest-breakpoint: -last-map-item($breakpoints);
|
|
286
287
|
|
|
287
288
|
max-width: map.get($largest-breakpoint, 'width');
|
|
288
289
|
}
|
|
@@ -299,16 +300,37 @@
|
|
|
299
300
|
}
|
|
300
301
|
}
|
|
301
302
|
|
|
303
|
+
/// Pass in a map, and get the last one in the list back
|
|
304
|
+
/// @access public
|
|
305
|
+
/// @param {Map} $map - Map
|
|
306
|
+
/// @return {*} Desired value
|
|
307
|
+
/// @group @carbon/layout
|
|
308
|
+
@function -last-map-item($map) {
|
|
309
|
+
$total-length: list.length($map);
|
|
310
|
+
@return map-get($map, -key-by-index($map, $total-length));
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/// Provide a map and index, and get back the relevant key value
|
|
314
|
+
/// @access public
|
|
315
|
+
/// @param {Map} $map - Map
|
|
316
|
+
/// @param {Integer} $index - Key chain
|
|
317
|
+
/// @return {String} Desired value
|
|
318
|
+
/// @group @carbon/layout
|
|
319
|
+
@function -key-by-index($map, $index) {
|
|
320
|
+
$keys: map.keys($map);
|
|
321
|
+
@return nth($keys, $index);
|
|
322
|
+
}
|
|
323
|
+
|
|
302
324
|
/// Generate the CSS for a grid for the given breakpoints and gutters
|
|
303
325
|
/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
|
|
304
326
|
/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
|
|
305
|
-
/// @param {Number} $condensed-gutter [$grid-gutter
|
|
327
|
+
/// @param {Number} $condensed-gutter [$grid-gutter-condensed] - The condensed mode gutter
|
|
306
328
|
/// @access public
|
|
307
329
|
/// @group @carbon/grid
|
|
308
330
|
@mixin flex-grid(
|
|
309
331
|
$breakpoints: $grid-breakpoints,
|
|
310
332
|
$grid-gutter: $grid-gutter,
|
|
311
|
-
$condensed-gutter: $grid-gutter
|
|
333
|
+
$condensed-gutter: $grid-gutter-condensed
|
|
312
334
|
) {
|
|
313
335
|
.#{$prefix}--grid {
|
|
314
336
|
@include -make-container($breakpoints);
|
|
@@ -339,36 +361,3 @@
|
|
|
339
361
|
@include -no-gutter();
|
|
340
362
|
@include -hang($grid-gutter);
|
|
341
363
|
}
|
|
342
|
-
|
|
343
|
-
@if $flex-grid-columns == 12 {
|
|
344
|
-
$flex-12-column-grid: map.merge(
|
|
345
|
-
$grid-breakpoints,
|
|
346
|
-
(
|
|
347
|
-
lg:
|
|
348
|
-
map.merge(
|
|
349
|
-
map.get($grid-breakpoints, lg),
|
|
350
|
-
(
|
|
351
|
-
columns: 12,
|
|
352
|
-
)
|
|
353
|
-
),
|
|
354
|
-
xlg:
|
|
355
|
-
map.merge(
|
|
356
|
-
map.get($grid-breakpoints, xlg),
|
|
357
|
-
(
|
|
358
|
-
columns: 12,
|
|
359
|
-
)
|
|
360
|
-
),
|
|
361
|
-
max:
|
|
362
|
-
map.merge(
|
|
363
|
-
map.get($grid-breakpoints, max),
|
|
364
|
-
(
|
|
365
|
-
columns: 12,
|
|
366
|
-
)
|
|
367
|
-
),
|
|
368
|
-
)
|
|
369
|
-
);
|
|
370
|
-
|
|
371
|
-
@include flex-grid($breakpoints: $flex-12-column-grid);
|
|
372
|
-
} @else {
|
|
373
|
-
@include flex-grid();
|
|
374
|
-
}
|