aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+videos
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-07-23 15:09:15 +0200
committerGitHub <noreply@github.com>2020-07-23 15:09:15 +0200
commited5bb517266c80904c44bf44a335f1003f5aa277 (patch)
tree80671a21fb8c13ab47a65f01b64222a3a1e96a47 /client/src/app/+videos
parent345b4a22a8432cfd8c9c9f24634821d58c215b9a (diff)
downloadPeerTube-ed5bb517266c80904c44bf44a335f1003f5aa277.tar.gz
PeerTube-ed5bb517266c80904c44bf44a335f1003f5aa277.tar.zst
PeerTube-ed5bb517266c80904c44bf44a335f1003f5aa277.zip
Improve navigation sub-menu and tabs effects (#2971)
* Improve nav border and colors on active and non-active * Remove margin-top effect on active nav * Use opacity / bold instead of color change on nav * Remove dropdown items label in sub-menu and add a class active * Position sub-menu to fixed * Autoclose dropdown sub-menu only on outside click * Remove open dropdown on hover in sub-menu * Show reusable h1 for dropdown item in sub-menu * Put reusable sub-menu h1 styles to mixins * Add icons to sub-menu dropdown-item h1 * Make all the sub-menu accessible with focus Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/+videos')
-rw-r--r--client/src/app/+videos/+video-edit/video-add.component.scss19
1 files changed, 14 insertions, 5 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 0ad57d897..b9fef9fce 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -30,16 +30,25 @@ $nav-link-height: 40px;
30 padding: 0 30px !important; 30 padding: 0 30px !important;
31 font-size: 15px; 31 font-size: 15px;
32 32
33 border: $border-width $border-type transparent;
34
35 span {
36 border-bottom: 2px solid transparent;
37 }
38
33 &.active { 39 &.active {
34 border: $border-width $border-type $border-color; 40 border-color: $border-color;
35 border-bottom: none; 41 border-bottom-color: transparent;
36 background-color: pvar(--submenuColor) !important; 42 background-color: pvar(--submenuColor) !important;
37 43
38 span { 44 span {
39 border-bottom: 2px solid pvar(--mainColor); 45 border-bottom-color: pvar(--mainColor);
40 font-weight: $font-bold;
41 } 46 }
42 } 47 }
48
49 &:hover:not(.active) {
50 border-color: transparent;
51 }
43 } 52 }
44} 53}
45 54
@@ -71,7 +80,7 @@ $nav-link-height: 40px;
71 80
72 /* Hide active tab style to not have a moving tab effect */ 81 /* Hide active tab style to not have a moving tab effect */
73 a.nav-link.active { 82 a.nav-link.active {
74 border: none; 83 border-color: transparent;
75 background-color: pvar(--mainBackgroundColor) !important; 84 background-color: pvar(--mainBackgroundColor) !important;
76 } 85 }
77 } 86 }