Skip to content

Commit

Permalink
Merge pull request #27 from tw15egan/watson-buttons
Browse files Browse the repository at this point in the history 
Watson buttons
  • Loading branch information
@marijohannessen
marijohannessen authored Apr 17, 2017
2 parents db0f1df + e94c564 commit 7debb14
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 177 deletions.
2 changes: 1 addition & 1 deletion src/components/button/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@

.bx--btn--sm {
height: 2rem;
padding: 0 .5rem;
padding: $button-padding-sm;
letter-spacing: 0;
}

Expand Down
157 changes: 8 additions & 149 deletions src/components/button/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@
@include helvetica;
@include font-smoothing;
@include letter-spacing;
@include font-size('14');
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
height: rem(40px);
padding: 0 1rem;
font-size: $button-font-size;
font-weight: $button-font-weight;
height: rem($button-height);
padding: $button-padding;
border-radius: $button-border-radius;
text-align: center;
text-decoration: none;
transition-duration: $transition--base;
Expand All @@ -31,13 +32,14 @@
width: rem(16px);
height: rem(16px);
margin-left: .5rem;
transition-duration: $transition--base;
}
}

@mixin button-theme($bg-color, $border-color, $font-color, $hover-bg-color, $icon-color) {
background-color: $bg-color;
border: 2px solid $border-color;
border-width: $button-border-width;
border-style: solid;
border-color: $border-color;
color: $font-color;

&:hover,
Expand All @@ -58,146 +60,3 @@
fill: $icon-color;
}
}

/* ☠️️ Deprecated - after updating the following components, can be deleted in 7.x
- footer
- form
- modal
*/

@mixin btn--browser-fixes {
$class: &;

@at-root button#{$class} {
// CSS selector becomes: button.& {}, where & === is whatever class the ampersand equals
// <button> elements cannot be used as flex containers
display: inline-block;

svg {
// Vertically centering icon inside <button>
position: relative;
vertical-align: middle;
top: -1px;
}

// Targets IE10+ browsers
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// Reset <svg> position for vertical centering
svg { top: 0; }
}
}

&::-moz-focus-inner {
// Reset intrisic padding in Firefox (see #731)
padding: 0;
border: 0;
}
}

@mixin btn--base {
@include reset;
@include btn--browser-fixes;
@include helvetica;
@include font-smoothing;
@include letter-spacing;
@include font-size('14');
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
height: rem(40px);
padding: 0 1rem;
text-align: center;
text-decoration: none;
transition-duration: $transition--base;
transition-timing-function: ease-in;
white-space: nowrap;

&:disabled {
cursor: not-allowed;
opacity: .5;
}

&:focus {
@include focus-outline;
}

svg {
width: rem(16px);
height: rem(16px);
margin-left: .5rem;
}
}


@mixin btn--primary(
$bg: $brand-01,
$hover-bg: $brand-02,
$text: $inverse-01
) {
@include btn--base;
color: $text;
background-color: $bg;
border: 2px solid transparent;

&:hover,
&:focus {
background-color: $hover-bg;

&:disabled {
background-color: $bg;
}
}

&:active {
background-color: darken($bg, 20%);
}
}

@mixin btn--secondary(
$hover-bg: $brand-01,
$text: $hover-bg,
$hover-text: $inverse-01
) {
@include btn--base;
color: $text;
background-color: transparent;
border: 2px solid $hover-bg;

&:hover,
&:focus {
color: $hover-text;
background-color: $hover-bg;

&:disabled {
color: $text;
background-color: transparent;
}
}

&:active {
background-color: darken($hover-bg, 20%);
}
}

@mixin btn--danger {
@include btn--base;
color: $ui-05;
background-color: transparent;
border: 2px solid currentColor;

&:hover,
&:focus {
color: $inverse-01;
border: 2px solid transparent;
background-color: $support-01;

&:disabled {
color: $inverse-01;
background-color: transparent;
border: 2px solid currentColor;
}
}
}
27 changes: 0 additions & 27 deletions src/globals/scss/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,30 +54,3 @@ $color__purple-20: #d7aaff !default;
$color__purple-30: #ba8ff7 !default;
$color__purple-40: #af6ee8 !default;
$color__purple-60: #734098 !default;

// 7.x -- Light UI Colors
$brand-01: $color__blue-51 !default;
$brand-02: $color__blue-40 !default;
$brand-03: $color__teal-20 !default;
$inverse-01: $color__white !default;
$ui-01: $color__white !default;
$ui-02: $color__gray-3 !default;
$ui-03: $color__gray-2 !default;
$ui-04: $color__gray-1 !default;
$ui-05: $color__navy-gray-7 !default;
$text-01: $color__blue-90 !default;
$text-02: $color__navy-gray-6 !default;
$text-03: $color__navy-gray-6 !default;
$field-01: rgba($color__blue-51, .1) !default;
$support-01: $color__red-50 !default;
$support-02: $color__green-40 !default;
$support-03: $color__yellow-30 !default;
$support-04: $color__blue-30 !default;
$nav-01: $color__navy-gray-1 !default;
$nav-02: $color__blue-90 !default;
$nav-03: $color__purple-30 !default;
$nav-04: $color__purple-60 !default;
$nav-05: $color__teal-40 !default;
$nav-06: $color__teal-50 !default;
$nav-07: $color__blue-30 !default;
$nav-08: $color__blue-51 !default;
37 changes: 37 additions & 0 deletions src/globals/scss/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,40 @@ $bx--ease-in: cubic-bezier(.25, 0, 1, 1); // Used primarily for removing element
$bx--ease-out: cubic-bezier(0, 0, .25, 1); // Used for adding elements to the screen or changing on-screen states at a users's input.
$bx--standard-easing: cubic-bezier(.5, 0, .1, 1); // Used for the majority of animations.
$transition--base: 250ms;


// Color Theme Variables
$brand-01: $color__blue-51 !default;
$brand-02: $color__blue-40 !default;
$brand-03: $color__teal-20 !default;
$inverse-01: $color__white !default;
$ui-01: $color__white !default;
$ui-02: $color__gray-3 !default;
$ui-03: $color__gray-2 !default;
$ui-04: $color__gray-1 !default;
$ui-05: $color__navy-gray-7 !default;
$text-01: $color__blue-90 !default;
$text-02: $color__navy-gray-6 !default;
$text-03: $color__navy-gray-6 !default;
$field-01: rgba($color__blue-51, .1) !default;
$support-01: $color__red-50 !default;
$support-02: $color__green-40 !default;
$support-03: $color__yellow-30 !default;
$support-04: $color__blue-30 !default;
$nav-01: $color__navy-gray-1 !default;
$nav-02: $color__blue-90 !default;
$nav-03: $color__purple-30 !default;
$nav-04: $color__purple-60 !default;
$nav-05: $color__teal-40 !default;
$nav-06: $color__teal-50 !default;
$nav-07: $color__blue-30 !default;
$nav-08: $color__blue-51 !default;

// Button Theme Variables
$button-font-weight: 700 !default;
$button-font-size: .875rem !default;
$button-border-radius: 0 !default;
$button-height: 40px !default;
$button-padding: 0 1rem !default;
$button-padding-sm: 0 .5rem !default;
$button-border-width: 2px !default;

0 comments on commit 7debb14

Please sign in to comment.