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

   1 @include screen-md-up {
   2         .pageNavigation {
   3                 background-color: $wcfNavigationBackground;
   4                 color: $wcfNavigationText;
   5                 flex: 0 0 auto;
   6                 padding: 10px 0;
   7
   8                 > div {
   9                         align-items: center;
  10                         display: flex;
  11                         justify-content: flex-end;
  12                         min-height: 20px;
  13                 }
  14
  15                 .icon {
  16                         color: inherit;
  17                 }
  18
  19                 a {
  20                         color: $wcfNavigationLink;
  21
  22                         &:hover {
  23                                 color: $wcfNavigationLinkActive;
  24                         }
  25                 }
  26         }
  27
  28         .boxesHeaderBoxes + .pageNavigation {
  29                 margin-top: 1px;
  30         }
  31 }
  32
  33 @include screen-lg {
  34         .pageNavigationIcons {
  35                 display: flex;
  36                 flex: 0 0 auto;
  37                 flex-direction: row-reverse;
  38                 margin-left: 10px;
  39
  40                 > li {
  41                         flex: 0 0 auto;
  42
  43                         &:not(:last-child) {
  44                                 margin-left: 10px;
  45                         }
  46                 }
  47         }
  48 }
  49
  50 @include screen-sm-down {
  51         .breadcrumbs {
  52                 margin-bottom: -5px;
  53                 margin-top: 5px;
  54         }
  55
  56         .breadcrumbs > ol > li {
  57                 display: none;
  58
  59                 &:last-child {
  60                         align-items: center;
  61                         color: $wcfContentDimmedText;
  62                         display: flex;
  63                         flex: 1;
  64
  65                         @include wcfFontDefault;
  66
  67                         &::before {
  68                                 content: $fa-var-long-arrow-left;
  69                                 flex: 0 auto;
  70                                 font-family: FontAwesome;
  71                         }
  72
  73                         > a {
  74                                 color: $wcfContentDimmedLink;
  75                                 display: block;
  76                                 flex: 1;
  77                                 overflow: hidden;
  78                                 padding: 5px 0 5px 10px;
  79                                 text-overflow: ellipsis;
  80                                 white-space: nowrap;
  81                         }
  82                 }
  83         }
  84 }
  85
  86 @include screen-md-down {
  87         .pageNavigationIcons {
  88                 display: none;
  89         }
  90 }