From 88c4937c527343ab9b22648927cb50f222915aeb Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 22 Dec 2015 17:19:41 +0100 Subject: [PATCH] bring all the buttons to the yard --- _src/_assets/styles/bigchain/_buttons.scss | 40 ++++++++++--------- .../styles/bigchain/_mixins/_buttons.scss | 4 +- _src/_assets/styles/bigchain/_variables.scss | 19 ++++++--- _src/styleguide.md | 27 +++++++++++++ 4 files changed, 63 insertions(+), 27 deletions(-) diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss index 6429b3c..03695d8 100644 --- a/_src/_assets/styles/bigchain/_buttons.scss +++ b/_src/_assets/styles/bigchain/_buttons.scss @@ -15,22 +15,21 @@ vertical-align: middle; cursor: pointer; user-select: none; - border: 1px solid transparent; + border: none; @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); - min-width: 8rem; - &, - &:active, - &.active { - &:focus, - &.focus { - - } + &:hover, + &:focus { + box-shadow: 0 1px 3px rgba($brand-main-blue-dark, .15); + transform: translateY(-1px); } + &:active, &.active { background-image: none; outline: 0; + transform: translateY(0); + box-shadow: 0 1px 3px rgba($brand-main-blue-dark, .05); } &.disabled, &:disabled { @@ -50,22 +49,22 @@ fieldset[disabled] a.btn { // Alternate buttons // .btn-primary { - @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); + @include button-variant($btn-primary-color, $btn-primary-bg); } .btn-secondary { - @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); + @include button-variant($btn-secondary-color, $btn-secondary-bg); } .btn-info { - @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); + @include button-variant($btn-info-color, $btn-info-bg); } .btn-success { - @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); + @include button-variant($btn-success-color, $btn-success-bg); } .btn-warning { - @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); + @include button-variant($btn-warning-color, $btn-warning-bg); } .btn-danger { - @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); + @include button-variant($btn-danger-color, $btn-danger-bg); } // Remove all backgrounds @@ -73,7 +72,7 @@ fieldset[disabled] a.btn { @include button-outline-variant($btn-primary-bg); } .btn-secondary-outline { - @include button-outline-variant($btn-secondary-border); + @include button-outline-variant($btn-secondary); } .btn-info-outline { @include button-outline-variant($btn-info-bg); @@ -104,9 +103,12 @@ fieldset[disabled] a.btn { box-shadow: none; } &, + &:hover, &:focus, &:active { border-color: transparent; + box-shadow: none; + } &:disabled { } @@ -116,15 +118,17 @@ fieldset[disabled] a.btn { // Button Sizes // .btn-lg { - // line-height: ensure even-numbered height of button next to large input @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); } .btn-sm { - // line-height: ensure proper height of button next to small input @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); } +.btn-xs { + // line-height: ensure proper height of button next to small input + @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $line-height-xs, $btn-border-radius-xs); +} // // Block button diff --git a/_src/_assets/styles/bigchain/_mixins/_buttons.scss b/_src/_assets/styles/bigchain/_mixins/_buttons.scss index 224bcfd..4da6398 100644 --- a/_src/_assets/styles/bigchain/_mixins/_buttons.scss +++ b/_src/_assets/styles/bigchain/_mixins/_buttons.scss @@ -1,12 +1,10 @@ // // Button variants // -@mixin button-variant($color, $background, $border) { +@mixin button-variant($color, $background) { $active-background: darken($background, 5%); - $active-border: darken($border, 12%); color: $color !important; background: $background; - border-color: $border; &:hover, &:focus { diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index 2201b5f..1ea76be 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -47,7 +47,7 @@ $font-size-root-lg: 18px !default; $font-size-base: 1rem !default; $font-size-lg: 1.25rem !default; $font-size-sm: 0.875rem !default; -$font-size-xs: 0.75rem !default; +$font-size-xs: 0.65rem !default; $font-size-h1: 3rem !default; $font-size-h2: 2.5rem !default; @@ -92,10 +92,12 @@ $screen-lg: 'min-width: #{$screen-lg-min}'; $spacer: 1rem !default; $line-height-lg: (4 / 3) !default; $line-height-sm: 1.5 !default; +$line-height-xs: 1.5 !default; $border-radius: .15rem !default; $border-radius-lg: .2rem !default; $border-radius-sm: .1rem !default; +$border-radius-xs: .05rem !default; $component-active-color: #fff !default; $component-active-bg: $brand-primary !default; @@ -132,11 +134,12 @@ $btn-padding-y: .375rem !default; $btn-primary-color: #fff !default; $btn-primary-bg: $brand-primary !default; -$btn-primary-border: $btn-primary-bg !default; +$btn-primary-border: $brand-primary !default; $btn-secondary-color: $gray-dark !default; -$btn-secondary-bg: #fff !default; -$btn-secondary-border: #fff !default; +$btn-secondary-bg: $gray-lightest !default; + +$btn-secondary: $gray-light !default; $btn-info-color: #fff !default; $btn-info-bg: $brand-info !default; @@ -156,16 +159,20 @@ $btn-danger-border: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; -$btn-padding-x-sm: .75rem !default; +$btn-padding-x-xs: .75rem !default; +$btn-padding-y-xs: .15rem !default; + +$btn-padding-x-sm: 1.25rem !default; $btn-padding-y-sm: .25rem !default; -$btn-padding-x-lg: 1.25rem !default; +$btn-padding-x-lg: 1.75rem !default; $btn-padding-y-lg: .75rem !default; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius !default; $btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-sm: $border-radius-sm !default; +$btn-border-radius-xs: $border-radius-xs !default; // diff --git a/_src/styleguide.md b/_src/styleguide.md index 5990d12..2903792 100644 --- a/_src/styleguide.md +++ b/_src/styleguide.md @@ -138,6 +138,15 @@ Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commo Button ``` +Button Button Button Button + +```html +Button +Button +Button +Button +``` + Button Button Button Button ```html @@ -147,6 +156,24 @@ Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commo Button ``` +Button Button Button Button + +```html +Button +Button +Button +Button +``` + +Button Button Button Button + +```html +Button +Button +Button +Button +``` + ### Forms