@plexui/ui 0.4.0 → 0.4.1
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.
|
@@ -32,6 +32,17 @@
|
|
|
32
32
|
background: var(--segmented-control-background);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
.Tabs:where([data-variant="segmented"]:not([data-pill])) {
|
|
36
|
+
--segmented-control-option-radius: calc(
|
|
37
|
+
var(--segmented-control-radius) - var(--segmented-control-gutter)
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.Tabs:where([data-variant="segmented"][data-pill]) {
|
|
42
|
+
border-radius: var(--radius-full);
|
|
43
|
+
--segmented-control-option-radius: var(--radius-full);
|
|
44
|
+
}
|
|
45
|
+
|
|
35
46
|
.Tabs:where([data-variant="segmented"][data-block]) {
|
|
36
47
|
overflow: hidden;
|
|
37
48
|
display: flex;
|
|
@@ -39,15 +50,12 @@
|
|
|
39
50
|
white-space: normal;
|
|
40
51
|
}
|
|
41
52
|
|
|
42
|
-
.Tabs:where([data-variant="segmented"][data-pill]) {
|
|
43
|
-
--segmented-control-radius: var(--radius-full);
|
|
44
|
-
--segmented-control-option-radius: var(--radius-full);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
53
|
/* =============================================
|
|
48
54
|
Variant: Underline
|
|
49
55
|
============================================= */
|
|
50
56
|
.Tabs:where([data-variant="underline"]) {
|
|
57
|
+
--segmented-control-option-radius: 0;
|
|
58
|
+
|
|
51
59
|
overflow: auto;
|
|
52
60
|
height: var(--segmented-control-size);
|
|
53
61
|
padding: 0;
|
|
@@ -91,6 +99,11 @@
|
|
|
91
99
|
width: 100%;
|
|
92
100
|
}
|
|
93
101
|
|
|
102
|
+
.Tabs:where([data-orientation="vertical"][data-variant="segmented"][data-pill]) {
|
|
103
|
+
border-radius: calc(var(--segmented-control-size) / 2);
|
|
104
|
+
--segmented-control-option-radius: calc(var(--segmented-control-size) / 2);
|
|
105
|
+
}
|
|
106
|
+
|
|
94
107
|
/* =============================================
|
|
95
108
|
Sizes
|
|
96
109
|
============================================= */
|
|
@@ -291,14 +304,6 @@
|
|
|
291
304
|
.Tabs:where([data-gutter-size="xl"]) {
|
|
292
305
|
--segmented-control-option-gutter: var(--control-gutter-xl);
|
|
293
306
|
}/* =============================================
|
|
294
|
-
Option radius (computed from parent for segmented)
|
|
295
|
-
============================================= */.Tabs:where([data-variant="segmented"]) {
|
|
296
|
-
--segmented-control-option-radius: calc(
|
|
297
|
-
var(--segmented-control-radius) - var(--segmented-control-gutter)
|
|
298
|
-
);
|
|
299
|
-
}.Tabs:where([data-variant="underline"]) {
|
|
300
|
-
--segmented-control-option-radius: 0;
|
|
301
|
-
}/* =============================================
|
|
302
307
|
Tab (trigger item)
|
|
303
308
|
============================================= */.Tab {
|
|
304
309
|
position: relative;
|
|
@@ -399,6 +404,7 @@
|
|
|
399
404
|
:where(.Tabs[data-orientation="vertical"]) .Tab {
|
|
400
405
|
justify-content: flex-start;
|
|
401
406
|
width: 100%;
|
|
407
|
+
height: var(--segmented-control-size);
|
|
402
408
|
}
|
|
403
409
|
|
|
404
410
|
:where(.Tabs[data-orientation="vertical"][data-block]) .Tab {
|