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

   1 /* main tabs */
   2 .tabMenu,
   3 .menu {
   4         > ul {
   5                 @include inlineList;
   6
   7                 > li {
   8                         position: relative;
   9
  10                         &:not(:last-child) {
  11                                 margin-right: 20px;
  12                         }
  13
  14                         &::before {
  15                                 border-top: 1px solid $wcfContentLink;
  16                                 bottom: 0;
  17                                 content: "";
  18                                 left: 50%;
  19                                 position: absolute;
  20                                 width: 0;
  21                         }
  22
  23                         &.active {
  24                                 // this causes the item to stand above the fade-effect caused
  25                                 // by the overflow overlays
  26                                 z-index: 60;
  27
  28                                 &::before {
  29                                         left: 0;
  30                                         transition: left 0.12s linear, width 0.12s linear;
  31                                         width: 100%;
  32                                 }
  33
  34                                 > a {
  35                                         cursor: default;
  36                                 }
  37                         }
  38
  39                         > a {
  40                                 display: block;
  41                                 padding: 5px 0;
  42                         }
  43                 }
  44         }
  45
  46         @include screen-sm-down {
  47                 padding-left: 15px;
  48                 padding-right: 15px;
  49                 position: relative;
  50
  51                 &::before {
  52                         display: none;
  53                 }
  54
  55                 > ul {
  56                         flex-wrap: nowrap;
  57                         overflow: auto;
  58                         -webkit-overflow-scrolling: touch;
  59
  60                         > li {
  61                                 flex-shrink: 0;
  62                                 white-space: nowrap;
  63                         }
  64
  65                         &.enableAnimation {
  66                                 transition: padding-left 0.24s linear;
  67
  68                                 > li:first-child {
  69                                         transition: margin-left 0.24s linear;
  70                                 }
  71                         }
  72                 }
  73         }
  74
  75         @include screen-md-up {
  76                 > ul {
  77                         border-bottom: 1px solid $wcfContentBorderInner;
  78
  79                         > li::before {
  80                                 bottom: -1px;
  81                         }
  82                 }
  83         }
  84 }
  85
  86 .tabMenu {
  87         > ul > li > a {
  88                 @include wcfFontSection;
  89         }
  90 }
  91
  92 /* sub tabs */
  93 .menu {
  94         margin-top: 10px;
  95
  96         @include screen-md-up {
  97                 > ul > li > a {
  98                         @include wcfFontHeadline;
  99                 }
 100         }
 101
 102         & + .tabMenuContent {
 103                 margin-top: 20px;
 104         }
 105 }
 106
 107 .tabMenuOverlayLeft,
 108 .tabMenuOverlayRight {
 109         align-items: center;
 110         bottom: 0;
 111         display: flex;
 112         height: 100%;
 113         opacity: 0;
 114         position: absolute;
 115         top: 0;
 116         transition: opacity 0.24s linear, visibility 0s linear 0.24s;
 117         visibility: hidden;
 118         width: 30px;
 119         z-index: 50;
 120
 121         &.active {
 122                 opacity: 1;
 123                 transition-delay: 0s;
 124                 visibility: visible;
 125         }
 126
 127         &::before {
 128                 color: $wcfContentDimmedText;
 129         }
 130 }
 131
 132 .tabMenuOverlayLeft {
 133         background: linear-gradient(to left, transparentize($wcfContentBackground, 100%) 0%, $wcfContentBackground 50%);
 134         left: 0;
 135 }
 136
 137 .tabMenuOverlayRight {
 138         background: linear-gradient(
 139                 to right,
 140                 transparentize($wcfContentBackground, 100%) 0%,
 141                 $wcfContentBackground 50%
 142         );
 143         justify-content: flex-end;
 144         right: 0;
 145 }
 146
 147 .tabMenuContent.hidden {
 148         display: none;
 149 }
 150
 151 .tabMenuContent {
 152         // remove upper border if containerList is the first child
 153         > .containerList:first-child > li:first-child {
 154                 border-top-width: 0;
 155         }
 156 }