TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-30 05:01:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

build version 400

Browse Source
This commit is contained in:
Mohit Panjwani
2020-12-02 17:54:08 +05:30
parent 326508e567
commit 89ee58590c
963 changed files with 62887 additions and 48868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
resources/assets/js/components/icon/DotIcon.vue
View File

@ -1,20 +1,19 @@
<template>
<div>
<div class="dot-icon" @click="checktoggle">
<span class="dot dot1" :class="{'move-right': toggle}" />
<span :class="{ 'move-right': toggle }" class="dot dot1" />
<span class="dot dot2" />
<span class="dot dot3" :class="{'move-left': toggle}" />
<span :class="{ 'move-left': toggle }" class="dot dot3" />
</div>
</div>
</template>
<script>
export default {
data () {
data() {
return {
toggle: false
toggle: false,
}
},
methods: {
@ -24,54 +23,62 @@ export default {
setTimeout(function () {
v.toggle = false
}, 300)
}
}
},
},
}
</script>
<style>
.dot-icon {
display: flex;
cursor: pointer;
padding: 8px 5px 5px 5px;
justify-content: flex-end;
}
.dot-icon {
display: flex;
cursor: pointer;
padding: 8px 5px 5px 5px;
justify-content: flex-end;
}
.dot {
display: inline-block;
background: #A5ACC1;
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
position: relative;
}
.dot {
display: inline-block;
background: #a5acc1;
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
position: relative;
}
.dot1 {
margin-right: 3px;
}
.dot1 {
margin-right: 3px;
}
.dot2 {
margin-right: 3px;
}
.dot2 {
margin-right: 3px;
}
.move-right {
animation: moveright 0.2s;
animation-fill-mode: forwards;
}
.move-right {
animation: moveright 0.2s;
animation-fill-mode: forwards;
}
.move-left {
animation: moveleft 0.2s;
animation-fill-mode: forwards;
}
.move-left {
animation: moveleft 0.2s;
animation-fill-mode: forwards;
}
@keyframes moveleft {
from {left: 0px;}
to {left: -18px;}
@keyframes moveleft {
from {
left: 0px;
}
to {
left: -18px;
}
}
@keyframes moveright {
from {left: 0px;}
to {left: 18px;}
@keyframes moveright {
from {
left: 0px;
}
to {
left: 18px;
}
}
</style>