javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): add custom properties and remove --ion-color overrides (#15463)

Browse Source 
- adds custom properties 
- removes the overrides of `--ion-color-*` variables
- documents the properties

references #14808 references #14853 references #14850
This commit is contained in:
Brandy Carney
2018-09-05 12:23:47 -04:00
committed by GitHub
parent 1f24370497
commit 3af43610bb
15 changed files with 489 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,9 +5,6 @@
// --------------------------------------------------
:host {
--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};
--border-radius: #{$button-md-border-radius};
--margin-top: #{$button-md-margin-top};
--margin-bottom: #{$button-md-margin-bottom};
@ -18,6 +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};
font-size: #{$button-md-font-size};
font-weight: #{$button-md-font-weight};
@ -36,7 +36,6 @@
:host(.button-solid.activated) {
--box-shadow: #{$button-md-box-shadow-activated};
--background: #{current-color(shade)};
}
// Material Design Outline Button
@ -46,14 +45,13 @@
--border-width: 1px;
--border-style: solid;
--box-shadow: none;
--background-activated: transparent;
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, base)};
}
:host(.button-outline.activated) {
--background: transparent;
}
:host(.button-outline.focused) {
--background: #{current-color(base, .1)};
:host(.button-outline.activated.ion-color) .button-native {
background: transparent;
}
@ -62,6 +60,10 @@
:host(.button-clear) {
--opacity: #{$button-md-clear-opacity};
--background-activated: transparent;
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
}