]> BookStack Code Mirror - bookstack/blob - resources/sass/_layout.scss
Decode HTML entities
[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 /**
99  * Flexbox layout system
100  */
101 body.flexbox {
102   display: flex;
103   flex-direction: column;
104   align-items: stretch;
105   height: 100%;
106   min-height: 100%;
107   max-height: 100%;
108   overflow: hidden;
109   #content {
110     flex: 1;
111     display: flex;
112     min-height: 0;
113   }
114 }
115
116 .flex-fill {
117   display: flex;
118   align-items: stretch;
119   min-height: 0;
120   max-width: 100%;
121   position: relative;
122 }
123
124 .flex-container-column {
125   display: flex;
126   flex-direction: column;
127 }
128
129 .flex {
130   min-height: 0;
131   flex: 1;
132 }
133
134 .justify-flex-end {
135   justify-content: flex-end;
136 }
137
138
139 /**
140  * Display and float utilities
141  */
142 .block {
143   display: block;
144   position: relative;
145 }
146
147 .inline {
148   display: inline;
149 }
150
151 .block.inline {
152   display: inline-block;
153 }
154
155 .hidden {
156   display: none !important;
157 }
158
159 .float {
160   float: left;
161   &.right {
162     float: right;
163   }
164 }
165
166 /**
167  * Visibility
168  */
169 @each $sizeLetter, $size in $screen-sizes {
170   @include smaller-than($size) {
171     .hide-under-#{$sizeLetter} {
172       display: none !important;
173     }
174   }
175   @include larger-than($size) {
176     .hide-over-#{$sizeLetter} {
177       display: none !important;
178     }
179   }
180 }
181
182 /**
183  * Inline content columns
184  */
185 .dual-column-content {
186   columns: 2;
187 }
188
189 @include smaller-than($m) {
190   .dual-column-content {
191     columns: 1;
192   }
193 }
194
195
196 /**
197  * Fixes
198  */
199 .clearfix::before,
200 .clearfix::after {
201   content: " ";
202   display: table;
203 }
204 .clearfix::after {
205   clear: both;
206 }
207
208 /**
209  * View Layouts
210  */
211 .tri-layout-container {
212   display: grid;
213   margin-inline-start: $-xl;
214   margin-inline-end: $-xl;
215   grid-template-columns: 1fr 4fr 1fr;
216   grid-template-areas: "a b c";
217   grid-column-gap: $-xxl;
218   .tri-layout-right {
219     grid-area: c;
220     min-width: 0;
221   }
222   .tri-layout-left {
223     grid-area: a;
224     min-width: 0;
225   }
226   .tri-layout-middle {
227     grid-area: b;
228     padding-top: $-m;
229   }
230 }
231 @include smaller-than($xxl) {
232   .tri-layout-container {
233     grid-template-areas:  "c b b"
234     "a b b"
235     ". b b";
236     grid-template-columns: 1fr 3fr;
237     grid-template-rows: min-content min-content 1fr;
238     padding-inline-end: $-l;
239   }
240 }
241 @include between($l, $xxl) {
242   .tri-layout-left {
243     position: sticky;
244     top: $-m;
245   }
246 }
247 @include larger-than($xxl) {
248   .tri-layout-left-contents, .tri-layout-right-contents {
249     padding: $-m;
250     position: sticky;
251     top: $-m;
252     max-height: 100vh;
253     min-height: 50vh;
254     overflow-y: scroll;
255     overflow-x: hidden;
256     scrollbar-width: none;
257     -ms-overflow-style: none;
258     &::-webkit-scrollbar {
259       display: none;
260     }
261   }
262   .tri-layout-middle-contents {
263     max-width: 940px;
264     margin: 0 auto;
265   }
266 }
267
268 @include smaller-than($l) {
269   .tri-layout-container {
270     grid-template-areas:  none;
271     grid-template-columns: 1fr;
272     grid-column-gap: 0;
273     padding-inline-end: $-xs;
274     padding-inline-start: $-xs;
275     .tri-layout-left-contents, .tri-layout-right-contents {
276       padding-inline-start: $-m;
277       padding-inline-end: $-m;
278     }
279     .tri-layout-left > *, .tri-layout-right > * {
280       display: none;
281       pointer-events: none;
282     }
283     .tri-layout-left, .tri-layout-right {
284       grid-area: none;
285       grid-column: 1/1;
286       grid-row: 1;
287       padding-top: 0 !important;
288     }
289     .tri-layout-middle {
290       grid-area: none;
291       grid-row: 3;
292       grid-column: 1/1;
293       z-index: 1;
294       overflow: hidden;
295       transition: transform ease-in-out 240ms;
296     }
297     .tri-layout-left {
298       grid-row: 2;
299     }
300     &.show-info {
301       overflow: hidden;
302       .tri-layout-middle {
303         display: none;
304       }
305       .tri-layout-right  > *, .tri-layout-left > * {
306         display: block;
307         pointer-events: auto;
308       }
309     }
310   }
311 }
312 @include larger-than($l) {
313   .tri-layout-mobile-tabs {
314     display: none;
315   }
316   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
317     opacity: 0.6;
318     transition: opacity ease-in-out 120ms;
319     &:hover {
320       opacity: 1;
321     }
322     &:focus-within {
323       opacity: 1;
324     }
325   }
326
327 }
328
329 @include smaller-than($m) {
330   .tri-layout-container {
331     margin-inline-start: 0;
332     margin-inline-end: 0;
333   }
334 }