@oardi/css-utils 0.69.0 → 0.71.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/readme.md +3 -16
- package/scss/components/chip.scss +29 -1
- package/scss/components/expansion-panel.scss +1 -1
- package/scss/components/form.scss +0 -2
- package/scss/components/icon-button.scss +0 -3
- package/scss/index.scss +1 -0
- package/scss/layers.scss +1 -0
- package/scss/reboot.scss +2 -6
- package/scss/variables.scss +7 -0
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -25,29 +25,16 @@ CSS Utils provides utility classes, responsive helpers and reusable component st
|
|
|
25
25
|
npm i @oardi/css-utils
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
### Create a layer order
|
|
29
|
-
|
|
30
|
-
To ensure correct cascade layer ordering, create a `layers.scss` file:
|
|
31
|
-
|
|
32
|
-
```scss
|
|
33
|
-
@layer reset, base, components, utilities;
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
Import it before the library styles:
|
|
37
|
-
|
|
38
|
-
```scss
|
|
39
|
-
@use 'layers.scss';
|
|
40
|
-
// ...
|
|
41
|
-
```
|
|
42
|
-
|
|
43
28
|
### Import the library
|
|
44
29
|
|
|
45
|
-
|
|
30
|
+
Load the full library once in your global stylesheet:
|
|
46
31
|
|
|
47
32
|
```scss
|
|
48
33
|
@use '@oardi/css-utils/scss/index.scss';
|
|
49
34
|
```
|
|
50
35
|
|
|
36
|
+
CSS Utils includes its cascade order automatically: `reset`, `base`, `components`, then `utilities`. This lets utility classes adjust component styles without additional setup.
|
|
37
|
+
|
|
51
38
|
## Usage
|
|
52
39
|
|
|
53
40
|
### Utility classes
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
--chip-padding-x: var(--spacer-2);
|
|
14
14
|
--chip-border-radius: 9999px;
|
|
15
15
|
--chip-border-width: var(--border-width);
|
|
16
|
+
--chip-action-size: 1.5rem;
|
|
16
17
|
|
|
17
18
|
--chip-highlight: var(--bg-highlight);
|
|
18
19
|
|
|
@@ -55,7 +56,8 @@
|
|
|
55
56
|
border-color: var(--chip-highlight);
|
|
56
57
|
}
|
|
57
58
|
|
|
58
|
-
&:has(> i.icon:last-child)
|
|
59
|
+
&:has(> i.icon:last-child),
|
|
60
|
+
&:has(> .chip-action:last-child) {
|
|
59
61
|
padding-inline-end: 0;
|
|
60
62
|
}
|
|
61
63
|
|
|
@@ -69,6 +71,32 @@
|
|
|
69
71
|
padding: 0;
|
|
70
72
|
}
|
|
71
73
|
}
|
|
74
|
+
|
|
75
|
+
.chip-action {
|
|
76
|
+
display: inline-flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
flex-shrink: 0;
|
|
80
|
+
width: var(--chip-action-size);
|
|
81
|
+
height: var(--chip-action-size);
|
|
82
|
+
padding: 0;
|
|
83
|
+
border: 0;
|
|
84
|
+
border-radius: var(--chip-border-radius);
|
|
85
|
+
background-color: transparent;
|
|
86
|
+
color: inherit;
|
|
87
|
+
fill: currentColor;
|
|
88
|
+
line-height: 1;
|
|
89
|
+
|
|
90
|
+
&:hover {
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&:focus-visible {
|
|
95
|
+
outline: var(--focus-outline-width) var(--focus-outline-style)
|
|
96
|
+
var(--focus-outline-color);
|
|
97
|
+
outline-offset: var(--focus-offset);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
72
100
|
}
|
|
73
101
|
|
|
74
102
|
@each $name, $value in map.get(theme.$theme, colors) {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
--expansion-panel-transition-duration: var(--transition-duration);
|
|
35
35
|
--expansion-panel-transition-easing: var(--transition-easing);
|
|
36
|
-
--expansion-panel-content-transition-duration:
|
|
36
|
+
--expansion-panel-content-transition-duration: var(--transition-duration);
|
|
37
37
|
|
|
38
38
|
color: var(--text-color);
|
|
39
39
|
background-color: var(--expansion-panel-bg-color);
|
|
@@ -285,7 +285,6 @@
|
|
|
285
285
|
background-color: var(--form-check-disabled-bg-color);
|
|
286
286
|
border-color: var(--form-check-disabled-border-color);
|
|
287
287
|
|
|
288
|
-
& + .form-label,
|
|
289
288
|
& + .form-label {
|
|
290
289
|
color: var(--disabled-text-color);
|
|
291
290
|
cursor: not-allowed;
|
|
@@ -453,7 +452,6 @@
|
|
|
453
452
|
background-color: var(--form-switch-disabled-thumb-bg-color);
|
|
454
453
|
}
|
|
455
454
|
|
|
456
|
-
& + .form-label,
|
|
457
455
|
& + .form-label {
|
|
458
456
|
color: var(--disabled-text-color);
|
|
459
457
|
cursor: not-allowed;
|
|
@@ -108,7 +108,6 @@
|
|
|
108
108
|
|
|
109
109
|
&:focus-visible,
|
|
110
110
|
&.is-focus-visible {
|
|
111
|
-
outline-color: rgba(var(--icon-button-color-rgb), 0.5);
|
|
112
111
|
outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
|
|
113
112
|
rgba(var(--icon-button-color-rgb), 0.5);
|
|
114
113
|
}
|
|
@@ -128,7 +127,6 @@
|
|
|
128
127
|
|
|
129
128
|
&:focus-visible,
|
|
130
129
|
&.is-focus-visible {
|
|
131
|
-
outline-color: rgba(var(--icon-button-color-rgb), 0.5);
|
|
132
130
|
outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
|
|
133
131
|
rgba(var(--icon-button-color-rgb), 0.5);
|
|
134
132
|
background-color: var(--icon-button-highlight);
|
|
@@ -155,7 +153,6 @@
|
|
|
155
153
|
|
|
156
154
|
&:focus-visible,
|
|
157
155
|
&.is-focus-visible {
|
|
158
|
-
outline-color: rgba(var(--icon-button-color-rgb), 0.5);
|
|
159
156
|
outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
|
|
160
157
|
rgba(var(--icon-button-color-rgb), 0.5);
|
|
161
158
|
}
|
package/scss/index.scss
CHANGED
package/scss/layers.scss
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer reset, base, components, utilities;
|
package/scss/reboot.scss
CHANGED
|
@@ -90,6 +90,8 @@
|
|
|
90
90
|
[type='submit'],
|
|
91
91
|
button {
|
|
92
92
|
-webkit-appearance: button;
|
|
93
|
+
// Kept for the established cross-browser button normalization.
|
|
94
|
+
// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated
|
|
93
95
|
appearance: button;
|
|
94
96
|
}
|
|
95
97
|
|
|
@@ -128,10 +130,4 @@
|
|
|
128
130
|
ul {
|
|
129
131
|
padding-left: 1rem;
|
|
130
132
|
}
|
|
131
|
-
|
|
132
|
-
@media (prefers-reduced-motion: reduce) {
|
|
133
|
-
:root {
|
|
134
|
-
--transition-duration: 0ms;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
133
|
}
|
package/scss/variables.scss
CHANGED