@skewedaspect/sleekspace-ui 0.7.0 → 0.7.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/dist/sleekspace-ui.css +16 -16
- package/package.json +1 -1
- package/src/styles/components/_slider.scss +4 -4
- package/web-types.json +1 -1
package/dist/sleekspace-ui.css
CHANGED
|
@@ -8724,12 +8724,12 @@
|
|
|
8724
8724
|
flex-grow: 1;
|
|
8725
8725
|
background: var(--sk-slider-track-bg);
|
|
8726
8726
|
}
|
|
8727
|
-
.sk-horizontal .sk-slider-track {
|
|
8727
|
+
.sk-slider.sk-horizontal .sk-slider-track {
|
|
8728
8728
|
height: var(--sk-slider-track-size);
|
|
8729
8729
|
width: 100%;
|
|
8730
8730
|
}
|
|
8731
8731
|
@supports (corner-shape: bevel) {
|
|
8732
|
-
.sk-horizontal .sk-slider-track {
|
|
8732
|
+
.sk-slider.sk-horizontal .sk-slider-track {
|
|
8733
8733
|
border: var(--sk-border-width-thin) solid oklch(from var(--sk-slider-color-base) l c h/0.3);
|
|
8734
8734
|
border-top-left-radius: calc(var(--sk-slider-track-size) * 0.6);
|
|
8735
8735
|
border-top-right-radius: 0;
|
|
@@ -8739,11 +8739,11 @@
|
|
|
8739
8739
|
}
|
|
8740
8740
|
}
|
|
8741
8741
|
@supports not (corner-shape: bevel) {
|
|
8742
|
-
.sk-horizontal .sk-slider-track {
|
|
8742
|
+
.sk-slider.sk-horizontal .sk-slider-track {
|
|
8743
8743
|
border: none;
|
|
8744
8744
|
clip-path: polygon(calc(var(--sk-slider-track-size) * 0.6) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-slider-track-size) * 0.6)), calc(100% - calc(var(--sk-slider-track-size) * 0.6)) 100%, 0% 100%, 0% calc(var(--sk-slider-track-size) * 0.6));
|
|
8745
8745
|
}
|
|
8746
|
-
.sk-horizontal .sk-slider-track::before {
|
|
8746
|
+
.sk-slider.sk-horizontal .sk-slider-track::before {
|
|
8747
8747
|
content: "";
|
|
8748
8748
|
position: absolute;
|
|
8749
8749
|
top: 0;
|
|
@@ -8755,12 +8755,12 @@
|
|
|
8755
8755
|
clip-path: polygon(calc(var(--sk-slider-track-size) * 0.6) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-slider-track-size) * 0.6)), calc(100% - calc(var(--sk-slider-track-size) * 0.6)) 100%, 0% 100%, 0% calc(var(--sk-slider-track-size) * 0.6), calc(var(--sk-slider-track-size) * 0.6) 0%, calc(calc(var(--sk-slider-track-size) * 0.6) + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(calc(var(--sk-slider-track-size) * 0.6) + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - calc(var(--sk-slider-track-size) * 0.6) - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - calc(var(--sk-slider-track-size) * 0.6) - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(calc(var(--sk-slider-track-size) * 0.6) + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
8756
8756
|
}
|
|
8757
8757
|
}
|
|
8758
|
-
.sk-vertical .sk-slider-track {
|
|
8758
|
+
.sk-slider.sk-vertical .sk-slider-track {
|
|
8759
8759
|
width: var(--sk-slider-track-size);
|
|
8760
8760
|
height: 100%;
|
|
8761
8761
|
}
|
|
8762
8762
|
@supports (corner-shape: bevel) {
|
|
8763
|
-
.sk-vertical .sk-slider-track {
|
|
8763
|
+
.sk-slider.sk-vertical .sk-slider-track {
|
|
8764
8764
|
border: var(--sk-border-width-thin) solid oklch(from var(--sk-slider-color-base) l c h/0.3);
|
|
8765
8765
|
border-top-left-radius: calc(var(--sk-slider-track-size) * 0.6);
|
|
8766
8766
|
border-top-right-radius: 0;
|
|
@@ -8770,11 +8770,11 @@
|
|
|
8770
8770
|
}
|
|
8771
8771
|
}
|
|
8772
8772
|
@supports not (corner-shape: bevel) {
|
|
8773
|
-
.sk-vertical .sk-slider-track {
|
|
8773
|
+
.sk-slider.sk-vertical .sk-slider-track {
|
|
8774
8774
|
border: none;
|
|
8775
8775
|
clip-path: polygon(calc(var(--sk-slider-track-size) * 0.6) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-slider-track-size) * 0.6)), calc(100% - calc(var(--sk-slider-track-size) * 0.6)) 100%, 0% 100%, 0% calc(var(--sk-slider-track-size) * 0.6));
|
|
8776
8776
|
}
|
|
8777
|
-
.sk-vertical .sk-slider-track::before {
|
|
8777
|
+
.sk-slider.sk-vertical .sk-slider-track::before {
|
|
8778
8778
|
content: "";
|
|
8779
8779
|
position: absolute;
|
|
8780
8780
|
top: 0;
|
|
@@ -8791,11 +8791,11 @@
|
|
|
8791
8791
|
background: var(--sk-slider-color-base);
|
|
8792
8792
|
background-image: linear-gradient(to bottom, oklch(from var(--sk-slider-color-base) calc(l * 1.15) c h/0.3), transparent 40%, oklch(from var(--sk-slider-color-base) calc(l * 0.85) c h/0.2));
|
|
8793
8793
|
}
|
|
8794
|
-
.sk-horizontal .sk-slider-range {
|
|
8794
|
+
.sk-slider.sk-horizontal .sk-slider-range {
|
|
8795
8795
|
height: 100%;
|
|
8796
8796
|
}
|
|
8797
8797
|
@supports (corner-shape: bevel) {
|
|
8798
|
-
.sk-horizontal .sk-slider-range {
|
|
8798
|
+
.sk-slider.sk-horizontal .sk-slider-range {
|
|
8799
8799
|
border: 0 solid transparent;
|
|
8800
8800
|
border-top-left-radius: calc(var(--sk-slider-track-size) * 0.6);
|
|
8801
8801
|
border-top-right-radius: 0;
|
|
@@ -8805,11 +8805,11 @@
|
|
|
8805
8805
|
}
|
|
8806
8806
|
}
|
|
8807
8807
|
@supports not (corner-shape: bevel) {
|
|
8808
|
-
.sk-horizontal .sk-slider-range {
|
|
8808
|
+
.sk-slider.sk-horizontal .sk-slider-range {
|
|
8809
8809
|
border: none;
|
|
8810
8810
|
clip-path: polygon(calc(var(--sk-slider-track-size) * 0.6) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-slider-track-size) * 0.6)), calc(100% - calc(var(--sk-slider-track-size) * 0.6)) 100%, 0% 100%, 0% calc(var(--sk-slider-track-size) * 0.6));
|
|
8811
8811
|
}
|
|
8812
|
-
.sk-horizontal .sk-slider-range::before {
|
|
8812
|
+
.sk-slider.sk-horizontal .sk-slider-range::before {
|
|
8813
8813
|
content: "";
|
|
8814
8814
|
position: absolute;
|
|
8815
8815
|
top: 0;
|
|
@@ -8821,11 +8821,11 @@
|
|
|
8821
8821
|
clip-path: polygon(calc(var(--sk-slider-track-size) * 0.6) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-slider-track-size) * 0.6)), calc(100% - calc(var(--sk-slider-track-size) * 0.6)) 100%, 0% 100%, 0% calc(var(--sk-slider-track-size) * 0.6), calc(var(--sk-slider-track-size) * 0.6) 0%, calc(calc(var(--sk-slider-track-size) * 0.6) + 0) 0, 0 calc(calc(var(--sk-slider-track-size) * 0.6) + 0), 0 calc(100% - 0), calc(100% - calc(var(--sk-slider-track-size) * 0.6) - 0) calc(100% - 0), calc(100% - 0) calc(100% - calc(var(--sk-slider-track-size) * 0.6) - 0), calc(100% - 0) 0, calc(calc(var(--sk-slider-track-size) * 0.6) + 0) 0);
|
|
8822
8822
|
}
|
|
8823
8823
|
}
|
|
8824
|
-
.sk-vertical .sk-slider-range {
|
|
8824
|
+
.sk-slider.sk-vertical .sk-slider-range {
|
|
8825
8825
|
width: 100%;
|
|
8826
8826
|
}
|
|
8827
8827
|
@supports (corner-shape: bevel) {
|
|
8828
|
-
.sk-vertical .sk-slider-range {
|
|
8828
|
+
.sk-slider.sk-vertical .sk-slider-range {
|
|
8829
8829
|
border: 0 solid transparent;
|
|
8830
8830
|
border-top-left-radius: calc(var(--sk-slider-track-size) * 0.6);
|
|
8831
8831
|
border-top-right-radius: 0;
|
|
@@ -8835,11 +8835,11 @@
|
|
|
8835
8835
|
}
|
|
8836
8836
|
}
|
|
8837
8837
|
@supports not (corner-shape: bevel) {
|
|
8838
|
-
.sk-vertical .sk-slider-range {
|
|
8838
|
+
.sk-slider.sk-vertical .sk-slider-range {
|
|
8839
8839
|
border: none;
|
|
8840
8840
|
clip-path: polygon(calc(var(--sk-slider-track-size) * 0.6) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-slider-track-size) * 0.6)), calc(100% - calc(var(--sk-slider-track-size) * 0.6)) 100%, 0% 100%, 0% calc(var(--sk-slider-track-size) * 0.6));
|
|
8841
8841
|
}
|
|
8842
|
-
.sk-vertical .sk-slider-range::before {
|
|
8842
|
+
.sk-slider.sk-vertical .sk-slider-range::before {
|
|
8843
8843
|
content: "";
|
|
8844
8844
|
position: absolute;
|
|
8845
8845
|
top: 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skewedaspect/sleekspace-ui",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/sleekspace-ui.umd.js",
|
|
@@ -126,7 +126,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
|
|
|
126
126
|
flex-grow: 1;
|
|
127
127
|
background: var(--sk-slider-track-bg);
|
|
128
128
|
|
|
129
|
-
.sk-horizontal &
|
|
129
|
+
.sk-slider.sk-horizontal &
|
|
130
130
|
{
|
|
131
131
|
height: var(--sk-slider-track-size);
|
|
132
132
|
width: 100%;
|
|
@@ -140,7 +140,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
|
|
|
140
140
|
);
|
|
141
141
|
}
|
|
142
142
|
|
|
143
|
-
.sk-vertical &
|
|
143
|
+
.sk-slider.sk-vertical &
|
|
144
144
|
{
|
|
145
145
|
width: var(--sk-slider-track-size);
|
|
146
146
|
height: 100%;
|
|
@@ -172,7 +172,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
|
|
|
172
172
|
oklch(from var(--sk-slider-color-base) calc(l * 0.85) c h / 0.2)
|
|
173
173
|
);
|
|
174
174
|
|
|
175
|
-
.sk-horizontal &
|
|
175
|
+
.sk-slider.sk-horizontal &
|
|
176
176
|
{
|
|
177
177
|
height: 100%;
|
|
178
178
|
|
|
@@ -185,7 +185,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
|
|
|
185
185
|
);
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
.sk-vertical &
|
|
188
|
+
.sk-slider.sk-vertical &
|
|
189
189
|
{
|
|
190
190
|
width: 100%;
|
|
191
191
|
|