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