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     &.active {
  34       border: $border-width $border-type $border-color;
  35       border-bottom: none;
  36       background-color: pvar(--submenuColor) !important;
  37
  38       span {
  39         border-bottom: 2px solid pvar(--mainColor);
  40         font-weight: $font-bold;
  41       }
  42     }
  43   }
  44 }
  45
  46 ::ng-deep .upload-video-container {
  47   border: $border-width $border-type $border-color;
  48   border-top: transparent;
  49
  50   background-color: pvar(--submenuColor);
  51   border-bottom-left-radius: 3px;
  52   border-bottom-right-radius: 3px;
  53   width: 100%;
  54   min-height: 440px;
  55   padding-bottom: 20px;
  56   display: flex;
  57   justify-content: center;
  58   align-items: center;
  59
  60   &.dragover {
  61     border: 3px dashed pvar(--mainColor);
  62   }
  63 }
  64
  65 @mixin nav-scroll {
  66   ::ng-deep .video-add-nav {
  67     height: #{$nav-link-height + $border-width * 2};
  68     overflow-x: auto;
  69     white-space: nowrap;
  70     flex-wrap: unset;
  71
  72     /* Hide active tab style to not have a moving tab effect */
  73     a.nav-link.active {
  74       border: none;
  75       background-color: pvar(--mainBackgroundColor) !important;
  76     }
  77   }
  78 }
  79
  80 /* Make .video-add-nav tabs scrollable on small devices */
  81 @media screen and (max-width: $small-view) {
  82   @include nav-scroll();
  83 }
  84
  85 @media screen and (max-width: #{$small-view + $menu-width}) {
  86   :host-context(.main-col:not(.expanded)) {
  87     @include nav-scroll();
  88   }
  89 }