View File | Revision Log | Show Annotations | Download File | View Changeset
/hippo/hippo-cms7/cms/branches/cms-restyling/api/src/main/styling/less/_editor_toolbar.less
Revision: 47788
Committed: Wed Dec 24 10:59:35 2014 UTC (7 years, 5 months ago) by mdenburger
File size: 6361 byte(s)
Log Message:
CMS7-8595: refactoring .less

File Contents

# Content
1 /*
2 * Copyright 2014 Hippo B.V. (http://www.onehippo.com)
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17 .hippo-editor-top {
18 background-color: @editor-toolbar-bgcolor;
19
20 > .hippo-toolbar > div > .hippo-toolbar-section {
21
22 display: block;
23 float: left;
24 height: unit(@editor-toolbar-height, px);
25
26 > li {
27 float: left;
28 height: unit(@editor-toolbar-height, px);
29
30 &:first-child a {
31 padding-left: 32px;
32 }
33
34 > span > a {
35 color: @editor-toolbar-color;
36 text-decoration: none;
37 padding-left: 12px;
38 padding-right: 8px;
39 font-size: unit(@editor-toolbar-fontsize, px);
40 }
41
42 &.menu-item:hover {
43 a {
44 &.menu-action .menu-action-text,
45 &.hippo-toolbar-section-button {
46 color: @editor-toolbar-hover-color;
47 svg {
48 fill: @editor-toolbar-hover-color;
49 }
50
51 &.menu-item-active {
52 color: @editor-toolbar-active-color;
53 svg {
54 fill: @editor-toolbar-active-color;
55 }
56 }
57 }
58 }
59 }
60
61 .menu-item-active {
62 color: @editor-toolbar-active-color;
63 }
64
65 .menu-item-active svg {
66 fill: @editor-toolbar-active-color;
67 }
68
69 .menu-item-inactive svg {
70 fill: @editor-toolbar-color;
71 }
72
73 // Buttons like 'Edit' & 'Save'
74 .menu-action {
75 display: block;
76 height: unit(@editor-toolbar-height, px);
77
78 > span {
79 float: left;
80 display: inline-flex;
81 }
82
83 .menu-action-icon {
84 position: relative;
85 top: 11px;
86 padding-right: 6px;
87 }
88
89 .menu-action-text {
90 position: relative;
91 top: 11px;
92 }
93 }
94
95 // Dropdown buttons like 'Publication'
96 .hippo-toolbar-section-button {
97 display: block;
98 height: unit(@editor-toolbar-height, px);
99
100 // The dropdown icon has a 3 px space right from the arrow-down, so remove those from the padding-right
101 padding-right: 5px;
102
103 > span {
104 float: left;
105 position: relative;
106 top: 11px;
107
108 >.menu-action-text {
109 vertical-align: top;
110 }
111
112 // Language dropdown button
113 >.menu-action-icon {
114 display: inline-flex;
115 position: relative;
116 top: 2px;
117 padding-right: 4px;
118 }
119 }
120
121 > svg {
122 float: left;
123 position: relative;
124 top: 14px;
125 left: 1px;
126 }
127 }
128
129 // Dropdown is shown
130 .menu-item-active {
131 display: block; // Needed for background color to fill the complete button
132 background-color: @editor-toolbar-active-bgcolor;
133 color: @editor-toolbar-active-color;
134 }
135
136 // Dropdown wrapper element
137 .menu-item-active + div {
138 position: relative;
139
140 .hippo-toolbar-menu-item {
141 position: absolute;
142
143 > li {
144 padding: 0;
145
146 &:hover a {
147 color: @hippo-menu-enabled-hover-color;
148 }
149 }
150
151 .hippo-toolbar-menu-item-button-label {
152 position: relative;
153 top: -2px;
154 }
155 }
156 }
157 }
158
159 .menu-label-item {
160 margin-left: 12px;
161 color: @editor-toolbar-color;
162 white-space: nowrap;
163 font-size: unit(@editor-toolbar-fontsize, px);
164 // Firefox will render the label 1px lower than Chrome/Safari if line-height is not set to (font-size - 1)
165 line-height: unit(@editor-toolbar-fontsize - 1, px);
166
167 .menu-action-text {
168 position: relative;
169 top: 13px;
170 }
171 }
172 }
173 }
174 /* Split the dropdown in columns if there are many languages */
175 .hippo-toolbar .hippo-toolbar-section {
176 div.hippo-toolbar-two-col ul.hippo-toolbar-menu-item,
177 div.hippo-toolbar-three-col ul.hippo-toolbar-menu-item {
178 overflow:hidden;
179
180 > li {
181 float:left;
182 clear: none;
183 //CMS7R-TODO: jslint falls over this, might not be needed but needs check with many flags
184 //display:inline;
185 margin-right: 0;
186 }
187 }
188
189 div.hippo-toolbar-two-col ul.hippo-toolbar-menu-item {
190 width: 320px;
191
192 li {
193 width: 50%;
194 }
195 }
196
197 div.hippo-toolbar-three-col ul.hippo-toolbar-menu-item {
198 width: 480px;
199
200 li {
201 width: 33.333%;
202 }
203 }
204 }
205
206 // Legacy - not sure where/if still used
207
208 /*
209 .hippo-toolbar .hippo-toolbar-section select {
210 float: right;
211 background: #32629b;
212 color: white;
213 margin: 0;
214 border: 1px solid white;
215 }
216
217 .hippo-toolbar .hippo-toolbar-section select option {
218 background: white;
219 color: #666666;
220 }
221
222 .hippo-toolbar .hippo-toolbar-section .hippo-toolbar-textitem-locked {
223 height: 16px;
224 width: 16px;
225 margin-right: 0;
226 }
227
228 .hippo-toolbar .hippo-toolbar-section .hippo-toolbar-textitem-caption {
229 margin-right: 2px;
230 }
231
232 .hippo-toolbar .hippo-toolbar-section .hippo-toolbar-textitem-caption span,
233 .hippo-toolbar .hippo-toolbar-section .hippo-toolbar-textitem-status span {
234 padding-left: 5px;
235 color: black
236 }
237
238 body .hippo-toolbar .hippo-toolbar-section li a.hippo-toolbar-section-button-single {
239 background: transparent;
240 }
241
242 body .hippo-toolbar .hippo-toolbar-section li a.hippo-toolbar-section-button-single:hover {
243 border: 1px solid #000000;
244 }
245
246 .hippo-toolbar-menu-item li span.header-item {
247 display: block;
248 padding: 2px;
249 }
250
251 .hippo-toolbar-menu-item li span.header-item {
252 padding-left: 30px;
253 }
254
255 .hippo-toolbar-section li.icon-16 {
256 padding-left: 0;
257 background-position: 3px 4px;
258 }
259
260 .hippo-toolbar-section span.icon-16 {
261 display: block;
262 height: 16px;
263 width: 16px
264 }
265
266 .hippo-toolbar-section li.icon-16 div {
267 position: relative
268 }
269 */