1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
/*
TITLE BAR
---------
A navigational component which can display the current screen the user is on, along with additional controls or menu items.
The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order:
- Center
- Left
- Right
*/
/// @Foundation.settings
// Title Bar
$titlebar-center-width: 50% !default;
$titlebar-side-width: (100% - $titlebar-center-width) / 2 !default;
$titlebar-background: #eee !default;
$titlebar-color: #000 !default;
$titlebar-border: 1px solid #ccc !default;
$titlebar-padding: $global-padding !default;
$titlebar-item-classes: (
center: 'center',
left: 'left',
right: 'right',
title: 'title',
) !default;
///
%title-bar {
$center: map-get($titlebar-item-classes, center);
$left: map-get($titlebar-item-classes, left);
$right: map-get($titlebar-item-classes, right);
$title: map-get($titlebar-item-classes, title);
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-start;
overflow: visible;
// Denotes the title of the bar
.#{$title} {
font-weight: bold;
}
// Denotes left, right, and center sections of the bar
.#{$left}, .#{$center}, .#{$right} {
display: block;
white-space: nowrap;
overflow: visible;
// If only one section is in use, stretch it all the way out
&:first-child:last-child {
flex: 1;
margin: 0;
}
}
// Left always comes first, then center, then right
// The left and right sections have the same width
.#{$left} {
order: 1;
flex: 0 0 $titlebar-side-width;
}
.#{$center} {
order: 2;
flex: 0 0 $titlebar-center-width;
text-align: center;
}
.#{$right} {
order: 3;
flex: 0 0 $titlebar-side-width;
text-align: right;
}
// If only left and right are in use, stretch them both out equally
.#{$left}:first-child {
flex: 1 1 auto;
}
.#{$left}:first-child + .#{$right}:last-child {
flex: 1 1 auto;
}
// If only center and right are in use, shift the center section into the right position
.#{$center}:first-child:not(:last-child) {
margin-left: $titlebar-side-width;
}
// If only center and left are in use, override the above style
.#{$center} + .#{$left} {
margin-right: -($titlebar-side-width);
}
}
@mixin title-bar-style(
$background: $titlebar-background,
$color: $titlebar-color,
$border: $titlebar-border,
$padding: $titlebar-padding
) {
background: $background;
color: $color;
padding: $padding;
border-bottom: $border;
}
@mixin title-bar(
$background: $titlebar-background,
$color: $titlebar-color,
$border: $titlebar-border,
$padding: $titlebar-padding
) {
@extend %title-bar;
@include title-bar-style($background, $color, $border, $padding);
}
@include exports(title-bar) {
.title-bar {
@include title-bar;
&.primary {
@include title-bar-style($primary-color, isitlight($primary-color));
a, a:hover { color: isitlight($primary-color); }
@if using(iconic) { .iconic { @include color-icon(isitlight($primary-color)); } }
}
&.dark {
@include title-bar-style($dark-color, #fff);
a, a:hover { color: #fff; }
@if using(iconic) { .iconic { @include color-icon(#fff); } }
}
}
.title-bar-bottom {
border-bottom: 0;
border-top: $titlebar-border;
}
}
|
