wip
This commit is contained in:
@@ -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
|
||||
|
@@ -20,7 +20,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
root(isDark)
|
||||
margin 16px
|
||||
|
@@ -19,7 +19,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.ui-form
|
||||
> fieldset
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user