Skip to content

Commit 30d7f81

Browse files
Ismail NGUYENIsmail NGUYEN
Ismail NGUYEN
authored and
Ismail NGUYEN
committed
Implement switch toggle
1 parent e8571bb commit 30d7f81

File tree

4 files changed

+209
-6
lines changed

4 files changed

+209
-6
lines changed

Diff for: ‎public/favicon.ico

-4.19 KB
Binary file not shown.

Diff for: ‎public/index.html

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
87
<title><%= htmlWebpackPlugin.options.title %></title>
98
</head>
109
<body>

Diff for: ‎src/App.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<DarkModeSwitch :switched="onSwitched"/>
3+
<DarkModeSwitch @switched="onSwitched"/>
44
</div>
55
</template>
66

@@ -13,8 +13,8 @@
1313
DarkModeSwitch
1414
},
1515
methods: {
16-
onSwitched: function () {
17-
console.log('dark mode enabled !')
16+
onSwitched: function (isSwitched) {
17+
console.log('dark mode is enabled :', isSwitched);
1818
}
1919
}
2020
}

Diff for: ‎src/components/DarkModeSwitch.vue

+206-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,215 @@
11
<template>
2-
2+
<div class="toggleWrapper">
3+
<input type="checkbox" id="themeSwitch" v-model="isEnabled" />
4+
<label for="themeSwitch" class="toggle">
5+
<span class="toggle__handler">
6+
<span class="crater crater--1"></span>
7+
<span class="crater crater--2"></span>
8+
<span class="crater crater--3"></span>
9+
</span>
10+
<span class="star star--1"></span>
11+
<span class="star star--2"></span>
12+
<span class="star star--3"></span>
13+
<span class="star star--4"></span>
14+
<span class="star star--5"></span>
15+
<span class="star star--6"></span>
16+
</label>
17+
</div>
318
</template>
419

520
<script>
6-
21+
export default {
22+
data () {
23+
return {
24+
isEnabled: false
25+
}
26+
},
27+
watch: {
28+
isEnabled: function (newValue) {
29+
this.$emit('switched', newValue)
30+
}
31+
}
32+
}
733
</script>
834

935
<style lang="scss" scoped>
1036
37+
.toggleWrapper input {
38+
display: none;
39+
}
40+
41+
.toggle {
42+
cursor: pointer;
43+
display: inline-block;
44+
position: relative;
45+
width: 45px;
46+
height: 25px;
47+
background-color: #83D8FF;
48+
border-radius: 84px;
49+
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
50+
}
51+
.toggle:before {
52+
position: absolute;
53+
left: -25px;
54+
top: 7px;
55+
font-size: 9px;
56+
}
57+
.toggle:after {
58+
position: absolute;
59+
right: -24px;
60+
top: 7px;
61+
font-size: 9px;
62+
color: #749ED7;
63+
}
64+
65+
.toggle__handler {
66+
display: inline-block;
67+
position: relative;
68+
z-index: 1;
69+
top: 1px;
70+
left: 1px;
71+
width: 22px;
72+
height: 22px;
73+
background-color: #FFCF96;
74+
border-radius: 50px;
75+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
76+
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
77+
transform: rotate(-45deg);
78+
}
79+
.toggle__handler .crater {
80+
position: absolute;
81+
background-color: #E8CDA5;
82+
opacity: 0;
83+
transition: opacity 200ms ease-in-out;
84+
border-radius: 100%;
85+
}
86+
.toggle__handler .crater--1 {
87+
top: 9px;
88+
left: 5px;
89+
width: 2px;
90+
height: 2px;
91+
}
92+
.toggle__handler .crater--2 {
93+
top: 14px;
94+
left: 11px;
95+
width: 3px;
96+
height: 3px;
97+
}
98+
.toggle__handler .crater--3 {
99+
top: 5px;
100+
left: 13px;
101+
width: 4px;
102+
height: 4px;
103+
}
104+
105+
.star {
106+
position: absolute;
107+
background-color: #f8faff;
108+
transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
109+
border-radius: 50%;
110+
}
111+
112+
.star--1 {
113+
top: 5px;
114+
left: 17px;
115+
z-index: 0;
116+
width: 15px;
117+
height: 1px;
118+
}
119+
120+
.star--2 {
121+
top: 9px;
122+
left: 14px;
123+
z-index: 1;
124+
width: 15px;
125+
height: 1px;
126+
}
127+
128+
.star--3 {
129+
top: 14px;
130+
left: 20px;
131+
z-index: 0;
132+
width: 15px;
133+
height: 1px;
134+
}
135+
136+
.star--4,
137+
.star--5,
138+
.star--6 {
139+
opacity: 0;
140+
transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
141+
}
142+
143+
.star--4 {
144+
top: 8px;
145+
left: 6px;
146+
z-index: 0;
147+
width: 1px;
148+
height: 1px;
149+
transform: translate3d(1px, 0, 0);
150+
}
151+
152+
.star--5 {
153+
top: 16px;
154+
left: 8px;
155+
z-index: 0;
156+
width: 1px;
157+
height: 1px;
158+
transform: translate3d(1px, 0, 0);
159+
}
160+
161+
.star--6 {
162+
top: 18px;
163+
left: 14px;
164+
z-index: 0;
165+
width: 1px;
166+
height: &px;
167+
transform: translate3d(1px, 0, 0);
168+
}
169+
170+
input:checked + .toggle {
171+
background-color: #6b65a7;
172+
}
173+
input:checked + .toggle:before {
174+
color: #749ED7;
175+
}
176+
input:checked + .toggle:after {
177+
color: #f8faff;
178+
}
179+
input:checked + .toggle .toggle__handler {
180+
background-color: #FFE5B5;
181+
transform: translate3d(20px, 0, 0) rotate(0);
182+
}
183+
input:checked + .toggle .toggle__handler .crater {
184+
opacity: 1;
185+
}
186+
input:checked + .toggle .star--1 {
187+
width: 1px;
188+
height: 1px;
189+
}
190+
input:checked + .toggle .star--2 {
191+
width: 2px;
192+
height: 2px;
193+
transform: translate3d(-2px, 0, 0);
194+
}
195+
input:checked + .toggle .star--3 {
196+
width: 1px;
197+
height: 1px;
198+
transform: translate3d(-3px, 0, 0);
199+
}
200+
input:checked + .toggle .star--4,
201+
input:checked + .toggle .star--5,
202+
input:checked + .toggle .star--6 {
203+
opacity: 1;
204+
transform: translate3d(0, 0, 0);
205+
}
206+
input:checked + .toggle .star--4 {
207+
transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
208+
}
209+
input:checked + .toggle .star--5 {
210+
transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
211+
}
212+
input:checked + .toggle .star--6 {
213+
transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
214+
}
11215
</style>

0 commit comments

Comments
 (0)