@itcase/ui 1.0.81 → 1.0.82
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/dist/components/Accordion.js +1 -1
- package/dist/components/Badge.js +3 -7
- package/dist/components/Button.js +1 -1
- package/dist/components/Cell.js +59 -55
- package/dist/components/ContextMenu.js +1 -1
- package/dist/components/DatePicker.js +6 -2
- package/dist/components/Label.js +6 -3
- package/dist/components/Search.js +5 -22
- package/dist/components/Tab.js +102 -104
- package/dist/constants/componentProps/borderColor.js +1 -1
- package/dist/constants/componentProps/fill.js +1 -1
- package/dist/constants/componentProps/textColor.js +1 -1
- package/dist/constants/componentProps/textColorHover.js +1 -1
- package/dist/css/components/Accordion/Accordion.css +1 -2
- package/dist/css/components/Avatar/Avatar.css +1 -1
- package/dist/css/components/Badge/Badge.css +1 -18
- package/dist/css/components/Button/Button.css +3 -14
- package/dist/css/components/Cell/Cell.css +12 -22
- package/dist/css/components/Chips/Chips.css +1 -2
- package/dist/css/components/Choice/Choice.css +1 -1
- package/dist/css/components/Code/Code.css +1 -1
- package/dist/css/components/ContextMenu/ContextMenu.css +2 -7
- package/dist/css/components/ContextMenu/css/__item/context-menu__item.css +1 -2
- package/dist/css/components/DatePicker/DatePicker.css +3 -0
- package/dist/css/components/Divider/Divider.css +24 -42
- package/dist/css/components/Dot/Dot.css +5 -9
- package/dist/css/components/Flex/Flex.css +2 -2
- package/dist/css/components/Flex/css/__item/flex__item_shape.css +1 -1
- package/dist/css/components/Grid/Grid.css +1 -1
- package/dist/css/components/Group/Group.css +1 -1
- package/dist/css/components/Icon/Icon.css +1 -1
- package/dist/css/components/Label/Label.css +1 -1
- package/dist/css/components/Modal/Modal.css +1 -1
- package/dist/css/components/Notification/Notification.css +7 -7
- package/dist/css/components/Notification/css/__item/notification__item_set_float.css +2 -2
- package/dist/css/components/Notification/css/__item/notification__item_set_form.css +2 -2
- package/dist/css/components/Notification/css/__item/notification__item_set_toast.css +2 -2
- package/dist/css/components/Notification/css/__item/notification__item_set_top.css +1 -1
- package/dist/css/components/Pagination/Pagination.css +14 -14
- package/dist/css/components/Pagination/css/__item/pagination__item.css +14 -14
- package/dist/css/components/RadioButton/RadioButton.css +2 -2
- package/dist/css/components/Search/Search.css +2 -3
- package/dist/css/components/Search/css/search-input/search-input.css +0 -1
- package/dist/css/components/Search/css/search-input/search-input_shape.css +1 -1
- package/dist/css/components/Segmented/Segmented.css +1 -1
- package/dist/css/components/Select/Select.css +11 -1
- package/dist/css/components/Tab/Tab.css +3 -4
- package/dist/css/components/Textarea/Textarea.css +4 -4
- package/dist/css/components/Tile/Tile.css +2 -2
- package/dist/css/styles/border-color/border-color.css +2 -1
- package/dist/css/styles/fill/fill.css +19 -15
- package/dist/css/styles/text-color/text-color.css +2 -2
- package/package.json +1 -1
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
.context-menu__item {
|
|
2
|
-
cursor: pointer;
|
|
3
2
|
&-wrapper {
|
|
4
3
|
display: flex;
|
|
5
4
|
}
|
|
6
5
|
&-title {
|
|
7
|
-
flex: 1;
|
|
8
6
|
white-space: nowrap;
|
|
7
|
+
flex: 1;
|
|
9
8
|
}
|
|
10
9
|
}
|
|
11
10
|
|
|
@@ -17,8 +16,8 @@
|
|
|
17
16
|
.context-menu {
|
|
18
17
|
&_shape {
|
|
19
18
|
&_rounded {
|
|
19
|
+
border-radius: var(--context-menu-shape-rounded, 12px);
|
|
20
20
|
overflow: hidden;
|
|
21
|
-
border-radius: var(--context-menu-shape-rounded-default);
|
|
22
21
|
}
|
|
23
22
|
&_circular {
|
|
24
23
|
border-radius: 50%;
|
|
@@ -37,7 +36,3 @@
|
|
|
37
36
|
}
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
|
-
|
|
41
|
-
:root {
|
|
42
|
-
--context-menu-shape-rounded-default: 12px;
|
|
43
|
-
}
|
|
@@ -5,58 +5,28 @@
|
|
|
5
5
|
}
|
|
6
6
|
.divider {
|
|
7
7
|
&_size {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
height: 2px;
|
|
13
|
-
}
|
|
14
|
-
&_m {
|
|
15
|
-
height: 3px;
|
|
16
|
-
}
|
|
17
|
-
&_l {
|
|
18
|
-
height: 4px;
|
|
19
|
-
}
|
|
20
|
-
&_xl {
|
|
21
|
-
height: 5px;
|
|
8
|
+
@each $size in xs, s, m, l, xl {
|
|
9
|
+
&_$(size) {
|
|
10
|
+
height: var(--divider-size-$(size)-height);
|
|
11
|
+
}
|
|
22
12
|
}
|
|
23
13
|
}
|
|
24
14
|
&_direction {
|
|
25
15
|
&_horizontal {
|
|
26
16
|
&^^&_size {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
height: 2px;
|
|
32
|
-
}
|
|
33
|
-
&_m {
|
|
34
|
-
height: 3px;
|
|
35
|
-
}
|
|
36
|
-
&_l {
|
|
37
|
-
height: 4px;
|
|
38
|
-
}
|
|
39
|
-
&_xl {
|
|
40
|
-
height: 5px;
|
|
17
|
+
@each $size in xs, s, m, l, xl {
|
|
18
|
+
&_$(size) {
|
|
19
|
+
height: var(--divider-size-$(size)-height);
|
|
20
|
+
}
|
|
41
21
|
}
|
|
42
22
|
}
|
|
43
23
|
}
|
|
44
24
|
&_vertical {
|
|
45
25
|
&^^&_size {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
width: 2px;
|
|
51
|
-
}
|
|
52
|
-
&_m {
|
|
53
|
-
width: 3px;
|
|
54
|
-
}
|
|
55
|
-
&_l {
|
|
56
|
-
width: 4px;
|
|
57
|
-
}
|
|
58
|
-
&_xl {
|
|
59
|
-
width: 5px;
|
|
26
|
+
@each $size in xs, s, m, l, xl {
|
|
27
|
+
&_$(size) {
|
|
28
|
+
width: var(--divider-size-$(size)-width);
|
|
29
|
+
}
|
|
60
30
|
}
|
|
61
31
|
}
|
|
62
32
|
}
|
|
@@ -76,3 +46,15 @@
|
|
|
76
46
|
}
|
|
77
47
|
}
|
|
78
48
|
}
|
|
49
|
+
:root {
|
|
50
|
+
--divider-size-xs-height: 1px;
|
|
51
|
+
--divider-size-s-height: 2px;
|
|
52
|
+
--divider-size-m-height: 3px;
|
|
53
|
+
--divider-size-l-height: 4px;
|
|
54
|
+
--divider-size-xl-height: 5px;
|
|
55
|
+
--divider-size-xs-width: 1px;
|
|
56
|
+
--divider-size-s-width: 2px;
|
|
57
|
+
--divider-size-m-width: 3px;
|
|
58
|
+
--divider-size-l-width: 4px;
|
|
59
|
+
--divider-size-xl-width: 5px;
|
|
60
|
+
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
.dot {
|
|
2
2
|
}
|
|
3
3
|
.dot {
|
|
4
|
-
min-width: var(--dot-width);
|
|
5
|
-
min-height: var(--dot-height);
|
|
6
|
-
max-width: var(--dot-width);
|
|
7
|
-
max-height: var(--dot-height);
|
|
4
|
+
min-width: var(--dot-width, 16px);
|
|
5
|
+
min-height: var(--dot-height, 16px);
|
|
6
|
+
max-width: var(--dot-width, 16px);
|
|
7
|
+
max-height: var(--dot-height, 16px);
|
|
8
8
|
}
|
|
9
9
|
.dot_shape {
|
|
10
10
|
&_rounded {
|
|
11
|
-
border-radius: 12px;
|
|
11
|
+
border-radius: var(--dot-shape-rounded, 12px);
|
|
12
12
|
}
|
|
13
13
|
&_circular {
|
|
14
14
|
border-radius: 50%;
|
|
@@ -17,7 +17,3 @@
|
|
|
17
17
|
border-radius: 0;
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
:root {
|
|
21
|
-
--dot-width: 16px;
|
|
22
|
-
--dot-height: 16px;
|
|
23
|
-
}
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
.flex {
|
|
75
75
|
&_shape {
|
|
76
76
|
&_rounded {
|
|
77
|
-
border-radius: 12px;
|
|
77
|
+
border-radius: var(--flex-shape-rounded, 12px);
|
|
78
78
|
}
|
|
79
79
|
&_circular {
|
|
80
80
|
border-radius: 50%;
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
&__item {
|
|
160
160
|
&_shape {
|
|
161
161
|
&_rounded {
|
|
162
|
-
border-radius: 12px;
|
|
162
|
+
border-radius: var(--flex-item-shape-rounded, 12px);
|
|
163
163
|
}
|
|
164
164
|
&_circular {
|
|
165
165
|
border-radius: 50%;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
.label {
|
|
24
24
|
&_shape {
|
|
25
25
|
&_rounded {
|
|
26
|
-
border-radius: var(--label-shape-rounded-default);
|
|
26
|
+
border-radius: var(--label-shape-rounded-default, 6px);
|
|
27
27
|
@each $size in xxs, xs, s, m, l, xl, xxl {
|
|
28
28
|
&.label_size_$(size) {
|
|
29
29
|
border-radius: var(--label-size-$(size)-shape-rounded);
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
&_set {
|
|
28
28
|
&_float {
|
|
29
29
|
width: 100%;
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
padding: var(--notification-item-set-float-padding, 12px 16px);
|
|
31
|
+
border-radius: var(--notification-item-set-float-border-radius, 8px);
|
|
32
32
|
@mixin elevation-8;
|
|
33
33
|
^^&-wrapper {
|
|
34
34
|
display: flex;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
&_top {
|
|
44
44
|
width: 100%;
|
|
45
45
|
^^&-wrapper {
|
|
46
|
-
padding: 12px 0;
|
|
46
|
+
padding: var(--notification-item-set-top-padding, 12px 0);
|
|
47
47
|
display: flex;
|
|
48
48
|
flex-direction: column;
|
|
49
49
|
justify-content: center;
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
&_set {
|
|
58
58
|
&_form {
|
|
59
59
|
width: 100%;
|
|
60
|
-
padding: 12px 16px;
|
|
61
|
-
border-radius: 8px;
|
|
60
|
+
padding: var(--notification-item-set-form-padding, 12px 16px);
|
|
61
|
+
border-radius: var(--notification-item-set-form-border-radius, 8px);
|
|
62
62
|
^^&-wrapper {
|
|
63
63
|
text-align: left;
|
|
64
64
|
display: flex;
|
|
@@ -73,8 +73,8 @@
|
|
|
73
73
|
&_toast {
|
|
74
74
|
width: 100%;
|
|
75
75
|
background: var(--color-surface-primary);
|
|
76
|
-
padding: 12px 16px;
|
|
77
|
-
border-radius: 8px;
|
|
76
|
+
padding: var(--notification-item-set-toast-padding, 12px 16px);
|
|
77
|
+
border-radius: var(--notification-item-set-toast-border-radius, 8px);
|
|
78
78
|
display: flex;
|
|
79
79
|
flex-direction: column;
|
|
80
80
|
gap: 24px;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
&_set {
|
|
3
3
|
&_float {
|
|
4
4
|
width: 100%;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
padding: var(--notification-item-set-float-padding, 12px 16px);
|
|
6
|
+
border-radius: var(--notification-item-set-float-border-radius, 8px);
|
|
7
7
|
@mixin elevation-8;
|
|
8
8
|
^^&-wrapper {
|
|
9
9
|
display: flex;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
&_set {
|
|
3
3
|
&_form {
|
|
4
4
|
width: 100%;
|
|
5
|
-
padding: 12px 16px;
|
|
6
|
-
border-radius: 8px;
|
|
5
|
+
padding: var(--notification-item-set-form-padding, 12px 16px);
|
|
6
|
+
border-radius: var(--notification-item-set-form-border-radius, 8px);
|
|
7
7
|
^^&-wrapper {
|
|
8
8
|
text-align: left;
|
|
9
9
|
display: flex;
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
&_toast {
|
|
4
4
|
width: 100%;
|
|
5
5
|
background: var(--color-surface-primary);
|
|
6
|
-
padding: 12px 16px;
|
|
7
|
-
border-radius: 8px;
|
|
6
|
+
padding: var(--notification-item-set-toast-padding, 12px 16px);
|
|
7
|
+
border-radius: var(--notification-item-set-toast-border-radius, 8px);
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: column;
|
|
10
10
|
gap: 24px;
|
|
@@ -14,26 +14,17 @@
|
|
|
14
14
|
}
|
|
15
15
|
.pagination {
|
|
16
16
|
&__item {
|
|
17
|
-
border: solid 1px var(--paginator-item-default-border);
|
|
18
|
-
height: 40px;
|
|
19
17
|
width: 40px;
|
|
20
|
-
|
|
21
|
-
border-radius: 6px;
|
|
18
|
+
height: 40px;
|
|
22
19
|
background: var(--paginator-item-default-fill);
|
|
23
|
-
|
|
20
|
+
border: solid 1px var(--paginator-item-default-border);
|
|
21
|
+
border-radius: var(--paginator-item-border-radius, 6px);
|
|
22
|
+
display: flex;
|
|
24
23
|
transition: var(--paginator-item-transition);
|
|
24
|
+
cursor: pointer;
|
|
25
25
|
&:hover {
|
|
26
26
|
background: var(--paginator-item-default-fill-hover);
|
|
27
27
|
}
|
|
28
|
-
&-link {
|
|
29
|
-
width: 100%;
|
|
30
|
-
height: 100%;
|
|
31
|
-
justify-content: center;
|
|
32
|
-
align-items: center;
|
|
33
|
-
display: flex;
|
|
34
|
-
@mixin text-l;
|
|
35
|
-
color: var(--paginator-item-default-text);
|
|
36
|
-
}
|
|
37
28
|
&_break {
|
|
38
29
|
display: flex;
|
|
39
30
|
^&-link {
|
|
@@ -41,6 +32,15 @@
|
|
|
41
32
|
align-items: flex-end;
|
|
42
33
|
}
|
|
43
34
|
}
|
|
35
|
+
&-link {
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: 100%;
|
|
38
|
+
color: var(--paginator-item-default-text);
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
align-items: center;
|
|
42
|
+
@mixin text-l;
|
|
43
|
+
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
.pagination {
|
|
@@ -1,25 +1,16 @@
|
|
|
1
1
|
.pagination {
|
|
2
2
|
&__item {
|
|
3
|
-
border: solid 1px var(--paginator-item-default-border);
|
|
4
|
-
height: 40px;
|
|
5
3
|
width: 40px;
|
|
6
|
-
|
|
7
|
-
border-radius: 6px;
|
|
4
|
+
height: 40px;
|
|
8
5
|
background: var(--paginator-item-default-fill);
|
|
9
|
-
|
|
6
|
+
border: solid 1px var(--paginator-item-default-border);
|
|
7
|
+
border-radius: var(--paginator-item-border-radius, 6px);
|
|
8
|
+
display: flex;
|
|
10
9
|
transition: var(--paginator-item-transition);
|
|
10
|
+
cursor: pointer;
|
|
11
11
|
&:hover {
|
|
12
12
|
background: var(--paginator-item-default-fill-hover);
|
|
13
13
|
}
|
|
14
|
-
&-link {
|
|
15
|
-
width: 100%;
|
|
16
|
-
height: 100%;
|
|
17
|
-
justify-content: center;
|
|
18
|
-
align-items: center;
|
|
19
|
-
display: flex;
|
|
20
|
-
@mixin text-l;
|
|
21
|
-
color: var(--paginator-item-default-text);
|
|
22
|
-
}
|
|
23
14
|
&_break {
|
|
24
15
|
display: flex;
|
|
25
16
|
^&-link {
|
|
@@ -27,5 +18,14 @@
|
|
|
27
18
|
align-items: flex-end;
|
|
28
19
|
}
|
|
29
20
|
}
|
|
21
|
+
&-link {
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 100%;
|
|
24
|
+
color: var(--paginator-item-default-text);
|
|
25
|
+
display: flex;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
align-items: center;
|
|
28
|
+
@mixin text-l;
|
|
29
|
+
}
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
z-index: 1;
|
|
43
43
|
&_shape {
|
|
44
44
|
&_rounded {
|
|
45
|
-
border-radius: 4px;
|
|
45
|
+
border-radius: var(--radio-button-shape-rounded, 4px);
|
|
46
46
|
position: relative;
|
|
47
47
|
overflow: hidden;
|
|
48
48
|
}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
&_shape {
|
|
71
71
|
&_rounded {
|
|
72
72
|
^^&__item {
|
|
73
|
-
border-radius: 4px;
|
|
73
|
+
border-radius: var(--radio-button-item-shape-rounded, 4px);
|
|
74
74
|
position: relative;
|
|
75
75
|
overflow: hidden;
|
|
76
76
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
.search {
|
|
5
5
|
&_shape {
|
|
6
6
|
&_rounded {
|
|
7
|
-
border-radius: 6px;
|
|
7
|
+
border-radius: var(--search-shape-rounded, 6px);
|
|
8
8
|
position: relative;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
@@ -63,7 +63,6 @@
|
|
|
63
63
|
right: 0;
|
|
64
64
|
z-index: 2;
|
|
65
65
|
transform: translate(0, -50%);
|
|
66
|
-
cursor: pointer;
|
|
67
66
|
}
|
|
68
67
|
&&_state_focus,
|
|
69
68
|
&&_state_filled {
|
|
@@ -85,7 +84,7 @@
|
|
|
85
84
|
.search-input {
|
|
86
85
|
&_shape {
|
|
87
86
|
&_rounded {
|
|
88
|
-
border-radius: 6px;
|
|
87
|
+
border-radius: var(--search-input-shape-rounded, 6px);
|
|
89
88
|
position: relative;
|
|
90
89
|
}
|
|
91
90
|
}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
.tab {
|
|
18
18
|
&_shape {
|
|
19
19
|
&_rounded {
|
|
20
|
-
border-radius: 12px;
|
|
20
|
+
border-radius: var(--tab-shape-rounded, 12px);
|
|
21
21
|
}
|
|
22
22
|
&_circular {
|
|
23
23
|
border-radius: 50%;
|
|
@@ -39,13 +39,12 @@
|
|
|
39
39
|
.tab-group {
|
|
40
40
|
position: relative;
|
|
41
41
|
display: flex;
|
|
42
|
-
align-items: stretch;
|
|
43
42
|
flex-flow: row wrap;
|
|
43
|
+
align-items: stretch;
|
|
44
44
|
& .tab {
|
|
45
45
|
display: flex;
|
|
46
46
|
flex-flow: column nowrap;
|
|
47
47
|
justify-content: flex-end;
|
|
48
|
-
cursor: pointer;
|
|
49
48
|
&__wrapper {
|
|
50
49
|
display: flex;
|
|
51
50
|
flex: 1;
|
|
@@ -54,8 +53,8 @@
|
|
|
54
53
|
gap: 4px;
|
|
55
54
|
}
|
|
56
55
|
&__label {
|
|
57
|
-
flex: 1;
|
|
58
56
|
display: flex;
|
|
57
|
+
flex: 1;
|
|
59
58
|
}
|
|
60
59
|
}
|
|
61
60
|
}
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
min-width: 100%;
|
|
4
4
|
min-height: 160px;
|
|
5
5
|
max-height: 160px;
|
|
6
|
-
padding: 16px 16px;
|
|
6
|
+
padding: var(--textarea-padding, 16px 16px);
|
|
7
|
+
padding: 0;
|
|
8
|
+
margin: 0;
|
|
9
|
+
border: none;
|
|
7
10
|
z-index: 1;
|
|
8
11
|
outline: 0;
|
|
9
12
|
resize: none;
|
|
10
|
-
border: none;
|
|
11
13
|
appearance: none;
|
|
12
|
-
padding: 0;
|
|
13
|
-
margin: 0;
|
|
14
14
|
&:read-only {
|
|
15
15
|
color: var(--color-surface-text-tertiary);
|
|
16
16
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
.tile {
|
|
7
7
|
&_shape {
|
|
8
8
|
&_rounded {
|
|
9
|
-
border-radius: 12px;
|
|
9
|
+
border-radius: var(--tile-shape-rounded, 12px);
|
|
10
10
|
}
|
|
11
11
|
&_circular {
|
|
12
12
|
border-radius: 50%;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
.tile {
|
|
32
32
|
&_type {
|
|
33
33
|
&_icon {
|
|
34
|
-
padding: 16px;
|
|
34
|
+
padding: var(--tile-type-icon-padding, 16px);
|
|
35
35
|
^^&__icon {
|
|
36
36
|
margin: 0 0 16px 0;
|
|
37
37
|
}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
@each $type in accent, primary, secondary, tertiary, surface, success, error {
|
|
3
3
|
&_$(type) {
|
|
4
4
|
&-border {
|
|
5
|
-
@each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
|
|
5
|
+
@each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
|
|
6
|
+
disabled, hover, invert {
|
|
6
7
|
&-$(color) {
|
|
7
8
|
border-width: 1px;
|
|
8
9
|
border-color: var(--color-$(type)-border-$(color));
|
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
.fill {
|
|
2
|
-
@each $type in accent, primary, secondary, tertiary, surface, success, error, info,
|
|
2
|
+
@each $type in accent, primary, secondary, tertiary, surface, success, error, info, gradient,
|
|
3
|
+
warning {
|
|
3
4
|
&_$(type) {
|
|
4
|
-
@each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
|
|
5
|
-
&-$(color) {
|
|
6
|
-
background: var(--color-$(type)-$(color));
|
|
7
|
-
@each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95 {
|
|
8
|
-
&$(alpha) {
|
|
9
|
-
background: var(--color-$(type)-$(color)-$(alpha));
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
5
|
&-item {
|
|
15
|
-
@each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
|
|
6
|
+
@each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
|
|
7
|
+
hover {
|
|
16
8
|
&-$(color) {
|
|
17
9
|
background: var(--color-$(type)-item-$(color));
|
|
18
|
-
@each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95
|
|
10
|
+
@each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95 {
|
|
19
11
|
&$(alpha) {
|
|
20
12
|
background: var(--color-$(type)-item-$(color)-$(alpha));
|
|
21
13
|
}
|
|
@@ -23,13 +15,25 @@
|
|
|
23
15
|
}
|
|
24
16
|
}
|
|
25
17
|
}
|
|
18
|
+
@each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
|
|
19
|
+
hover {
|
|
20
|
+
&-$(color) {
|
|
21
|
+
background: var(--color-$(type)-$(color));
|
|
22
|
+
@each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95 {
|
|
23
|
+
&$(alpha) {
|
|
24
|
+
background: var(--color-$(type)-$(color)-$(alpha));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
26
29
|
}
|
|
27
30
|
}
|
|
28
|
-
@each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error,
|
|
31
|
+
@each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error,
|
|
32
|
+
info, warning {
|
|
29
33
|
&_$(type) {
|
|
30
34
|
&-primary {
|
|
31
35
|
background: var(--color-$(type)-primary);
|
|
32
|
-
@each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95
|
|
36
|
+
@each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95 {
|
|
33
37
|
&$(alpha) {
|
|
34
38
|
background: var(--color-$(type)-primary$(opacity));
|
|
35
39
|
}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
@each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
|
|
3
3
|
&_$(type) {
|
|
4
4
|
&-text {
|
|
5
|
-
@each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
|
|
5
|
+
@each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
|
|
6
|
+
hover, invert {
|
|
6
7
|
&-$(color) {
|
|
7
8
|
color: var(--color-$(type)-text-$(color));
|
|
8
9
|
}
|
|
@@ -11,4 +12,3 @@
|
|
|
11
12
|
}
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
|
-
|