]> BookStack Code Mirror - bookstack/blob - resources/sass/_layout.scss
doc(dev): add xdebug informations
[bookstack] / resources / sass / _layout.scss
1
2 /**
3  * Generic content container
4  */
5 .container {
6   max-width: $xxl;
7   margin-inline-start: auto;
8   margin-inline-end: auto;
9   padding-inline-start: $-m;
10   padding-inline-end: $-m;
11   &.small {
12     max-width: 840px;
13   }
14   &.very-small {
15     max-width: 480px;
16   }
17 }
18
19 /**
20  * Core grid layout system
21  */
22 .grid {
23   display: grid;
24   grid-column-gap: $-l;
25   grid-row-gap: $-l;
26   &.half {
27     grid-template-columns: 1fr 1fr;
28   }
29   &.third {
30     grid-template-columns: 1fr 1fr 1fr;
31   }
32   &.left-focus {
33     grid-template-columns: 2fr 1fr;
34   }
35   &.right-focus {
36     grid-template-columns: 1fr 3fr;
37   }
38   &.gap-y-xs {
39     grid-row-gap: $-xs;
40   }
41   &.gap-xl {
42     grid-column-gap: $-xl;
43     grid-row-gap: $-xl;
44   }
45   &.gap-xxl {
46     grid-column-gap: $-xxl;
47     grid-row-gap: $-xxl;
48   }
49   &.v-center {
50     align-items: center;
51   }
52   &.v-end {
53     align-items: end;
54   }
55   &.no-gap {
56     grid-row-gap: 0;
57     grid-column-gap: 0;
58   }
59   &.no-row-gap {
60     grid-row-gap: 0;
61   }
62 }
63
64 @include smaller-than($m) {
65   .grid.third:not(.no-break) {
66     grid-template-columns: 1fr 1fr;
67   }
68   .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
69     grid-template-columns: 1fr;
70   }
71   .grid.half.collapse-xs {
72     grid-template-columns: 1fr 1fr;
73   }
74   .grid.gap-xl {
75     grid-column-gap: $-m;
76     grid-row-gap: $-m;
77   }
78   .grid.right-focus.reverse-collapse > *:nth-child(2) {
79     order: 0;
80   }
81   .grid.right-focus.reverse-collapse > *:nth-child(1) {
82     order: 1;
83   }
84 }
85
86 @include smaller-than($s) {
87   .grid.third:not(.no-break) {
88     grid-template-columns: 1fr;
89   }
90 }
91
92 @include smaller-than($xs) {
93   .grid.half.collapse-xs {
94     grid-template-columns: 1fr;
95   }
96 }
97
98 #content {
99   flex: 1 0 auto;
100 }
101
102 /**
103  * Flexbox layout system
104  */
105 body.flexbox {
106   display: flex;
107   flex-direction: column;
108   align-items: stretch;
109   height: 100%;
110   min-height: 100%;
111   max-height: 100%;
112   overflow: hidden;
113   #content {
114     flex: 1;
115     display: flex;
116     min-height: 0;
117   }
118 }
119
120 .flex-fill {
121   display: flex;
122   align-items: stretch;
123   min-height: 0;
124   max-width: 100%;
125   position: relative;
126 }
127
128 .flex-container-row {
129   display: flex;
130   flex-direction: row;
131   &.v-center {
132     align-items: center;
133   }
134 }
135
136 .flex-container-column {
137   display: flex;
138   flex-direction: column;
139 }
140
141 .flex-container-column.wrap, .flex-container-row.wrap {
142   flex-wrap: wrap;
143 }
144
145 .flex {
146   min-height: 0;
147   flex: 1;
148   max-width: 100%;
149   &.fit-content {
150     flex-basis: auto;
151     flex-grow: 0;
152   }
153 }
154
155 .justify-flex-end {
156   justify-content: flex-end;
157 }
158 .justify-center {
159   justify-content: center;
160 }
161 .justify-space-between {
162   justify-content: space-between;
163 }
164 .items-center {
165   align-items: center;
166 }
167
168
169 /**
170  * Display and float utilities
171  */
172 .block {
173   display: block !important;
174   position: relative;
175 }
176
177 .inline {
178   display: inline !important;
179 }
180
181 .block.inline {
182   display: inline-block !important;
183 }
184
185 .relative {
186   position: relative;
187 }
188
189 .hidden {
190   display: none !important;
191 }
192
193 .fill-height {
194   height: 100%;
195 }
196
197 .float {
198   float: left;
199   &.right {
200     float: right;
201   }
202 }
203
204 /**
205  * Visibility
206  */
207 @each $sizeLetter, $size in $screen-sizes {
208   @include smaller-than($size) {
209     .hide-under-#{$sizeLetter} {
210       display: none !important;
211     }
212   }
213   @include larger-than($size) {
214     .hide-over-#{$sizeLetter} {
215       display: none !important;
216     }
217   }
218 }
219
220 /**
221  * Border radiuses
222  */
223 .rounded {
224   border-radius: 4px;
225 }
226
227 /**
228  * Inline content columns
229  */
230 .dual-column-content {
231   columns: 2;
232 }
233
234 @include smaller-than($m) {
235   .dual-column-content {
236     columns: 1;
237   }
238 }
239
240
241 /**
242  * Fixes
243  */
244 .clearfix::before,
245 .clearfix::after {
246   content: " ";
247   display: table;
248 }
249 .clearfix::after {
250   clear: both;
251 }
252
253 /**
254  * View Layouts
255  */
256 .tri-layout-container {
257   display: grid;
258   margin-inline-start: $-xl;
259   margin-inline-end: $-xl;
260   grid-template-columns: 1fr 4fr 1fr;
261   grid-template-areas: "a b c";
262   grid-column-gap: $-xxl;
263   .tri-layout-right {
264     grid-area: c;
265     min-width: 0;
266   }
267   .tri-layout-left {
268     grid-area: a;
269     min-width: 0;
270   }
271   .tri-layout-middle {
272     grid-area: b;
273     padding-top: $-m;
274     min-width: 0;
275   }
276 }
277 @include smaller-than($xxl) {
278   .tri-layout-container {
279     grid-template-areas:  "c b b"
280     "a b b"
281     ". b b";
282     grid-template-columns: 1fr 3fr;
283     grid-template-rows: min-content min-content 1fr;
284     padding-inline-end: $-l;
285   }
286 }
287 @include between($l, $xxl) {
288   .tri-layout-left {
289     position: sticky;
290     top: $-m;
291   }
292 }
293 @include larger-than($xxl) {
294   .tri-layout-left-contents, .tri-layout-right-contents {
295     padding: $-m;
296     position: sticky;
297     top: $-m;
298     max-height: 100vh;
299     min-height: 50vh;
300     overflow-y: scroll;
301     overflow-x: hidden;
302     height: 100%;
303     scrollbar-width: none;
304     -ms-overflow-style: none;
305     &::-webkit-scrollbar {
306       display: none;
307     }
308   }
309   .tri-layout-middle-contents {
310     max-width: 940px;
311     margin: 0 auto;
312   }
313 }
314
315 @include smaller-than($l) {
316   .tri-layout-container {
317     grid-template-areas:  none;
318     grid-template-columns: 1fr;
319     grid-column-gap: 0;
320     padding-inline-end: $-xs;
321     padding-inline-start: $-xs;
322     .tri-layout-left-contents, .tri-layout-right-contents {
323       padding-inline-start: $-m;
324       padding-inline-end: $-m;
325     }
326     .tri-layout-left > *, .tri-layout-right > * {
327       display: none;
328       pointer-events: none;
329     }
330     .tri-layout-left, .tri-layout-right {
331       grid-area: none;
332       grid-column: 1/1;
333       grid-row: 1;
334       padding-top: 0 !important;
335     }
336     .tri-layout-middle {
337       grid-area: none;
338       grid-row: 3;
339       grid-column: 1/1;
340       z-index: 1;
341       overflow: hidden;
342       transition: transform ease-in-out 240ms;
343     }
344     .tri-layout-left {
345       grid-row: 2;
346     }
347     &.show-info {
348       overflow: hidden;
349       .tri-layout-middle {
350         display: none;
351       }
352       .tri-layout-right  > *, .tri-layout-left > * {
353         display: block;
354         pointer-events: auto;
355       }
356     }
357   }
358 }
359 @include larger-than($l) {
360   .tri-layout-mobile-tabs {
361     display: none;
362   }
363   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
364     opacity: 0.6;
365     transition: opacity ease-in-out 120ms;
366     &:hover {
367       opacity: 1;
368     }
369     &:focus-within {
370       opacity: 1;
371     }
372     @media (prefers-contrast: more) {
373       opacity: 1;
374     }
375   }
376
377 }
378
379 @include smaller-than($m) {
380   .tri-layout-container {
381     margin-inline-start: 0;
382     margin-inline-end: 0;
383   }
384 }
Morty Proxy This is a proxified and sanitized view of the page, visit original site.