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