silverstripe-framework/admin/client/src/components/Toolbar/Toolbar.scss

83 lines
1.7 KiB
SCSS

.toolbar,
.toolbar--north,
.toolbar--content,
.toolbar--south {
@include make-container();
height: $toolbar-total-height;
background-color: $body-bg;
.btn-toolbar {
// TODO Remove '.cms .btn-toolbar' override
margin-top: 0;
margin-bottom: 0;
}
}
// Northern bar containing breadcrumb, tabs etc.
.toolbar--north {
display: block;
background-image: none;
background-color: $background-darker;
border-bottom: 1px solid $border-color;
z-index: 60;
position: relative;
}
// TEMP overrides color of links in JqueryUI widgets
// required in modal toolbar eg. insert from URL link)
.toolbar {
a.btn {
color: $body-color-light;
}
.btn {
margin-bottom: 0;
}
}
// Secondary content actions eg. Add page button
.toolbar--content {
padding: $spacer-y * .625 $spacer-x * .625;
@include media-breakpoint-down(md) {
// If toolbar has too many items for smaller screens
&.toolbar--space-save {
// Hide labels and decrease spacing for smaller screens
.btn__text {
@include sr-only();
}
.btn {
margin-right: 0;
}
.btn::before {
margin-right: 0;
}
}
}
}
// Primary content actions
.toolbar--south {
padding-top: $spacer-y * .625;
padding-bottom: $spacer-y * .625;
position: absolute;
bottom: 0;
border-top: 1px solid $border-color;
width: 100%;
}
.toolbar__back-button,
.cms-backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles
float: left;
margin: $spacer-y * .625 $spacer-x / 2 $spacer-y * .625 #{-$spacer-x * .625};
padding-left: $spacer-x / 4;
padding-right: $spacer-x / 4;
border: 0;
color: $body-color-light; // TEMP: Needed for anchor buttons to override legacy styles
}