mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
112 lines
2.3 KiB
SCSS
112 lines
2.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;
|
|
--height: 32px;
|
|
--box-shadow: none;
|
|
|
|
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 Button
|
|
// --------------------------------------------------
|
|
|
|
:host-context(.ion-color)::slotted(*) .button {
|
|
--color: initial;
|
|
--color-activated: initial;
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Solid Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-solid {
|
|
--color: #{$toolbar-md-background};
|
|
--color-activated: #{$toolbar-md-background};
|
|
--background: #{$toolbar-md-color};
|
|
--background-activated: #{$toolbar-md-color};
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Outline Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-outline {
|
|
--color: initial;
|
|
--color-activated: currentColor;
|
|
--background: transparent;
|
|
--background-activated: transparent;
|
|
--border-color: currentColor;
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Clear Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-clear {
|
|
--color: initial;
|
|
--color-activated: currentColor;
|
|
--background: transparent;
|
|
}
|
|
|
|
|
|
// 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;
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Button Placement
|
|
// --------------------------------------------------
|
|
|
|
:host([slot="start"]) {
|
|
order: map-get($toolbar-order-md, buttons-start);
|
|
}
|
|
|
|
:host([slot="secondary"]) {
|
|
order: map-get($toolbar-order-md, buttons-secondary);
|
|
}
|
|
|
|
:host([slot="primary"]) {
|
|
order: map-get($toolbar-order-md, buttons-primary);
|
|
|
|
text-align: end;
|
|
}
|
|
|
|
:host([slot="end"]) {
|
|
order: map-get($toolbar-order-md, buttons-end);
|
|
|
|
text-align: end;
|
|
}
|