javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): match MD spec timing, outline, hover (#16160)

Browse Source 
This adjusts our Material Design button to match the updated spec for:

- transition timing
- outline border styles
- clear/outline hover background color
This commit is contained in:
Cam Wiegert
2018-10-31 11:16:48 -05:00
committed by GitHub
parent 92ee4efb12
commit 0faa355139
2 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
core/src/components/button/button.md.scss
View File

@ -15,9 +15,9 @@
--padding-start: #{$button-md-padding-start};
--padding-end: #{$button-md-padding-end};
--height: #{$button-md-height};
--transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
background-color $button-md-transition-duration $button-md-transition-timing-function,
color $button-md-transition-duration $button-md-transition-timing-function};
--transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
background-color 15ms linear,
color 15ms linear;
font-size: #{$button-md-font-size};
font-weight: #{$button-md-font-weight};
@ -42,7 +42,7 @@
// --------------------------------------------------
:host(.button-outline) {
--border-width: 1px;
--border-width: 2px;
--border-style: solid;
--box-shadow: none;
--background-activated: transparent;
@ -50,6 +50,14 @@
--color-activated: #{ion-color(primary, base)};
}
:host(.button-outline:hover) .button-native {
background: ion-color(primary, base, .04);
}
:host(.button-outline.ion-color:hover) .button-native {
background: current-color(base, .04);
}
:host(.button-outline.activated.ion-color) .button-native {
background: transparent;
}
@ -66,6 +74,14 @@
--color-focused: #{ion-color(primary, base)};
}
:host(.button-clear:hover) .button-native {
background: ion-color(primary, base, .04);
}
:host(.button-clear.ion-color:hover) .button-native {
background: current-color(base, .04);
}
// Material Design Round Button
// --------------------------------------------------

6
core/src/components/button/button.md.vars.scss
View File

@ -47,12 +47,6 @@ $button-md-letter-spacing: 0.06em;
/// @prop - Box shadow of the button
$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Duration of the transition of the button
$button-md-transition-duration: 300ms !default;
/// @prop - Speed curve of the transition of the button
$button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
/// @prop - Opacity of the activated button
$button-md-opacity-activated: 1 !default;