GitList
Browse code

new build from home

Louis Jonget authored on18/03/2023 14:55:56
Showing1 changed files
node_modules/pebble-clay/src/styles/clay/components/slider.scss
History View file @f21af81
... ... 
@@ -1,127 +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 
-}
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 
+}
Browse code

init commit

louis.jonget authored on30/09/2022 18:58:18
Showing1 changed files
node_modules/pebble-clay/src/styles/clay/components/slider.scss
History View file @75d78e2
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 
+}