146 lines
3.7 KiB
SCSS
146 lines
3.7 KiB
SCSS
@import "./buttons.ios.vars";
|
|
@import "./buttons";
|
|
|
|
|
|
// iOS Toolbar Default Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) ion-button {
|
|
--padding-start: 5px;
|
|
--padding-end: 5px;
|
|
|
|
@include margin-horizontal(2px, 2px);
|
|
|
|
height: 32px;
|
|
|
|
font-size: #{$toolbar-ios-button-font-size};
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
|
|
::slotted(*) ion-button:not(.button-round) {
|
|
--border-radius: #{$toolbar-ios-button-border-radius};
|
|
}
|
|
|
|
// iOS Toolbar with Color: Default Buttons
|
|
// --------------------------------------------------
|
|
|
|
:host-context(.ion-color)::slotted(*) .button {
|
|
--color: initial;
|
|
--border-color: initial;
|
|
--background-focused: #{current-color(contrast)};
|
|
}
|
|
|
|
:host-context(.ion-color)::slotted(*) .button-solid {
|
|
--background: #{current-color(contrast)};
|
|
--background-focused: #000;
|
|
--background-focused-opacity: .12;
|
|
--background-activated: #000;
|
|
--background-activated-opacity: .12;
|
|
--color: #{current-color(base)};
|
|
--color-focused: #{current-color(base)};
|
|
}
|
|
|
|
:host-context(.ion-color)::slotted(*) .button-clear {
|
|
--color-activated: #{current-color(contrast)};
|
|
--color-focused: #{current-color(contrast)};
|
|
}
|
|
|
|
:host-context(.ion-color)::slotted(*) .button-outline {
|
|
--color-activated: #{current-color(base)};
|
|
--color-focused: #{current-color(contrast)};
|
|
}
|
|
|
|
|
|
// iOS Toolbar Button Clear
|
|
// --------------------------------------------------
|
|
|
|
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
|
|
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
|
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
|
--background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
|
}
|
|
|
|
|
|
// iOS Toolbar Button Outline
|
|
// --------------------------------------------------
|
|
|
|
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
|
|
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
|
--color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
|
|
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
|
--border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
|
--background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
|
}
|
|
|
|
|
|
// iOS Toolbar Button Solid
|
|
// --------------------------------------------------
|
|
|
|
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
|
|
--color: #{$toolbar-ios-background};
|
|
--color-activated: #{$toolbar-ios-background};
|
|
--color-focused: #{$toolbar-ios-background};
|
|
--background: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
|
--background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
|
|
--background-hover-opacity: 0.1;
|
|
--background-focused: #000;
|
|
--background-focused-opacity: .12;
|
|
--background-activated: #000;
|
|
--background-activated-opacity: .12;
|
|
}
|
|
|
|
|
|
// iOS Toolbar Button Icon
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) ion-icon[slot="start"] {
|
|
@include margin(0);
|
|
@include margin-horizontal(null, .3em);
|
|
|
|
font-size: 24px;
|
|
|
|
line-height: .67;
|
|
}
|
|
|
|
::slotted(*) ion-icon[slot="end"] {
|
|
@include margin(0);
|
|
@include margin-horizontal(.4em, null);
|
|
|
|
font-size: 24px;
|
|
|
|
line-height: .67;
|
|
}
|
|
|
|
::slotted(*) ion-icon[slot="icon-only"] {
|
|
@include padding(0);
|
|
@include margin(0);
|
|
|
|
font-size: 31px;
|
|
|
|
line-height: .67;
|
|
}
|
|
|
|
|
|
// iOS Toolbar Menu Toggle
|
|
// --------------------------------------------------
|
|
|
|
// .button-menutoggle-ios {
|
|
// order: map-get($toolbar-order-ios, menu-toggle-start);
|
|
|
|
// min-width: 36px;
|
|
|
|
// --padding-top: 0;
|
|
// --padding-bottom: 0;
|
|
// --padding-start: 0;
|
|
// --padding-end: 0;
|
|
|
|
// ion-icon {
|
|
// @include padding(0, 6px);
|
|
|
|
// font-size: 28px;
|
|
// }
|
|
// }
|
|
|