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