client/src/app/+videos/+video-edit/video-add.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 $border-width: 3px;
   5 $border-type: solid;
   6 $border-color: #EAEAEA;
   7 $nav-link-height: 40px;
   8
   9 .margin-content {
  10   padding-top: 50px;
  11 }
  12
  13 .alert {
  14   font-size: 15px;
  15 }
  16
  17 ::ng-deep .video-add-nav {
  18   border-bottom: $border-width $border-type $border-color;
  19   margin: 50px 0 0 0 !important;
  20
  21   &.hide-nav {
  22     display: none !important;
  23   }
  24
  25   a.nav-link {
  26     @include disable-default-a-behaviour;
  27
  28     margin-bottom: -$border-width;
  29     height: $nav-link-height !important;
  30     padding: 0 30px !important;
  31     font-size: 15px;
  32
  33     border: $border-width $border-type transparent;
  34
  35     span {
  36       border-bottom: 2px solid transparent;
  37     }
  38
  39     &.active {
  40       border-color: $border-color;
  41       border-bottom-color: transparent;
  42       background-color: pvar(--submenuColor) !important;
  43
  44       span {
  45         border-bottom-color: pvar(--mainColor);
  46       }
  47     }
  48
  49     &:hover:not(.active) {
  50       border-color: transparent;
  51     }
  52   }
  53 }
  54
  55 ::ng-deep .upload-video-container {
  56   border: $border-width $border-type $border-color;
  57   border-top: transparent;
  58
  59   background-color: pvar(--submenuColor);
  60   border-bottom-left-radius: 3px;
  61   border-bottom-right-radius: 3px;
  62   width: 100%;
  63   min-height: 440px;
  64   padding-bottom: 20px;
  65   display: flex;
  66   justify-content: center;
  67   align-items: center;
  68
  69   &.dragover {
  70     border: 3px dashed pvar(--mainColor);
  71   }
  72 }
  73
  74 @mixin nav-scroll {
  75   ::ng-deep .video-add-nav {
  76     height: #{$nav-link-height + $border-width * 2};
  77     overflow-x: auto;
  78     white-space: nowrap;
  79     flex-wrap: unset;
  80
  81     /* Hide active tab style to not have a moving tab effect */
  82     a.nav-link.active {
  83       border-color: transparent;
  84       background-color: pvar(--mainBackgroundColor) !important;
  85     }
  86   }
  87 }
  88
  89 /* Make .video-add-nav tabs scrollable on small devices */
  90 @media screen and (max-width: $small-view) {
  91   @include nav-scroll();
  92 }
  93
  94 @media screen and (max-width: #{$small-view + $menu-width}) {
  95   :host-context(.main-col:not(.expanded)) {
  96     @include nav-scroll();
  97   }
  98 }