[BUGFIX] Use correct check in search if list module is available
[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 li:last-child {
56 @media (min-width: @scaffold-breakpoint) {
57 width: 300px;
58 }
59
60 }
61 }
62
63 // Toolbar Item
64 .toolbar-item {
65 padding: 4px;
66 position: relative;
67 display: block;
68 float: left;
69 width: 100%;
70 @media (min-width: 600px) {
71 width: 50%;
72 }
73 @media (min-width: 750px) {
74 width: 33.33%;
75 }
76 @media (min-width: @scaffold-breakpoint) {
77 padding: 0;
78 width: auto;
79 margin-left: 1px;
80 }
81 }
82
83 // Dropdown Menu
84 .toolbar-item {
85 .dropdown-menu {
86 width: 350px;
87
88 .text-muted {
89 color: lighten(@text-muted, 10%);
90 }
91 a:hover,
92 a:focus {
93 .text-muted {
94 color: lighten(@text-muted, 20%);
95 }
96 }
97 }
98 @media (max-width: @scaffold-breakpoint-max) {
99 .dropdown-menu {
100 overflow: auto;
101 padding: @grid-gutter-width / 2;
102 position: fixed;
103 max-height: 90%;
104 max-width: 90%;
105 top: 50%;
106 left: 50%;
107 transform: translate(-50%, -50%);
108 }
109 .dropdown-backdrop {
110 background: rgba(0,0,0,0.65);
111 }
112 }
113
114 }
115
116 // Toolbar Item
117 .toolbar-item-avatar {
118 width: 32px;
119 display: inline-block;
120 .avatar {
121 position: absolute;
122 top: 50%;
123 left: 10px;
124 transform: translate(0,-50%);
125 }
126 }
127 .toolbar-item-badge {
128 position: absolute;
129 bottom: 4px;
130 right: 4px;
131 padding: 3px 4px;
132 border-radius: 0;
133 font-size: 10px;
134 font-weight: normal;
135 min-width: 16px;
136
137 }
138
139 // Toolbar Item Link
140 .toolbar-item-link {
141 white-space: nowrap;
142 overflow: hidden;
143 text-overflow: ellipsis;
144 border: 1px solid rgba(0,0,0,0.5);
145 position: relative;
146 display: block;
147 text-decoration: none;
148 padding: @toolbar-item-padding-vertical @toolbar-item-padding-horizontal;
149 height: @toolbar-height;
150 line-height: @toolbar-height - (@toolbar-item-padding-vertical * 2);
151 &:hover,
152 &:focus {
153 text-decoration: none;
154 }
155 @media (min-width: @scaffold-breakpoint) {
156 border: none;
157 }
158 }
159 .open {
160 .toolbar-item-link {
161 background-color: #424242;
162 }
163 }
164 @media (min-width: @scaffold-breakpoint) {
165 .toolbar-item-title {
166 display: none;
167 }
168 }
169
170 // Search
171 .toolbar-item-search {
172 form {
173 padding: 0;
174 margin: 0;
175 }
176 .toolbar-item-link {
177 padding: 0;
178 margin: 0;
179 height: 0;
180 }
181 .form-group {
182 margin: 0;
183 }
184 .close {
185 color: #ffffff;
186 text-shadow: none;
187 opacity: 1;
188 }
189 .dropdown-menu {
190 @media (max-width: @scaffold-breakpoint-max) {
191 top: 114px;
192 left: 14px;
193 right: 14px;
194 width: auto;
195 max-width: none;
196 max-height: none;
197 transform: none;
198 bottom: 14px;
199 }
200 @media (min-width: @scaffold-breakpoint) {
201 left: auto;
202 right: 0;
203 }
204 }
205 .autocomplete-suggestions {
206 position: static!important;
207 }
208 .autocomplete-suggestion {
209 border: none;
210 }
211 &.open {
212 .toolbar-item-search-form {
213 position: relative;
214 z-index: 991;
215 }
216 }
217 }
218 .toolbar-item-search-field {
219 color: inherit;
220 background-color: @toolbar-navigation-search-bg;
221 margin: 0;
222 border-radius: 0;
223 border: 1px solid rgba(0,0,0,0.5);
224 @media (min-width: @scaffold-breakpoint) {
225 border: none;
226 }
227 height: @toolbar-height;
228 box-shadow: none;
229 &:hover {
230 background-color: @toolbar-navigation-search-hover-bg;
231 }
232 &:focus {
233 box-shadow: none;
234 background-color: @toolbar-navigation-search-focus-bg;
235 }
236 }