@carbon/styles 1.44.0-rc.0 → 1.45.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.
- package/css/styles.css +472 -110
- package/css/styles.min.css +1 -1
- package/package.json +3 -3
- package/scss/__tests__/theme-test.js +10 -0
- package/scss/components/accordion/_accordion.scss +13 -37
- package/scss/components/checkbox/_checkbox.scss +20 -0
- package/scss/components/data-table/_data-table.scss +81 -10
- package/scss/components/data-table/expandable/_data-table-expandable.scss +71 -20
- package/scss/components/data-table/sort/_data-table-sort.scss +6 -0
- package/scss/components/fluid-combo-box/_fluid-combo-box.scss +2 -1
- package/scss/components/fluid-date-picker/_fluid-date-picker.scss +12 -0
- package/scss/components/fluid-list-box/_fluid-list-box.scss +54 -1
- package/scss/components/fluid-number-input/_fluid-number-input.scss +21 -0
- package/scss/components/fluid-select/_fluid-select.scss +14 -1
- package/scss/components/fluid-text-area/_fluid-text-area.scss +12 -1
- package/scss/components/fluid-text-input/_fluid-text-input.scss +24 -3
- package/scss/components/fluid-time-picker/_fluid-time-picker.scss +3 -1
- package/scss/components/list-box/_list-box.scss +23 -3
- package/scss/components/menu/_menu.scss +11 -1
- package/scss/components/notification/_actionable-notification.scss +4 -0
- package/scss/components/number-input/_number-input.scss +2 -1
- package/scss/components/popover/_popover.scss +1 -1
- package/scss/components/radio-button/_radio-button.scss +23 -0
- package/scss/components/slider/_slider.scss +126 -32
- package/scss/components/slug/_slug.scss +3 -12
- package/scss/components/tile/_tile.scss +102 -0
- package/scss/utilities/_ai-gradient.scss +56 -2
|
@@ -9,12 +9,11 @@
|
|
|
9
9
|
|
|
10
10
|
/// Experimental - name and structure subject to change. Use at your own risk!
|
|
11
11
|
/// Adds AI gradient styles to a component
|
|
12
|
-
/// @access
|
|
12
|
+
/// @access private
|
|
13
13
|
/// @param {String} $direction - Direction of gradient from: `left`, `right`, `top`, and `bottom`
|
|
14
14
|
/// @param {Number} $width - Percentage width of gradient with regards to parent component
|
|
15
15
|
/// @example @include ai-gradient('right', '33%');
|
|
16
16
|
/// @group utilities
|
|
17
|
-
|
|
18
17
|
@mixin ai-gradient($direction: 'right', $width: 33%) {
|
|
19
18
|
$deg: 0;
|
|
20
19
|
@if $direction == 'bottom' {
|
|
@@ -40,3 +39,58 @@
|
|
|
40
39
|
transparent 100%
|
|
41
40
|
);
|
|
42
41
|
}
|
|
42
|
+
|
|
43
|
+
/// Experimental - name and structure subject to change. Use at your own risk!
|
|
44
|
+
/// Adds callout gradient styles to a component
|
|
45
|
+
/// @access private
|
|
46
|
+
/// @example @include callout-gradient();
|
|
47
|
+
/// @param {String} $type - Type of gradient, either 'default', 'selected' or 'hover'
|
|
48
|
+
/// @group utilities
|
|
49
|
+
@mixin callout-gradient($type: 'default') {
|
|
50
|
+
@if $type == 'hover' {
|
|
51
|
+
background: linear-gradient(
|
|
52
|
+
0deg,
|
|
53
|
+
theme.$slug-callout-aura-start-hover-01 0%,
|
|
54
|
+
theme.$slug-callout-aura-end-hover-01 50%,
|
|
55
|
+
transparent 50%
|
|
56
|
+
),
|
|
57
|
+
linear-gradient(
|
|
58
|
+
0deg,
|
|
59
|
+
theme.$slug-callout-aura-start-hover-02 0%,
|
|
60
|
+
theme.$slug-callout-aura-end-hover-02 50%,
|
|
61
|
+
transparent 50%
|
|
62
|
+
),
|
|
63
|
+
linear-gradient(
|
|
64
|
+
180deg,
|
|
65
|
+
theme.$slug-callout-gradient-top-hover 0%,
|
|
66
|
+
theme.$slug-callout-gradient-bottom-hover 100%
|
|
67
|
+
)
|
|
68
|
+
rgba(0, 0, 0, 0.01);
|
|
69
|
+
} @else if $type == 'selected' {
|
|
70
|
+
background: linear-gradient(
|
|
71
|
+
0deg,
|
|
72
|
+
theme.$slug-callout-aura-start-selected 0%,
|
|
73
|
+
theme.$slug-callout-aura-end-selected 50%,
|
|
74
|
+
transparent 50%
|
|
75
|
+
),
|
|
76
|
+
linear-gradient(
|
|
77
|
+
180deg,
|
|
78
|
+
theme.$slug-callout-gradient-top-selected 0%,
|
|
79
|
+
theme.$slug-callout-gradient-bottom-selected 100%
|
|
80
|
+
)
|
|
81
|
+
rgba(0, 0, 0, 0.01);
|
|
82
|
+
} @else {
|
|
83
|
+
background: linear-gradient(
|
|
84
|
+
0deg,
|
|
85
|
+
theme.$slug-callout-aura-start 0%,
|
|
86
|
+
theme.$slug-callout-aura-end 50%,
|
|
87
|
+
transparent 50%
|
|
88
|
+
),
|
|
89
|
+
linear-gradient(
|
|
90
|
+
180deg,
|
|
91
|
+
theme.$slug-callout-gradient-top 0%,
|
|
92
|
+
theme.$slug-callout-gradient-bottom 100%
|
|
93
|
+
)
|
|
94
|
+
rgba(0, 0, 0, 0.01);
|
|
95
|
+
}
|
|
96
|
+
}
|