@oardi/css-utils 0.38.0 → 0.38.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.
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -40,12 +40,12 @@ This will render a centered text:
|
|
|
40
40
|
### Use predefined component classes
|
|
41
41
|
|
|
42
42
|
```html
|
|
43
|
-
<button class="btn btn-primary">some button text</button>
|
|
43
|
+
<button class="btn btn-solid btn-primary">some button text</button>
|
|
44
44
|
```
|
|
45
45
|
|
|
46
46
|
will render as:
|
|
47
47
|
|
|
48
|
-
<button class="btn btn-primary">some button text</button>
|
|
48
|
+
<button class="btn btn-solid btn-primary">some button text</button>
|
|
49
49
|
|
|
50
50
|
### Maintainer
|
|
51
51
|
|
|
@@ -36,8 +36,7 @@
|
|
|
36
36
|
transition:
|
|
37
37
|
color var(--button-transition-duration),
|
|
38
38
|
background-color var(--button-transition-duration),
|
|
39
|
-
border-color var(--button-transition-duration)
|
|
40
|
-
outline-color var(--button-transition-duration);
|
|
39
|
+
border-color var(--button-transition-duration);
|
|
41
40
|
|
|
42
41
|
-webkit-tap-highlight-color: transparent;
|
|
43
42
|
touch-action: manipulation; // ios fix
|
|
@@ -57,9 +56,7 @@
|
|
|
57
56
|
}
|
|
58
57
|
|
|
59
58
|
&:disabled,
|
|
60
|
-
&[disabled]
|
|
61
|
-
&[disabled]:hover,
|
|
62
|
-
&[disabled]:focus {
|
|
59
|
+
&[disabled] {
|
|
63
60
|
cursor: not-allowed;
|
|
64
61
|
pointer-events: none;
|
|
65
62
|
box-shadow: none;
|
|
@@ -87,13 +84,14 @@
|
|
|
87
84
|
border-color: var(--button-color);
|
|
88
85
|
|
|
89
86
|
&:hover,
|
|
87
|
+
&.active,
|
|
90
88
|
&:active {
|
|
91
89
|
background-color: var(--button-color-hover);
|
|
92
90
|
border-color: var(--button-color-hover);
|
|
93
91
|
}
|
|
94
92
|
|
|
95
93
|
&:focus-visible {
|
|
96
|
-
outline: var(--button-focus-outline-width)
|
|
94
|
+
outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
|
|
@@ -104,6 +102,7 @@
|
|
|
104
102
|
border-color: var(--button-color);
|
|
105
103
|
|
|
106
104
|
&:hover,
|
|
105
|
+
&.active,
|
|
107
106
|
&:active {
|
|
108
107
|
color: var(--button-on-color);
|
|
109
108
|
fill: var(--button-on-color);
|
|
@@ -114,7 +113,7 @@
|
|
|
114
113
|
&:focus-visible {
|
|
115
114
|
color: var(--button-on-color);
|
|
116
115
|
fill: var(--button-on-color);
|
|
117
|
-
outline: var(--button-focus-outline-width)
|
|
116
|
+
outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
|
|
118
117
|
background-color: var(--button-color);
|
|
119
118
|
border-color: var(--button-color);
|
|
120
119
|
}
|
|
@@ -129,12 +128,13 @@
|
|
|
129
128
|
border-color: transparent;
|
|
130
129
|
|
|
131
130
|
&:hover,
|
|
131
|
+
&.active,
|
|
132
132
|
&:active {
|
|
133
133
|
background-color: var(--button-highlight);
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
&:focus-visible {
|
|
137
|
-
outline: var(--button-focus-outline-width)
|
|
137
|
+
outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
|