Improve nav border and colors on active and non-active

Chocobozzz · Jul 14, 2020 · 863cbc3 · 863cbc3
1 parent 677ea3c
commit 863cbc3
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 29 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
@@ -30,16 +30,25 @@ $nav-link-height: 40px;
  padding: 0 30px !important;
  font-size: 15px;
 
+ border: $border-width $border-type transparent;
+
+ span {
+ border-bottom: 2px solid transparent;
+ }
+
  &.active {
- border: $border-width $border-type $border-color;
- border-bottom: none;
+ border-color: $border-color;
+ border-bottom-color: transparent;
  background-color: pvar(--submenuColor) !important;
 
  span {
- border-bottom: 2px solid pvar(--mainColor);
- font-weight: $font-bold;
+ border-bottom-color: pvar(--mainColor);
  }
  }
+
+ &:hover:not(.active) {
+ border-color: transparent;
+ }
  }
 }
 
@@ -71,7 +80,7 @@ $nav-link-height: 40px;
 
  /* Hide active tab style to not have a moving tab effect */
  a.nav-link.active {
- border: none;
+ border-color: transparent;
  background-color: pvar(--mainBackgroundColor) !important;
  }
  }

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
@@ -178,14 +178,16 @@ label {
  font-weight: $font-semibold;
  @include disable-default-a-behaviour;
 
+ border-bottom: 2px solid transparent;
+
  &.active, &.title-page-single {
  margin-top: 30px;
  margin-bottom: 25px;
  }
 
  &.active {
- font-weight: $font-bold;
- border-bottom: 2px solid pvar(--mainColor);
+ color: pvar(--mainColor) !important;
+ border-bottom-color: pvar(--mainColor);
  }
 
  &.title-page-single {
@@ -196,6 +198,10 @@ label {
  color: pvar(--mainForegroundColor);
  }
 
+ &:hover:not(.active) {
+ border-bottom-color: pvar(--mainForegroundColor);
+ }
+
  @media screen and (max-width: $mobile-view) {
  margin-right: 15px;
  }
@@ -205,10 +211,10 @@ label {
 .title-page-settings {
  white-space: nowrap;
  font-size: 115%;
- font-weight: $font-regular;
+ font-weight: $font-semibold;
 
  &.active {
- font-weight: $font-semibold;
+ color: pvar(--mainColor);
  }
 }
 
@@ -228,9 +234,9 @@ label {
  color: pvar(--mainForegroundColor);
  padding: 5px 15px;
  border-radius: 0.25rem;
+ font-weight: $font-semibold;
 
  &.active {
- font-weight: $font-semibold;
  background-color: #f0f0f0;
  color: #000;
  }

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
@@ -153,9 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 .nav.nav-pills {
  font-size: 16px !important;
+ font-weight: $font-semibold !important;
 
  .nav-link.active {
- font-weight: $font-semibold !important;
+ color: pvar(--mainColor)
  }
 
  a {
@@ -165,29 +166,23 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  }
 }
 
-.nav-tabs {
-
- .nav-link {
- @include disable-default-a-behaviour;
+.nav-tabs .nav-link {
+ @include disable-default-a-behaviour;
 
- color: pvar(--mainForegroundColor) !important;
- }
-}
+ color: pvar(--mainForegroundColor);
+ font-weight: $font-semibold;
+ border: none;
+ border-bottom: 2px solid transparent;
 
-.nav-tabs .nav-link {
- &:not(.active) {
- border-bottom: 3px solid transparent;
- }
  &.active {
- font-weight: $font-semibold;
+ color: pvar(--mainColor) !important;
  background-color: pvar(--mainBackgroundColor) !important;
- border: none;
- border-bottom: 2px solid pvar(--mainColor);
+ border-bottom-color: pvar(--mainColor);
  }
- &:hover {
-  border-top-color: transparent;
- border-left-color: transparent;
- border-right-color: transparent;
+
+ &:hover:not(.active) {
+ color: pvar(--mainColor) !important;
+ border-bottom-color: transparent;
  }
 }