@1001-digital/layers.base 0.0.14 → 0.0.15
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.
|
@@ -137,6 +137,7 @@
|
|
|
137
137
|
<h4>Variants</h4>
|
|
138
138
|
<div class="demo-row">
|
|
139
139
|
<Button class="primary">Primary</Button>
|
|
140
|
+
<Button class="tertiary">Tertiary</Button>
|
|
140
141
|
<Button class="small">Small</Button>
|
|
141
142
|
<Button class="link">Link</Button>
|
|
142
143
|
<Button class="inline">Inline</Button>
|
|
@@ -155,6 +156,10 @@
|
|
|
155
156
|
<Icon type="check" />
|
|
156
157
|
<span>Confirm</span>
|
|
157
158
|
</Button>
|
|
159
|
+
<Button class="tertiary">
|
|
160
|
+
<Icon type="add" />
|
|
161
|
+
<span>New</span>
|
|
162
|
+
</Button>
|
|
158
163
|
<Button>
|
|
159
164
|
<Icon type="edit" />
|
|
160
165
|
</Button>
|
|
@@ -38,6 +38,14 @@ withDefaults(defineProps<{
|
|
|
38
38
|
--button-primary-background-highlight: var(--gray-z-8);
|
|
39
39
|
--button-primary-border-color-highlight: var(--gray-z-6);
|
|
40
40
|
--button-primary-color-highlight: var(--gray-z-0);
|
|
41
|
+
|
|
42
|
+
/* Tertiary Button Styles */
|
|
43
|
+
--button-tertiary-background: transparent;
|
|
44
|
+
--button-tertiary-border-color: var(--gray-z-3);
|
|
45
|
+
--button-tertiary-color: var(--muted);
|
|
46
|
+
--button-tertiary-background-highlight: var(--gray-z-1);
|
|
47
|
+
--button-tertiary-border-color-highlight: var(--gray-z-4);
|
|
48
|
+
--button-tertiary-color-highlight: var(--color);
|
|
41
49
|
}
|
|
42
50
|
}
|
|
43
51
|
</style>
|
|
@@ -190,6 +198,27 @@ withDefaults(defineProps<{
|
|
|
190
198
|
}
|
|
191
199
|
}
|
|
192
200
|
|
|
201
|
+
/* Tertiary variant */
|
|
202
|
+
&.tertiary {
|
|
203
|
+
background: var(--button-tertiary-background);
|
|
204
|
+
box-shadow: 0 0 0 var(--border-width) var(--button-tertiary-border-color);
|
|
205
|
+
color: var(--button-tertiary-color);
|
|
206
|
+
|
|
207
|
+
>.icon {
|
|
208
|
+
color: var(--button-tertiary-color);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&:is(:hover, :active, :focus, .active) {
|
|
212
|
+
background: var(--button-tertiary-background-highlight);
|
|
213
|
+
box-shadow: 0 0 0 var(--border-width) var(--button-tertiary-border-color-highlight);
|
|
214
|
+
color: var(--button-tertiary-color-highlight);
|
|
215
|
+
|
|
216
|
+
>.icon {
|
|
217
|
+
color: var(--button-tertiary-color-highlight);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
193
222
|
&:is(:hover, :active, :focus, .active) {
|
|
194
223
|
background: var(--button-background-highlight);
|
|
195
224
|
box-shadow: var(--border-shadow-highlight);
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
display: flex;
|
|
28
28
|
align-items: center;
|
|
29
29
|
background: var(--background);
|
|
30
|
+
transition: background-color var(--speed), border-color var(--speed);
|
|
30
31
|
inline-size: 100%;
|
|
31
32
|
max-inline-size: -webkit-fill-available;
|
|
32
33
|
|
|
@@ -40,12 +41,20 @@
|
|
|
40
41
|
&:has(input:focus) {
|
|
41
42
|
background: var(--button-background-highlight);
|
|
42
43
|
border-color: var(--button-border-color-highlight);
|
|
44
|
+
|
|
45
|
+
.prefix,
|
|
46
|
+
.suffix {
|
|
47
|
+
background: var(--button-background-highlight);
|
|
48
|
+
border-color: var(--button-border-color-highlight);
|
|
49
|
+
}
|
|
43
50
|
}
|
|
44
51
|
|
|
45
52
|
.prefix,
|
|
46
53
|
.suffix {
|
|
47
54
|
padding: 0 var(--ui-padding-inline);
|
|
48
55
|
color: var(--muted);
|
|
56
|
+
background: var(--button-background);
|
|
57
|
+
transition: background-color var(--speed), border-color var(--speed), color var(--speed);
|
|
49
58
|
block-size: 100%;
|
|
50
59
|
display: flex;
|
|
51
60
|
align-items: center;
|
|
@@ -53,11 +62,11 @@
|
|
|
53
62
|
}
|
|
54
63
|
|
|
55
64
|
.prefix {
|
|
56
|
-
border-inline-end: var(--
|
|
65
|
+
border-inline-end: var(--border);
|
|
57
66
|
}
|
|
58
67
|
|
|
59
68
|
.suffix {
|
|
60
|
-
border-inline-start: var(--
|
|
69
|
+
border-inline-start: var(--border);
|
|
61
70
|
}
|
|
62
71
|
}
|
|
63
72
|
}
|