[BUGFIX] Correct horizontal scrolling in iframe on iOS browsers
[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: 1px;
170     min-width: 100%;
171 }
172
173 .scaffold-content-navigation {
174     display: none;
175     position: absolute !important;
176     left: 0;
177     top: 0;
178     bottom: 0;
179     width: $scaffold-content-navigation-width;
180 }
181
182 .scaffold-content-navigation-component {
183     position: absolute;
184     top: 0;
185     bottom: 0;
186     left: 0;
187     right: 0;
188     // EXTJS PAGETREE FIXES START
189     #typo3-pagetree-treeContainer > div > .x-panel-body {
190         overflow: auto;
191     }
192     // EXTJS PAGETREE FIXES END
193 }
194
195 .scaffold-content-module {
196     @media (max-width: $screen-xs-max) {
197         width: 100%;
198     }
199
200     position: absolute !important;
201     top: 0;
202     left: 0;
203     bottom: 0;
204     right: 0;
205 }
206
207 //
208 // Content Overlay
209 //
210 .scaffold-content-overlay {
211     display: none;
212     position: absolute;
213     z-index: $scaffold-overlay-zindex;
214     top: 0;
215     left: 0;
216     right: 0;
217     bottom: 0;
218     background-color: $scaffold-overlay-bg;
219 }
220
221 .scaffold-modulemenu-expanded {
222     .scaffold-content-overlay {
223         display: block;
224
225         @media (min-width: $scaffold-breakpoint) {
226             display: none;
227         }
228     }
229 }
230
231 //
232 // Medium Screen
233 //
234 .scaffold {
235     @media (min-width: $scaffold-breakpoint) {
236         padding-left: $scaffold-modulemenu-snapped-width;
237     }
238
239     .scaffold-modulemenu {
240         width: $scaffold-modulemenu-snapped-width;
241
242         @media (max-width: $scaffold-breakpoint-max) {
243             display: none;
244         }
245     }
246 }
247
248 .scaffold-modulemenu-expanded {
249     display: block;
250     padding-left: $scaffold-modulemenu-expanded-width;
251
252     .scaffold-modulemenu {
253         width: $scaffold-modulemenu-expanded-width;
254
255         @media (max-width: $scaffold-breakpoint-max) {
256             display: block;
257         }
258     }
259
260     .scaffold-content {
261         transform: translate($scaffold-modulemenu-expanded-width, 0);
262     }
263 }
264
265 .scaffold-content-navigation-expanded {
266     .scaffold-content-navigation {
267         display: block;
268     }
269
270     .scaffold-content-module {
271         left: $scaffold-content-navigation-width;
272     }
273 }
274
275 @media (min-width: $scaffold-breakpoint) {
276     .scaffold {
277         .scaffold-content {
278             left: $scaffold-modulemenu-snapped-width;
279         }
280     }
281
282     .scaffold-modulemenu-expanded {
283         .scaffold-content {
284             left: $scaffold-modulemenu-expanded-width;
285             transform: none;
286         }
287     }
288 }