Diffstat (limited to 'frontend/delta/scss/web/checkbox.scss') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/scss/web/checkbox.scss | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/frontend/delta/scss/web/checkbox.scss b/frontend/delta/scss/web/checkbox.scss new file mode 100644 index 0000000..75b5de8 --- a/dev/null +++ b/frontend/delta/scss/web/checkbox.scss | |||
@@ -0,0 +1,96 @@ | |||
1 | div.checkbox { | ||
2 | display: block; | ||
3 | margin-bottom: 20px; | ||
4 | @include border-radius(4px); | ||
5 | border: 2px solid white; | ||
6 | background-color: white; | ||
7 | width: 80px; | ||
8 | position: relative; | ||
9 | height: 32px; | ||
10 | |||
11 | &:before { | ||
12 | content: "ON"; | ||
13 | padding-left: 9px; | ||
14 | line-height: 32px; | ||
15 | color: $solarize-Accent-Cyan; | ||
16 | font-size: 14px; | ||
17 | font-weight: 600; | ||
18 | |||
19 | } | ||
20 | |||
21 | &:after { | ||
22 | content: "OFF"; | ||
23 | // padding-left: 12px; | ||
24 | padding-left: 25px; | ||
25 | line-height: 32px; | ||
26 | color: $solarize-Accent-Cyan; | ||
27 | font-size: 14px; | ||
28 | font-weight: 600; | ||
29 | } | ||
30 | |||
31 | |||
32 | |||
33 | label.check { | ||
34 | display: block; | ||
35 | width: 40px; | ||
36 | height: 30px; | ||
37 | @include border-radius(3px); | ||
38 | background-color: $solarize-Accent-Magenta; | ||
39 | border: 1px solid $solarize-Accent-Magenta; | ||
40 | position: absolute; | ||
41 | top: 0px; | ||
42 | left: 0px; | ||
43 | } | ||
44 | |||
45 | |||
46 | |||
47 | input[type=checkbox] { | ||
48 | display: none; | ||
49 | } | ||
50 | |||
51 | input[type=checkbox]:checked + label.check { | ||
52 | top: 0px; | ||
53 | left: 38px; | ||
54 | @include animation(labelON, .2s, ease-in, 1); | ||
55 | } | ||
56 | |||
57 | input[type=checkbox] + label.check { | ||
58 | top: 0px; | ||
59 | left: 0px; | ||
60 | @include animation(labelOFF, .2s, ease-in, 1); | ||
61 | } | ||
62 | |||
63 | label.info { | ||
64 | position: absolute; | ||
65 | color: white; | ||
66 | top: 0px; | ||
67 | left: 100px; | ||
68 | line-height: 32px; | ||
69 | width: 200px; | ||
70 | font-size: 16pt; | ||
71 | } | ||
72 | } | ||
73 | |||
74 | @include keyframes(labelON) { | ||
75 | 0% { | ||
76 | top: 0px; | ||
77 | left: 0px; | ||
78 | } | ||
79 | |||
80 | 100% { | ||
81 | top: 0px; | ||
82 | left: 38px; | ||
83 | } | ||
84 | } | ||
85 | |||
86 | @include keyframes(labelOFF) { | ||
87 | 0% { | ||
88 | top: 0px; | ||
89 | left: 38px; | ||
90 | } | ||
91 | |||
92 | 100% { | ||
93 | top: 0px; | ||
94 | left: 0px; | ||
95 | } | ||
96 | } | ||