This commit is contained in:
syuilo
2018-09-26 20:19:35 +09:00
parent d2d3f7810e
commit 904114740b
110 changed files with 529 additions and 536 deletions

View File

@@ -32,7 +32,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
> button
@@ -49,23 +49,23 @@ root(isDark, fill)
box-shadow none
if fill
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
&:hover
background lighten($theme-color, 5%)
background var(--primaryLighten5)
&:active
background darken($theme-color, 5%)
background var(--primaryDarken5)
else
color $theme-color
color var(--primary)
background none
&:hover
color darken($theme-color, 5%)
color var(--primaryDarken5)
&:active
background rgba($theme-color, 0.3)
background var(--primaryAlpha03)
.ui-button[data-darkmode]
&.fill

View File

@@ -20,7 +20,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
margin 16px

View File

@@ -19,7 +19,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.ui-form
> fieldset

View File

@@ -25,7 +25,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display inline-block
@@ -50,30 +50,30 @@ root(isDark)
&:hover
&:focus
color $theme-color
background rgba($theme-color, isDark ? 0.2 : 0.12)
border-color rgba($theme-color, isDark ? 0.5 : 0.3)
color var(--primary)
//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
//border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
&:active
color darken($theme-color, 20%)
background rgba($theme-color, 0.12)
border-color $theme-color
color var(--primaryDarken20)
//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
border-color var(--primary)
transition all 0s
&.primary
> button
border 1px solid $theme-color
background $theme-color
color $theme-color-foreground
border 1px solid var(--primary)
background var(--primary)
color var(--primaryForeground)
&:hover
&:focus
background lighten($theme-color, 20%)
border-color lighten($theme-color, 20%)
background var(--primaryLighten20)
border-color var(--primaryLighten20)
&:active
background darken($theme-color, 20%)
border-color darken($theme-color, 20%)
background var(--primaryDarken20)
border-color var(--primaryDarken20)
transition all 0s
&.round

View File

@@ -49,7 +49,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display inline-flex
@@ -70,15 +70,15 @@ root(isDark)
&.checked
> .button
border-color $theme-color
border-color var(--primary)
&:after
background-color $theme-color
background-color var(--primary)
transform scale(1)
opacity 1
> .label
color $theme-color
color var(--primary)
> input
position absolute

View File

@@ -155,7 +155,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 32px 0
@@ -193,7 +193,7 @@ root(isDark, fill)
left 0
right 0
height 2px
background $theme-color
background var(--primary)
opacity 0
transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -325,7 +325,7 @@ root(isDark, fill)
transform scaleX(1)
> .label
color $theme-color
color var(--primary)
&.focused
&.filled

View File

@@ -51,7 +51,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display inline-block
@@ -68,10 +68,10 @@ root(isDark)
&.checked
> .button
border-color $theme-color
border-color var(--primary)
&:after
background-color $theme-color
background-color var(--primary)
transform scale(1)
opacity 1

View File

@@ -70,7 +70,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 32px 0
@@ -113,7 +113,7 @@ root(isDark, fill)
left 0
right 0
height 2px
background $theme-color
background var(--primary)
opacity 0
transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -190,7 +190,7 @@ root(isDark, fill)
transform scaleX(1)
> .label
color $theme-color
color var(--primary)
&.focused
&.filled

View File

@@ -56,7 +56,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display flex
@@ -79,11 +79,11 @@ root(isDark)
&.checked
> .button
background-color rgba($theme-color, 0.4)
border-color rgba($theme-color, 0.4)
background-color var(--primaryAlpha04)
border-color var(--primaryAlpha04)
> *
background-color $theme-color
background-color var(--primary)
transform translateX(14px)
> input

View File

@@ -63,7 +63,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 42px 0 32px 0
@@ -97,7 +97,7 @@ root(isDark, fill)
left 0
right 0
background none
border solid 2px $theme-color
border solid 2px var(--primary)
border-radius 3px
opacity 0
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -149,7 +149,7 @@ root(isDark, fill)
opacity 1
> .label
color $theme-color
color var(--primary)
&.focused
&.filled