diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss index f542a4fcc944..3fcd61b83efc 100644 --- a/src/lib/button/_button-base.scss +++ b/src/lib/button/_button-base.scss @@ -6,17 +6,16 @@ // Flat and raised button standards $mat-button-padding: 0 16px !default; -$mat-button-min-width: 88px !default; +$mat-button-min-width: 64px !default; $mat-button-margin: 0 !default; $mat-button-line-height: 36px !default; -$mat-button-border-radius: 2px !default; +$mat-button-border-radius: 4px !default; $mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function, background-color 200ms $swift-ease-in-out-timing-function !default; -// Stroked Button standards -$mat-stroked-button-line-height: $mat-button-line-height - 2; // Stroked button padding is 1px less horizontally than default/flat/raised // button's padding. +$mat-stroked-button-line-height: $mat-button-line-height - 2; $mat-stroked-button-padding: 0 15px; // Icon Button standards @@ -64,7 +63,7 @@ $mat-mini-fab-padding: 8px !default; &.cdk-keyboard-focused, &.cdk-program-focused { .mat-button-focus-overlay { - opacity: 1; + opacity: 0.12; } } diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index bc21f0c91f33..30f648858e1c 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -8,15 +8,15 @@ $warn: map-get($theme, warn); &.mat-primary .mat-button-focus-overlay { - background-color: mat-color($primary, 0.12); + background-color: mat-color($primary); } &.mat-accent .mat-button-focus-overlay { - background-color: mat-color($accent, 0.12); + background-color: mat-color($accent); } &.mat-warn .mat-button-focus-overlay { - background-color: mat-color($warn, 0.12); + background-color: mat-color($warn); } &[disabled] .mat-button-focus-overlay { @@ -91,6 +91,16 @@ @include _mat-button-ripple-color($theme, default); } + .mat-button-focus-overlay { + background: map_get($foreground, base); + } + + // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion + // order of the theme styles and the button reset may end up resetting this as well. + .mat-stroked-button:not(.mat-button-disabled) { + border-color: mat-color($foreground, divider); + } + .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab { // Default font and background color when not using any color palette. color: mat-color($foreground, text); diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index c06e44920551..9160fe2ac03e 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -19,7 +19,7 @@ // Use the same visual treatment for hover as for focus. .mat-button:hover .mat-button-focus-overlay, .mat-stroked-button:hover .mat-button-focus-overlay { - opacity: 1; + opacity: 0.04; } // Disable the hover styles on non-hover devices. Since this is more of a progressive @@ -38,8 +38,7 @@ .mat-stroked-button { @include mat-overridable-elevation(0); - - border: 1px solid currentColor; + border: solid 1px currentColor; padding: $mat-stroked-button-padding; line-height: $mat-stroked-button-line-height; } @@ -66,7 +65,6 @@ height: $mat-icon-button-size; flex-shrink: 0; - line-height: $mat-icon-button-size; border-radius: $mat-icon-button-border-radius; @@ -93,9 +91,6 @@ // Element that overlays the button to show focus and hover effects. .mat-button-focus-overlay { - // The button spec calls for focus on raised buttons (and FABs) to be indicated with a - // black, 12% opacity shade over the normal color (for both light and dark themes). - background-color: rgba(black, 0.12); border-radius: inherit; opacity: 0;