View File | Revision Log | Show Annotations | Download File | View Changeset
/hippo/hippo-cms7/cms/branches/cms-restyling/api/src/main/styling/less/_doclist.less
Revision: 47486
Committed: Thu Dec 11 12:47:26 2014 UTC (7 years, 11 months ago) by mdenburger
File size: 8091 byte(s)
Log Message:
CMS7-8540: fix position of paging label in Firefox and IE

The paging label is no longer part of the paging container so the absolute position of the label does not interfere with the flexbox layout of the container anymore.

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 .fixed-width (@width) {
18 width: @width;
19 min-width: @width;
20 max-width: @width;
21 }
22
23 .fixed-height (@height) {
24 height: @height;
25 min-height: @height;
26 max-height: @height;
27 }
28
29 .hippo-list-documents {
30 background-color: @body-bgcolor;
31 border-collapse: collapse;
32
33 // keep the styling that affect width in sync in the thead and tbody to ensure correctly aligned table headers
34 > thead > tr > th,
35 > tbody > tr > td {
36 padding: @doclist-padding;
37
38 // border between columns
39 border-left: 1px solid transparent;
40 &:first-child {
41 border-left: 0;
42 }
43
44 // column types
45 &.doclisting-icon {
46 .fixed-width(32px);
47 + .doclisting-name {
48 border-left: 0;
49 padding-left: 0;
50 }
51 }
52 &.doclisting-name {
53 width: 100%;
54 min-width: 10px;
55 }
56 &.doclisting-type {
57 .fixed-width(110px);
58 }
59 &.doclisting-state {
60 .fixed-width(51px);
61
62 > span {
63 display: block;
64 height: 16px;
65 }
66
67 .state-new {
68 background: url("@{images}/icons/state-offline-tiny.svg") no-repeat left;
69 }
70 .state-live {
71 background: url("@{images}/icons/state-live-tiny.svg") no-repeat left;
72 }
73 .state-changed {
74 background: url("@{images}/icons/state-changed-tiny.svg") no-repeat left;
75 }
76
77 }
78 &.doclisting-date {
79 .fixed-width(140px);
80 }
81 &.doclisting-lastmodified-by {
82 .fixed-width(120px);
83 }
84 &.doclisting-translations {
85 .fixed-width(120px);
86 padding-top: 0;
87 padding-bottom: 0;
88
89 .hippo-translation-doclisting > ul {
90 display: block;
91 list-style-type: none;
92 }
93 .hippo-translation-doclisting > ul > li {
94 display: inline;
95 padding-right: 4px;
96 white-space: nowrap;
97 }
98 }
99 &.doclisting-size {
100 .fixed-width(80px);
101 }
102 &.doclisting-mimetype {
103 .fixed-width(130px);
104 span {
105 word-wrap: none;
106 text-overflow: ellipsis;
107 }
108 }
109 }
110
111 > thead {
112 color: @doclist-head-color;
113 background-color: @doclist-head-bgcolor;
114
115 > tr {
116 display: block;
117 position: relative;
118 width: 100%;
119 height: @doclist-head-height;
120
121 > th {
122 height: @doclist-head-height - (2 * @doclist-padding);
123 font-size: @font-size-large;
124 padding-top: @doclist-padding - 1;
125 padding-bottom: @doclist-padding + 1;
126 border-color: @doclist-head-border-color;
127 :hover {
128 color: @aqua;
129 }
130 }
131
132 .hippo-list-order-ascending,
133 .hippo-list-order-descending,
134 .hippo-list-order-none {
135 cursor: pointer;
136 }
137
138 .hippo-list-order-ascending > span {
139 padding-right: 16px;
140 color: @doclist-head-sorted-color;
141 background: url("@{images}/icons/chevron-down-tiny.svg") 100% 100% no-repeat;
142 }
143
144 .hippo-list-order-descending > span {
145 padding-right: 16px;
146 color: @doclist-head-sorted-color;
147 background: url("@{images}/icons/chevron-up-tiny.svg") 100% 100% no-repeat;
148 }
149
150 .doclisting-icon {
151 background: no-repeat 50% 50%;
152 > span {
153 background: none;
154 }
155 &.hippo-list-order-none {
156 background-image: url("@{images}/icons/stateorder-none-tiny.svg");
157 &:hover {
158 background-image: url("@{images}/icons/stateorder-hover-tiny.svg");
159 }
160 }
161 &.hippo-list-order-ascending {
162 background-image: url("@{images}/icons/stateorder-down-tiny.svg");
163 }
164 &.hippo-list-order-descending {
165 background-image: url("@{images}/icons/stateorder-up-tiny.svg");
166 }
167 }
168 }
169 }
170
171 > tbody {
172 display: block;
173 overflow-x: hidden;
174 overflow-y: auto;
175 width: 100%;
176
177 > tr {
178 // prevent IE10 from setting tbody height on all rows
179 height: auto;
180
181 border-top: 1px solid @doclist-row-separator-color;
182
183 > td {
184
185 // ensure icons smaller than 32px are centered in a 32x32px box
186 &.doclisting-icon span {
187 .fixed-height(32px);
188 display: flex;
189 justify-content: center;
190 align-items: center;
191 }
192 }
193
194 > td:not(.doclisting-icon) > span span {
195 // show only 2 lines of text, but allow icons to shift
196 // out of their box (e.g. for stacked document state icons)
197 display: block;
198 overflow: hidden;
199 max-height: ceil(2.1 * @line-height-computed);
200 }
201
202 .link {
203 cursor: pointer;
204 }
205
206 &:first-child {
207 border-top: none;
208 }
209 }
210
211 .hippo-list-selected {
212
213 border-top-color: transparent;
214 background-color: @doclist-row-selected-bgcolor;
215 color: @doclist-row-selected-color;
216
217 svg {
218 fill: @doclist-row-selected-color;
219 }
220
221 .hi-state-new {
222 .hi-shape-circle {
223 fill: @doclist-row-selected-color;
224 }
225 .hi-shape-stripe {
226 fill: @doclist-row-selected-bgcolor;
227 }
228 }
229
230 .hi-state-live {
231 .hi-shape-circle {
232 fill: @doclist-row-selected-color;
233 }
234 .hi-shape-checkmark {
235 fill: @doclist-row-selected-bgcolor;
236 }
237 }
238
239 .hi-state-changed {
240 .hi-shape-circle,
241 .hi-shape-triangle,
242 .hi-shape-triangle-border {
243 fill: @doclist-row-selected-color;
244 }
245 .hi-shape-checkmark,
246 .hi-shape-exclamation-mark {
247 fill: @doclist-row-selected-bgcolor;
248 }
249 }
250
251 + tr {
252 border-top-color: transparent;
253 }
254 }
255 }
256
257 > tfoot > tr {
258 height: @doclist-foot-height;
259
260 &.hippo-list-paging {
261
262 > td {
263 position: relative;
264
265 .paging-container {
266 border-top: 1px solid @doclist-row-separator-color;
267 width: 100%;
268 height: @doclist-foot-height - 1;
269 display: flex;
270 justify-content: center;
271 align-items: center;
272
273 .paging-navigator {
274 font-size: @font-size-small;
275
276 em, a {
277 border: 1px solid transparent;
278 padding: 2px 5px;
279 }
280
281 a {
282 background-color: @doclist-paging-button-fill;
283 border-color: @doclist-paging-button-stroke;
284 border-radius: 2px;
285 color: @text-color;
286 &:hover {
287 text-decoration: none;
288 color: @doclist-paging-button-hover-color;
289 background-color: @doclist-paging-button-hover-fill;
290 }
291 }
292 }
293 }
294
295 .paging-label {
296 position: absolute;
297 top: 0;
298 right: 0;
299 font-size: @font-size-tiny;
300 height: @font-size-base;
301 padding-top: (@doclist-foot-height - @font-size-base) / 2;
302 padding-right: @doclist-padding;
303 }
304 }
305 }
306 }
307 }
308
309 // expand/collapse
310 .toggle-button {
311 display: block;
312 position: absolute;
313 top: 0;
314 right: 0;
315 float: right;
316 z-index: 100;
317
318 > a {
319 display: flex;
320 justify-content: center;
321 align-items: center;
322 width: @doclist-head-height;
323 height: @doclist-head-height;
324 cursor: pointer;
325
326 &:hover .hi {
327 fill: @aqua;
328 }
329 }
330 }
331
332 .yui-layout-collapsed .hippo-list-documents {
333 // hide all buttons except the current page indicator
334 .paging-navigator .goto a {
335 display: none;
336 }
337 .paging-label {
338 visibility: hidden;
339 }
340 }