Commit | Line | Data |
---|---|---|
8a0b323e AE |
1 | html.disableScrolling { |
2 | overflow: hidden !important; | |
3 | ||
4 | body { | |
5 | overflow: hidden !important; | |
6 | ||
7 | @include screen-md-down { | |
8 | position: fixed !important; | |
9 | } | |
10 | } | |
11 | } | |
12 | ||
b8eab696 | 13 | html, body { |
bec1bb2e | 14 | font-weight: 400; |
b8eab696 | 15 | height: 100%; |
826d165f | 16 | |
5908f54f AE |
17 | @include wcfLineHeight; |
18 | @include wcfFontDefault; | |
b8eab696 AE |
19 | } |
20 | ||
21 | body { | |
0b6161c6 MW |
22 | background-color: $wcfContentBackground; |
23 | color: $wcfContentText; | |
b3ac08d1 | 24 | font-family: $wcfFontFamily; |
b8eab696 | 25 | position: relative; |
8a0b323e | 26 | width: 100%; |
b8eab696 | 27 | word-wrap: break-word; |
b8eab696 AE |
28 | } |
29 | ||
30 | a { | |
0b6161c6 | 31 | color: $wcfContentLink; |
b8eab696 | 32 | cursor: pointer; |
487db634 | 33 | text-decoration: none; |
b8eab696 | 34 | |
487db634 | 35 | &:hover { |
0b6161c6 | 36 | color: $wcfContentLinkActive; |
b8eab696 AE |
37 | text-decoration: none; |
38 | } | |
39 | } | |
40 | ||
0b6161c6 | 41 | .pageContainer { |
b8eab696 AE |
42 | display: flex; |
43 | height: 100%; | |
44 | flex-direction: column; | |
45 | } | |
46 | ||
47 | /* COLUMN LAYOUT */ | |
fd94097c MW |
48 | .pageHeaderContainer, |
49 | .boxesHeaderBoxes, | |
50 | .pageNavigation, | |
51 | .pageFooter, | |
52 | .boxesTop, | |
53 | .boxesBottom, | |
54 | .boxesFooterBoxes { | |
f2b50825 | 55 | flex: 0 0 auto; |
b8eab696 AE |
56 | } |
57 | ||
58 | .main { | |
f28d3ba8 | 59 | flex: 1 0 auto; |
e5359fe5 | 60 | |
b7eef289 | 61 | @include screen-xs { |
fb75fe82 | 62 | padding: 20px 0; |
b7eef289 MW |
63 | width: 100%; |
64 | } | |
65 | ||
66 | @include screen-sm-md { | |
fd94097c | 67 | padding: 40px 0; |
3860d44f | 68 | width: 100%; |
e5359fe5 | 69 | } |
b8eab696 | 70 | |
9d029724 AE |
71 | @include screen-lg { |
72 | padding: 60px 0; | |
73 | } | |
b8eab696 AE |
74 | } |
75 | ||
431e4cb4 | 76 | /* use flex-box to enforce a proper side-by-side layout on desktop */ |
fd94097c | 77 | @include screen-lg { |
431e4cb4 AE |
78 | .main > div { |
79 | display: flex; | |
b8eab696 | 80 | } |
5c448cc2 | 81 | |
431e4cb4 | 82 | .content { |
3ae040fc | 83 | flex: 1 1 0px; |
5c448cc2 AE |
84 | |
85 | // sidebar follows | |
86 | &:not(:last-child) { | |
431e4cb4 AE |
87 | flex-basis: calc(100% - 340px); |
88 | max-width: calc(100% - 340px); // IE fix | |
89 | } | |
90 | ||
91 | & + .sidebar { | |
92 | margin-left: 30px; | |
93 | } | |
94 | } | |
95 | ||
96 | .sidebar { | |
97 | flex: 0 0 310px; | |
66dba3c5 | 98 | overflow: hidden; |
431e4cb4 AE |
99 | |
100 | &:first-child { | |
101 | margin-right: 30px; | |
102 | } | |
103 | ||
104 | & + .content { | |
105 | flex-basis: calc(100% - 340px); | |
106 | max-width: calc(100% - 340px); // IE fix | |
107 | ||
108 | // sidebar follows | |
109 | &:not(:last-child) { | |
110 | flex-basis: calc(100% - 680px); | |
111 | max-width: calc(100% - 680px); // IE fix | |
112 | } | |
5c448cc2 AE |
113 | } |
114 | } | |
b8eab696 AE |
115 | } |
116 | ||
63e2f52f AE |
117 | /* mobile arranges the sidebar and content vertically: |
118 | ||
119 | <leftSidebar> <content> <rightSidebar> | |
120 | ||
121 | becomes: | |
122 | ||
123 | <leftSidebar> | |
124 | <content> | |
125 | <rightSidebar> | |
126 | */ | |
fd94097c | 127 | @include screen-md-down { |
63e2f52f AE |
128 | .sidebar { |
129 | margin: 0 -10px; | |
130 | } | |
131 | ||
132 | .sidebar + .content, | |
133 | .content + .sidebar { | |
134 | // gap between sidebars and content | |
135 | margin-top: 30px; | |
136 | } | |
137 | } | |
138 | ||
cccc1a01 AE |
139 | .sideBySide { |
140 | margin-top: 20px; | |
141 | ||
142 | @include screen-md-up { | |
143 | display: table; | |
144 | table-layout: fixed; | |
145 | width: 100%; | |
146 | ||
147 | > .section { | |
148 | display: table-cell; | |
d7252820 | 149 | vertical-align: top; |
cccc1a01 AE |
150 | width: 49%; |
151 | ||
152 | & + .section { | |
153 | padding-left: 2%; | |
154 | } | |
155 | } | |
156 | } | |
157 | } |