mirror of
https://github.com/paricafe/misskey.git
synced 2024-11-28 13:06:44 -06:00
wip
This commit is contained in:
parent
dec7d537dc
commit
d90f75425f
5 changed files with 33 additions and 50 deletions
|
@ -22,15 +22,21 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.ui-card
|
||||
root(isDark)
|
||||
margin 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)
|
||||
|
||||
> header
|
||||
font-weight bold
|
||||
font-size 28px
|
||||
color #444
|
||||
font-weight normal
|
||||
font-size 24px
|
||||
color isDark ? #fff : #444
|
||||
|
||||
.ui-card[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.ui-card:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
@ -153,7 +153,7 @@ root(isDark, fill)
|
|||
width 24px
|
||||
text-align center
|
||||
line-height 32px
|
||||
color rgba(#000, 0.54)
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
|
||||
&:not(:empty) + .input
|
||||
margin-left 28px
|
||||
|
@ -174,7 +174,7 @@ root(isDark, fill)
|
|||
left 0
|
||||
right 0
|
||||
height 1px
|
||||
background rgba(#000, 0.42)
|
||||
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
||||
|
||||
&:after
|
||||
content ''
|
||||
|
@ -232,7 +232,7 @@ root(isDark, fill)
|
|||
transition-duration 0.3s
|
||||
font-size 16px
|
||||
line-height 32px
|
||||
color rgba(#000, 0.54)
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
pointer-events none
|
||||
//will-change transform
|
||||
transform-origin top left
|
||||
|
@ -247,6 +247,7 @@ root(isDark, fill)
|
|||
font-weight fill ? bold : normal
|
||||
font-size 16px
|
||||
line-height 32px
|
||||
color isDark ? #fff : #000
|
||||
background transparent
|
||||
border none
|
||||
border-radius 0
|
||||
|
@ -263,7 +264,7 @@ root(isDark, fill)
|
|||
justify-self center
|
||||
font-size 16px
|
||||
line-height 32px
|
||||
color rgba(#000, 0.54)
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
pointer-events none
|
||||
|
||||
> *
|
||||
|
@ -299,9 +300,9 @@ root(isDark, fill)
|
|||
&.filled
|
||||
> .input
|
||||
> .label
|
||||
top fill ? -24px : -16px
|
||||
top fill ? -24px : -17px
|
||||
left 0 !important
|
||||
transform scale(0.8)
|
||||
transform scale(0.75)
|
||||
|
||||
.ui-input[data-darkmode]
|
||||
&.fill
|
||||
|
|
|
@ -193,9 +193,9 @@ root(isDark, fill)
|
|||
&.filled
|
||||
> .input
|
||||
> .label
|
||||
top fill ? -24px : -16px
|
||||
top fill ? -24px : -17px
|
||||
left 0 !important
|
||||
transform scale(0.8)
|
||||
transform scale(0.75)
|
||||
|
||||
.ui-select[data-darkmode]
|
||||
&.fill
|
||||
|
|
|
@ -5,15 +5,13 @@
|
|||
role="switch"
|
||||
:aria-checked="checked"
|
||||
:aria-disabled="disabled"
|
||||
@click="switchValue"
|
||||
@mouseover="mouseenter"
|
||||
@click="toggle"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
@change="handleChange"
|
||||
ref="input"
|
||||
:disabled="disabled"
|
||||
@keydown.enter="switchValue"
|
||||
@keydown.enter="toggle"
|
||||
>
|
||||
<span class="button">
|
||||
<span></span>
|
||||
|
@ -30,6 +28,10 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
|
@ -39,42 +41,15 @@ export default Vue.extend({
|
|||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},/*
|
||||
created() {
|
||||
if (!~[true, false].indexOf(this.value)) {
|
||||
this.$emit('input', false);
|
||||
}
|
||||
},*/
|
||||
},
|
||||
computed: {
|
||||
checked(): boolean {
|
||||
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: {
|
||||
mouseenter() {
|
||||
(this.$el).style.transition = 'all 0s';
|
||||
},
|
||||
handleChange() {
|
||||
(this.$el).style.transition = 'all 0.3s';
|
||||
this.$emit('input', !this.checked);
|
||||
toggle() {
|
||||
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
|
||||
width 34px
|
||||
height 14px
|
||||
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.07)
|
||||
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25)
|
||||
outline none
|
||||
border-radius 14px
|
||||
transition inherit
|
||||
|
|
|
@ -84,7 +84,7 @@ root(isDark, fill)
|
|||
left 0
|
||||
right 0
|
||||
background none
|
||||
border solid 1px rgba(#000, 0.42)
|
||||
border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
||||
border-radius 3px
|
||||
pointer-events none
|
||||
|
||||
|
@ -112,7 +112,7 @@ root(isDark, fill)
|
|||
transition-duration 0.3s
|
||||
font-size 16px
|
||||
line-height 32px
|
||||
color rgba(#000, 0.54)
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
pointer-events none
|
||||
//will-change transform
|
||||
transform-origin top left
|
||||
|
@ -126,6 +126,7 @@ root(isDark, fill)
|
|||
font inherit
|
||||
font-weight fill ? bold : normal
|
||||
font-size 16px
|
||||
color isDark ? #fff : #000
|
||||
background transparent
|
||||
border none
|
||||
border-radius 0
|
||||
|
@ -156,7 +157,7 @@ root(isDark, fill)
|
|||
> .label
|
||||
top -24px
|
||||
left 0 !important
|
||||
transform scale(0.8)
|
||||
transform scale(0.75)
|
||||
|
||||
.ui-textarea[data-darkmode]
|
||||
&.fill
|
||||
|
|
Loading…
Reference in a new issue