1 files changed, 89 insertions, 0 deletions

diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
new file mode 100644
index 000000000..0ad57d897
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -0,0 +1,89 @@
+@import '_variables';
+@import '_mixins';
+
+$border-width: 3px;
+$border-type: solid;
+$border-color: #EAEAEA;
+$nav-link-height: 40px;
+
+.margin-content {
+  padding-top: 50px;
+}
+
+.alert {
+  font-size: 15px;
+}
+
+::ng-deep .video-add-nav {
+  border-bottom: $border-width $border-type $border-color;
+  margin: 50px 0 0 0 !important;
+
+  &.hide-nav {
+    display: none !important;
+  }
+
+  a.nav-link {
+    @include disable-default-a-behaviour;
+
+    margin-bottom: -$border-width;
+    height: $nav-link-height !important;
+    padding: 0 30px !important;
+    font-size: 15px;
+
+    &.active {
+      border: $border-width $border-type $border-color;
+      border-bottom: none;
+      background-color: pvar(--submenuColor) !important;
+
+      span {
+        border-bottom: 2px solid pvar(--mainColor);
+        font-weight: $font-bold;
+      }
+    }
+  }
+}
+
+::ng-deep .upload-video-container {
+  border: $border-width $border-type $border-color;
+  border-top: transparent;
+
+  background-color: pvar(--submenuColor);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  width: 100%;
+  min-height: 440px;
+  padding-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.dragover {
+    border: 3px dashed pvar(--mainColor);
+  }
+}
+
+@mixin nav-scroll {
+  ::ng-deep .video-add-nav {
+    height: #{$nav-link-height + $border-width * 2};
+    overflow-x: auto;
+    white-space: nowrap;
+    flex-wrap: unset;
+
+    /* Hide active tab style to not have a moving tab effect */
+    a.nav-link.active {
+      border: none;
+      background-color: pvar(--mainBackgroundColor) !important;
+    }
+  }
+}
+
+/* Make .video-add-nav tabs scrollable on small devices */
+@media screen and (max-width: $small-view) {
+  @include nav-scroll();
+}
+
+@media screen and (max-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include nav-scroll();
+  }
+}