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