skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revert "feat(button): align with 2018 material design spec (#12537)" (#13080)

Browse Source 
This reverts commit 4ddbde93ea.
This commit is contained in:
Jeremy Elbourn
2018-09-11 10:31:05 -07:00
committed by GitHub
parent 1908b3e8eb
commit 5718975b57
3 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/button/_button-base.scss
+5 -4
View File
@@ -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;
}
}
src/lib/button/_button-theme.scss
+3 -13
View File
@@ -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);
src/lib/button/button.scss
+7 -2
View File
@@ -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;