blob: e58fab2a00d7a94507fa0c8ee7beea11602fb686 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
// Built-In Modules
@use 'sass:map';
// Custom Modules
@use '../../node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
// Included Modules
@use 'variable';
/*-----------------------*
Structure
*-----------------------*/
html,
body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
@include flexbox-grid-mixins.grid($flex-flow: column nowrap);
margin: auto;
}
.content-container {
@include flexbox-grid-mixins.grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto);
@include flexbox-grid-mixins.grid($justify-content: center);
}
main {
@include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%);
&:only-child {
@include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%);
}
}
.sidebar {
@include flexbox-grid-mixins.grid-col($col: 3, $order: -1);
// position: fixed;
// overflow-x: hidden;
overflow-x: hidden;
overflow-y: scroll;
}
@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) {
.content-container {
@include flexbox-grid-mixins.grid($flex-flow: column nowrap);
}
main {
@include flexbox-grid-mixins.grid-col($col: none, $flex-shrink: 0, $min-width: 100%);
}
.sidebar {
@include flexbox-grid-mixins.grid-col($col: none, $order: 1);
}
}
|