diff options
author | Kim <1877318+kimsible@users.noreply.github.com> | 2020-07-23 15:09:15 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-07-23 15:09:15 +0200 |
commit | ed5bb517266c80904c44bf44a335f1003f5aa277 (patch) | |
tree | 80671a21fb8c13ab47a65f01b64222a3a1e96a47 /client/src/app/+videos/+video-edit | |
parent | 345b4a22a8432cfd8c9c9f24634821d58c215b9a (diff) | |
download | PeerTube-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/+video-edit')
-rw-r--r-- | client/src/app/+videos/+video-edit/video-add.component.scss | 19 |
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 | } |