]>
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 | 9 | .margin-content { |
2e7f2627 | 10 | padding-top: 20px; |
cd3d847d C |
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; | |
2e7f2627 | 19 | margin: 20px 0 0 0 !important; |
45c6bcf3 | 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 | ||
ed5bb517 K |
33 | border: $border-width $border-type transparent; |
34 | ||
35 | span { | |
36 | border-bottom: 2px solid transparent; | |
37 | } | |
38 | ||
45c6bcf3 | 39 | &.active { |
ed5bb517 K |
40 | border-color: $border-color; |
41 | border-bottom-color: transparent; | |
e66883b3 | 42 | background-color: pvar(--submenuColor) !important; |
45c6bcf3 C |
43 | |
44 | span { | |
ed5bb517 | 45 | border-bottom-color: pvar(--mainColor); |
cadb46d8 | 46 | } |
c182778e | 47 | } |
ed5bb517 K |
48 | |
49 | &:hover:not(.active) { | |
50 | border-color: transparent; | |
51 | } | |
c182778e | 52 | } |
45c6bcf3 | 53 | } |
c182778e | 54 | |
45c6bcf3 C |
55 | ::ng-deep .upload-video-container { |
56 | border: $border-width $border-type $border-color; | |
c9ff8a08 | 57 | border-top: transparent; |
45c6bcf3 | 58 | |
e66883b3 | 59 | background-color: pvar(--submenuColor); |
c9ff8a08 RK |
60 | border-bottom-left-radius: 3px; |
61 | border-bottom-right-radius: 3px; | |
45c6bcf3 C |
62 | width: 100%; |
63 | min-height: 440px; | |
64 | padding-bottom: 20px; | |
65 | display: flex; | |
66 | justify-content: center; | |
2e7f2627 | 67 | padding-top: 20px; |
c9ff8a08 RK |
68 | |
69 | &.dragover { | |
e66883b3 | 70 | border: 3px dashed pvar(--mainColor); |
c9ff8a08 | 71 | } |
03652b31 | 72 | } |
9181bc0c K |
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 { | |
ed5bb517 | 83 | border-color: transparent; |
e66883b3 | 84 | background-color: pvar(--mainBackgroundColor) !important; |
9181bc0c K |
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 | } |