mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-10-31 15:21:46 +09:00
wip
This commit is contained in:
parent
dec7d537dc
commit
d90f75425f
@ -22,15 +22,21 @@ export default Vue.extend({
|
|||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
.ui-card
|
root(isDark)
|
||||||
margin 16px
|
margin 16px
|
||||||
padding 16px
|
padding 16px
|
||||||
background #fff
|
background isDark ? #282C37 : #fff
|
||||||
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
|
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
|
||||||
|
|
||||||
> header
|
> header
|
||||||
font-weight bold
|
font-weight normal
|
||||||
font-size 28px
|
font-size 24px
|
||||||
color #444
|
color isDark ? #fff : #444
|
||||||
|
|
||||||
|
.ui-card[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.ui-card:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -153,7 +153,7 @@ root(isDark, fill)
|
|||||||
width 24px
|
width 24px
|
||||||
text-align center
|
text-align center
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color rgba(#000, 0.54)
|
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||||
|
|
||||||
&:not(:empty) + .input
|
&:not(:empty) + .input
|
||||||
margin-left 28px
|
margin-left 28px
|
||||||
@ -174,7 +174,7 @@ root(isDark, fill)
|
|||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
height 1px
|
height 1px
|
||||||
background rgba(#000, 0.42)
|
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ''
|
content ''
|
||||||
@ -232,7 +232,7 @@ root(isDark, fill)
|
|||||||
transition-duration 0.3s
|
transition-duration 0.3s
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color rgba(#000, 0.54)
|
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
//will-change transform
|
//will-change transform
|
||||||
transform-origin top left
|
transform-origin top left
|
||||||
@ -247,6 +247,7 @@ root(isDark, fill)
|
|||||||
font-weight fill ? bold : normal
|
font-weight fill ? bold : normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
|
color isDark ? #fff : #000
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
@ -263,7 +264,7 @@ root(isDark, fill)
|
|||||||
justify-self center
|
justify-self center
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color rgba(#000, 0.54)
|
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
> *
|
> *
|
||||||
@ -299,9 +300,9 @@ root(isDark, fill)
|
|||||||
&.filled
|
&.filled
|
||||||
> .input
|
> .input
|
||||||
> .label
|
> .label
|
||||||
top fill ? -24px : -16px
|
top fill ? -24px : -17px
|
||||||
left 0 !important
|
left 0 !important
|
||||||
transform scale(0.8)
|
transform scale(0.75)
|
||||||
|
|
||||||
.ui-input[data-darkmode]
|
.ui-input[data-darkmode]
|
||||||
&.fill
|
&.fill
|
||||||
|
@ -193,9 +193,9 @@ root(isDark, fill)
|
|||||||
&.filled
|
&.filled
|
||||||
> .input
|
> .input
|
||||||
> .label
|
> .label
|
||||||
top fill ? -24px : -16px
|
top fill ? -24px : -17px
|
||||||
left 0 !important
|
left 0 !important
|
||||||
transform scale(0.8)
|
transform scale(0.75)
|
||||||
|
|
||||||
.ui-select[data-darkmode]
|
.ui-select[data-darkmode]
|
||||||
&.fill
|
&.fill
|
||||||
|
@ -5,15 +5,13 @@
|
|||||||
role="switch"
|
role="switch"
|
||||||
:aria-checked="checked"
|
:aria-checked="checked"
|
||||||
:aria-disabled="disabled"
|
:aria-disabled="disabled"
|
||||||
@click="switchValue"
|
@click="toggle"
|
||||||
@mouseover="mouseenter"
|
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@change="handleChange"
|
|
||||||
ref="input"
|
ref="input"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@keydown.enter="switchValue"
|
@keydown.enter="toggle"
|
||||||
>
|
>
|
||||||
<span class="button">
|
<span class="button">
|
||||||
<span></span>
|
<span></span>
|
||||||
@ -30,6 +28,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -39,42 +41,15 @@ export default Vue.extend({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
},/*
|
},
|
||||||
created() {
|
|
||||||
if (!~[true, false].indexOf(this.value)) {
|
|
||||||
this.$emit('input', false);
|
|
||||||
}
|
|
||||||
},*/
|
|
||||||
computed: {
|
computed: {
|
||||||
checked(): boolean {
|
checked(): boolean {
|
||||||
return this.value;
|
return this.value;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
value() {
|
|
||||||
(this.$el).style.transition = 'all 0.3s';
|
|
||||||
(this.$refs.input as any).checked = this.checked;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
(this.$refs.input as any).checked = this.checked;
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
mouseenter() {
|
toggle() {
|
||||||
(this.$el).style.transition = 'all 0s';
|
|
||||||
},
|
|
||||||
handleChange() {
|
|
||||||
(this.$el).style.transition = 'all 0.3s';
|
|
||||||
this.$emit('input', !this.checked);
|
|
||||||
this.$emit('change', !this.checked);
|
this.$emit('change', !this.checked);
|
||||||
this.$nextTick(() => {
|
|
||||||
// set input's checked property
|
|
||||||
// in case parent refuses to change component's value
|
|
||||||
(this.$refs.input as any).checked = this.checked;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
switchValue() {
|
|
||||||
!this.disabled && this.handleChange();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -117,7 +92,7 @@ root(isDark)
|
|||||||
margin 3px 0 0 0
|
margin 3px 0 0 0
|
||||||
width 34px
|
width 34px
|
||||||
height 14px
|
height 14px
|
||||||
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.07)
|
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25)
|
||||||
outline none
|
outline none
|
||||||
border-radius 14px
|
border-radius 14px
|
||||||
transition inherit
|
transition inherit
|
||||||
|
@ -84,7 +84,7 @@ root(isDark, fill)
|
|||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
background none
|
background none
|
||||||
border solid 1px rgba(#000, 0.42)
|
border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
||||||
border-radius 3px
|
border-radius 3px
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
@ -112,7 +112,7 @@ root(isDark, fill)
|
|||||||
transition-duration 0.3s
|
transition-duration 0.3s
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color rgba(#000, 0.54)
|
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
//will-change transform
|
//will-change transform
|
||||||
transform-origin top left
|
transform-origin top left
|
||||||
@ -126,6 +126,7 @@ root(isDark, fill)
|
|||||||
font inherit
|
font inherit
|
||||||
font-weight fill ? bold : normal
|
font-weight fill ? bold : normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
|
color isDark ? #fff : #000
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
@ -156,7 +157,7 @@ root(isDark, fill)
|
|||||||
> .label
|
> .label
|
||||||
top -24px
|
top -24px
|
||||||
left 0 !important
|
left 0 !important
|
||||||
transform scale(0.8)
|
transform scale(0.75)
|
||||||
|
|
||||||
.ui-textarea[data-darkmode]
|
.ui-textarea[data-darkmode]
|
||||||
&.fill
|
&.fill
|
||||||
|
Loading…
Reference in New Issue
Block a user