From 8b86a1fd4e59dc90ece22709ed04664e4b863529 Mon Sep 17 00:00:00 2001 From: Nicole Sullivan Date: Mon, 10 Aug 2015 11:23:13 -0700 Subject: [PATCH] fix(buttons): Changes style of buttons. BREAKING CHANGE: (css class): Removes btn-primary Signed-off-by: Kenny Wang --- spec/pivotal-ui-react/buttons/button_spec.js | 3 +- .../components/buttons/buttons.scss | 41 +++++++-------- src/pivotal-ui/components/mixins.scss | 51 +++++++++++-------- src/pivotal-ui/components/pui-variables.scss | 35 +++++++------ 4 files changed, 65 insertions(+), 65 deletions(-) diff --git a/spec/pivotal-ui-react/buttons/button_spec.js b/spec/pivotal-ui-react/buttons/button_spec.js index 68f9a305f..f09fdc9d9 100644 --- a/spec/pivotal-ui-react/buttons/button_spec.js +++ b/spec/pivotal-ui-react/buttons/button_spec.js @@ -114,7 +114,6 @@ describe('UIButton', function() { [ {name: 'DefaultAltButton', btnClass: 'btn-default-alt'}, - {name: 'PrimaryButton', btnClass: 'btn-primary'}, {name: 'LowlightButton', btnClass: 'btn-lowlight'}, {name: 'DangerButton', btnClass: 'btn-danger'}, {name: 'HighlightButton', btnClass: 'btn-highlight'}, @@ -126,7 +125,7 @@ describe('UIButton', function() { React.render(, root); }); - it('renders with the btn-primary class', function() { + it('renders with the btn-default class', function() { expect('button.btn').not.toHaveClass('btn-default'); expect('button.btn').toHaveClass(btnClass); }); diff --git a/src/pivotal-ui/components/buttons/buttons.scss b/src/pivotal-ui/components/buttons/buttons.scss index e37c1af3f..151852cb2 100644 --- a/src/pivotal-ui/components/buttons/buttons.scss +++ b/src/pivotal-ui/components/buttons/buttons.scss @@ -21,9 +21,9 @@ Button styles can be applied to any element. Typically you'll want to use either a ` + -Link +Link ``` If your button is actually a link to another page, please use the @@ -47,13 +47,13 @@ size and style modifiers. Create block level buttons - those that span the full width of a parent - by adding `.btn-block`. ```html_example - + ``` */ .btn { - font-weight: 900; + font-weight: $btn-font-weight; padding: 5px 15px; &.disabled, @@ -61,7 +61,6 @@ Create block level buttons - those that span the full width of a parent - by add fieldset[disabled] & { cursor: not-allowed; pointer-events: none; // Future-proof disabling of clicks - box-shadow: 0 3px 0 $shadow-2; } } @@ -76,7 +75,6 @@ Button | Disabled ------------------------------------------------------------------ | -------------------------------------------------------------------------- | ----------------------- | ----------- | | `btn btn-default` | This is what buttons look like, this is the go to button style. | | `btn btn-default-alt` | This is what buttons look like, this is the go to button style (on white backgrounds). - | | `btn btn-primary` | Use this button as the primary call to action | | `btn btn-lowlight` | Use this button for other actions, like cancel/dismiss | | `btn btn-danger` | This button is for delete actions, these actions should also have a confirmation dialog | | `btn btn-highlight` | Use this button for other important actions, e.g. restarting apps @@ -84,36 +82,31 @@ Button | Disabled */ .btn-default { - @include button-skin($btn-default-color, $btn-default-bg, $btn-default-bg-hover); + @include button-skin($btn-default-color, $btn-default-bg, $btn-default-border); } .btn-default-alt { - @include button-skin($btn-default-alt-color, $btn-default-alt-bg, $btn-default-alt-bg-hover, $btn-default-alt-border); + @include button-skin($btn-default-alt-color, $btn-default-alt-bg, $btn-default-alt-border); @include button-shadow; } -.btn-primary { - @include button-skin($btn-primary-color, $btn-primary-bg, $btn-primary-bg-hover); +.btn-lowlight { + @include button-skin($btn-lowlight-color, $btn-lowlight-bg); + } + +// Danger and error appear as red +.btn-danger { + @include button-skin($btn-danger-color, $btn-danger-bg, $border: null, $color-disabled: $btn-danger-color-disabled); @include button-shadow; } .btn-highlight { - @include button-skin($btn-highlight-color, $btn-highlight-bg, $btn-highlight-bg-hover); + @include button-skin($btn-highlight-color, $btn-highlight-bg, $border: null, $color-disabled: $btn-highlight-color-disabled); @include button-shadow; } .btn-highlight-alt { - @include button-skin($btn-highlight-alt-color, $btn-highlight-alt-bg, $btn-highlight-alt-bg-hover); - @include button-shadow; -} - -.btn-lowlight { - @include button-skin($btn-lowlight-color, $btn-lowlight-bg, $btn-lowlight-bg-hover); -} - -// Danger and error appear as red -.btn-danger { - @include button-skin($btn-danger-color, $btn-danger-bg, $btn-danger-bg-hover); + @include button-skin($btn-highlight-alt-color, $btn-highlight-alt-bg, $border: null, $color-disabled: $btn-highlight-alt-color-disabled); @include button-shadow; } @@ -128,9 +121,9 @@ There are two sizes for buttons: Large and default. Simply apply the size modifier class for the desired size. ```html_example_table - + - + ``` */ diff --git a/src/pivotal-ui/components/mixins.scss b/src/pivotal-ui/components/mixins.scss index b2235d4f3..9e573e14f 100644 --- a/src/pivotal-ui/components/mixins.scss +++ b/src/pivotal-ui/components/mixins.scss @@ -14,33 +14,35 @@ /* Button Mixins */ -@mixin button-skin($color, $background, $background-hover, $border: none) { +@mixin button-skin($color, $background, $border: null, $color-disabled: null) { color: $color; background-color: $background; - border: $border; + @if ($border) { + border: 1px solid $border; + } + outline: none; @include transition-pui(); &:hover, - &:focus, + &:focus { + color: lighten($color, 5%); + background-color: lighten($background, 6%); + outline: none; + } &:active, &.active { - color: $color; - background-color: $background-hover; + color: darken($color, 5%); + background-color: darken($background, 6%); + box-shadow: none; outline: none; - border-color: $border; } - .open & { &.dropdown-toggle { + .open & { + &.dropdown-toggle { color: $color; - background-color: $background-hover; - } } - &:active, - &.active { - background-image: none; + background-color: lighten($background, 6%); + } } - .open & { &.dropdown-toggle { - background-image: none; - } } &.disabled, &[disabled], fieldset[disabled] & { @@ -49,20 +51,27 @@ &:focus, &:active, &.active { - background-color: $btn-disabled-bg; - color: $btn-disabled-color; - border-color: $border; + color: $color-disabled; + opacity: 0.5; } } } @mixin button-shadow() { - box-shadow: 0 3px 0 $shadow-3; + box-shadow: 0 2px 0 $btn-shadow; &:hover, &:focus, + &.disabled, + &[disabled], + fieldset[disabled] & { + box-shadow: 0 2px 0 $btn-shadow; + } + &:focus { + box-shadow: 0 2px 0 $btn-shadow; + } &:active, - &.active { - box-shadow: 0 3px 0 $shadow-2; + &.active{ + box-shadow: none; } } diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss index ca16da236..0b06bf313 100644 --- a/src/pivotal-ui/components/pui-variables.scss +++ b/src/pivotal-ui/components/pui-variables.scss @@ -50,6 +50,7 @@ $shadow-1 : rgba(0, 0, 0, 0.3); $shadow-2 : rgba(0, 0, 0, 0.14); $shadow-3 : rgba(0, 0, 0, 0.07); $shadow-4 : rgba(0, 0, 0, 0.035); +$btn-shadow: rgba(211,217,217,0.50); $glow-1 : rgba(255,255,255,0.1); $glow-2 : rgba(255,255,255,0.2); $glow-3 : rgba(255,255,255,0.4); @@ -258,7 +259,7 @@ $navbar-width: 210px; // Scaffolding // ------------------------- -$html-bg: white; +$html-bg: $neutral-11; $body-bg: transparent; $text-color: $neutral-3 !default; @@ -266,7 +267,7 @@ $text-color: $neutral-3 !default; // ------------------------- $link-color: $accent-3; -$link-hover-color: $dark-2; +$link-hover-color: $accent-4; $link-hover-decoration: underline !default; $link-lowlight-color: $accent-5; @@ -433,38 +434,35 @@ $btn-font-weight: 600 !default; $btn-border-width: 0; $btn-default-color: $link-color !default; -$btn-default-bg: $glow-3 !default; // not currently used, but bootstrap relies on this value -$btn-default-border: transparent !default; // not currently used, but bootstrap relies on this value +$btn-default-bg: $neutral-11 !default; +$btn-default-border: $neutral-7 !default; // not currently used, but bootstrap relies on this value $btn-default-border-hover: transparent; -$btn-default-bg-hover: white; $btn-default-alt-color: $link-color; $btn-default-alt-bg: $neutral-11; -$btn-default-alt-bg-hover: $neutral-11; -$btn-default-alt-border: 1px solid rgba(0,0,0,.15); +$btn-default-alt-border: $neutral-7; $btn-primary-color: $accent-3; -$btn-primary-bg: white; -$btn-primary-bg-hover: white; +$btn-primary-bg: $neutral-11; +$btn-primary-bg-hover: $neutral-11; $btn-primary-border: #49A8D5 !default; -$btn-lowlight-color: $neutral-3; -$btn-lowlight-bg: transparent; -$btn-lowlight-bg-hover: $glow-4; +$btn-lowlight-color: $dark-5; +$btn-lowlight-bg: $glow-4; $btn-highlight-color: $neutral-11; +$btn-highlight-color-disabled: $accent-6; $btn-highlight-bg: $accent-3; -$btn-highlight-bg-hover: #1a739e; -$btn-highlight-alt-color: white; -$btn-highlight-alt-bg: $brand-8; -$btn-highlight-alt-bg-hover: $brand-5; +$btn-highlight-alt-color: $neutral-11; +$btn-highlight-alt-color-disabled:$brand-11; +$btn-highlight-alt-bg: $brand-6; // alternate is only used on login pages $btn-alternate-color: #eee !default; $btn-alternate-bg: $brand-primary !default; -$btn-alternate-border: darken($btn-primary-bg, 5%) !default; +$btn-alternate-border: darken($neutral-11, 5%) !default; $btn-success-color: transparent !default; $btn-success-bg: transparent !default; @@ -477,8 +475,9 @@ $btn-warning-bg-hover: transparent; $btn-warning-border: transparent !default; $btn-danger-color: $neutral-11; +$btn-danger-color-disabled: $error-6; $btn-danger-bg: $error-4 !default; -$btn-danger-bg-hover: $error-3 !default; +$btn-danger-bg-hover: $error-5 !default; $btn-danger-border: $brand-danger !default; $btn-info-color: transparent !default;