@rogieking/figui3 1.8.4 → 1.8.5
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/components.css +35 -0
- package/example.html +15 -1
- package/package.json +1 -1
package/components.css
CHANGED
|
@@ -1883,6 +1883,41 @@ fig-slider {
|
|
|
1883
1883
|
background-color: transparent;
|
|
1884
1884
|
}
|
|
1885
1885
|
|
|
1886
|
+
&:hover,
|
|
1887
|
+
&:focus-within {
|
|
1888
|
+
fig-input-text {
|
|
1889
|
+
height: auto;
|
|
1890
|
+
}
|
|
1891
|
+
}
|
|
1892
|
+
}
|
|
1893
|
+
&[variant="neue"] {
|
|
1894
|
+
--slider-height: 0.375rem;
|
|
1895
|
+
--slider-thumb-size: 0.75rem;
|
|
1896
|
+
--slider-tick-size: calc(var(--slider-height) / 2);
|
|
1897
|
+
--handle-transition: none;
|
|
1898
|
+
--slider-transition: none;
|
|
1899
|
+
--slider-handle-shadow: inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
|
|
1900
|
+
var(--handle-color),
|
|
1901
|
+
0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
|
|
1902
|
+
var(--figma-elevation-200);
|
|
1903
|
+
|
|
1904
|
+
background-color: var(--figma-color-bg-secondary);
|
|
1905
|
+
border-radius: var(--radius-medium);
|
|
1906
|
+
padding-left: 0.5rem;
|
|
1907
|
+
|
|
1908
|
+
.fig-slider-input-container {
|
|
1909
|
+
height: var(--slider-height);
|
|
1910
|
+
position: relative;
|
|
1911
|
+
display: block;
|
|
1912
|
+
width: 100%;
|
|
1913
|
+
box-shadow: none;
|
|
1914
|
+
background-color: var(--figma-color-bg-tertiary);
|
|
1915
|
+
}
|
|
1916
|
+
fig-input-text {
|
|
1917
|
+
border-top-left-radius: 0;
|
|
1918
|
+
border-bottom-left-radius: 0;
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1886
1921
|
&:hover,
|
|
1887
1922
|
&:focus-within {
|
|
1888
1923
|
fig-input-text {
|
package/example.html
CHANGED
|
@@ -28,12 +28,24 @@
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
|
+
|
|
32
|
+
|
|
31
33
|
<fig-input-text disabled
|
|
32
34
|
value="Disabled"><span slot="append">%</span></fig-input-text>
|
|
33
35
|
|
|
34
36
|
|
|
37
|
+
<fig-slider min="1"
|
|
38
|
+
max="100"
|
|
39
|
+
value="50"
|
|
40
|
+
step="1"
|
|
41
|
+
text="true"
|
|
42
|
+
units="%"
|
|
43
|
+
variant="neue">
|
|
44
|
+
</fig-slider>
|
|
45
|
+
|
|
46
|
+
|
|
35
47
|
<fig-popover action="manual"
|
|
36
|
-
open="
|
|
48
|
+
open="false"
|
|
37
49
|
size="large">
|
|
38
50
|
<fig-button>
|
|
39
51
|
Hover me
|
|
@@ -535,6 +547,8 @@
|
|
|
535
547
|
Close
|
|
536
548
|
</fig-button>
|
|
537
549
|
</fig-tooltip>
|
|
550
|
+
<fig-input-text placeholder="Enter text"
|
|
551
|
+
value="Hello"></fig-input-text>
|
|
538
552
|
<p>Some content here</p>
|
|
539
553
|
<fig-field direction="horizontal">
|
|
540
554
|
<label for="colorLevels">Color Levels</label>
|