nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 00:22:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
resources/js/components/Others/Forms/SwitchInput.vue
View File

@@ -1,20 +1,14 @@
<template>
<div class="input-wrapper">
<div class="switch-content">
<label class="input-label" v-if="label">
{{ label }}:
</label>
<label class="input-label" v-if="label"> {{ label }}: </label>
<small class="input-info" v-if="info">
{{ info }}
</small>
{{ info }}
</small>
</div>
<div class="switch-content text-right">
<div
class="switch"
:class="{ active: state }"
@click="changeState"
>
<div class="switch" :class="{ active: state }" @click="changeState">
<div class="switch-button"></div>
</div>
</div>
@@ -22,93 +16,86 @@
</template>
<script>
export default {
name: 'SwitchInput',
props: [
'label',
'name',
'state',
'info',
'input',
],
data() {
return {
isSwitched: undefined
}
},
methods: {
changeState() {
this.isSwitched = !this.isSwitched
this.$emit('input', this.isSwitched)
}
},
mounted() {
this.isSwitched = this.state
}
}
export default {
name: 'SwitchInput',
props: ['label', 'name', 'state', 'info', 'input'],
data() {
return {
isSwitched: undefined,
}
},
methods: {
changeState() {
this.isSwitched = !this.isSwitched
this.$emit('input', this.isSwitched)
},
},
mounted() {
this.isSwitched = this.state
},
}
</script>
<style lang="scss" scoped>
@import '../../../../sass/vuefilemanager/variables';
@import '../../../../sass/vuefilemanager/mixins';
@import '../../../../sass/vuefilemanager/variables';
@import '../../../../sass/vuefilemanager/mixins';
.input-wrapper {
display: flex;
width: 100%;
.input-wrapper {
display: flex;
width: 100%;
.input-label {
color: $text;
}
.input-label {
color: $text;
}
.switch-content {
width: 100%;
.switch-content {
width: 100%;
&:last-child {
width: 80px;
}
}
}
&:last-child {
width: 80px;
}
}
}
.switch {
width: 50px;
height: 28px;
border-radius: 50px;
display: block;
background: #f1f1f5;
position: relative;
@include transition;
.switch {
width: 50px;
height: 28px;
border-radius: 50px;
display: block;
background: #f1f1f5;
position: relative;
@include transition;
.switch-button {
@include transition;
width: 22px;
height: 22px;
border-radius: 50px;
display: block;
background: white;
position: absolute;
top: 3px;
left: 3px;
box-shadow: 0 2px 4px rgba(37, 38, 94, 0.1);
cursor: pointer;
}
.switch-button {
@include transition;
width: 22px;
height: 22px;
border-radius: 50px;
display: block;
background: white;
position: absolute;
top: 3px;
left: 3px;
box-shadow: 0 2px 4px rgba(37, 38, 94, 0.1);
cursor: pointer;
}
&.active {
&.active {
.switch-button {
left: 25px;
}
}
}
.switch-button {
left: 25px;
}
}
}
.dark {
.switch {
background: $dark_mode_foreground;
}
.dark {
.switch {
background: $dark_mode_foreground;
}
.popup-wrapper {
.switch {
background: lighten($dark_mode_foreground, 3%);
}
}
}
.popup-wrapper {
.switch {
background: lighten($dark_mode_foreground, 3%);
}
}
}
</style>