3ed3c2aee094e5873fa359582df89e833b382d4e
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / typo3 / _module_web_page.scss
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 $page-column-header-color: #999;
9 $page-column-header-bg: #fff;
10 $page-column-header-border: $page-grid-cell-border;
11 $page-ce-border: #ccc;
12 $page-ce-hover-border: #aaa;
13 $page-ce-border-radius: 2px;
14 $page-ce-header-color: #fff;
15 $page-ce-header-bg: #eaeaea;
16 $page-ce-header-hover-bg: #d0d0d0;
17 $page-ce-body-bg: #fff;
18 $page-ce-footer-bg: #fafafa;
19 $page-ce-hidden-opacity: 0.4;
20 $page-ce-header-bg-danger: $brand-danger;
21 $page-ce-header-hover-bg-danger: darken($brand-danger, 10%);
22 $page-ce-header-border-danger: $page-ce-header-bg-danger;
23 $page-ce-header-hover-border-danger: $page-ce-header-hover-bg-danger;
24 $page-ce-header-bg-warning: $brand-warning;
25 $page-ce-header-hover-bg-warning: darken($brand-warning, 10%);
26 $page-ce-header-border-warning: $page-ce-header-bg-warning;
27 $page-ce-header-hover-border-warning: $page-ce-header-hover-bg-warning;
28 $page-ce-dropzone-bg: $state-success-bg;
29 $page-ce-dropzone-border: $state-success-border;
30 $page-ce-dropzone-border-radius: $page-ce-border-radius;
31 $page-ce-dropzone-possible-bg: $state-warning-bg;
32 $page-ce-dropzone-possible-border: $state-warning-border;
33
34 //
35 // Grid
36 //
37 .t3-grid-table {
38     border-collapse: separate;
39     border-spacing: $page-grid-spacing 0;
40     min-width: 100%;
41     table-layout: fixed;
42 }
43
44 .t3-grid-container {
45     margin: 0 ($page-grid-spacing * -1) $line-height-computed;
46 }
47
48 .t3-grid-cell {
49     background-color: $page-grid-cell-bg;
50     border-bottom: 1px solid $page-grid-cell-border;
51 }
52
53 .t3-grid-cell-restricted {
54     background-color: $page-grid-cell-restricted;
55 }
56
57 .t3-grid-cell-unassigned {
58     background: url('../../../../backend/Resources/Public/Images/Backgrounds/layout-not-assigned.png') repeat;
59 }
60
61 //
62 // Columns
63 //
64 .t3-page-columns {
65     min-width: 100%;
66 }
67
68 .t3-page-column {
69     min-width: 150px;
70     max-width: 300px;
71
72     > h2 {
73         margin-top: 0;
74     }
75 }
76
77 .t3-page-column-header-icons {
78     @include transition(opacity 0.15s ease-in);
79
80     opacity: 0.3;
81     position: absolute;
82     right: $page-grid-spacing;
83     bottom: $page-grid-spacing / 2;
84 }
85
86 .t3-page-column-header {
87     padding: ($page-grid-spacing * 2) $page-grid-spacing ($page-grid-spacing / 2) $page-grid-spacing;
88     position: relative;
89     background: $page-column-header-bg;
90     border-bottom: 1px solid $page-column-header-border;
91     color: $page-column-header-color;
92     text-align: left;
93
94     [data-colpos='unused'] & {
95         color: $state-warning-text;
96         padding-top: $grid-gutter-width*2;
97     }
98
99     a {
100         position: relative;
101     }
102
103     &:hover {
104         .t3-page-column-header-icons {
105             opacity: 1;
106         }
107     }
108 }
109
110 .t3-page-columns-mode {
111     img.c-divider {
112         margin: $page-grid-spacing 0 ($page-grid-spacing / 2) 0;
113     }
114 }
115
116 //
117 // Language
118 //
119 .t3-page-lang-copyce {
120     margin: $page-grid-spacing;
121 }
122
123 //
124 // Content elements
125 //
126 .t3-page-ce-wrapper {
127     min-height: 2em;
128 }
129
130 .t3-page-ce {
131     @include transition(opacity 0.15s ease-in);
132
133     margin: $page-grid-spacing;
134
135     &.active-drag {
136         z-index: 4500;
137     }
138     // reset border-spacing from page column grid
139     * {
140         border-spacing: 0;
141     }
142
143     > .t3-page-ce {
144         margin-left: 0;
145         margin-right: 0;
146     }
147
148     .t3-page-ce-body-inner {
149         padding: $page-grid-spacing;
150         word-wrap: break-word;
151
152         img {
153             max-width: 100%;
154             height: auto;
155         }
156     }
157
158     .t3-page-ce-header {
159         @extend .clearfix;
160
161         @include transition(background 0.15s ease-in);
162
163         padding: ($page-grid-spacing / 2);
164         border: 1px solid $page-ce-border;
165         border-bottom: 0;
166         border-radius: $page-ce-border-radius $page-ce-border-radius 0 0;
167         background: $page-ce-header-bg;
168     }
169
170     .t3-page-ce-header-icons-left {
171         float: left;
172
173         > a {
174             display: inline-block;
175             padding: $padding-small-vertical $padding-small-horizontal;
176         }
177     }
178
179     .t3-page-ce-header-icons-right {
180         @include transition(opacity 0.15s ease-in);
181
182         opacity: 0.3;
183         float: right;
184     }
185
186     .t3-page-ce-body {
187         margin-bottom: $page-grid-spacing;
188         border: 1px solid $page-ce-border;
189         border-top: 0;
190         border-radius: 0 0 $page-ce-border-radius $page-ce-border-radius;
191         background-color: $page-ce-body-bg;
192     }
193
194     .t3-page-ce-footer {
195         @extend .text-monospace;
196
197         font-size: 11px;
198         padding: ($page-grid-spacing / 2) $page-grid-spacing;
199         background: $page-ce-footer-bg;
200     }
201
202     &:hover {
203         .t3-page-ce-header {
204             background: $page-ce-header-hover-bg;
205         }
206
207         .t3-page-ce-header,
208         .t3-page-ce-body {
209             border-color: $page-ce-hover-border;
210         }
211
212         .t3-page-ce-body {
213             @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
214         }
215
216         .t3-page-ce-header-icons-right {
217             opacity: 1;
218         }
219     }
220 }
221
222 .t3-page-ce-danger {
223     &:hover {
224         .t3-page-ce-header {
225             background-color: $page-ce-header-hover-bg-danger;
226             border-color: $page-ce-header-hover-border-danger;
227         }
228
229         .t3-page-ce-body {
230             border-color: $page-ce-header-hover-border-danger;
231         }
232     }
233
234     .t3-page-ce-header {
235         background-color: $page-ce-header-bg-danger;
236         border-color: $page-ce-header-border-danger;
237
238         &:hover {
239             background-color: $page-ce-header-hover-bg-danger;
240             border-color: $page-ce-header-hover-border-danger;
241         }
242     }
243
244     .t3-page-ce-body {
245         border-color: $page-ce-header-border-danger;
246     }
247 }
248
249 .t3-page-ce-warning {
250     &:hover {
251         .t3-page-ce-header {
252             background-color: $page-ce-header-hover-bg-warning;
253             border-color: $page-ce-header-hover-border-warning;
254         }
255
256         .t3-page-ce-body {
257             border-color: $page-ce-header-hover-border-warning;
258         }
259     }
260
261     .t3-page-ce-header {
262         background-color: $page-ce-header-bg-warning;
263         border-color: $page-ce-header-border-warning;
264
265         &:hover {
266             background-color: $page-ce-header-hover-bg-warning;
267             border-color: $page-ce-header-hover-border-warning;
268         }
269     }
270
271     .t3-page-ce-body {
272         border-color: $page-ce-header-border-warning;
273     }
274 }
275
276 .t3-page-ce-hidden {
277     opacity: $page-ce-hidden-opacity;
278
279     @include transition(opacity 0.15s ease-in);
280
281     &:hover {
282         opacity: 1;
283     }
284 }
285
286 //
287 // Dropzone
288 //
289 .t3-page-ce-dropzone-available.active {
290     border: 1px dashed $page-ce-dropzone-possible-border;
291     border-radius: $page-ce-dropzone-border-radius;
292     background-color: $page-ce-dropzone-possible-bg;
293     height: 27px;
294 }
295
296 .t3-page-ce-dropzone-available.active.t3-page-ce-dropzone-possible {
297     border: 1px dashed $page-ce-dropzone-border;
298     border-radius: $page-ce-dropzone-border-radius;
299     background-color: $page-ce-dropzone-bg;
300     margin: -38px 0 -37px 0;
301     padding: 50px 10px;
302     z-index: 500;
303     position: relative;
304     opacity: 0.65;
305 }
306
307 .t3-page-ce-dragitem.dragitem-shadow {
308     opacity: 0.65;
309     box-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
310 }
311
312 .t3-page-ce.ui-draggable-handle {
313     height: auto !important;
314 }
315
316 //
317 // Dragging
318 //
319 .t3-page-ce-dragitem {
320     .t3-page-ce-header-draggable:hover {
321         cursor: move;
322     }
323 }
324
325 .t3-is-dragged {
326     .t3-page-ce-body {
327         max-height: 225px;
328         overflow: hidden;
329     }
330 }
331
332 .t3-page-ce-dropzone-available.active,
333 .t3-page-ce-dropzone-possible {
334     max-height: 225px;
335 }