85 lines
1.7 KiB
SCSS
85 lines
1.7 KiB
SCSS
|
// 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: flex-start;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|