]>
Commit | Line | Data |
---|---|---|
63c4db6d C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
3 | ||
fbad87b0 C |
4 | $border-width: 3px; |
5 | $border-type: solid; | |
6 | $border-color: #EAEAEA; | |
9181bc0c | 7 | $nav-link-height: 40px; |
27e1a06c | 8 | |
cd3d847d C |
9 | .margin-content { |
10 | padding-top: 50px; | |
11 | } | |
12 | ||
13 | .alert { | |
14 | font-size: 15px; | |
15 | } | |
16 | ||
45c6bcf3 C |
17 | ::ng-deep .video-add-nav { |
18 | border-bottom: $border-width $border-type $border-color; | |
19 | margin: 50px 0 0 0 !important; | |
20 | ||
23f1b9da C |
21 | &.hide-nav { |
22 | display: none !important; | |
23 | } | |
24 | ||
45c6bcf3 C |
25 | a.nav-link { |
26 | @include disable-default-a-behaviour; | |
27 | ||
28 | margin-bottom: -$border-width; | |
9181bc0c | 29 | height: $nav-link-height !important; |
45c6bcf3 C |
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: var(--submenuColor) !important; | |
37 | ||
38 | span { | |
39 | border-bottom: 2px solid var(--mainColor); | |
40 | font-weight: $font-bold; | |
cadb46d8 | 41 | } |
c182778e C |
42 | } |
43 | } | |
45c6bcf3 | 44 | } |
c182778e | 45 | |
45c6bcf3 C |
46 | ::ng-deep .upload-video-container { |
47 | border: $border-width $border-type $border-color; | |
c9ff8a08 | 48 | border-top: transparent; |
45c6bcf3 C |
49 | |
50 | background-color: var(--submenuColor); | |
c9ff8a08 RK |
51 | border-bottom-left-radius: 3px; |
52 | border-bottom-right-radius: 3px; | |
45c6bcf3 C |
53 | width: 100%; |
54 | min-height: 440px; | |
55 | padding-bottom: 20px; | |
56 | display: flex; | |
57 | justify-content: center; | |
58 | align-items: center; | |
c9ff8a08 RK |
59 | |
60 | &.dragover { | |
61 | border: 3px dashed var(--mainColor); | |
62 | } | |
03652b31 | 63 | } |
9181bc0c K |
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 | } |