wcfsetup/install/files/style/ui/menuMobile.scss

   1 /* menu container */
   2 .menuOverlayMobile {
   3         background-color: $wcfHeaderMenuBackground;
   4         bottom: 0;
   5         display: none;
   6         overflow: hidden;
   7         position: absolute;
   8         top: 0;
   9         z-index: 320;
  10
  11         &.open {
  12                 display: block;
  13
  14                 @include screen-sm-up {
  15                         + .menuOverlayMobileBackdrop {
  16                                 display: block;
  17                         }
  18                 }
  19         }
  20
  21         &.androidMenuTouchEnd {
  22                 display: block;
  23                 position: fixed;
  24                 transition: transform 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  25
  26                 &.pageMainMenuMobile:not(.open) {
  27                         transform: translateX(-100vw);
  28                 }
  29                 &.pageUserMenuMobile:not(.open) {
  30                         transform: translateX(100vw);
  31                 }
  32
  33                 @include screen-sm-up {
  34                         &.pageMainMenuMobile:not(.open) {
  35                                 transform: translateX(-350px);
  36                         }
  37                         &.pageUserMenuMobile:not(.open) {
  38                                 transform: translateX(350px);
  39                         }
  40
  41                         + .menuOverlayMobileBackdrop {
  42                                 transition: left 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94),
  43                                         right 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  44                         }
  45                 }
  46         }
  47
  48         > .menuOverlayItemList {
  49                 // we use `transform: translateX()` for performance reasons
  50                 transition: transform 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  51
  52                 /* work-around to avoid setting explicit visibility */
  53                 visibility: visible;
  54         }
  55
  56         &.allowScroll {
  57                 .menuOverlayItemList:not(.hidden) {
  58                         overflow: auto;
  59                         -webkit-overflow-scrolling: touch;
  60                 }
  61         }
  62
  63         &:not(.allowScroll) {
  64                 // block UI while switching between menus
  65                 &::before {
  66                         bottom: 0;
  67                         content: "";
  68                         left: 0;
  69                         position: absolute;
  70                         right: 0;
  71                         top: 0;
  72                         z-index: 500;
  73                 }
  74         }
  75
  76         @include screen-xs {
  77                 left: 0;
  78                 max-width: 100vw;
  79                 right: 0;
  80
  81                 .menuOverlayItemList {
  82                         right: 0;
  83                 }
  84         }
  85
  86         @include screen-sm-up {
  87                 width: 350px;
  88
  89                 &.pageMainMenuMobile {
  90                         left: 0;
  91
  92                         & + .menuOverlayMobileBackdrop {
  93                                 box-shadow: inset 5px 0 10px -5px rgba(0, 0, 0, 0.6);
  94                                 left: 350px;
  95                         }
  96
  97                         .menuOverlayItemList {
  98                                 left: 0;
  99                         }
 100                 }
 101
 102                 &.pageUserMenuMobile {
 103                         right: 0;
 104
 105                         & + .menuOverlayMobileBackdrop {
 106                                 box-shadow: inset -5px 0 10px -5px rgba(0, 0, 0, 0.6);
 107                                 right: 350px;
 108                         }
 109
 110                         .menuOverlayItemList {
 111                                 right: 0;
 112                         }
 113                 }
 114         }
 115 }
 116
 117 .menuOverlayMobileBackdrop {
 118         background-color: rgba(0, 0, 0, 0.4);
 119         bottom: 0;
 120         display: none;
 121         left: 0;
 122         position: fixed;
 123         right: 0;
 124         top: 0;
 125         z-index: 395;
 126 }
 127
 128 .menuOverlayItemWrapper {
 129         display: flex;
 130         justify-content: flex-end;
 131
 132         > .menuOverlayItemLink {
 133                 flex: 1 1 auto;
 134         }
 135 }
 136
 137 .menuOverlayItemList {
 138         background-color: $wcfHeaderMenuBackground;
 139         height: 100%;
 140         list-style-type: none;
 141         margin: 0;
 142         padding: 5px 0;
 143         position: absolute;
 144         top: 0;
 145         left: -1px;
 146         bottom: 0;
 147         width: calc(100vw + 1px);
 148         z-index: 450;
 149
 150         @include screen-sm-up {
 151                 width: 350px;
 152         }
 153
 154         &:not(.activeList) {
 155                 display: none;
 156         }
 157 }
 158
 159 .menuOverlayItemSpacer {
 160         margin-top: 25px;
 161
 162         /* avoid successive spacers piling up */
 163         & + .menuOverlayItemSpacer {
 164                 display: none;
 165         }
 166 }
 167
 168 .menuOverlayItem {
 169         &:not(:last-child) {
 170                 margin-bottom: 1px;
 171         }
 172
 173         /* nested item list */
 174         > .menuOverlayItemList {
 175                 margin-left: 100%;
 176                 z-index: 500;
 177         }
 178 }
 179
 180 .menuOverlayItemLink,
 181 .menuOverlayTitle,
 182 .menuOverlayBackLink {
 183         color: $wcfHeaderMenuLink;
 184         display: block;
 185         font-size: 14px;
 186         padding: 10px 30px;
 187         position: relative;
 188 }
 189
 190 .menuOverlayItemLink {
 191         align-items: center;
 192         background-color: $wcfHeaderMenuLinkBackground;
 193         display: flex;
 194         overflow: hidden;
 195         text-overflow: ellipsis;
 196         white-space: nowrap;
 197
 198         .icon::before {
 199                 color: $wcfHeaderMenuLink;
 200         }
 201
 202         &:hover {
 203                 color: $wcfHeaderMenuLinkActive;
 204         }
 205
 206         /* wrapper class for links containing an additional badge */
 207         &.menuOverlayItemBadge {
 208                 align-items: center;
 209                 display: flex;
 210                 padding-right: 10px;
 211
 212                 /* different padding if there is no additional icon after the link,
 213                    ensures proper alignment for links with badges containing a child
 214                    item list */
 215                 &:last-child {
 216                         /* 55px = 10px padding + 1px margin + icon */
 217                         /* icon = 2x 10px padding + 16px width */
 218                         padding-right: 55px;
 219                 }
 220
 221                 > .menuOverlayItemTitle {
 222                         flex: 1 1 auto;
 223                 }
 224
 225                 > .badge {
 226                         flex: 0 0 auto;
 227                 }
 228         }
 229
 230         &.menuOverlayItemLinkMore::after {
 231                 color: $wcfHeaderMenuLink;
 232                 content: $fa-var-angle-right;
 233                 display: block;
 234                 font-family: FontAwesome;
 235                 font-size: 18px;
 236                 position: absolute;
 237                 right: 18px;
 238                 top: 50%;
 239                 transform: translateY(-50%);
 240         }
 241
 242         .menuOverlayItemTitle {
 243                 overflow: hidden;
 244                 text-overflow: ellipsis;
 245         }
 246 }
 247
 248 /* fix icons in rtl design */
 249 html[dir="rtl"] .menuOverlayItemLink.menuOverlayItemLinkMore::after {
 250         content: $fa-var-angle-left;
 251 }
 252
 253 .pageUserMenuMobile .menuOverlayItemBadge:last-child {
 254         padding-right: 10px !important;
 255 }
 256
 257 .menuOverlayItemLink.active,
 258 .menuOverlayItemLinkIcon.active {
 259         background-color: $wcfHeaderMenuLinkBackgroundActive;
 260         color: $wcfHeaderMenuLinkActive;
 261 }
 262
 263 .menuOverlayItemLinkIcon.active > .icon::before {
 264         color: $wcfHeaderMenuLinkActive;
 265 }
 266
 267 .menuOverlayTitle {
 268         color: rgba($wcfHeaderMenuLink, 0.7);
 269         overflow: hidden;
 270         text-overflow: ellipsis;
 271         white-space: nowrap;
 272
 273         &:not(:first-child) {
 274                 margin-top: 10px;
 275         }
 276 }
 277
 278 /* icon link sharing the space with a link or (header only) the logo */
 279 .menuOverlayItemLinkIcon {
 280         background-color: $wcfHeaderMenuLinkBackground;
 281         flex: 0 0 auto;
 282         margin-left: 1px;
 283         padding: 10px;
 284
 285         /* force explicit dimensions because no each .icon24 is of equal height/width */
 286         height: 44px;
 287         width: 44px;
 288
 289         > .icon::before {
 290                 color: $wcfHeaderMenuLink;
 291         }
 292 }
 293
 294 .menuOverlayBackLink::before {
 295         color: rgba($wcfHeaderMenuLink, 0.7);
 296         content: $fa-var-angle-left;
 297         display: block;
 298         font-family: FontAwesome;
 299         font-size: 18px;
 300         position: absolute;
 301         left: 12px;
 302         top: 50%;
 303         transform: translateY(-50%);
 304 }
 305
 306 .menuOverlayLogoWrapper {
 307         flex: 1 1 auto;
 308         padding: 5px;
 309         display: flex;
 310
 311         .menuOverlayLogo {
 312                 flex: 1 1 auto;
 313                 background-size: contain;
 314                 background-repeat: no-repeat;
 315                 background-position: center;
 316         }
 317 }