mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
86fc9a557e
- style all slotted content to order properly in a toolbar, not only buttons - removes duplicated sass variables - use current color in select so icon will inherit toolbar color BREAKING CHANGES - Removes `--icon-color` and `--placeholder-color` from select in favor of inheritance with opacity
62 lines
1.2 KiB
SCSS
62 lines
1.2 KiB
SCSS
@import "./toolbar";
|
|
@import "./toolbar.md.vars";
|
|
|
|
// Material Design Toolbar
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--background: #{$toolbar-md-background};
|
|
--color: #{$toolbar-md-color};
|
|
--border-color: #{$toolbar-md-border-color};
|
|
--padding-top: 4px;
|
|
--padding-bottom: 4px;
|
|
--padding-start: 4px;
|
|
--padding-end: 4px;
|
|
--min-height: 56px;
|
|
}
|
|
|
|
|
|
// Toolbar: Content
|
|
// --------------------------------------------------
|
|
|
|
.toolbar-content {
|
|
flex: 1;
|
|
order: map-get($toolbar-order-md, content);
|
|
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
// Toolbar: Segment
|
|
// --------------------------------------------------
|
|
|
|
:host(.toolbar-segment) {
|
|
--padding-top: 0;
|
|
--padding-bottom: 0;
|
|
--padding-start: 0;
|
|
--padding-end: 0;
|
|
}
|
|
|
|
// Material Design Toolbar Slot Placement
|
|
// --------------------------------------------------
|
|
|
|
::slotted([slot="start"]) {
|
|
order: map-get($toolbar-order-md, slot-start);
|
|
}
|
|
|
|
::slotted([slot="secondary"]) {
|
|
order: map-get($toolbar-order-md, slot-secondary);
|
|
}
|
|
|
|
::slotted([slot="primary"]) {
|
|
order: map-get($toolbar-order-md, slot-primary);
|
|
|
|
text-align: end;
|
|
}
|
|
|
|
::slotted([slot="end"]) {
|
|
order: map-get($toolbar-order-md, slot-end);
|
|
|
|
text-align: end;
|
|
}
|