From 2ab00387fe8c335fe554249cd354eadfdb79d57b Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 26 Apr 2019 03:33:25 -0400 Subject: [PATCH] clean up + add btn-group css class --- src/App.scss | 25 ++++++++++++++++ .../moderation_tools/moderation_tools.vue | 9 +----- src/components/user_card/user_card.vue | 29 +++++++------------ 3 files changed, 36 insertions(+), 27 deletions(-) diff --git a/src/App.scss b/src/App.scss index e4c764bf..1299e05d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -283,6 +283,31 @@ i[class*=icon-] { color: var(--icon, $fallback--icon) } +.btn-block { + display: block; + width: 100%; +} + +.btn-group { + position: relative; + display: inline-flex; + vertical-align: middle; + + button { + position: relative; + flex: 1 1 auto; + + &:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } +} .container { display: flex; diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 785fe7ba..80f6858e 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -61,7 +61,7 @@ - @@ -107,11 +107,4 @@ } } -.moderation-toggle-btn { - &#{&} { - margin: 0; - width: 100%; - } -} - diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 2f2f9e5f..2d3cf28f 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -46,7 +46,7 @@
-
+
-
- -
{{ $t('user_card.subscribe') }} @@ -78,19 +75,19 @@
- -
- -
@@ -365,21 +362,15 @@ flex: 1 0 0; margin: 0 .75em .6em 0; white-space: nowrap; - - > button { - margin: 0; - width: 100%; - } } - .remote-button { - height: 28px; + button { margin: 0; - } - button.pressed { - border-bottom-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); + &.pressed { + border-bottom-color: rgba(255, 255, 255, 0.2); + border-top-color: rgba(0, 0, 0, 0.2); + } } } }