wcfsetup/install/files/style/layout/layout.scss

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