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/toggle.scss
History View file @f21af81
... ... 
@@ -1,55 +1,55 @@
1 
-@import "clay";
2 
-
3 
-.component-toggle {
4 
-
5 
-  $slide-height: $base-height * 0.75;
6 
-  $slide-width: $small-component-width;
7 
-  $marker-diameter: $base-height;
8 
-
9 
-  .section & {
10 
-    padding: 0;
11 
-  }
12 
-
13 
-  input {
14 
-    display: none; // @todo make sure this doesn't mess up interactivity on iOS
15 
-  }
16 
-
17 
-  .graphic {
18 
-    display: inline-block;
19 
-    position: relative;
20 
-
21 
-    .slide {
22 
-      display:block;
23 
-      border-radius: $slide-height;
24 
-      height: $slide-height;
25 
-      width: $slide-width;
26 
-      background: $color-gray-1;
27 
-      transition: background-color 150ms linear;
28 
-    }
29 
-
30 
-    .marker {
31 
-      background: $color-gray-10;
32 
-      width: $marker-diameter;
33 
-      height: $marker-diameter;
34 
-      border-radius: $marker-diameter;
35 
-      position: absolute;
36 
-      left: 0;
37 
-      display: block;
38 
-      top: ($marker-diameter - $slide-height) / 2 * -1;
39 
-      transition: transform 150ms linear;
40 
-      box-shadow: $box-shadow-small-components;
41 
-    }
42 
-  }
43 
-
44 
-  input:checked + .graphic {
45 
-    .slide {
46 
-      background: $color-orange-dark;
47 
-    }
48 
-
49 
-    .marker {
50 
-      background: $color-orange;
51 
-      transform: translateX($slide-width - $marker-diameter);
52 
-    }
53 
-  }
54 
-
55 
-}
1 
+@import "clay";
2 
+
3 
+.component-toggle {
4 
+
5 
+  $slide-height: $base-height * 0.75;
6 
+  $slide-width: $small-component-width;
7 
+  $marker-diameter: $base-height;
8 
+
9 
+  .section & {
10 
+    padding: 0;
11 
+  }
12 
+
13 
+  input {
14 
+    display: none; // @todo make sure this doesn't mess up interactivity on iOS
15 
+  }
16 
+
17 
+  .graphic {
18 
+    display: inline-block;
19 
+    position: relative;
20 
+
21 
+    .slide {
22 
+      display:block;
23 
+      border-radius: $slide-height;
24 
+      height: $slide-height;
25 
+      width: $slide-width;
26 
+      background: $color-gray-1;
27 
+      transition: background-color 150ms linear;
28 
+    }
29 
+
30 
+    .marker {
31 
+      background: $color-gray-10;
32 
+      width: $marker-diameter;
33 
+      height: $marker-diameter;
34 
+      border-radius: $marker-diameter;
35 
+      position: absolute;
36 
+      left: 0;
37 
+      display: block;
38 
+      top: ($marker-diameter - $slide-height) / 2 * -1;
39 
+      transition: transform 150ms linear;
40 
+      box-shadow: $box-shadow-small-components;
41 
+    }
42 
+  }
43 
+
44 
+  input:checked + .graphic {
45 
+    .slide {
46 
+      background: $color-orange-dark;
47 
+    }
48 
+
49 
+    .marker {
50 
+      background: $color-orange;
51 
+      transform: translateX($slide-width - $marker-diameter);
52 
+    }
53 
+  }
54 
+
55 
+}
Browse code

init commit

louis.jonget authored on30/09/2022 18:58:18
Showing1 changed files
node_modules/pebble-clay/src/styles/clay/components/toggle.scss
History View file @75d78e2
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,55 @@
1 
+@import "clay";
2 
+
3 
+.component-toggle {
4 
+
5 
+  $slide-height: $base-height * 0.75;
6 
+  $slide-width: $small-component-width;
7 
+  $marker-diameter: $base-height;
8 
+
9 
+  .section & {
10 
+    padding: 0;
11 
+  }
12 
+
13 
+  input {
14 
+    display: none; // @todo make sure this doesn't mess up interactivity on iOS
15 
+  }
16 
+
17 
+  .graphic {
18 
+    display: inline-block;
19 
+    position: relative;
20 
+
21 
+    .slide {
22 
+      display:block;
23 
+      border-radius: $slide-height;
24 
+      height: $slide-height;
25 
+      width: $slide-width;
26 
+      background: $color-gray-1;
27 
+      transition: background-color 150ms linear;
28 
+    }
29 
+
30 
+    .marker {
31 
+      background: $color-gray-10;
32 
+      width: $marker-diameter;
33 
+      height: $marker-diameter;
34 
+      border-radius: $marker-diameter;
35 
+      position: absolute;
36 
+      left: 0;
37 
+      display: block;
38 
+      top: ($marker-diameter - $slide-height) / 2 * -1;
39 
+      transition: transform 150ms linear;
40 
+      box-shadow: $box-shadow-small-components;
41 
+    }
42 
+  }
43 
+
44 
+  input:checked + .graphic {
45 
+    .slide {
46 
+      background: $color-orange-dark;
47 
+    }
48 
+
49 
+    .marker {
50 
+      background: $color-orange;
51 
+      transform: translateX($slide-width - $marker-diameter);
52 
+    }
53 
+  }
54 
+
55 
+}