mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-31 15:21:46 +09:00
Code

wip

Browse Source
This commit is contained in:
syuilo 2018-06-14 21:38:39 +09:00
parent dec7d537dc
commit d90f75425f
5 changed files with 33 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/client/app/common/views/components/ui/card.vue
View File

@ -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>

13
src/client/app/common/views/components/ui/input.vue
View File

@ -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

4
src/client/app/common/views/components/ui/select.vue
View File

@ -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

43
src/client/app/common/views/components/ui/switch.vue
View File

@ -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

7
src/client/app/common/views/components/ui/textarea.vue
View File

@ -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