mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
127 lines
3.3 KiB
SCSS
127 lines
3.3 KiB
SCSS
@import "./button";
|
|
@import "./button.ios.vars";
|
|
|
|
|
|
// iOS Button
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--border-radius: #{$button-ios-border-radius};
|
|
--margin-top: #{$button-ios-margin-top};
|
|
--margin-bottom: #{$button-ios-margin-bottom};
|
|
--margin-start: #{$button-ios-margin-start};
|
|
--margin-end: #{$button-ios-margin-end};
|
|
--padding-top: #{$button-ios-padding-top};
|
|
--padding-bottom: #{$button-ios-padding-bottom};
|
|
--padding-start: #{$button-ios-padding-start};
|
|
--padding-end: #{$button-ios-padding-end};
|
|
--height: #{$button-ios-height};
|
|
--transition: background-color, opacity 100ms linear;
|
|
|
|
font-size: #{$button-ios-font-size};
|
|
font-weight: #{$button-ios-font-weight};
|
|
|
|
letter-spacing: #{$button-ios-letter-spacing};
|
|
}
|
|
|
|
// iOS Solid Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-solid:hover) {
|
|
--opacity: #{$button-ios-opacity-hover};
|
|
}
|
|
|
|
:host(.button-solid.focused) {
|
|
--background: #{current-color(shade)};
|
|
}
|
|
|
|
:host(.button-solid.activated) {
|
|
--background: #{current-color(shade)};
|
|
--opacity: #{$button-ios-opacity-activated};
|
|
}
|
|
|
|
// iOS Outline Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-outline) {
|
|
--border-radius: #{$button-ios-outline-border-radius};
|
|
--border-width: #{$button-ios-outline-border-width};
|
|
--border-style: #{$button-ios-outline-border-style};
|
|
}
|
|
|
|
:host(.button-outline.activated) {
|
|
--background: #{current-color(base)};
|
|
|
|
color: #{current-color(contrast)};
|
|
}
|
|
|
|
:host(.button-outline.focused) {
|
|
--background: #{current-color(base, .1)};
|
|
}
|
|
|
|
:host(.button-outline.activated.focused) {
|
|
--border-color: #{current-color(shade)};
|
|
--background: #{current-color(shade)};
|
|
}
|
|
|
|
// iOS Clear Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-clear:hover) {
|
|
--opacity: #{$button-ios-clear-opacity-hover};
|
|
}
|
|
|
|
:host(.button-clear.activated) {
|
|
--opacity: #{$button-ios-clear-opacity-activated};
|
|
}
|
|
|
|
:host(.button-clear.focused) {
|
|
--background: #{current-color(base, .1)};
|
|
}
|
|
|
|
|
|
// iOS Round Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-round) {
|
|
--border-radius: #{$button-ios-round-border-radius};
|
|
--padding-top: #{$button-ios-round-padding-top};
|
|
--padding-start: #{$button-ios-round-padding-start};
|
|
--padding-end: #{$button-ios-round-padding-end};
|
|
--padding-bottom: #{$button-ios-round-padding-bottom};
|
|
}
|
|
|
|
|
|
// iOS Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-large) {
|
|
--border-radius: #{$button-ios-large-border-radius};
|
|
--padding-top: #{$button-ios-large-padding-top};
|
|
--padding-start: #{$button-ios-large-padding-start};
|
|
--padding-end: #{$button-ios-large-padding-end};
|
|
--padding-bottom: #{$button-ios-large-padding-bottom};
|
|
--height: #{$button-ios-large-height};
|
|
|
|
font-size: #{$button-ios-large-font-size};
|
|
}
|
|
|
|
:host(.button-small) {
|
|
--border-radius: #{$button-ios-small-border-radius};
|
|
--padding-top: #{$button-ios-small-padding-top};
|
|
--padding-start: #{$button-ios-small-padding-start};
|
|
--padding-end: #{$button-ios-small-padding-end};
|
|
--padding-bottom: #{$button-ios-small-padding-bottom};
|
|
--height: #{$button-ios-small-height};
|
|
|
|
font-size: #{$button-ios-small-font-size};
|
|
}
|
|
|
|
|
|
// iOS strong Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-strong) {
|
|
font-weight: #{$button-ios-strong-font-weight};
|
|
}
|