@oardi/css-utils 0.133.0 → 0.134.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/css-utils-manifest.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "@oardi/css-utils",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.134.0",
|
|
4
4
|
"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
|
|
5
5
|
"lifecycle": {
|
|
6
6
|
"deprecated": [
|
|
@@ -766,6 +766,10 @@
|
|
|
766
766
|
"range-slider",
|
|
767
767
|
"required",
|
|
768
768
|
"right",
|
|
769
|
+
"segmented-control",
|
|
770
|
+
"segmented-control-equal",
|
|
771
|
+
"segmented-control-input",
|
|
772
|
+
"segmented-control-option",
|
|
769
773
|
"skeleton",
|
|
770
774
|
"skeleton-aspect-square",
|
|
771
775
|
"skeleton-aspect-video",
|
package/css-utils-reference.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
> Generated automatically. Do not edit manually.
|
|
4
4
|
|
|
5
5
|
- Package: `@oardi/css-utils`
|
|
6
|
-
- Version: `0.
|
|
6
|
+
- Version: `0.134.0`
|
|
7
7
|
- Source: public SCSS entry point and utility configuration
|
|
8
8
|
|
|
9
9
|
## Usage guidance
|
|
@@ -540,6 +540,10 @@ Classes:
|
|
|
540
540
|
- `range-slider`
|
|
541
541
|
- `required`
|
|
542
542
|
- `right`
|
|
543
|
+
- `segmented-control`
|
|
544
|
+
- `segmented-control-equal`
|
|
545
|
+
- `segmented-control-input`
|
|
546
|
+
- `segmented-control-option`
|
|
543
547
|
- `skeleton`
|
|
544
548
|
- `skeleton-aspect-square`
|
|
545
549
|
- `skeleton-aspect-video`
|
package/package.json
CHANGED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
@use '../layers.scss';
|
|
2
|
+
@use './button.scss';
|
|
3
|
+
|
|
4
|
+
@layer components {
|
|
5
|
+
.segmented-control {
|
|
6
|
+
--segmented-control-gap: var(--spacer-1);
|
|
7
|
+
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
flex-wrap: wrap;
|
|
10
|
+
gap: var(--segmented-control-gap);
|
|
11
|
+
max-inline-size: 100%;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.segmented-control-option {
|
|
15
|
+
position: relative;
|
|
16
|
+
display: flex;
|
|
17
|
+
min-inline-size: 0;
|
|
18
|
+
|
|
19
|
+
> .btn {
|
|
20
|
+
flex: 1;
|
|
21
|
+
min-inline-size: 0;
|
|
22
|
+
overflow-wrap: anywhere;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.segmented-control-input {
|
|
27
|
+
// Keep the native radio focusable and available to forms and assistive technology.
|
|
28
|
+
position: absolute;
|
|
29
|
+
inset-block-start: 0;
|
|
30
|
+
inset-inline-start: 0;
|
|
31
|
+
inline-size: 1px;
|
|
32
|
+
block-size: 1px;
|
|
33
|
+
padding: 0;
|
|
34
|
+
margin: 0;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
clip-path: inset(50%);
|
|
37
|
+
white-space: nowrap;
|
|
38
|
+
border: 0;
|
|
39
|
+
|
|
40
|
+
&:checked + .btn {
|
|
41
|
+
color: var(--button-on-color);
|
|
42
|
+
background-color: var(--button-surface-color);
|
|
43
|
+
border-color: var(--button-surface-color);
|
|
44
|
+
text-decoration: underline;
|
|
45
|
+
text-underline-offset: 0.2em;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&:focus-visible + .btn {
|
|
49
|
+
outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
|
|
50
|
+
var(--button-focus-outline-color);
|
|
51
|
+
outline-offset: var(--button-focus-outline-offset);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:disabled + .btn {
|
|
55
|
+
color: var(--button-disabled-text-color);
|
|
56
|
+
background-color: var(--button-disabled-bg-color);
|
|
57
|
+
border-color: var(--button-disabled-border-color);
|
|
58
|
+
cursor: not-allowed;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.segmented-control-equal {
|
|
63
|
+
display: flex;
|
|
64
|
+
|
|
65
|
+
> .segmented-control-option {
|
|
66
|
+
flex: 1 1 0;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@media (forced-colors: active) {
|
|
71
|
+
.segmented-control-input {
|
|
72
|
+
&:checked + .btn {
|
|
73
|
+
forced-color-adjust: none;
|
|
74
|
+
color: HighlightText;
|
|
75
|
+
background-color: Highlight;
|
|
76
|
+
border-color: Highlight;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&:focus-visible + .btn {
|
|
80
|
+
outline-color: Highlight;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&:disabled + .btn {
|
|
84
|
+
color: GrayText;
|
|
85
|
+
background-color: Canvas;
|
|
86
|
+
border-color: GrayText;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
package/scss/index.scss
CHANGED
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
@forward './components/popover.scss';
|
|
49
49
|
@forward './components/progress.scss';
|
|
50
50
|
@forward './components/range-slider.scss';
|
|
51
|
+
@forward './components/segmented-control.scss';
|
|
51
52
|
@forward './components/skeleton.scss';
|
|
52
53
|
@forward './components/stepper.scss';
|
|
53
54
|
@forward './components/table.scss';
|