mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
0faa355139
This adjusts our Material Design button to match the updated spec for: - transition timing - outline border styles - clear/outline hover background color
132 lines
3.5 KiB
SCSS
132 lines
3.5 KiB
SCSS
@import "./button";
|
|
@import "./button.md.vars";
|
|
|
|
// Material Design Button
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--border-radius: #{$button-md-border-radius};
|
|
--margin-top: #{$button-md-margin-top};
|
|
--margin-bottom: #{$button-md-margin-bottom};
|
|
--margin-start: #{$button-md-margin-start};
|
|
--margin-end: #{$button-md-margin-end};
|
|
--padding-top: #{$button-md-padding-top};
|
|
--padding-bottom: #{$button-md-padding-bottom};
|
|
--padding-start: #{$button-md-padding-start};
|
|
--padding-end: #{$button-md-padding-end};
|
|
--height: #{$button-md-height};
|
|
--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};
|
|
|
|
letter-spacing: #{$button-md-letter-spacing};
|
|
|
|
text-transform: #{$button-md-text-transform};
|
|
}
|
|
|
|
// Material Design Solid Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-solid) {
|
|
--box-shadow: #{$button-md-box-shadow};
|
|
}
|
|
|
|
:host(.button-solid.activated) {
|
|
--box-shadow: #{$button-md-box-shadow-activated};
|
|
}
|
|
|
|
// Material Design Outline Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-outline) {
|
|
--border-width: 2px;
|
|
--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: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;
|
|
}
|
|
|
|
|
|
// Material Design Clear Button
|
|
// --------------------------------------------------
|
|
|
|
: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)};
|
|
}
|
|
|
|
: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
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-round) {
|
|
--border-radius: #{$button-md-round-border-radius};
|
|
--padding-top: #{$button-md-round-padding-top};
|
|
--padding-start: #{$button-md-round-padding-start};
|
|
--padding-end: #{$button-md-round-padding-end};
|
|
--padding-bottom: #{$button-md-round-padding-bottom};
|
|
}
|
|
|
|
|
|
// Material Design Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-large) {
|
|
--padding-top: #{$button-md-large-padding-top};
|
|
--padding-start: #{$button-md-large-padding-start};
|
|
--padding-end: #{$button-md-large-padding-end};
|
|
--padding-bottom: #{$button-md-large-padding-bottom};
|
|
--height: #{$button-md-large-height};
|
|
|
|
font-size: #{$button-md-large-font-size};
|
|
}
|
|
|
|
:host(.button-small) {
|
|
--padding-top: #{$button-md-small-padding-top};
|
|
--padding-start: #{$button-md-small-padding-start};
|
|
--padding-end: #{$button-md-small-padding-end};
|
|
--padding-bottom: #{$button-md-small-padding-bottom};
|
|
--height: #{$button-md-small-height};
|
|
|
|
font-size: #{$button-md-small-font-size};
|
|
}
|
|
|
|
|
|
// MD strong Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-strong) {
|
|
font-weight: #{$button-md-strong-font-weight};
|
|
}
|
|
|
|
::slotted(ion-icon[slot="icon-only"]) {
|
|
@include padding(0);
|
|
}
|