client/src/sass/include/_nav.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 @mixin peertube-nav-tabs (
   5   $border-width: 3px,
   6   $border-type: solid,
   7   $border-color: #EAEAEA,
   8   $nav-link-height: 40px
   9 ) {
  10   border-bottom: $border-width $border-type $border-color;
  11   margin: 20px 0 0 !important;
  12
  13   &.hide-nav {
  14     display: none !important;
  15   }
  16
  17   a.nav-link {
  18     @include disable-default-a-behaviour;
  19
  20     margin-bottom: -$border-width;
  21     height: $nav-link-height !important;
  22     padding: 0 30px !important;
  23
  24     border: $border-width $border-type transparent;
  25
  26     span {
  27       border-bottom: 2px solid transparent;
  28     }
  29
  30     &.active {
  31       border-color: $border-color;
  32       border-bottom-color: transparent;
  33
  34       span {
  35         border-bottom-color: pvar(--mainColor);
  36       }
  37     }
  38
  39     &:hover:not(.active) {
  40       border-color: transparent;
  41     }
  42   }
  43 }