feat(QBtn): Small tweaks to push style

Author: rstoenescu

ui/src/components/btn-group/QBtnGroup.sass

@@ -21,9 +21,11 @@
         border-top-right-radius: inherit
         border-bottom-right-radius: inherit
   > .q-btn-group:not(:first-child) > .q-btn:first-child
-    border-left: 0
+    .q-btn__wrapper:before
+      border-left: 0
   > .q-btn-group:not(:last-child) > .q-btn:last-child
-    border-right: 0
+    .q-btn__wrapper:before
+      border-right: 0
   > .q-btn-item:not(:last-child)
     border-top-right-radius: 0
     border-bottom-right-radius: 0
@@ -46,25 +48,31 @@
         &:active,
         &.q-btn--active
           .q-btn__wrapper
-            margin-top: 3px
-            margin-bottom: -3px
+            margin-top: 2px
+            margin-bottom: -2px
   &--rounded
     border-radius: $button-rounded-border-radius
+
   &--flat, &--outline, &--unelevated
     box-shadow: none
     > .q-btn-item
       .q-btn__wrapper:before
         box-shadow: none
+
   &--outline
     > .q-separator
       display: none
     > .q-btn-item + .q-btn-item
-      border-left: 0
+      .q-btn__wrapper:before
+        border-left: 0
     > .q-btn-item:not(:last-child)
-      border-right: 0
+      .q-btn__wrapper:before
+        border-right: 0
+
   &--stretch
     align-self: stretch
     border-radius: 0
+
   &--glossy
     > .q-btn-item
       background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .04)) !important

ui/src/components/btn-group/QBtnGroup.styl

@@ -21,9 +21,11 @@
         border-top-right-radius inherit
         border-bottom-right-radius inherit
   > .q-btn-group:not(:first-child) > .q-btn:first-child
-    border-left 0
+    .q-btn__wrapper:before
+      border-left 0
   > .q-btn-group:not(:last-child) > .q-btn:last-child
-    border-right 0
+    .q-btn__wrapper:before
+      border-right 0
   > .q-btn-item:not(:last-child)
     border-top-right-radius 0
     border-bottom-right-radius 0
@@ -46,25 +48,31 @@
         &:active,
         &.q-btn--active
           .q-btn__wrapper
-            margin-top 3px
-            margin-bottom -3px
+            margin-top 2px
+            margin-bottom -2px
   &--rounded
     border-radius $button-rounded-border-radius
+
   &--flat, &--outline, &--unelevated
     box-shadow none
     > .q-btn-item
       .q-btn__wrapper:before
         box-shadow none
+
   &--outline
     > .q-separator
       display none
     > .q-btn-item + .q-btn-item
-      border-left 0
+      .q-btn__wrapper:before
+        border-left 0
     > .q-btn-item:not(:last-child)
-      border-right 0
+      .q-btn__wrapper:before
+        border-right 0
+
   &--stretch
     align-self stretch
     border-radius 0
+
   &--glossy
     > .q-btn-item
       background-image linear-gradient(to bottom, rgba(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .04)) !important

ui/src/components/btn/QBtn.sass

@@ -65,9 +65,11 @@
     border-radius: $button-border-radius
 
   &--outline
-    border: 1px solid currentColor
     background: transparent !important
 
+    .q-btn__wrapper:before
+      border: 1px solid currentColor
+
   &--push
     border-radius: $button-push-border-radius
 
@@ -82,7 +84,7 @@
 
       &:active,
       &.q-btn--active
-        transform: translateY(3px)
+        transform: translateY(2px)
 
         .q-btn__wrapper:before
           border-bottom-width: 0

ui/src/components/btn/QBtn.styl

@@ -65,9 +65,11 @@
     border-radius $button-border-radius
 
   &--outline
-    border 1px solid currentColor
     background transparent !important
 
+    .q-btn__wrapper:before
+      border 1px solid currentColor
+
   &--push
     border-radius $button-push-border-radius
 
@@ -82,7 +84,7 @@
 
       &:active,
       &.q-btn--active
-        transform translateY(3px)
+        transform translateY(2px)
 
         .q-btn__wrapper:before
           border-bottom-width 0

ui/src/css/variables.sass

@@ -466,7 +466,7 @@ $button-padding                 : 4px 16px !default
 $button-dense-padding           : .285em !default
 $button-transition              : $generic-hover-transition !default
 $button-font-size               : 14px !default
-$button-line-height             : 1.718em !default
+$button-line-height             : 1.625em !default
 $button-font-weight             : 500 !default
 $button-shadow                  : $shadow-2 !default
 $button-shadow-active           : $shadow-5 !default

ui/src/css/variables.styl

@@ -548,7 +548,7 @@ $button-padding                 ?= 4px 16px
 $button-dense-padding           ?= .285em
 $button-transition              ?= $generic-hover-transition
 $button-font-size               ?= 14px
-$button-line-height             ?= 1.718em
+$button-line-height             ?= 1.625em
 $button-font-weight             ?= 500
 $button-shadow                  ?= $shadow-2
 $button-shadow-active           ?= $shadow-5