Skip to content

Commit

Permalink
fix(buttons): Changes style of buttons.
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: (css class): Removes btn-primary

Signed-off-by: Kenny Wang <kwang@pivotal.io>
  • Loading branch information
@stubbornella
stubbornella authored and August Toman-Yih committed Aug 10, 2015
1 parent d97439a commit 8b86a1f
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 65 deletions.
3 changes: 1 addition & 2 deletions spec/pivotal-ui-react/buttons/button_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand All @@ -126,7 +125,7 @@ describe('UIButton', function() {
React.render(<Button>Click here</Button>, 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);
});
Expand Down
41 changes: 17 additions & 24 deletions src/pivotal-ui/components/buttons/buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```html_example_table
<button class="btn btn-primary">Button</button>
<button class="btn btn-default">Button</button>
<a class="btn btn-primary" href="http://trulia.com">Link</a>
<a class="btn btn-default" href="http://trulia.com">Link</a>
```
If your button is actually a link to another page, please use the
Expand All @@ -47,21 +47,20 @@ size and style modifiers.
Create block level buttons - those that span the full width of a parent - by adding `.btn-block`.
```html_example
<button class="btn btn-primary btn-block">Full width button</button>
<button class="btn btn-default btn-block">Full width button</button>
```
*/

.btn {
font-weight: 900;
font-weight: $btn-font-weight;
padding: 5px 15px;

&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
box-shadow: 0 3px 0 $shadow-2;
}
}

Expand All @@ -76,44 +75,38 @@ Button | Disabled
------------------------------------------------------------------ | -------------------------------------------------------------------------- | ----------------------- | -----------
<button class="btn btn-default">Default</button> |<button class="btn btn-default" disabled>Default</button> | `btn btn-default` | This is what buttons look like, this is the go to button style.
<button class="btn btn-default-alt">Default alternate</button> |<button class="btn btn-default-alt" disabled>Default alternate</button> | `btn btn-default-alt` | This is what buttons look like, this is the go to button style (on white backgrounds).
<button class="btn btn-primary">Primary</button> |<button class="btn btn-primary" disabled>Primary</button> | `btn btn-primary` | Use this button as the primary call to action
<button class="btn btn-lowlight">Lowlight</button> |<button class="btn btn-lowlight" disabled>Lowlight</button> | `btn btn-lowlight` | Use this button for other actions, like cancel/dismiss
<button class="btn btn-danger">Delete</button> |<button class="btn btn-danger" disabled>Delete</button> | `btn btn-danger` | This button is for delete actions, these actions should also have a confirmation dialog
<button class="btn btn-highlight">Highlight</button> |<button class="btn btn-highlight" disabled>Highlight</button> | `btn btn-highlight` | Use this button for other important actions, e.g. restarting apps
<button class="btn btn-highlight-alt">Highlight alternate</button> |<button class="btn btn-highlight-alt" disabled>Highlight alternate</button> | `btn btn-highlight-alt` | Use this button for other important actions, e.g. marketing call to actions
*/

.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;
}

Expand All @@ -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
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-default btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-default">Default</button>
```
*/
Expand Down
51 changes: 30 additions & 21 deletions src/pivotal-ui/components/mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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] & {
Expand All @@ -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;
}
}

Expand Down
35 changes: 17 additions & 18 deletions src/pivotal-ui/components/pui-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -258,15 +259,15 @@ $navbar-width: 210px;
// Scaffolding
// -------------------------

$html-bg: white;
$html-bg: $neutral-11;
$body-bg: transparent;
$text-color: $neutral-3 !default;

// Links
// -------------------------

$link-color: $accent-3;
$link-hover-color: $dark-2;
$link-hover-color: $accent-4;
$link-hover-decoration: underline !default;

$link-lowlight-color: $accent-5;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 8b86a1f

Please sign in to comment.