[TASK] Finetune avatar size in backend toolbar
[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: 28px;
120     margin-right: 2px;
121     display: inline-block;
122
123     .avatar {
124         position: absolute;
125         top: 50%;
126         left: 10px;
127         transform: translate(0, -50%);
128     }
129
130     .avatar,
131     .avatar-image {
132         height: 28px;
133         width: 28px;
134     }
135 }
136
137 .toolbar-item-badge {
138     position: absolute;
139     bottom: 4px;
140     right: 4px;
141     padding: 3px 4px;
142     border-radius: 0;
143     font-size: 10px;
144     font-weight: normal;
145     min-width: 16px;
146 }
147
148 // Toolbar Item Link
149 .toolbar-item-link {
150     white-space: nowrap;
151     overflow: hidden;
152     text-overflow: ellipsis;
153     border: 1px solid rgba(0, 0, 0, 0.5);
154     position: relative;
155     display: block;
156     text-decoration: none;
157     padding: $toolbar-item-padding-vertical $toolbar-item-padding-horizontal;
158     height: $toolbar-height;
159     line-height: $toolbar-height - ($toolbar-item-padding-vertical * 2);
160
161     &:hover,
162     &:focus {
163         text-decoration: none;
164     }
165
166     @media (min-width: $scaffold-breakpoint) {
167         border: none;
168     }
169 }
170
171 .open {
172     .toolbar-item-link {
173         background-color: #292929;
174     }
175 }
176
177 @media (min-width: $scaffold-breakpoint) {
178     .toolbar-item-title {
179         display: none;
180     }
181 }
182
183 // Search
184 .toolbar-item-search {
185     form {
186         padding: 0;
187         margin: 0;
188     }
189
190     .toolbar-item-link {
191         padding: 0;
192         margin: 0;
193         height: 0;
194     }
195
196     .form-group {
197         margin: 0;
198     }
199
200     .close {
201         color: #fff;
202         text-shadow: none;
203         opacity: 1;
204     }
205
206     .dropdown-menu {
207         @media (max-width: $scaffold-breakpoint-max) {
208             top: 114px;
209             left: 14px;
210             right: 14px;
211             width: auto;
212             max-width: none;
213             max-height: none;
214             transform: none;
215             bottom: 14px;
216         }
217
218         @media (min-width: $scaffold-breakpoint) {
219             left: auto;
220             right: 0;
221         }
222     }
223
224     .autocomplete-suggestions {
225         position: static !important;
226     }
227
228     .autocomplete-suggestion {
229         border: none;
230     }
231
232     &.open {
233         .toolbar-item-search-form {
234             position: relative;
235             z-index: 991;
236         }
237     }
238 }
239
240 .toolbar-item-search-field {
241     color: inherit;
242     background-color: $toolbar-navigation-search-bg;
243     margin: 0;
244     border-radius: 0;
245     border: 1px solid rgba(0, 0, 0, 0.5);
246
247     @media (min-width: $scaffold-breakpoint) {
248         border: none;
249     }
250
251     height: $toolbar-height;
252     box-shadow: none;
253
254     &:hover {
255         background-color: $toolbar-navigation-search-hover-bg;
256     }
257
258     &:focus {
259         box-shadow: none;
260         background-color: $toolbar-navigation-search-focus-bg;
261     }
262 }