aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss29
1 files changed, 28 insertions, 1 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
index 9adeaebb0..1316e09e4 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -4,6 +4,7 @@
4$border-width: 3px; 4$border-width: 3px;
5$border-type: solid; 5$border-type: solid;
6$border-color: #EAEAEA; 6$border-color: #EAEAEA;
7$nav-link-height: 40px;
7 8
8.margin-content { 9.margin-content {
9 padding-top: 50px; 10 padding-top: 50px;
@@ -25,7 +26,7 @@ $border-color: #EAEAEA;
25 @include disable-default-a-behaviour; 26 @include disable-default-a-behaviour;
26 27
27 margin-bottom: -$border-width; 28 margin-bottom: -$border-width;
28 height: 40px !important; 29 height: $nav-link-height !important;
29 padding: 0 30px !important; 30 padding: 0 30px !important;
30 font-size: 15px; 31 font-size: 15px;
31 32
@@ -60,3 +61,29 @@ $border-color: #EAEAEA;
60 border: 3px dashed var(--mainColor); 61 border: 3px dashed var(--mainColor);
61 } 62 }
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: var(--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}