/
_layout.scss
89 lines (72 loc) · 1.33 KB
/
_layout.scss
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// Layout
.grid-child {
display: flex;
width: 100%;
//max-width: $cassiopeia-grid-max-width + ($cassiopeia-grid-gutter * 4);
max-width: max-width(xl);
margin-right: auto;
margin-left: auto;
}
.container-header header .site {
background-color: gray(100);
> .full-width {
max-width: none;
}
.container-footer,
.system-debug {
display: block;
}
}
.container-banner {
display: block;
margin: 0 0 2rem;
}
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b {
padding: 4rem 0;
> * {
flex: 1;
margin: ($cassiopeia-grid-gutter / 2);
}
@include media-breakpoint-down(sm) {
flex-direction: column;
> * {
flex: 0 1 auto;
}
}
}
.container-main {
> * {
margin: ($cassiopeia-grid-gutter / 2);
}
@include media-breakpoint-down(sm) {
flex-direction: column;
> * {
flex: 0 1 auto;
}
}
}
.container-component {
flex: 1;
> *:not(#system-message-container) {
margin-bottom: $cassiopeia-grid-gutter;
&:last-of-type {
margin-bottom: 0;
}
}
}
.container-sidebar-left,
.container-sidebar-right {
flex: 0 0 auto;
width: calc(100% - #{$cassiopeia-grid-gutter});
order: 1;
@include media-breakpoint-up(sm) {
width: calc(25% - #{$cassiopeia-grid-gutter});
order: 0;
}
}
.system-debug {
display: block;
}