@carbon/grid 10.42.0 → 11.0.0-rc.0

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.
Files changed (45) hide show
  1. package/index.scss +4 -7
  2. package/package.json +4 -5
  3. package/scss/{modules/_breakpoint.scss → _breakpoint.scss} +4 -72
  4. package/scss/_config.scss +94 -0
  5. package/scss/_css-grid.scss +470 -0
  6. package/scss/{modules/_flex-grid.scss → _flex-grid.scss} +28 -59
  7. package/scss/_inlined/_breakpoint.scss +198 -0
  8. package/scss/_inlined/_config.scss +94 -0
  9. package/scss/_inlined/_css-grid.scss +470 -0
  10. package/scss/{modules/_mixins.scss → _inlined/_flex-grid.scss} +45 -38
  11. package/scss/_inlined/_mixins.scss +89 -188
  12. package/scss/_mixins.scss +89 -188
  13. package/scss/vendor/@carbon/layout/_convert.import.scss +2 -4
  14. package/scss/vendor/@carbon/layout/_convert.scss +18 -23
  15. package/scss/vendor/@carbon/layout/_spacing.scss +2 -5
  16. package/scss/vendor/@carbon/layout/_utilities.scss +4 -4
  17. package/scss/vendor/@carbon/layout/generated/_container.scss +13 -43
  18. package/scss/vendor/@carbon/layout/generated/_fluid-spacing.scss +11 -35
  19. package/scss/vendor/@carbon/layout/generated/_icon-size.scss +8 -17
  20. package/scss/vendor/@carbon/layout/generated/_size.scss +1 -1
  21. package/scss/vendor/@carbon/layout/generated/_spacing.scss +29 -107
  22. package/scss/vendor/@carbon/layout/modules/_convert.scss +2 -4
  23. package/scss/12.scss +0 -41
  24. package/scss/_inlined/12.scss +0 -41
  25. package/scss/_inlined/_mixins.import.scss +0 -431
  26. package/scss/_inlined/_prefix.scss +0 -12
  27. package/scss/_mixins.import.scss +0 -431
  28. package/scss/_prefix.scss +0 -12
  29. package/scss/grid.scss +0 -10
  30. package/scss/index.scss +0 -10
  31. package/scss/modules/_config.scss +0 -18
  32. package/scss/modules/_css-grid.scss +0 -347
  33. package/scss/vendor/@carbon/import-once/import-once.scss +0 -27
  34. package/scss/vendor/@carbon/import-once/index.scss +0 -8
  35. package/scss/vendor/@carbon/layout/_breakpoint.scss +0 -246
  36. package/scss/vendor/@carbon/layout/_key-height.import.scss +0 -117
  37. package/scss/vendor/@carbon/layout/_key-height.scss +0 -111
  38. package/scss/vendor/@carbon/layout/_mini-unit.scss +0 -23
  39. package/scss/vendor/@carbon/layout/generated/_layout.scss +0 -97
  40. package/scss/vendor/@carbon/layout/index.scss +0 -8
  41. package/scss/vendor/@carbon/layout/layout.scss +0 -12
  42. package/scss/vendor/@carbon/layout/modules/_spacing.scss +0 -9
  43. package/scss/vendor/@carbon/layout/modules/_utilities.scss +0 -41
  44. package/scss/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +0 -37
  45. package/scss/vendor/@carbon/layout/modules/generated/_spacing.scss +0 -91
