@oardi/css-utils 0.52.0 → 0.53.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 (19) hide show
  1. package/package.json +1 -1
  2. package/scss/components/breadcrumb.scss +1 -1
  3. package/scss/components/button.scss +1 -1
  4. package/scss/components/card.scss +27 -11
  5. package/scss/components/chip.scss +88 -60
  6. package/scss/components/drawer.scss +41 -19
  7. package/scss/components/expansion-panel.scss +113 -83
  8. package/scss/components/form.scss +85 -81
  9. package/scss/components/icon-button.scss +144 -99
  10. package/scss/components/list.scss +33 -19
  11. package/scss/components/navbar.scss +24 -17
  12. package/scss/components/table.scss +73 -23
  13. package/scss/components/tabs.scss +72 -39
  14. package/scss/components/toast.scss +69 -18
  15. package/scss/components/tooltip.scss +45 -33
  16. package/scss/flex-responsive.scss +3 -0
  17. package/scss/text.scss +3 -3
  18. package/scss/utilities.scss +12 -0
  19. package/scss/variables.scss +14 -9
package/scss/components/form.scss CHANGED
@@ -1,35 +1,43 @@
1
1
  @layer components {
2
2
  .form-control {
3
- --input-bg-color: var(--bg-surface);
4
- --input-border-width: var(--border-width);
5
- --input-border-color: var(--border-color);
3
+ --form-control-bg-color: var(--bg-surface);
4
+ --form-control-border-width: var(--border-width);
5
+ --form-control-border-color: var(--border-color);
6
+ --form-control-border-radius: var(--border-radius);
7
+
8
+ --form-control-padding-y: var(--spacer-2);
9
+ --form-control-padding-x: var(--spacer-3);
10
+ --form-control-font-size: var(--font-size);
11
+ --form-control-font-weight: 400;
12
+
13
+ --form-control-placeholder-color: var(--text-subtle);
6
14
 
7
15
  --form-control-disabled-text-color: var(--disabled-text-color);
8
16
  --form-control-disabled-bg-color: var(--disabled-bg-color);
9
17
  --form-control-disabled-border-color: var(--disabled-border-color);
10
18
 
19
+ --form-control-focus-border-color: var(--primary-hover);
11
20
  --form-control-focus-outline-width: var(--focus-outline-width);
12
21
  --form-control-focus-outline-style: var(--focus-outline-style);
13
22
  --form-control-focus-outline-color: var(--focus-outline-color);
23
+ --form-control-focus-outline-offset: var(--focus-offset);
14
24
 
15
- --form-control-transition-duration: var(--transition-duration, 0.18s);
16
- --form-control-transition-easing: var(--transition-easing, ease-out);
25
+ --form-control-transition-duration: var(--transition-duration);
26
+ --form-control-transition-easing: var(--transition-easing);
17
27
 
18
28
  display: block;
19
29
  width: 100%;
20
30
  max-width: 100%;
21
- padding: 0.375rem 0.75rem;
22
- font-size: 1rem;
23
- font-weight: 400;
31
+ padding: var(--form-control-padding-y) var(--form-control-padding-x);
32
+ font-size: var(--form-control-font-size);
33
+ font-weight: var(--form-control-font-weight);
24
34
  line-height: var(--line-height);
25
- -webkit-appearance: none;
26
- -moz-appearance: none;
27
35
  appearance: none;
28
36
  color: var(--text-color);
29
- background-color: var(--input-bg-color);
37
+ background-color: var(--form-control-bg-color);
30
38
  background-clip: padding-box;
31
- border: var(--input-border-width) solid var(--input-border-color);
32
- border-radius: var(--border-radius);
39
+ border: var(--form-control-border-width) solid var(--form-control-border-color);
40
+ border-radius: var(--form-control-border-radius);
33
41
 
34
42
  transition:
35
43
  color var(--form-control-transition-duration) var(--form-control-transition-easing),
@@ -39,27 +47,27 @@
39
47
  outline-offset var(--form-control-transition-duration) var(--form-control-transition-easing);
40
48
 
41
49
  &:focus {
42
- background-color: var(--input-bg-color);
43
- border-color: var(--primary-hover);
50
+ background-color: var(--form-control-bg-color);
51
+ border-color: var(--form-control-focus-border-color);
44
52
  outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
45
53
  var(--form-control-focus-outline-color);
46
- outline-offset: var(--focus-offset);
54
+ outline-offset: var(--form-control-focus-outline-offset);
47
55
  }
48
56
 
49
57
  &.is-invalid {
50
58
  color: var(--error);
51
59
  border-color: var(--error);
52
- padding-right: calc(1.5em + 0.75rem);
60
+ padding-inline-end: calc(1.5em + var(--form-control-padding-x));
53
61
 
54
62
  &:focus {
55
63
  outline: var(--focus-outline-error);
56
- outline-offset: var(--focus-offset);
64
+ outline-offset: var(--form-control-focus-outline-offset);
57
65
  }
58
66
  }
59
67
 
60
68
  &:disabled,
61
69
  &[disabled] {
62
- opacity: 1; // ios useragent fix
70
+ opacity: 1;
63
71
  cursor: not-allowed;
64
72
  pointer-events: none;
65
73
  box-shadow: none;
@@ -70,111 +78,109 @@
70
78
  }
71
79
 
72
80
  &::placeholder {
73
- color: var(--gray-500);
81
+ color: var(--form-control-placeholder-color);
74
82
  }
75
83
  }
76
84
 
77
85
  textarea.form-control {
78
86
  height: auto;
79
87
  }
88
+ }
80
89
 
