b7c004f35663ce0db9052a44f3d23d8ebcbc18fd
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / scaffold / _toolbar.scss
1 //
2 // Toolbar
3 //
4 $toolbar-item-padding-vertical: 9px;
5 $toolbar-item-padding-horizontal: 10px;
6 $toolbar-color: #ddd;
7 $toolbar-height: 45px;
8 $toolbar-zindex: $zindex-navbar;
9 $toolbar-bg: $navbar-inverse-bg;
10 $toolbar-navigation-color: $toolbar-color;
11 $toolbar-navigation-bg: #2f2f2f;
12 $toolbar-navigation-border-color: #111;
13 $toolbar-dropdown-padding: 16px;
14 $toolbar-dropdown-color: $toolbar-navigation-color;
15 $toolbar-dropdown-bg: $toolbar-navigation-bg;
16 $toolbar-dropdown-link-bg: $toolbar-navigation-bg;
17 $toolbar-dropdown-link-color: #ddd;
18 $toolbar-dropdown-link-hover-bg: #333;
19 $toolbar-dropdown-link-hover-color: #fff;
20 $toolbar-dropdown-link-active-bg: lighten($toolbar-dropdown-bg, 15);
21 $toolbar-dropdown-link-active-color: #fff;
22 $toolbar-navigation-search-bg: $toolbar-navigation-bg;
23 $toolbar-navigation-search-hover-bg: $toolbar-dropdown-link-hover-bg;
24 $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
25
26 .toolbar {
27     padding: 8px;
28
29     @media (min-width: $scaffold-breakpoint) {
30         padding: 0;
31         background-color: $scaffold-topbar-bg;
32     }
33
34     &:after {
35         clear: both;
36         display: table;
37         content: '';
38     }
39 }
40
41 .toolbar-list {
42     list-style: none;
43     padding: 0;
44     margin: 0;
45
46     &:after {
47         clear: both;
48         display: table;
49         content: '';
50     }
51
52     li:last-child {
53         @media (min-width: $scaffold-breakpoint) {
54             width: 300px;
55         }
56     }
57 }
58
59 // Toolbar Item
60 .toolbar-item {
61     padding: 4px;
62     position: relative;
63     display: block;
64     float: left;
65     width: 100%;
66
67     @media (min-width: 600px) {
68         width: 50%;
69     }
70
71     @media (min-width: 750px) {
72         width: 33.33%;
73     }
74
75     @media (min-width: $scaffold-breakpoint) {
76         padding: 0;
77         width: auto;
78         margin-left: 1px;
79     }
80 }
81
82 // Dropdown Menu
83 .toolbar-item {
84     .dropdown-menu {
85         width: 350px;
86
87         .text-muted {
88             color: lighten($text-muted, 10%);
89         }
90
91         a:hover,
92         a:focus {
93             .text-muted {
94                 color: lighten($text-muted, 20%);
95             }
96         }
97     }
98
99     @media (max-width: $scaffold-breakpoint-max) {
100         .dropdown-menu {
101             overflow: auto;
102             padding: $grid-gutter-width / 2;
103             position: fixed;
104             max-height: 90%;
105             max-width: 90%;
106             top: 50%;
107             left: 50%;
108             transform: translate(-50%, -50%);
109         }
110
111         .dropdown-backdrop {
112             background: rgba(0, 0, 0, 0.65);
113         }
114     }
115 }
116
117 // Toolbar Item
118 .toolbar-item-avatar {
119     width: 32px;
120     display: inline-block;
121
122     .avatar {
123         position: absolute;
124         top: 50%;
125         left: 10px;
126         transform: translate(0, -50%);
127     }
128 }
129
130 .toolbar-item-badge {
131     position: absolute;
132     bottom: 4px;
133     right: 4px;
134     padding: 3px 4px;
135     border-radius: 0;
136     font-size: 10px;
137     font-weight: normal;
138     min-width: 16px;
139 }
140
141 // Toolbar Item Link
142 .toolbar-item-link {
143     white-space: nowrap;
144     overflow: hidden;
145     text-overflow: ellipsis;
146     border: 1px solid rgba(0, 0, 0, 0.5);
147     position: relative;
148     display: block;
149     text-decoration: none;
150     padding: $toolbar-item-padding-vertical $toolbar-item-padding-horizontal;
151     height: $toolbar-height;
152     line-height: $toolbar-height - ($toolbar-item-padding-vertical * 2);
153
154     &:hover,
155     &:focus {
156         text-decoration: none;
157     }
158
159     @media (min-width: $scaffold-breakpoint) {
160         border: none;
161     }
162 }
163
164 .open {
165     .toolbar-item-link {
166         background-color: #292929;
167     }
168 }
169
170 @media (min-width: $scaffold-breakpoint) {
171     .toolbar-item-title {
172         display: none;
173     }
174 }
175
176 // Search
177 .toolbar-item-search {
178     form {
179         padding: 0;
180         margin: 0;
181     }
182
183     .toolbar-item-link {
184         padding: 0;
185         margin: 0;
186         height: 0;
187     }
188
189     .form-group {
190         margin: 0;
191     }
192
193     .close {
194         color: #fff;
195         text-shadow: none;
196         opacity: 1;
197     }
198
199     .dropdown-menu {
200         @media (max-width: $scaffold-breakpoint-max) {
201             top: 114px;
202             left: 14px;
203             right: 14px;
204             width: auto;
205             max-width: none;
206             max-height: none;
207             transform: none;
208             bottom: 14px;
209         }
210
211         @media (min-width: $scaffold-breakpoint) {
212             left: auto;
213             right: 0;
214         }
215     }
216
217     .autocomplete-suggestions {
218         position: static !important;
219     }
220
221     .autocomplete-suggestion {
222         border: none;
223     }
224
225     &.open {
226         .toolbar-item-search-form {
227             position: relative;
228             z-index: 991;
229         }
230     }
231 }
232
233 .toolbar-item-search-field {
234     color: inherit;
235     background-color: $toolbar-navigation-search-bg;
236     margin: 0;
237     border-radius: 0;
238     border: 1px solid rgba(0, 0, 0, 0.5);
239
240     @media (min-width: $scaffold-breakpoint) {
241         border: none;
242     }
243
244     height: $toolbar-height;
245     box-shadow: none;
246
247     &:hover {
248         background-color: $toolbar-navigation-search-hover-bg;
249     }
250
251     &:focus {
252         box-shadow: none;
253         background-color: $toolbar-navigation-search-focus-bg;
254     }
255 }