[BUGFIX] Header should not disappear when page is dropped to trash
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / scaffold / _scaffold.scss
1 //
2 // Scaffold
3 // ========
4 //
5
6 //
7 // Variables
8 //
9 $scaffold-breakpoint-max: ($screen-md - 1);
10 $scaffold-breakpoint: $screen-md;
11 $scaffold-overlay-bg: rgba(0, 0, 0, 0.65);
12 $scaffold-overlay-zindex: $zindex-modal-background;
13 $scaffold-bg: #f5f5f5;
14 $scaffold-color: #333;
15 $scaffold-secondary-bg: #151515;
16 $scaffold-secondary-color: #f5f5f5;
17 $scaffold-topbar-bg: $scaffold-secondary-bg;
18 $scaffold-topbar-color: $scaffold-secondary-color;
19 $scaffold-topbar-height: 45px;
20 $scaffold-topbar-zindex: $zindex-navbar;
21 $scaffold-topbar-toolbar-bg: $scaffold-secondary-bg;
22 $scaffold-topbar-toolbar-color: $scaffold-secondary-color;
23 $scaffold-modulemenu-bg: lighten($scaffold-secondary-bg, 8);
24 $scaffold-modulemenu-color: $scaffold-secondary-color;
25 $scaffold-modulemenu-snapped-width: 40px;
26 $scaffold-modulemenu-expanded-width: 230px;
27 $scaffold-modulemenu-zindex: $zindex-navbar;
28 $scaffold-toolbar-bg: lighten($scaffold-secondary-bg, 8);
29 $scaffold-toolbar-color: $scaffold-secondary-color;
30 $scaffold-toolbar-zindex: $zindex-navbar;
31 $scaffold-content-navigation-width: 300px;
32 $scaffold-content-toggle-bg: lighten($scaffold-secondary-bg, 12);
33 $scaffold-content-toggle-color: $scaffold-secondary-color;
34
35 //
36 // Prevent Browser Rebounce
37 //
38 html {
39     height: 100%;
40     overflow: hidden;
41 }
42
43 body {
44     height: 100%;
45     overflow: auto;
46 }
47
48 //
49 // Component
50 //
51 .scaffold {
52     background-color: $scaffold-bg;
53     color: $scaffold-color;
54     position: relative;
55     padding-top: $scaffold-topbar-height;
56     height: 100vh;
57 }
58
59 //
60 // Topbar
61 //
62 .scaffold-topbar {
63     background-color: $scaffold-topbar-bg;
64     color: $scaffold-topbar-color;
65     height: $scaffold-topbar-height;
66     position: fixed;
67     top: 0;
68     right: 0;
69     left: 0;
70 }
71
72 //
73 // ModuleMenu
74 //
75 .scaffold-modulemenu {
76     background-color: $scaffold-modulemenu-bg;
77     color: $scaffold-modulemenu-color;
78     position: fixed;
79     top: $scaffold-topbar-height;
80     left: 0;
81     bottom: 0;
82     width: $scaffold-modulemenu-snapped-width;
83     max-width: 100%;
84     z-index: $scaffold-modulemenu-zindex;
85     overflow: hidden;
86
87     a {
88         color: transparentize($scaffold-modulemenu-color, 0.3);
89
90         &:hover {
91             color: $scaffold-modulemenu-color;
92         }
93     }
94
95     .active > a {
96         color: $scaffold-modulemenu-color;
97     }
98 }
99
100 //
101 // Toolbar
102 //
103 .scaffold-toolbar {
104     overflow: auto;
105     background-color: $scaffold-toolbar-bg;
106     color: $scaffold-toolbar-color;
107     z-index: $scaffold-toolbar-zindex;
108     position: fixed;
109     top: $scaffold-topbar-height;
110     left: 0;
111     right: 0;
112     bottom: 0;
113     display: none;
114
115     .dropdown-menu a,
116     a {
117         color: transparentize($scaffold-toolbar-color, 0.3);
118
119         &:focus,
120         &:hover {
121             color: $scaffold-toolbar-color;
122         }
123     }
124
125     .active > a {
126         color: $scaffold-toolbar-color;
127     }
128
129     @media (min-width: $scaffold-breakpoint) {
130         overflow: visible;
131         background-color: transparent;
132         height: $scaffold-topbar-height;
133         top: 0;
134         left: auto;
135         bottom: auto;
136         display: block;
137     }
138 }
139
140 .scaffold-toolbar-expanded,
141 .scaffold-search-expanded {
142     .scaffold-toolbar {
143         @media (max-width: $scaffold-breakpoint-max) {
144             display: block;
145         }
146     }
147 }
148
149 //
150 // Content
151 //
152 .scaffold-content {
153     position: fixed !important;
154     top: $scaffold-topbar-height;
155     left: 0;
156     right: 0;
157     bottom: 0;
158
159     @media (max-width: $scaffold-breakpoint-max) {
160         left: 0 !important;
161     }
162 }
163
164 .scaffold-content-navigation-iframe,
165 .scaffold-content-module-iframe {
166     display: block;
167     border: none;
168     height: 100%;
169     width: 100%;
170 }
171
172 .scaffold-content-navigation {
173     display: none;
174     position: absolute !important;
175     left: 0;
176     top: 0;
177     bottom: 0;
178     width: $scaffold-content-navigation-width;
179 }
180
181 .scaffold-content-navigation-component {
182     position: absolute;
183     top: 0;
184     bottom: 0;
185     left: 0;
186     right: 0;
187     // EXTJS PAGETREE FIXES START
188     #typo3-pagetree-treeContainer > div > .x-panel-body {
189         overflow: auto;
190     }
191     // EXTJS PAGETREE FIXES END
192 }
193
194 .scaffold-content-module {
195     @media (max-width: $screen-xs-max) {
196         width: 100%;
197     }
198
199     position: absolute !important;
200     top: 0;
201     left: 0;
202     bottom: 0;
203     right: 0;
204 }
205
206 //
207 // Content Overlay
208 //
209 .scaffold-content-overlay {
210     display: none;
211     position: absolute;
212     z-index: $scaffold-overlay-zindex;
213     top: 0;
214     left: 0;
215     right: 0;
216     bottom: 0;
217     background-color: $scaffold-overlay-bg;
218 }
219
220 .scaffold-modulemenu-expanded {
221     .scaffold-content-overlay {
222         display: block;
223
224         @media (min-width: $scaffold-breakpoint) {
225             display: none;
226         }
227     }
228 }
229
230 //
231 // Medium Screen
232 //
233 .scaffold {
234     @media (min-width: $scaffold-breakpoint) {
235         padding-left: $scaffold-modulemenu-snapped-width;
236     }
237
238     .scaffold-modulemenu {
239         width: $scaffold-modulemenu-snapped-width;
240
241         @media (max-width: $scaffold-breakpoint-max) {
242             display: none;
243         }
244     }
245 }
246
247 .scaffold-modulemenu-expanded {
248     display: block;
249     padding-left: $scaffold-modulemenu-expanded-width;
250
251     .scaffold-modulemenu {
252         width: $scaffold-modulemenu-expanded-width;
253
254         @media (max-width: $scaffold-breakpoint-max) {
255             display: block;
256         }
257     }
258
259     .scaffold-content {
260         transform: translate($scaffold-modulemenu-expanded-width, 0);
261     }
262 }
263
264 .scaffold-content-navigation-expanded {
265     .scaffold-content-navigation {
266         display: block;
267     }
268
269     .scaffold-content-module {
270         left: $scaffold-content-navigation-width;
271     }
272 }
273
274 @media (min-width: $scaffold-breakpoint) {
275     .scaffold {
276         .scaffold-content {
277             left: $scaffold-modulemenu-snapped-width;
278         }
279     }
280
281     .scaffold-modulemenu-expanded {
282         .scaffold-content {
283             left: $scaffold-modulemenu-expanded-width;
284             transform: none;
285         }
286     }
287 }