GitList
Browse code

init v1

Louis Jonget authored on13/05/2024 20:43:46
Showing1 changed files
node_modules/pebble-clay/src/styles/clay/components/slider.scss
History View file @44135de
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,127 @@
1 
+@import "clay";
2 
+
3 
+.component-slider {
4 
+
5 
+  .section & {
6 
+    padding: 0;
7 
+  }
8 
+
9 
+  label {
10 
+    display: block;
11 
+  }
12 
+
13 
+  .label-container {
14 
+    display: flex;
15 
+    align-items: center;
16 
+    width: 100%;
17 
+    padding-bottom: $item-spacing-v;
18 
+  }
19 
+
20 
+  .label {
21 
+    flex: 1;
22 
+    min-width: 1rem;
23 
+    display: block;
24 
+    padding-right: $item-spacing-h;
25 
+  }
26 
+
27 
+  .value-wrap {
28 
+    display: block;
29 
+    position: relative;
30 
+  }
31 
+
32 
+  .value,
33 
+  .value-pad {
34 
+    display: block;
35 
+    background: $color-gray-2;
36 
+    border-radius: $border-radius;
37 
+    padding: $item-spacing-v / 2 $item-spacing-h / 2;
38 
+    border: none;
39 
+    vertical-align: baseline;
40 
+    color: $color-white;
41 
+    text-align: right;
42 
+    margin: 0;
43 
+    min-width: 1rem;
44 
+  }
45 
+
46 
+  .value-pad {
47 
+    visibility: hidden;
48 
+
49 
+    &:before {
50 
+      content: ' ';
51 
+      display: inline-block;
52 
+    }
53 
+  }
54 
+
55 
+  .value {
56 
+    max-width: 100%;
57 
+    position: absolute;
58 
+    left:0;
59 
+    top:0
60 
+  }
61 
+
62 
+  .input-wrap {
63 
+    padding: 0 $item-spacing-h $item-spacing-v;
64 
+  }
65 
+
66 
+  .input {
67 
+    $track-height: rem(3px);
68 
+
69 
+    display: block;
70 
+    position: relative;
71 
+    min-width: 100%;
72 
+    height: $base-height;
73 
+    overflow: hidden;
74 
+    margin-left: 0;
75 
+
76 
+    &:before {
77 
+      content: '';
78 
+      display: block;
79 
+      position: absolute;
80 
+      height: $track-height;
81 
+      background: $color-gray-6;
82 
+      width: 100%;
83 
+      top: $base-height / 2 - $track-height / 2;
84 
+    }
85 
+
86 
+    .slider {
87 
+      display: block;
88 
+      width: 100%;
89 
+      appearance: none;
90 
+      position: relative;
91 
+      height: $base-height;
92 
+      margin: 0;
93 
+      background-color: transparent;
94 
+
95 
+      &:focus {
96 
+        outline: none;
97 
+      }
98 
+
99 
+      &::-webkit-slider-runnable-track {
100 
+        border: none;
101 
+        height: $base-height;
102 
+        width: 100%;
103 
+        background-color: transparent;
104 
+      }
105 
+
106 
+      &::-webkit-slider-thumb {
107 
+        appearance: none;
108 
+        position: relative;
109 
+        height: $base-height;
110 
+        width: $base-height;
111 
+        background-color: $color-orange;
112 
+        border-radius: 50%;
113 
+
114 
+        &:before {
115 
+          content: "";
116 
+          position: absolute;
117 
+          left: -1000px;
118 
+          top: $base-height / 2 - $track-height / 2;
119 
+          height: $track-height;
120 
+          width: 1001px;
121 
+          background: $color-orange;
122 
+        }
123 
+      }
124 
+    }
125 
+  }
126 
+
127 
+}