@oardi/css-utils 0.79.0 → 0.80.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/package.json +1 -1
- package/scss/components/card.scss +9 -0
- package/scss/components/chip.scss +22 -12
- package/scss/components/list.scss +12 -2
package/package.json
CHANGED
|
@@ -26,12 +26,21 @@
|
|
|
26
26
|
box-shadow var(--card-transition-duration) var(--card-transition-easing),
|
|
27
27
|
border-color var(--card-transition-duration) var(--card-transition-easing);
|
|
28
28
|
|
|
29
|
+
&:is(a, button),
|
|
29
30
|
&.card-action {
|
|
30
31
|
cursor: pointer;
|
|
32
|
+
color: inherit;
|
|
33
|
+
text-decoration: none;
|
|
31
34
|
|
|
32
35
|
&:hover {
|
|
33
36
|
background-color: var(--card-bg-hover-color);
|
|
34
37
|
}
|
|
38
|
+
|
|
39
|
+
&:focus-visible {
|
|
40
|
+
outline: var(--focus-outline-width) var(--focus-outline-style)
|
|
41
|
+
var(--focus-outline-color);
|
|
42
|
+
outline-offset: var(--focus-offset);
|
|
43
|
+
}
|
|
35
44
|
}
|
|
36
45
|
|
|
37
46
|
.card-title {
|
|
@@ -40,8 +40,6 @@
|
|
|
40
40
|
line-height: var(--line-height);
|
|
41
41
|
text-decoration: none;
|
|
42
42
|
white-space: nowrap;
|
|
43
|
-
touch-action: manipulation;
|
|
44
|
-
-webkit-tap-highlight-color: transparent;
|
|
45
43
|
|
|
46
44
|
transition:
|
|
47
45
|
color var(--chip-transition-duration) var(--chip-transition-easing),
|
|
@@ -49,11 +47,23 @@
|
|
|
49
47
|
box-shadow var(--chip-transition-duration) var(--chip-transition-easing),
|
|
50
48
|
border-color var(--chip-transition-duration) var(--chip-transition-easing);
|
|
51
49
|
|
|
52
|
-
&:
|
|
50
|
+
&:is(a, button),
|
|
51
|
+
&.chip-interactive {
|
|
53
52
|
cursor: pointer;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
touch-action: manipulation;
|
|
54
|
+
-webkit-tap-highlight-color: transparent;
|
|
55
|
+
|
|
56
|
+
&:hover {
|
|
57
|
+
text-decoration: none;
|
|
58
|
+
background-color: var(--chip-highlight);
|
|
59
|
+
border-color: var(--chip-highlight);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&:focus-visible {
|
|
63
|
+
outline: var(--focus-outline-width) var(--focus-outline-style)
|
|
64
|
+
var(--focus-outline-color);
|
|
65
|
+
outline-offset: var(--focus-offset);
|
|
66
|
+
}
|
|
57
67
|
}
|
|
58
68
|
|
|
59
69
|
&:has(> i.icon:last-child),
|
|
@@ -113,14 +123,14 @@
|
|
|
113
123
|
background-color: var(--chip-color);
|
|
114
124
|
border-color: var(--chip-color);
|
|
115
125
|
|
|
116
|
-
&:hover {
|
|
126
|
+
&:is(a, button, .chip-interactive):hover {
|
|
117
127
|
color: var(--chip-on-color);
|
|
118
128
|
background-color: var(--chip-color-hover);
|
|
119
129
|
border-color: var(--chip-color-hover);
|
|
120
130
|
}
|
|
121
131
|
|
|
122
132
|
&.is-active,
|
|
123
|
-
&:active {
|
|
133
|
+
&:is(a, button, .chip-interactive):active {
|
|
124
134
|
color: var(--chip-on-color);
|
|
125
135
|
background-color: var(--chip-color-active);
|
|
126
136
|
border-color: var(--chip-color-active);
|
|
@@ -132,14 +142,14 @@
|
|
|
132
142
|
background-color: transparent;
|
|
133
143
|
border-color: var(--chip-color);
|
|
134
144
|
|
|
135
|
-
&:hover {
|
|
145
|
+
&:is(a, button, .chip-interactive):hover {
|
|
136
146
|
color: var(--chip-on-color);
|
|
137
147
|
background-color: var(--chip-color-hover);
|
|
138
148
|
border-color: var(--chip-color-hover);
|
|
139
149
|
}
|
|
140
150
|
|
|
141
151
|
&.is-active,
|
|
142
|
-
&:active {
|
|
152
|
+
&:is(a, button, .chip-interactive):active {
|
|
143
153
|
color: var(--chip-on-color);
|
|
144
154
|
background-color: var(--chip-color-active);
|
|
145
155
|
border-color: var(--chip-color-active);
|
|
@@ -151,12 +161,12 @@
|
|
|
151
161
|
background-color: transparent;
|
|
152
162
|
border-color: transparent;
|
|
153
163
|
|
|
154
|
-
&:hover {
|
|
164
|
+
&:is(a, button, .chip-interactive):hover {
|
|
155
165
|
background-color: var(--chip-highlight);
|
|
156
166
|
}
|
|
157
167
|
|
|
158
168
|
&.is-active,
|
|
159
|
-
&:active {
|
|
169
|
+
&:is(a, button, .chip-interactive):active {
|
|
160
170
|
color: var(--chip-color-active);
|
|
161
171
|
background-color: var(--chip-highlight);
|
|
162
172
|
}
|
|
@@ -42,10 +42,20 @@
|
|
|
42
42
|
color: var(--list-item-active-color);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
&:is(a, button),
|
|
46
|
+
&.list-item-action {
|
|
46
47
|
cursor: pointer;
|
|
47
|
-
color: var(--list-item-hover-color);
|
|
48
48
|
text-decoration: none;
|
|
49
|
+
|
|
50
|
+
&:hover {
|
|
51
|
+
color: var(--list-item-hover-color);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:focus-visible {
|
|
55
|
+
outline: var(--focus-outline-width) var(--focus-outline-style)
|
|
56
|
+
var(--focus-outline-color);
|
|
57
|
+
outline-offset: var(--focus-offset);
|
|
58
|
+
}
|
|
49
59
|
}
|
|
50
60
|
|
|
51
61
|
.list-item-text {
|