Skip to content

Commit 5bbc1c0

Browse files
technikhil314technikhil314
committed
chore: added micro animation to compare and clear buttons
1 parent 9ce31b9 commit 5bbc1c0

File tree

3 files changed

+107
-21
lines changed

3 files changed

+107
-21
lines changed

‎components/icons/prettyCode.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
viewBox="0 0 15 15"
44
fill="none"
55
xmlns="http://www.w3.org/2000/svg"
6-
width="15"
7-
height="15"
6+
:class="className"
87
>
98
<path
109
d="M0 7.5h2m13 0h-2m-8 7H3.5a2 2 0 01-2-2v-10a2 2 0 012-2H5m5 14h1.5a2 2 0 002-2v-10a2 2 0 00-2-2H10"
@@ -14,5 +13,12 @@
1413
</template>
1514
<script lang="ts">
1615
import Vue from 'vue'
17-
export default Vue.extend({})
16+
export default Vue.extend({
17+
props: {
18+
className: {
19+
type: String,
20+
required: false,
21+
},
22+
},
23+
})
1824
</script>

‎pages/v2/index.vue‎

Lines changed: 67 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,23 @@
4343
aria-label="Beautify entered text"
4444
type="button"
4545
title="Beautify"
46-
class="absolute p-2 transition-all rounded-sm top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
46+
class="
47+
absolute
48+
p-2
49+
transition-all
50+
rounded-sm
51+
top-16
52+
right-3
53+
aspect-square
54+
dark:hover:bg-slate-600 dark:bg-slate-600/50
55+
hover:bg-slate-300
56+
bg-gray-300/50
57+
"
4758
@click="
4859
lhsEditor.trigger('editor', 'editor.action.formatDocument')
4960
"
5061
>
51-
<PrettyCode />
62+
<PrettyCode class="w-4 h-4" />
5263
</button>
5364
</div>
5465
<div class="relative flex flex-col w-1/2 gap-4">
@@ -72,33 +83,81 @@
7283
aria-label="Beautify entered text"
7384
type="button"
7485
title="Beautify"
75-
class="absolute p-2 transition-all rounded-sm top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
86+
class="
87+
absolute
88+
p-2
89+
transition-all
90+
rounded-sm
91+
top-16
92+
right-3
93+
aspect-square
94+
dark:hover:bg-slate-600 dark:bg-slate-600/50
95+
hover:bg-slate-300
96+
bg-gray-300/50
97+
"
7698
@click="
7799
rhsEditor.trigger('editor', 'editor.action.formatDocument')
78100
"
79101
>
80-
<PrettyCode />
102+
<PrettyCode class="w-4 h-4" />
81103
</button>
82104
</div>
83105
</section>
84106
<div class="relative flex justify-center flex-grow-0 w-full gap-4 mt-4">
85107
<button
86108
id="submitButton"
87-
class="inline-flex items-center justify-center w-40 gap-4 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none text-gray-50 focus:ring-4 active:scale-y-75"
109+
class="
110+
inline-flex
111+
items-center
112+
justify-center
113+
w-40
114+
gap-4
115+
px-4
116+
py-2
117+
transition-transform
118+
transform
119+
bg-blue-600
120+
rounded-md
121+
shadow-lg
122+
outline-none
123+
text-gray-50
124+
focus:ring-4
125+
active:scale-y-75
126+
group
127+
"
88128
aria-label="Click here to compare the inputted text blocks"
89129
>
90130
Compare
91-
<span class="w-4 aspect-square">
131+
<span class="w-4 aspect-square group-hover:animate-linear-bounce">
92132
<Forward />
93133
</span>
94134
</button>
95135
<button
96-
class="absolute right-0 inline-flex items-center justify-center gap-4 px-4 py-2 text-gray-800 transition-transform transform bg-yellow-300 rounded-md shadow-lg outline-none focus:ring-4 active:scale-y-75"
136+
class="
137+
absolute
138+
right-0
139+
inline-flex
140+
items-center
141+
justify-center
142+
gap-4
143+
px-4
144+
py-2
145+
text-gray-800
146+
transition-transform
147+
transform
148+
bg-yellow-300
149+
rounded-md
150+
shadow-lg
151+
outline-none
152+
focus:ring-4
153+
active:scale-y-75
154+
group
155+
"
97156
aria-label="Click here to clear all the inputs"
98157
type="button"
99158
@click="clear"
100159
>
101-
<span class="w-4 aspect-square">
160+
<span class="w-4 aspect-square group-hover:animate-wiggle">
102161
<Bin />
103162
</span>
104163
Clear

‎tailwind.config.js‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,53 @@ module.exports = {
33
darkMode: 'class',
44
variants: {
55
extend: {
6-
boxShadow: ['dark']
6+
boxShadow: ['dark'],
77
},
88
},
99
theme: {
10+
extend: {
11+
keyframes: {
12+
'linear-bounce': {
13+
'0%, 100%': {
14+
transform: 'translateX(25%)',
15+
'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)',
16+
},
17+
'50%': {
18+
transform: 'translateX(0)',
19+
'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
20+
},
21+
},
22+
wiggle: {
23+
'0%, 100%': { transform: 'rotate(-10deg)' },
24+
'50%': { transform: 'rotate(10deg)' },
25+
},
26+
},
27+
},
1028
maxHeight: {
1129
'screen--nav': 'calc(100vh - 7rem)',
1230
},
1331
container: {
1432
center: true,
1533
},
34+
animation: {
35+
'linear-bounce': 'linear-bounce 1s linear infinite',
36+
wiggle: 'wiggle 1s linear infinite',
37+
},
1638
zIndex: {
17-
'1': 1,
18-
'2': 2,
19-
'10': 10,
20-
'11': 11
39+
1: 1,
40+
2: 2,
41+
10: 10,
42+
11: 11,
2143
},
2244
minHeight: {
23-
'80': '20rem'
45+
80: '20rem',
2446
},
2547
translate: {
2648
'-screen': '-100vh',
2749
},
2850
boxShadow: {
29-
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
51+
DEFAULT:
52+
'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
3053
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
3154
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
3255
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
@@ -37,7 +60,5 @@ module.exports = {
3760
none: 'none',
3861
},
3962
},
40-
plugins: [
41-
require('@tailwindcss/forms'),
42-
]
63+
plugins: [require('@tailwindcss/forms')],
4364
}

0 commit comments

Comments
 (0)