From 11e95ea092e2c1e5d8ee3defba3a8a211cc65864 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 14 Jun 2018 18:57:54 +0900
Subject: [PATCH] wip
---
.../app/common/views/components/ui/button.vue | 48 ++++++++++++++++---
1 file changed, 41 insertions(+), 7 deletions(-)
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 57747fd469..7723c83f57 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -14,6 +14,17 @@ export default Vue.extend({
type: String,
required: false
}
+ },
+ data() {
+ return {
+ styl: 'fill'
+ };
+ },
+ inject: ['isCardChild'],
+ created() {
+ if (this.isCardChild) {
+ this.styl = 'line';
+ }
}
});
</script>
@@ -21,26 +32,49 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
-.ui-button
+root(isDark, fill)
> button
display block
width 100%
margin 0
padding 0
- color $theme-color-foreground
font-weight bold
font-size 16px
line-height 44px
- background $theme-color
border none
border-radius 6px
outline none
box-shadow none
- &:hover
- background lighten($theme-color, 5%)
+ if fill
+ color $theme-color-foreground
+ background $theme-color
- &:active
- background darken($theme-color, 5%)
+ &:hover
+ background lighten($theme-color, 5%)
+
+ &:active
+ background darken($theme-color, 5%)
+ else
+ color $theme-color
+ background none
+
+ &:hover
+ color darken($theme-color, 5%)
+
+ &:active
+ background rgba($theme-color, 0.3)
+
+.ui-button[data-darkmode]
+ &.fill
+ root(true, true)
+ &:not(.fill)
+ root(true, false)
+
+.ui-button:not([data-darkmode])
+ &.fill
+ root(false, true)
+ &:not(.fill)
+ root(false, false)
</style>