GitList
Browse code

build

Louis authored on25/08/2018 23:51:28
Showing1 changed files
node_modules/pebble-clay/src/styles/clay/components/checkboxgroup.scss
History View file @c8224e8
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,70 @@
1 
+@import "bourbon";
2 
+@import "clay";
3 
+
4 
+.component-checkbox {
5 
+
6 
+  display: block;
7 
+
8 
+  .section & {
9 
+    padding-right: $item-spacing-h / 2;
10 
+  }
11 
+
12 
+  > .label {
13 
+    display: block;
14 
+    padding-bottom: $item-spacing-v / 2;
15 
+  }
16 
+
17 
+  .checkbox-group {
18 
+
19 
+    padding-bottom: $item-spacing-v / 2;
20 
+
21 
+    label {
22 
+      padding: $item-spacing-v / 2 $item-spacing-h / 2;
23 
+    }
24 
+
25 
+    .label {
26 
+      font-size: 0.9em;
27 
+    }
28 
+
29 
+    input {
30 
+      opacity: 0;
31 
+      position: absolute;
32 
+    }
33 
+
34 
+    i {
35 
+      display: block;
36 
+      position: relative;
37 
+      border-radius: $border-radius;
38 
+      width: $base-height;
39 
+      height: $base-height;
40 
+      border: rem(2px) solid $color-gray-7;
41 
+      flex-shrink: 0;
42 
+    }
43 
+
44 
+    input:checked + i {
45 
+      border-color: $color-orange;
46 
+      background: $color-orange;
47 
+
48 
+      &:after {
49 
+        content: '';
50 
+        box-sizing: border-box;
51 
+        transform: rotate(45deg);
52 
+        position: absolute;
53 
+        left: 0.35rem;
54 
+        top: -0.05rem;
55 
+        display: block;
56 
+        width: 0.5rem;
57 
+        height: 1rem;
58 
+        border: 0 solid $color-white;
59 
+        border-right-width: rem(2px);
60 
+        border-bottom-width: rem(2px);
61 
+
62 
+      }
63 
+    }
64 
+  }
65 
+
66 
+  .description {
67 
+    padding-left: 0;
68 
+    padding-right: 0;
69 
+  }
70 
+}