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 /* <select> fields placed inside a flexbox parent while containing
  49    long select options will cause an invisible page overflow, when
  50    one such option is selected. The <select> itself stays within the
  51    boundaries, but a scrollbar will appear. */
  52 html.iOS select {
  53         overflow: hidden;
  54 }
  55
  56 /* COLUMN LAYOUT */
  57 .pageHeaderContainer,
  58 .boxesHeaderBoxes,
  59 .pageNavigation,
  60 .pageFooter,
  61 .boxesTop,
  62 .boxesBottom,
  63 .boxesFooterBoxes {
  64         flex: 0 0 auto;
  65 }
  66
  67 .main {
  68         flex: 1 0 auto;
  69
  70         @include screen-xs {
  71                 padding: 20px 0;
  72                 width: 100%;
  73         }
  74
  75         @include screen-sm-md {
  76                 padding: 40px 0;
  77                 width: 100%;
  78         }
  79
  80         @include screen-lg {
  81                 padding: 60px 0;
  82         }
  83 }
  84
  85 /* use flex-box to enforce a proper side-by-side layout on desktop */
  86 @include screen-lg {
  87         .main > div {
  88                 display: flex;
  89         }
  90
  91         .content {
  92                 flex: 1 1 0px;
  93
  94                 // sidebar follows
  95                 &:not(:last-child) {
  96                         flex-basis: calc(100% - 340px);
  97                         max-width: calc(100% - 340px); // IE fix
  98                 }
  99
 100                 & + .sidebar {
 101                         margin-left: 30px;
 102                 }
 103         }
 104
 105         .sidebar {
 106                 flex: 0 0 310px;
 107                 overflow: hidden;
 108
 109                 &:first-child {
 110                         margin-right: 30px;
 111                 }
 112
 113                 & + .content {
 114                         flex-basis: calc(100% - 340px);
 115                         max-width: calc(100% - 340px); // IE fix
 116
 117                         // sidebar follows
 118                         &:not(:last-child) {
 119                                 flex-basis: calc(100% - 680px);
 120                                 max-width: calc(100% - 680px); // IE fix
 121                         }
 122                 }
 123         }
 124 }
 125
 126 /* mobile arranges the sidebar and content vertically:
 127
 128    <leftSidebar> <content> <rightSidebar>
 129
 130    becomes:
 131
 132    <leftSidebar>
 133    <content>
 134    <rightSidebar>
 135 */
 136 @include screen-md-down {
 137         .sidebar {
 138                 margin: 0 -10px;
 139         }
 140
 141         .sidebar + .content,
 142         .content + .sidebar {
 143                 // gap between sidebars and content
 144                 margin-top: 30px;
 145         }
 146 }
 147
 148 .sideBySide {
 149         margin-top: 20px;
 150
 151         @include screen-md-up {
 152                 display: table;
 153                 table-layout: fixed;
 154                 width: 100%;
 155
 156                 > .section {
 157                         display: table-cell;
 158                         vertical-align: top;
 159                         width: 49%;
 160
 161                         & + .section {
 162                                 padding-left: 2%;
 163                         }
 164                 }
 165         }
 166 }