[TASK] Optimize CSS clearfix usage
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _module_web_page.less
1 //
2 // Variables
3 //
4 @page-grid-spacing: 10px;
5 @page-grid-cell-bg: #fafafa;
6 @page-grid-cell-border: #cdcdcd;
7 @page-grid-cell-restricted: @state-danger-bg;
8
9 @page-column-header-color: #999;
10 @page-column-header-bg: #fff;
11 @page-column-header-border: @page-grid-cell-border;
12
13 @page-ce-border: #ccc;
14 @page-ce-hover-border: #aaa;
15 @page-ce-border-radius: 2px;
16 @page-ce-header-color: #fff;
17 @page-ce-header-bg: #eaeaea;
18 @page-ce-header-hover-bg: #d0d0d0;
19 @page-ce-body-bg: #fff;
20 @page-ce-footer-bg: #fafafa;
21 @page-ce-hidden-opacity: 0.4;
22 @page-ce-header-bg-danger: @brand-danger;
23 @page-ce-header-hover-bg-danger: darken(@brand-danger, 10%);
24 @page-ce-header-border-danger: @page-ce-header-bg-danger;
25 @page-ce-header-hover-border-danger: @page-ce-header-hover-bg-danger;
26
27 @page-ce-dropzone-bg: @state-success-bg;
28 @page-ce-dropzone-border: @state-success-border;
29 @page-ce-dropzone-border-radius: @page-ce-border-radius;
30 @page-ce-dropzone-possible-bg: @state-warning-bg;
31 @page-ce-dropzone-possible-border: @state-warning-border;
32
33 //
34 // Grid
35 //
36 .t3-grid-table {
37 border-collapse: separate;
38 border-spacing: @page-grid-spacing 0;
39 width: 100%;
40 }
41 .t3-grid-container {
42 margin: 0px (@page-grid-spacing * -1) @line-height-computed;
43 }
44 .t3-grid-cell {
45 background-color: @page-grid-cell-bg;
46 border-bottom: 1px solid @page-grid-cell-border;
47 }
48 .t3-grid-cell-restricted {
49 background-color: @page-grid-cell-restricted;
50 }
51 .t3-grid-cell-unassigned {
52 background: url('../../../../images/backgrounds/layout-not-assigned.png') repeat;
53 }
54
55
56 //
57 // Columns
58 //
59 .t3-page-columns {
60 width: 100%;
61 }
62 .t3-page-column {
63 min-width: 150px;
64 max-width: 300px;
65 > h2 {
66 margin: 0;
67 }
68 }
69 .t3-page-column-header-icons {
70 .transition(opacity .15s ease-in);
71 opacity: 0.3;
72 position: absolute;
73 right: @page-grid-spacing;
74 bottom: @page-grid-spacing / 2;
75 }
76 .t3-page-column-header {
77 padding: (@page-grid-spacing * 2) @page-grid-spacing (@page-grid-spacing / 2) @page-grid-spacing;
78 position: relative;
79 background: @page-column-header-bg;
80 border-bottom: 1px solid @page-column-header-border;
81 color: @page-column-header-color;
82 text-align: left;
83 a {
84 position: relative;
85 }
86 &:hover {
87 .t3-page-column-header-icons {
88 opacity: 1;
89 }
90 }
91 }
92 .t3-page-columns-mode {
93 img.c-divider {
94 margin: @page-grid-spacing 0 (@page-grid-spacing / 2) 0;
95 }
96 }
97
98
99 //
100 // Language
101 //
102 .t3-page-lang-copyce {
103 margin: @page-grid-spacing;
104 }
105
106
107 //
108 // Content elements
109 //
110 .t3-page-ce-wrapper {
111 min-height: 2em;
112 }
113 .t3-page-ce {
114 .transition(opacity .15s ease-in);
115 margin: @page-grid-spacing;
116 &.active-drag {
117 z-index: 4500;
118 }
119 // reset border-spacing from page column grid
120 * {
121 border-spacing: 0;
122 }
123 > .t3-page-ce {
124 margin-left: 0;
125 margin-right: 0;
126 }
127 .t3-page-ce-body-inner {
128 padding: @page-grid-spacing;
129 word-wrap: break-word;
130 }
131 .t3-page-ce-header {
132 &:extend(.clearfix all);
133 .transition(background .15s ease-in);
134 padding: (@page-grid-spacing / 2);
135 border: 1px solid @page-ce-border;
136 border-bottom: 0;
137 border-radius: @page-ce-border-radius @page-ce-border-radius 0 0;
138 background: @page-ce-header-bg;
139 }
140 .t3-page-ce-header-icons-left {
141 float: left;
142 > a {
143 display: inline-block;
144 padding: @padding-small-vertical @padding-small-horizontal;
145 }
146 }
147 .t3-page-ce-header-icons-right {
148 .transition(opacity .15s ease-in);
149 opacity: 0.3;
150 float: right;
151 }
152 .t3-page-ce-body {
153 margin-bottom: @page-grid-spacing;
154 border: 1px solid @page-ce-border;
155 border-top: 0;
156 border-radius: 0 0 @page-ce-border-radius @page-ce-border-radius;
157 background-color: @page-ce-body-bg;
158 }
159 .t3-page-ce-footer {
160 .text-monospace();
161 font-size: 11px;
162 padding: (@page-grid-spacing / 2) @page-grid-spacing;
163 background: @page-ce-footer-bg;
164 }
165 &:hover {
166 .t3-page-ce-header {
167 background: @page-ce-header-hover-bg;
168 }
169 .t3-page-ce-header,
170 .t3-page-ce-body {
171 border-color: @page-ce-hover-border;
172 }
173 .t3-page-ce-body {
174 .box-shadow(0px 1px 0px rgba(0, 0, 0, 0.15));
175 }
176 .t3-page-ce-header-icons-right {
177 opacity: 1;
178 }
179 }
180 }
181 .t3-page-ce-danger {
182 &:hover {
183 .t3-page-ce-header {
184 background-color: @page-ce-header-hover-bg-danger;
185 border-color: @page-ce-header-hover-border-danger;
186 }
187
188 .t3-page-ce-body {
189 border-color: @page-ce-header-hover-border-danger;
190 }
191 }
192
193 .t3-page-ce-header {
194 background-color: @page-ce-header-bg-danger;
195 border-color: @page-ce-header-border-danger;
196 &:hover {
197 background-color: @page-ce-header-hover-bg-danger;
198 border-color: @page-ce-header-hover-border-danger;
199 }
200 }
201
202 .t3-page-ce-body {
203 border-color: @page-ce-header-border-danger;
204 }
205 }
206 .t3-page-ce-hidden {
207 opacity: @page-ce-hidden-opacity;
208 .transition(opacity .15s ease-in);
209 &:hover {
210 opacity: 1.0;
211 }
212 }
213
214
215 //
216 // Dropzone
217 //
218 .t3-page-ce-dropzone-available.active {
219 border: 1px dashed @page-ce-dropzone-possible-border;
220 border-radius: @page-ce-dropzone-border-radius;
221 background-color: @page-ce-dropzone-possible-bg;
222 height: 27px;
223 }
224 .t3-page-ce-dropzone-available.active.t3-page-ce-dropzone-possible {
225 border: 1px dashed @page-ce-dropzone-border;
226 border-radius: @page-ce-dropzone-border-radius;
227 background-color: @page-ce-dropzone-bg;
228 margin: -38px 0 -37px 0;
229 padding: 50px 10px;
230 z-index: 500;
231 position: relative;
232 opacity: 0.65;
233 }
234 .t3-page-ce-dragitem.dragitem-shadow {
235 opacity: 0.65;
236 box-shadow: 0 1px 24px rgba(0, 0, 0, 0.50);
237 }
238 .t3-page-ce.ui-draggable-handle {
239 height: auto!important;
240 }
241
242
243 //
244 // Dragging
245 //
246 .t3-page-ce-dragitem {
247 .t3-page-ce-header-draggable:hover {
248 cursor: move;
249 }
250 }
251
252 .t3-is-dragged {
253 .t3-page-ce-body {
254 max-height: 225px;
255 overflow: hidden;
256 }
257 }
258
259 .t3-page-ce-dropzone-available.active, .t3-page-ce-dropzone-possible {
260 max-height: 225px;
261 }