diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss index 3fcd61b83efc..f542a4fcc944 100644 --- a/src/lib/button/_button-base.scss +++ b/src/lib/button/_button-base.scss @@ -6,16 +6,17 @@ // Flat and raised button standards $mat-button-padding: 0 16px !default; -$mat-button-min-width: 64px !default; +$mat-button-min-width: 88px !default; $mat-button-margin: 0 !default; $mat-button-line-height: 36px !default; -$mat-button-border-radius: 4px !default; +$mat-button-border-radius: 2px !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 @@ -63,7 +64,7 @@ $mat-mini-fab-padding: 8px !default; &.cdk-keyboard-focused, &.cdk-program-focused { .mat-button-focus-overlay { - opacity: 0.12; + opacity: 1; } } diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index 30f648858e1c..bc21f0c91f33 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); + background-color: mat-color($primary, 0.12); } &.mat-accent .mat-button-focus-overlay { - background-color: mat-color($accent); + background-color: mat-color($accent, 0.12); } &.mat-warn .mat-button-focus-overlay { - background-color: mat-color($warn); + background-color: mat-color($warn, 0.12); } &[disabled] .mat-button-focus-overlay { @@ -91,16 +91,6 @@ @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 9160fe2ac03e..c06e44920551 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: 0.04; + opacity: 1; } // Disable the hover styles on non-hover devices. Since this is more of a progressive @@ -38,7 +38,8 @@ .mat-stroked-button { @include mat-overridable-elevation(0); - border: solid 1px currentColor; + + border: 1px solid currentColor; padding: $mat-stroked-button-padding; line-height: $mat-stroked-button-line-height; } @@ -65,6 +66,7 @@ height: $mat-icon-button-size; flex-shrink: 0; + line-height: $mat-icon-button-size; border-radius: $mat-icon-button-border-radius; @@ -91,6 +93,9 @@ // 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;