179 lines
4.7 KiB
SCSS
179 lines
4.7 KiB
SCSS
@import "./button";
|
|
@import "./button.ios.vars";
|
|
|
|
|
|
// iOS Button
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--border-radius: #{$button-ios-border-radius};
|
|
--padding-top: #{$button-ios-padding-top};
|
|
--padding-bottom: #{$button-ios-padding-bottom};
|
|
--padding-start: #{$button-ios-padding-start};
|
|
--padding-end: #{$button-ios-padding-end};
|
|
--transition: background-color, opacity 100ms linear;
|
|
|
|
@include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
|
|
|
|
height: #{$button-ios-height};
|
|
|
|
font-size: #{$button-ios-font-size};
|
|
font-weight: #{$button-ios-font-weight};
|
|
|
|
letter-spacing: #{$button-ios-letter-spacing};
|
|
}
|
|
|
|
|
|
// iOS Solid Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-solid) {
|
|
--background-activated: #{ion-color(primary, shade)};
|
|
--background-focused: #{ion-color(primary, shade)};
|
|
--background-hover: #{ion-color(primary, tint)};
|
|
--background-activated-opacity: 1;
|
|
--background-focused-opacity: 1;
|
|
--background-hover-opacity: 1;
|
|
}
|
|
|
|
|
|
// 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};
|
|
--background-activated: #{ion-color(primary, base)};
|
|
--background-focused: #{ion-color(primary, base)};
|
|
--background-hover: transparent;
|
|
--background-focused-opacity: .1;
|
|
--color-activated: #{ion-color(primary, contrast)};
|
|
}
|
|
|
|
|
|
// iOS Clear Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-clear) {
|
|
--background-activated: transparent;
|
|
--background-focused: #{ion-color(primary, base)};
|
|
--background-hover: transparent;
|
|
--background-focused-opacity: .1;
|
|
|
|
font-size: #{$button-ios-clear-font-size};
|
|
font-weight: #{$button-ios-clear-font-weight};
|
|
|
|
letter-spacing: #{$button-ios-clear-letter-spacing};
|
|
}
|
|
|
|
|
|
// 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 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 strong Button
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-strong) {
|
|
font-weight: #{$button-ios-strong-font-weight};
|
|
}
|
|
|
|
|
|
// iOS Button Activated
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-clear.ion-activated) {
|
|
opacity: #{$button-ios-clear-opacity-activated};
|
|
}
|
|
|
|
:host(.button-outline.ion-activated.ion-color) .button-native {
|
|
color: current-color(contrast);
|
|
|
|
&::after {
|
|
background: current-color(base);
|
|
}
|
|
}
|
|
|
|
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
|
background: #{current-color(shade)};
|
|
}
|
|
|
|
// iOS Button Focused
|
|
// --------------------------------------------------
|
|
|
|
:host(.button-outline.ion-focused.ion-color) .button-native,
|
|
:host(.button-clear.ion-focused.ion-color) .button-native {
|
|
color: current-color(base);
|
|
|
|
&::after {
|
|
background: current-color(base);
|
|
}
|
|
}
|
|
|
|
:host(.button-solid.ion-color.ion-focused) .button-native::after {
|
|
background: #{current-color(shade)};
|
|
}
|
|
|
|
// iOS Button Hover
|
|
// --------------------------------------------------
|
|
|
|
@media (any-hover: hover) {
|
|
// Clear and outline buttons use opacity so set
|
|
// background to transparent
|
|
:host(.button-clear:hover),
|
|
:host(.button-outline:hover) {
|
|
opacity: #{$button-ios-clear-opacity-hover};
|
|
}
|
|
|
|
:host(.button-clear.ion-color:hover) .button-native,
|
|
:host(.button-outline.ion-color:hover) .button-native {
|
|
color: #{current-color(base)};
|
|
|
|
&::after {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// Solid buttons use the tint background
|
|
:host(.button-solid.ion-color:hover) .button-native::after {
|
|
background: #{current-color(tint)};
|
|
}
|
|
}
|