138 lines
3.3 KiB
SCSS
138 lines
3.3 KiB
SCSS
@import "./buttons.md.vars";
|
|
@import "./buttons";
|
|
|
|
// Material Design Toolbar Default Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) ion-button {
|
|
--padding-top: 0;
|
|
--padding-bottom: 0;
|
|
--padding-start: 8px;
|
|
--padding-end: 8px;
|
|
--box-shadow: none;
|
|
|
|
@include margin-horizontal(2px, 2px);
|
|
|
|
height: 32px;
|
|
|
|
font-size: #{$toolbar-md-button-font-size};
|
|
font-weight: 500;
|
|
}
|
|
|
|
::slotted(*) ion-button:not(.button-round) {
|
|
--border-radius: #{$toolbar-md-button-border-radius};
|
|
}
|
|
|
|
|
|
// Material Design Toolbar w/ Color: Default Buttons
|
|
// --------------------------------------------------
|
|
|
|
:host-context(.ion-color)::slotted(*) .button {
|
|
--color: initial;
|
|
--color-focused: #{current-color(contrast)};
|
|
--color-hover: #{current-color(contrast)};
|
|
--background-activated: transparent;
|
|
--background-focused: #{current-color(contrast)};
|
|
--background-hover: #{current-color(contrast)};
|
|
}
|
|
|
|
:host-context(.ion-color)::slotted(*) .button-solid {
|
|
--background: #{current-color(contrast)};
|
|
--background-activated: transparent;
|
|
--background-focused: #{current-color(shade)};
|
|
--background-hover: #{current-color(base)};
|
|
--color: #{current-color(base)};
|
|
--color-focused: #{current-color(base)};
|
|
--color-hover: #{current-color(base)};
|
|
}
|
|
|
|
:host-context(.ion-color)::slotted(*) .button-outline {
|
|
--border-color: #{current-color(contrast)};
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Icon Only Clear Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-has-icon-only.button-clear {
|
|
--padding-top: 12px;
|
|
--padding-end: 12px;
|
|
--padding-bottom: 12px;
|
|
--padding-start: 12px;
|
|
--border-radius: 50%;
|
|
|
|
@include margin(0);
|
|
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
|
|
::slotted(*) .button {
|
|
--background-hover: currentColor;
|
|
}
|
|
|
|
// Material Design Toolbar Solid Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-solid {
|
|
--color: #{$toolbar-md-background};
|
|
--color-activated: #{$toolbar-md-background};
|
|
--background: #{$toolbar-md-color};
|
|
--background-activated: transparent;
|
|
--background-focused: currentColor;
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Outline Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-outline {
|
|
--color: initial;
|
|
--color-activated: currentColor;
|
|
--color-focused: #{$toolbar-md-color};
|
|
--background: transparent;
|
|
--background-activated: transparent;
|
|
--background-focused: currentColor;
|
|
--background-hover: currentColor;
|
|
--border-color: #{$toolbar-md-color};
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Clear Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-clear {
|
|
--color: initial;
|
|
--color-focused: #{$toolbar-md-color};
|
|
--color-activated: currentColor;
|
|
--background: transparent;
|
|
--background-activated: transparent;
|
|
--background-focused: currentColor;
|
|
--background-hover: currentColor;
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Button Icon
|
|
// --------------------------------------------------
|
|
::slotted(*) ion-icon[slot="start"] {
|
|
@include margin(0);
|
|
@include margin-horizontal(null, .3em);
|
|
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
::slotted(*) ion-icon[slot="end"] {
|
|
@include margin(0);
|
|
@include margin-horizontal(.4em, null);
|
|
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
::slotted(*) ion-icon[slot="icon-only"] {
|
|
@include padding(0);
|
|
@include margin(0);
|
|
|
|
font-size: 1.8em;
|
|
}
|