// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group title-bar
////
/// Background color of a title bar.
/// @type Color
$titlebar-background: $black !default;
/// Color of text inside a title bar.
/// @type Color
$titlebar-color: $white !default;
/// Padding inside a title bar.
/// @type Length
$titlebar-padding: 0.5rem !default;
/// Font weight of text inside a title bar.
/// @type Weight
$titlebar-text-font-weight: bold !default;
/// Color of menu icons inside a title bar.
/// @type Color
$titlebar-icon-color: $white !default;
/// Color of menu icons inside a title bar on hover.
/// @type Color
$titlebar-icon-color-hover: $medium-gray !default;
/// Spacing between the menu icon and text inside a title bar.
/// @type Length
$titlebar-icon-spacing: 0.25rem !default;
@mixin foundation-title-bar {
.title-bar {
padding: $titlebar-padding;
background: $titlebar-background;
color: $titlebar-color;
@if $global-flexbox {
display: flex;
justify-content: space-between;
align-items: center;
}
@else {
@include clearfix;
}
.menu-icon {
margin-#{$global-left}: $titlebar-icon-spacing;
margin-#{$global-right}: $titlebar-icon-spacing;
}
}
@if $global-flexbox {
.title-bar-left,
.title-bar-right {
flex: 1 1 0px; // sass-lint:disable-line zero-unit
}
.title-bar-right {
text-align: right;
}
}
@else {
.title-bar-left {
float: left;
}
.title-bar-right {
float: right;
text-align: right;
}
}
.title-bar-title {
display: inline-block;
vertical-align: middle;
font-weight: $titlebar-text-font-weight;
}
}
|