@@ -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,97 +0,0 @@
1
- // Code generated by @carbon/layout. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2019
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
- //
8
-
9
- /// @type Number
10
- /// @access public
11
- /// @group @carbon/layout
12
- $carbon--layout-01: 1rem !default;
13
-
14
- /// @type Number
15
- /// @access public
16
- /// @group @carbon/layout
17
- $carbon--layout-02: 1.5rem !default;
18
-
19
- /// @type Number
20
- /// @access public
21
- /// @group @carbon/layout
22
- $carbon--layout-03: 2rem !default;
23
-
24
- /// @type Number
25
- /// @access public
26
- /// @group @carbon/layout
27
- $carbon--layout-04: 3rem !default;
28
-
29
- /// @type Number
30
- /// @access public
31
- /// @group @carbon/layout
32
- $carbon--layout-05: 4rem !default;
33
-
34
- /// @type Number
35
- /// @access public
36
- /// @group @carbon/layout
37
- $carbon--layout-06: 6rem !default;
38
-
39
- /// @type Number
40
- /// @access public
41
- /// @group @carbon/layout
42
- $carbon--layout-07: 10rem !default;
43
-
44
- /// @type List
45
- /// @access public
46
- /// @group @carbon/layout
47
- $carbon--layout: (
48
- $carbon--layout-01,
49
- $carbon--layout-02,
50
- $carbon--layout-03,
51
- $carbon--layout-04,
52
- $carbon--layout-05,
53
- $carbon--layout-06,
54
- $carbon--layout-07
55
- );
56
-
57
- /// @type Number
58
- /// @access public
59
- /// @group @carbon/layout
60
- /// @alias carbon--layout-01
61
- $layout-01: $carbon--layout-01 !default;
62
-
63
- /// @type Number
64
- /// @access public
65
- /// @group @carbon/layout
66
- /// @alias carbon--layout-02
67
- $layout-02: $carbon--layout-02 !default;
68
-
69
- /// @type Number
70
- /// @access public
71
- /// @group @carbon/layout
72
- /// @alias carbon--layout-03
73
- $layout-03: $carbon--layout-03 !default;
74
-
75
- /// @type Number
76
- /// @access public
77
- /// @group @carbon/layout
78
- /// @alias carbon--layout-04
79
- $layout-04: $carbon--layout-04 !default;
80
-
81
- /// @type Number
82
- /// @access public
83
- /// @group @carbon/layout
84
- /// @alias carbon--layout-05
85
- $layout-05: $carbon--layout-05 !default;
86
-
87
- /// @type Number
88
- /// @access public
89
- /// @group @carbon/layout
90
- /// @alias carbon--layout-06
91
- $layout-06: $carbon--layout-06 !default;
92
-
93
- /// @type Number
94
- /// @access public
95
- /// @group @carbon/layout
96
- /// @alias carbon--layout-07
97
- $layout-07: $carbon--layout-07 !default;
@@ -1,8 +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 'layout';
@@ -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 'convert';
9
- @import 'breakpoint';
10
- @import 'mini-unit';
11
- @import 'spacing';
12
- @import 'key-height';
@@ -1,9 +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
- @forward './generated/fluid-spacing';
9
- @forward './generated/spacing';
@@ -1,41 +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
- /// Map deep get
9
- /// @author Hugo Giraudel
10
- /// @access public
11
- /// @param {Map} $map - Map
12
- /// @param {Arglist} $keys - Key chain
13
- /// @return {*} Desired value
14
- /// @group @carbon/layout
15
- @function map-deep-get($map, $keys...) {
16
- @each $key in $keys {
17
- $map: map.get($map, $key);
18
- }
19
- @return $map;
20
- }
21
-
22
- /// Provide a map and index, and get back the relevant key value
23
- /// @access public
24
- /// @param {Map} $map - Map
25
- /// @param {Integer} $index - Key chain
26
- /// @return {String} Desired value
27
- /// @group @carbon/layout
28
- @function key-by-index($map, $index) {
29
- $keys: map.keys($map);
30
- @return nth($keys, $index);
31
- }
32
-
33
- /// Pass in a map, and get the last one in the list back
34
- /// @access public
35
- /// @param {Map} $map - Map
36
- /// @return {*} Desired value
37
- /// @group @carbon/layout
38
- @function last-map-item($map) {
39
- $total-length: list.length($map);
40
- @return map-get($map, carbon--key-by-index($map, $total-length));
41
- }
@@ -1,37 +0,0 @@
1
- // Code generated by @carbon/layout. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2019
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
- //
8
-
9
- /// @type Number
10
- /// @access public
11
- /// @group @carbon/layout
12
- $fluid-spacing-01: 0 !default;
13
-
14
- /// @type Number
15
- /// @access public
16
- /// @group @carbon/layout
17
- $fluid-spacing-02: 2vw !default;
18
-
19
- /// @type Number
20
- /// @access public
21
- /// @group @carbon/layout
22
- $fluid-spacing-03: 5vw !default;
23
-
24
- /// @type Number
25
- /// @access public
26
- /// @group @carbon/layout
27
- $fluid-spacing-04: 10vw !default;
28
-
29
- /// @type Map
30
- /// @access public
31
- /// @group @carbon/layout
32
- $fluid-spacing: (
33
- fluid-spacing-01: $fluid-spacing-01,
34
- fluid-spacing-02: $fluid-spacing-02,
35
- fluid-spacing-03: $fluid-spacing-03,
36
- fluid-spacing-04: $fluid-spacing-04,
37
- );
@@ -1,91 +0,0 @@
1
- // Code generated by @carbon/layout. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2019
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
- //
8
-
9
- /// @type Number
10
- /// @access public
11
- /// @group @carbon/layout
12
- $spacing-01: 0.125rem !default;
13
-
14
- /// @type Number
15
- /// @access public
16
- /// @group @carbon/layout
17
- $spacing-02: 0.25rem !default;
18
-
19
- /// @type Number
20
- /// @access public
21
- /// @group @carbon/layout
22
- $spacing-03: 0.5rem !default;
23
-
24
- /// @type Number
25
- /// @access public
26
- /// @group @carbon/layout
27
- $spacing-04: 0.75rem !default;
28
-
29
- /// @type Number
30
- /// @access public
31
- /// @group @carbon/layout
32
- $spacing-05: 1rem !default;
33
-
34
- /// @type Number
35
- /// @access public
36
- /// @group @carbon/layout
37
- $spacing-06: 1.5rem !default;
38
-
39
- /// @type Number
40
- /// @access public
41
- /// @group @carbon/layout
42
- $spacing-07: 2rem !default;
43
-
44
- /// @type Number
45
- /// @access public
46
- /// @group @carbon/layout
47
- $spacing-08: 2.5rem !default;
48
-
49
- /// @type Number
50
- /// @access public
51
- /// @group @carbon/layout
52
- $spacing-09: 3rem !default;
53
-
54
- /// @type Number
55
- /// @access public
56
- /// @group @carbon/layout
57
- $spacing-10: 4rem !default;
58
-
59
- /// @type Number
60
- /// @access public
61
- /// @group @carbon/layout
62
- $spacing-11: 5rem !default;
63
-
64
- /// @type Number
65
- /// @access public
66
- /// @group @carbon/layout
67
- $spacing-12: 6rem !default;
68
-
69
- /// @type Number
70
- /// @access public
71
- /// @group @carbon/layout
72
- $spacing-13: 10rem !default;
73
-
74
- /// @type Map
75
- /// @access public
76
- /// @group @carbon/layout
77
- $spacing: (
78
- spacing-01: $spacing-01,
79
- spacing-02: $spacing-02,
80
- spacing-03: $spacing-03,
81
- spacing-04: $spacing-04,
82
- spacing-05: $spacing-05,
83
- spacing-06: $spacing-06,
84
- spacing-07: $spacing-07,
85
- spacing-08: $spacing-08,
86
- spacing-09: $spacing-09,
87
- spacing-10: $spacing-10,
88
- spacing-11: $spacing-11,
89
- spacing-12: $spacing-12,
90
- spacing-13: $spacing-13,
91
- );