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