90
+ @layer components {
81
91
  .form-check {
82
- display: flex;
83
- flex-direction: row;
84
- align-items: center;
85
- gap: 0.75rem;
92
+ --form-check-gap: var(--spacer-2);
93
+ --form-check-input-size: 1rem;
94
+ --form-check-input-border-radius: var(--border-radius-sm, 0.25rem);
86
95
 
87
- .form-check-input {
88
- --input-bg-color: var(--bg-surface);
89
- --input-border-width: var(--border-width);
90
- --input-border-color: var(--border-color);
96
+ --form-check-input-bg-color: var(--bg-surface);
97
+ --form-check-input-border-width: var(--border-width);
98
+ --form-check-input-border-color: var(--border-color);
91
99
 
92
- --form-control-disabled-text-color: var(--disabled-text-color);
93
- --form-control-disabled-bg-color: var(--disabled-bg-color);
94
- --form-control-disabled-border-color: var(--disabled-border-color);
100
+ --form-check-input-checked-bg-color: var(--primary);
101
+ --form-check-input-checked-border-color: var(--primary);
102
+ --form-check-input-checked-color: var(--on-primary);
95
103
 
96
- --form-control-focus-outline-width: var(--focus-outline-width);
97
- --form-control-focus-outline-style: var(--focus-outline-style);
98
- --form-control-focus-outline-color: var(--focus-outline-color);
104
+ --form-check-disabled-bg-color: var(--disabled-bg-color);
105
+ --form-check-disabled-border-color: var(--disabled-border-color);
99
106
 
100
- --form-control-transition-duration: var(--transition-duration, 0.18s);
101
- --form-control-transition-easing: var(--transition-easing, ease-out);
107
+ --form-check-transition-duration: var(--transition-duration);
108
+ --form-check-transition-easing: var(--transition-easing);
102
109
 
110
+ display: flex;
111
+ flex-direction: row;
112
+ align-items: center;
113
+ gap: var(--form-check-gap);
114
+
115
+ .form-check-input {
116
+ position: relative;
103
117
  flex-shrink: 0;
118
+ width: var(--form-check-input-size);
119
+ height: var(--form-check-input-size);
104
120
  appearance: none;
105
- -webkit-appearance: none;
106
- width: 16px;
107
- height: 16px;
108
- border: var(--input-border-width, var(--border-width)) solid var(--input-border-color, var(--border-color));
109
- border-radius: 4px;
110
- position: relative;
111
- background-color: var(--input-bg-color, var(--bg-surface));
121
+ background-color: var(--form-check-input-bg-color);
122
+ border: var(--form-check-input-border-width) solid var(--form-check-input-border-color);
123
+ border-radius: var(--form-check-input-border-radius);
112
124
  cursor: pointer;
113
- transition: transform 0.2s ease;
125
+
126
+ transition:
127
+ background-color var(--form-check-transition-duration) var(--form-check-transition-easing),
128
+ border-color var(--form-check-transition-duration) var(--form-check-transition-easing),
129
+ box-shadow var(--form-check-transition-duration) var(--form-check-transition-easing);
114
130
 
115
131
  &:checked {
116
- background-color: var(--primary);
117
- border-color: var(--primary);
132
+ background-color: var(--form-check-input-checked-bg-color);
133
+ border-color: var(--form-check-input-checked-border-color);
118
134
  }
119
135
 
120
136
  &:checked::after {
121
137
  content: '';
122
138
  position: absolute;
123
- left: 4px;
124
- top: 1px;
125
- width: 5px;
126
- height: 10px;
127
- border: solid white;
139
+ inset-inline-start: 0.25rem;
140
+ inset-block-start: 0.0625rem;
141
+ width: 0.3125rem;
142
+ height: 0.625rem;
143
+ border: solid var(--form-check-input-checked-color);
128
144
  border-width: 0 2px 2px 0;
129
145
  transform: rotate(45deg);
130
146
  }
131
147
 
148
+ &:focus-visible {
149
+ border-color: var(--primary-hover);
150
+ outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
151
+ outline-offset: var(--focus-offset);
152
+ }
153
+
132
154
  &.is-invalid {
133
155
  border-color: var(--error);
134
156
 
135
- &:focus {
157
+ &:focus-visible {
136
158
  outline: var(--focus-outline-error);
137
159
  outline-offset: var(--focus-offset);
138
160
  }
139
161
  }
140
162
 
141
- &:required ~ .form-label::after {
142
- content: ' *';
143
- }
144
-
145
- &:focus {
146
- border-color: var(--primary-hover);
147
- outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
148
- var(--form-control-focus-outline-color);
149
- outline-offset: var(--focus-offset);
150
- }
151
-
163
+ &:disabled,
152
164
  &[disabled] {
153
- background-color: var(--form-check-disabled-bg-color, var(--disabled-bg-color));
154
- border-color: var(--form-check-disabled-bg-color, var(--disabled-border-color));
155
- }
156
-
157
- &[disabled]:hover,
158
- &[disabled]:focus {
159
165
  cursor: not-allowed;
160
- outline: 0;
166
+ background-color: var(--form-check-disabled-bg-color);
167
+ border-color: var(--form-check-disabled-border-color);
161
168
  }
162
169
  }
163
170
 
164
171
  .form-label {
165
172
  margin-bottom: 0;
166
173
  }
167
-
168
- &:required ~ .form-label::after {
169
- content: ' *';
170
- }
171
174
  }
175
+ }
172
176
 
177
+ @layer components {
173
178
  .form-label {
174
- margin-bottom: 0.5rem;
175
179
  display: inline-block;
180
+ margin-bottom: var(--spacer-2);
176
181
 
177
- &:has(~ .form-control:required)::after {
182
+ &.required::after,
183
+ &.is-required::after {
178
184
  content: ' *';
179
185
  }
180
186
 
@@ -184,17 +190,15 @@
184
190
  }
185
191
 
186
192
  .is-invalid ~ .invalid-feedback,
187
- .is-invalid ~ .invalid-tooltip,
188
- .was-validated :invalid ~ .invalid-feedback,
189
- .was-validated :invalid ~ .invalid-tooltip {
193
+ .was-validated :invalid ~ .invalid-feedback {
190
194
  display: block;
191
195
  }
192
196
 
193
197
  .invalid-feedback {
194
198
  display: none;
195
199
  width: 100%;
196
- margin-top: 0.25rem;
197
- font-size: 0.875em;
200
+ margin-top: var(--spacer-1);
201
+ font-size: var(--font-size-sm);
198
202
  color: var(--error);
199
203
  }
200
204
  }
package/scss/components/icon-button.scss CHANGED
@@ -1,141 +1,186 @@
1
1
  @use 'sass:map';
2
- @use '../theme.scss';
3
-
4
- $sizes: (
5
- xs: 32px,
6
- sm: 36px,
7
- md: 40px,
8
- lg: 44px,
9
- );
2
+ @use '../theme.scss' as theme;
10
3
 
11
4
  @layer components {
12
5
  .icon-btn {
6
+ --icon-button-color: var(--text-color);
7
+ --icon-button-color-hover: var(--text-color);
8
+ --icon-button-color-active: var(--text-color);
9
+ --icon-button-color-rgb: var(--primary-rgb);
10
+ --icon-button-on-color: var(--on-primary);
11
+
12
+ --icon-button-bg-color: transparent;
13
+ --icon-button-border-color: transparent;
14
+ --icon-button-highlight: var(--bg-highlight);
15
+
13
16
  --icon-button-border-width: var(--border-width);
14
- --icon-button-padding: 0.25rem;
15
- --icon-button-width: 40px;
16
- --icon-button-min-width: 40px;
17
- --icon-button-height: 40px;
18
- --icon-button-border-radius: 100%;
17
+ --icon-button-border-radius: 9999px;
18
+
19
+ --icon-button-size: 2.5rem;
20
+ --icon-button-padding: var(--spacer-1);
21
+ --icon-button-svg-size: 1.125rem;
22
+
23
+ --icon-button-disabled-text-color: var(--disabled-text-color);
24
+ --icon-button-disabled-bg-color: var(--disabled-bg-color);
25
+ --icon-button-disabled-border-color: var(--disabled-border-color);
19
26
 
20
27
  --icon-button-focus-outline-width: var(--focus-outline-width);
21
28
  --icon-button-focus-outline-style: var(--focus-outline-style);
22
29
  --icon-button-focus-outline-color: var(--focus-outline-color);
30
+ --icon-button-focus-outline-offset: var(--focus-offset);
23
31
 
24
- --icon-button-svg-width: 18px;
25
- --icon-button-svg-height: 18px;
32
+ --icon-button-transition-duration: var(--transition-duration);
33
+ --icon-button-transition-easing: var(--transition-easing);
26
34
 
27
- --icon-button-transition-duration: var(--transition-duration, 0.2s);
28
-
29
- padding: var(--icon-button-padding);
30
- min-width: var(--icon-button-min-width);
31
- width: var(--icon-button-width);
32
- height: var(--icon-button-height);
33
- border-radius: var(--icon-button-border-radius);
34
35
  display: inline-flex;
35
36
  align-items: center;
36
37
  justify-content: center;
37
-
38
- border-width: var(--icon-button-border-width, var(--border-width));
38
+ flex-shrink: 0;
39
+ width: var(--icon-button-size);
40
+ min-width: var(--icon-button-size);
41
+ height: var(--icon-button-size);
42
+ padding: var(--icon-button-padding);
43
+ border-width: var(--icon-button-border-width);
39
44
  border-style: solid;
40
- background-color: transparent;
41
- border-color: transparent;
42
-
43
- fill: var(--text-color);
44
- color: var(--text-color);
45
+ border-color: var(--icon-button-border-color);
46
+ border-radius: var(--icon-button-border-radius);
47
+ background-color: var(--icon-button-bg-color);
48
+ color: var(--icon-button-color);
49
+ fill: currentColor;
50
+ line-height: 1;
51
+ text-decoration: none;
52
+ touch-action: manipulation;
53
+ -webkit-tap-highlight-color: transparent;
45
54
 
46
55
  transition:
47
- color var(--icon-button-transition-duration) ease,
48
- background-color var(--icon-button-transition-duration) ease,
49
- box-shadow var(--icon-button-transition-duration) ease,
50
- border-color var(--icon-button-transition-duration) ease;
51
-
52
- -webkit-tap-highlight-color: transparent;
53
- touch-action: manipulation; // ios fix
56
+ color var(--icon-button-transition-duration) var(--icon-button-transition-easing),
57
+ background-color var(--icon-button-transition-duration) var(--icon-button-transition-easing),
58
+ box-shadow var(--icon-button-transition-duration) var(--icon-button-transition-easing),
59
+ border-color var(--icon-button-transition-duration) var(--icon-button-transition-easing);
54
60
 
55
61
  svg {
56
- max-width: var(--icon-button-svg-width);
57
- max-height: var(--icon-button-svg-width);
62
+ max-width: var(--icon-button-svg-size);
63
+ max-height: var(--icon-button-svg-size);
58
64
  overflow: visible;
59
65
  }
60
66
 
61
67
  &:hover {
62
68
  cursor: pointer;
63
69
  text-decoration: none;
64
- background-color: var(--icon-button-highlight, var(--highlight));
65
- }
66
-
67
- &:disabled,
68
- &[disabled],
69
- &[disabled]:hover {
70
- color: var(--gray-800);
71
- fill: var(--gray-800);
72
- cursor: not-allowed;
73
- outline: 0;
74
- background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
75
70
  }
76
71
 
77
72
  &:focus-visible {
78
73
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
79
74
  var(--icon-button-focus-outline-color);
80
- outline-offset: var(--focus-offset);
81
- background-color: var(--icon-button-highlight, var(--highlight));
75
+ outline-offset: var(--icon-button-focus-outline-offset);
82
76
  }
83
77
  }
84
78
 
85
- // sizes
86
- // change to use css vars
87
- @each $name, $value in $sizes {
79
+ @each $name, $value in map.get(theme.$theme, colors) {
88
80
  .icon-btn-#{$name} {
89
- min-width: $value;
90
- width: $value;
91
- height: $value;
92
-
93
- svg {
94
- max-width: calc($value - 20px);
95
- max-height: calc($value - 20px);
96
- }
81
+ --icon-button-color: var(--#{$name});
82
+ --icon-button-color-hover: var(--#{$name}-hover);
83
+ --icon-button-color-active: var(--#{$name}-active);
84
+ --icon-button-color-rgb: var(--#{$name}-rgb);
85
+ --icon-button-on-color: var(--on-#{$name});
97
86
  }
98
87
  }
99
88
 
100
- @each $name, $value in map.get(theme.$theme, colors) {
101
- .icon-btn-#{$name} {
102
- color: var(--#{$name});
103
- fill: var(--#{$name});
104
- background-color: transparent;
105
-
106
- &:focus-visible {
107
- // color: var(--on-#{$name});
108
- outline: var(--icon-button-focus-outline-width)
109
- var(--icon-button-focus-outline-style)
110
- rgba(var(--#{$name}-rgb), 0.5);
111
- outline-offset: var(--focus-offset);
112
- }
89
+ .icon-btn-text {
90
+ color: var(--icon-button-color);
91
+ background-color: transparent;
92
+ border-color: transparent;
93
+
94
+ &:hover,
95
+ &:active {
96
+ color: var(--icon-button-color-hover);
97
+ background-color: var(--icon-button-highlight);
98
+ border-color: transparent;
99
+ }
100
+
101
+ &:focus-visible {
102
+ outline-color: rgba(var(--icon-button-color-rgb), 0.5);
103
+ background-color: var(--icon-button-highlight);
113
104
  }
105
+ }
106
+
107
+ .icon-btn-solid {
108
+ color: var(--icon-button-on-color);
109
+ background-color: var(--icon-button-color);
110
+ border-color: var(--icon-button-color);
114
111
 
115
- .icon-btn-#{$name}-contained {
116
- color: var(--on-#{$name});
117
- fill: var(--on-#{$name});
118
- background-color: var(--#{$name});
119
-
120
- &:hover,
121
- &:active,
122
- &:focus-visible {
123
- outline: var(--icon-button-focus-outline-width)
124
- var(--icon-button-focus-outline-style)
125
- var(--#{$name}-hover);
126
- background-color: var(--#{$name}-hover);
127
- }
128
-
129
- &:disabled,
130
- &[disabled],
131
- &[disabled]:hover {
132
- color: var(--#{$name}-hover);
133
- fill: var(--#{$name}-hover);
134
- cursor: not-allowed;
135
- box-shadow: none;
136
- background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
137
- outline: 0;
138
- }
112
+ &:hover {
113
+ color: var(--icon-button-on-color);
114
+ background-color: var(--icon-button-color-hover);
115
+ border-color: var(--icon-button-color-hover);
116
+ }
117
+
118
+ &:active,
119
+ &.active {
120
+ color: var(--icon-button-on-color);
121
+ background-color: var(--icon-button-color-active);
122
+ border-color: var(--icon-button-color-active);
123
+ }
124
+
125
+ &:focus-visible {
126
+ outline-color: rgba(var(--icon-button-color-rgb), 0.5);
127
+ }
128
+ }
129
+
130
+ .icon-btn-outline {
131
+ color: var(--icon-button-color);
132
+ background-color: transparent;
133
+ border-color: var(--icon-button-color);
134
+
135
+ &:hover {
136
+ color: var(--icon-button-on-color);
137
+ background-color: var(--icon-button-color-hover);
138
+ border-color: var(--icon-button-color-hover);
139
+ }
140
+
141
+ &:active,
142
+ &.active {
143
+ color: var(--icon-button-on-color);
144
+ background-color: var(--icon-button-color-active);
145
+ border-color: var(--icon-button-color-active);
146
+ }
147
+
148
+ &:focus-visible {
149
+ outline-color: rgba(var(--icon-button-color-rgb), 0.5);
150
+ }
151
+ }
152
+
153
+ .icon-btn-xs {
154
+ --icon-button-size: 2rem;
155
+ --icon-button-svg-size: 0.75rem;
156
+ }
157
+
158
+ .icon-btn-sm {
159
+ --icon-button-size: 2.25rem;
160
+ --icon-button-svg-size: 1rem;
161
+ }
162
+
163
+ .icon-btn-md {
164
+ --icon-button-size: 2.5rem;
165
+ --icon-button-svg-size: 1.125rem;
166
+ }
167
+
168
+ .icon-btn-lg {
169
+ --icon-button-size: 2.75rem;
170
+ --icon-button-svg-size: 1.25rem;
171
+ }
172
+
173
+ .icon-btn {
174
+ &:disabled,
175
+ &[disabled],
176
+ &.disabled {
177
+ cursor: not-allowed;
178
+ pointer-events: none;
179
+ box-shadow: none;
180
+ outline: 0;
181
+ color: var(--icon-button-disabled-text-color);
182
+ background-color: var(--icon-button-disabled-bg-color);
183
+ border-color: var(--icon-button-disabled-border-color);
139
184
  }
140
185
  }
141
186
  }
package/scss/components/list.scss CHANGED
@@ -1,24 +1,35 @@
1
1
  @layer components {
2
2
  .list {
3
- --list-padding: 0rem;
3
+ --list-padding: var(--spacer-0);
4
+
4
5
  --list-border-width: var(--border-width);
5
6
  --list-border-color: var(--border-color);
6
- --list-item-padding: 0.75rem 1rem;
7
- --list-item-transition-duration: var(--transition-duration, 0.2s);
8
- --list-item-transition-easing: var(--transition-easing, ease-out);
7
+ --list-border-radius: var(--border-radius);
8
+
9
+ --list-item-bg-color: var(--bg-surface);
10
+ --list-item-padding-y: var(--spacer-3);
11
+ --list-item-padding-x: var(--spacer-3);
12
+ --list-item-gap: var(--spacer-2);
13
+
14
+ --list-item-active-color: var(--primary);
15
+ --list-item-hover-color: var(--primary);
16
+
17
+ --list-item-transition-duration: var(--transition-duration);
18
+ --list-item-transition-easing: var(--transition-easing);
9
19
 
10
- border: var(--list-border-width) solid var(--list-border-color);
11
20
  padding: var(--list-padding);
21
+ border: var(--list-border-width) solid var(--list-border-color);
22
+ border-radius: var(--list-border-radius);
12
23
  list-style-type: none;
13
24
 
14
25
  .list-item {
15
- background-color: var(--list-item-bg-color, var(--bg-surface));
16
- color: var(--text-color);
17
- min-height: 1px;
18
- padding: var(--list-item-padding);
19
26
  display: flex;
20
27
  align-items: center;
21
- gap: var(--spacer-2);
28
+ gap: var(--list-item-gap);
29
+ padding: var(--list-item-padding-y) var(--list-item-padding-x);
30
+ background-color: var(--list-item-bg-color);
31
+ color: var(--text-color);
32
+ fill: currentColor;
22
33
 
23
34
  transition:
24
35
  color var(--list-item-transition-duration) var(--list-item-transition-easing),
@@ -26,32 +37,35 @@
26
37
  box-shadow var(--list-item-transition-duration) var(--list-item-transition-easing),
27
38
  border-color var(--list-item-transition-duration) var(--list-item-transition-easing);
28
39
 
29
- &.is-active,
30
- &.has-hover:hover {
40
+ &.is-active {
41
+ color: var(--list-item-active-color);
42
+ }
43
+
44
+ &.list-item-action:hover {
31
45
  cursor: pointer;
32
- color: var(--primary);
33
- fill: var(--primary);
46
+ color: var(--list-item-hover-color);
34
47
  text-decoration: none;
35
48
  }
36
49
 
37
50
  .list-item-text {
38
- flex: 1;
39
51
  display: flex;
52
+ flex: 1;
40
53
  flex-direction: column;
41
54
  }
42
55
 
43
56
  a {
44
57
  color: inherit;
58
+ text-decoration: none;
45
59
  }
46
60
 
47
61
  &:first-child {
48
- border-top-left-radius: inherit;
49
- border-top-right-radius: inherit;
62
+ border-start-start-radius: inherit;
63
+ border-start-end-radius: inherit;
50
64
  }
51
65
 
52
66
  &:last-child {
53
- border-bottom-right-radius: inherit;
54
- border-bottom-left-radius: inherit;
67
+ border-end-start-radius: inherit;
68
+ border-end-end-radius: inherit;
55
69
  }
56
70
  }
57
71