@oardi/css-utils 0.128.0 → 0.129.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 +15 -1
- package/css-utils-reference.md +6 -2
- package/package.json +1 -1
- package/scss/borders.scss +69 -0
package/css-utils-manifest.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "@oardi/css-utils",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.129.0",
|
|
4
4
|
"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
|
|
5
5
|
"utilities": {
|
|
6
6
|
"Display": {
|
|
@@ -235,6 +235,19 @@
|
|
|
235
235
|
},
|
|
236
236
|
"Borders": {
|
|
237
237
|
"families": [
|
|
238
|
+
{
|
|
239
|
+
"patterns": ["border-ring-{value}"],
|
|
240
|
+
"values": [
|
|
241
|
+
"accent",
|
|
242
|
+
"animated",
|
|
243
|
+
"error",
|
|
244
|
+
"glow",
|
|
245
|
+
"primary",
|
|
246
|
+
"secondary",
|
|
247
|
+
"success",
|
|
248
|
+
"warning"
|
|
249
|
+
]
|
|
250
|
+
},
|
|
238
251
|
{
|
|
239
252
|
"patterns": ["border-{value}"],
|
|
240
253
|
"values": [
|
|
@@ -249,6 +262,7 @@
|
|
|
249
262
|
"e",
|
|
250
263
|
"error",
|
|
251
264
|
"primary",
|
|
265
|
+
"ring",
|
|
252
266
|
"s",
|
|
253
267
|
"secondary",
|
|
254
268
|
"success",
|
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.129.0`
|
|
7
7
|
- Source: public SCSS entry point and utility configuration
|
|
8
8
|
|
|
9
9
|
## Usage guidance
|
|
@@ -192,7 +192,11 @@ Values: `0` | `1` | `2` | `3` | `4` | `5` | `first` | `last`
|
|
|
192
192
|
|
|
193
193
|
## Borders
|
|
194
194
|
|
|
195
|
-
Values: `
|
|
195
|
+
Values: `accent` | `animated` | `error` | `glow` | `primary` | `secondary` | `success` | `warning`
|
|
196
|
+
|
|
197
|
+
- `border-ring-{value}`
|
|
198
|
+
|
|
199
|
+
Values: `0` | `1` | `2` | `3` | `4` | `5` | `accent` | `b` | `e` | `error` | `primary` | `ring` | `s` | `secondary` | `success` | `t` | `transparent` | `warning`
|
|
196
200
|
|
|
197
201
|
- `border-{value}`
|
|
198
202
|
|
package/package.json
CHANGED
package/scss/borders.scss
CHANGED
|
@@ -4,6 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
$borderWidths: 0, 1, 2, 3, 4, 5;
|
|
6
6
|
|
|
7
|
+
@property --border-ring-angle {
|
|
8
|
+
syntax: '<angle>';
|
|
9
|
+
inherits: false;
|
|
10
|
+
initial-value: 0deg;
|
|
11
|
+
}
|
|
12
|
+
|
|
7
13
|
@layer utilities {
|
|
8
14
|
.border {
|
|
9
15
|
border: var(--border-width) solid var(--border-color);
|
|
@@ -40,4 +46,67 @@ $borderWidths: 0, 1, 2, 3, 4, 5;
|
|
|
40
46
|
.border-transparent {
|
|
41
47
|
--border-color: transparent;
|
|
42
48
|
}
|
|
49
|
+
|
|
50
|
+
.border-ring {
|
|
51
|
+
--border-ring-color: currentColor;
|
|
52
|
+
--border-ring-width: 2px;
|
|
53
|
+
--border-ring-size: 90deg;
|
|
54
|
+
--border-ring-offset: 0px;
|
|
55
|
+
--border-ring-duration: 1.5s;
|
|
56
|
+
--border-ring-glow-blur: 6px;
|
|
57
|
+
--border-ring-glow-opacity: 0.8;
|
|
58
|
+
|
|
59
|
+
position: relative;
|
|
60
|
+
|
|
61
|
+
&::before,
|
|
62
|
+
&.border-ring-glow::after {
|
|
63
|
+
content: '';
|
|
64
|
+
position: absolute;
|
|
65
|
+
inset: calc(var(--border-ring-offset) * -1);
|
|
66
|
+
padding: var(--border-ring-width);
|
|
67
|
+
border-radius: inherit;
|
|
68
|
+
pointer-events: none;
|
|
69
|
+
background: conic-gradient(
|
|
70
|
+
from var(--border-ring-angle),
|
|
71
|
+
var(
|
|
72
|
+
--border-ring-stops,
|
|
73
|
+
var(--border-ring-color) 0 var(--border-ring-size),
|
|
74
|
+
transparent var(--border-ring-size)
|
|
75
|
+
)
|
|
76
|
+
);
|
|
77
|
+
mask:
|
|
78
|
+
linear-gradient(#000 0 0) content-box,
|
|
79
|
+
linear-gradient(#000 0 0);
|
|
80
|
+
mask-composite: exclude;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&.border-ring-glow::after {
|
|
84
|
+
filter: blur(var(--border-ring-glow-blur));
|
|
85
|
+
opacity: var(--border-ring-glow-opacity);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.border-ring-animated::before,
|
|
90
|
+
.border-ring-animated.border-ring-glow::after {
|
|
91
|
+
animation: border-ring-rotate var(--border-ring-duration, 1.5s) linear infinite;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@each $name, $value in map.get(theme.$theme, colors) {
|
|
95
|
+
.border-ring-#{$name} {
|
|
96
|
+
--border-ring-color: var(--#{$name});
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@keyframes border-ring-rotate {
|
|
101
|
+
to {
|
|
102
|
+
--border-ring-angle: 360deg;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@media (prefers-reduced-motion: reduce) {
|
|
107
|
+
.border-ring-animated::before,
|
|
108
|
+
.border-ring-animated.border-ring-glow::after {
|
|
109
|
+
animation: none;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
43
112
|
}
|