Skip to content

Commit 2637064

Browse files
Ismail NGUYENIsmail NGUYEN
Ismail NGUYEN
authored and
Ismail NGUYEN
committed
Push dist folder in order to get built file on NPM registry
1 parent b923077 commit 2637064

File tree

4 files changed

+220
-2
lines changed

4 files changed

+220
-2
lines changed

Diff for: ‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.DS_Store
22
node_modules
3-
/dist
43

54
# local env files
65
.env.local

Diff for: ‎components/DarkModeSwitch.vue

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

Diff for: ‎index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import DarkModeSwitch from './components/DarkModeSwitch.vue'
2+
3+
export default DarkModeSwitch

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-dark-mode-switch",
3-
"version": "1.0.3",
3+
"version": "1.0.4",
44
"author": "Ismaïl NGUYEN <nguyen.ismail@gmail.com>",
55
"repository": "https://github.com/ismailnguyen/vue-dark-mode-switch.git",
66
"license": "WTFPL (http://www.wtfpl.net)",

0 commit comments

Comments
 (0)