[TASK] Add indicator to subnav and enhance mainnav version

Related: #1324
benjaminkott · Jun 20, 2023 · cd88268 · cd88268
1 parent 95ab34a
commit cd88268
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 13 deletions.
diff --git a/Resources/Public/Css/bootstrap5-rte.css b/Resources/Public/Css/bootstrap5-rte.css
@@ -6768,7 +6768,7 @@ fieldset:disabled .cc-btn {
   text-align: center;
   background: none;
   border: 0;
-  opacity: 0.5;
+  opacity: 0.8;
   transition: opacity 0.15s ease;
 }
 
@@ -14033,12 +14033,12 @@ textarea.form-control.error {
   top: 50%;
   opacity: 0;
   transition: opacity .25s ease-in-out;
-  border: 3px solid transparent;
-  border-left: 3px solid var(--mainnavigation-hightlight);
+  border: 4px solid transparent;
+  border-left: 4px solid var(--mainnavigation-hightlight);
   transform: translate(1px, -50%);
 }
 
-.navbar-mainnavigation .nav-link:not(.nav-link-toggle):hover:before, .navbar-mainnavigation .nav-link:not(.nav-link-toggle):focus:before, .navbar-mainnavigation .nav-link:not(.nav-link-toggle):focus-visible:before {
+.navbar-mainnavigation .nav-link:not(.nav-link-toggle):hover:before, .navbar-mainnavigation .nav-link:not(.nav-link-toggle):focus-visible:before {
   opacity: .5;
 }
 
@@ -15270,6 +15270,19 @@ textarea.form-control.error {
   background-color: transparent;
 }
 
+.active > .subnav-link:before {
+  display: block;
+  content: '';
+  position: absolute;
+  left: .4rem;
+  top: 50%;
+  opacity: .75;
+  transition: opacity .25s ease-in-out;
+  border: 4px solid transparent;
+  border-left: 4px solid #55755e;
+  transform: translate(0, -50%);
+}
+
 .subnav-link:hover, .subnav-link:focus {
   z-index: 1;
   position: relative;

diff --git a/Resources/Public/Css/bootstrap5-rte.min.css b/Resources/Public/Css/bootstrap5-rte.min.css
diff --git a/Resources/Public/Css/bootstrap5-theme.css b/Resources/Public/Css/bootstrap5-theme.css
@@ -6768,7 +6768,7 @@ fieldset:disabled .cc-btn {
   text-align: center;
   background: none;
   border: 0;
-  opacity: 0.5;
+  opacity: 0.8;
   transition: opacity 0.15s ease;
 }
 
@@ -14033,12 +14033,12 @@ textarea.form-control.error {
   top: 50%;
   opacity: 0;
   transition: opacity .25s ease-in-out;
-  border: 3px solid transparent;
-  border-left: 3px solid var(--mainnavigation-hightlight);
+  border: 4px solid transparent;
+  border-left: 4px solid var(--mainnavigation-hightlight);
   transform: translate(1px, -50%);
 }
 
-.navbar-mainnavigation .nav-link:not(.nav-link-toggle):hover:before, .navbar-mainnavigation .nav-link:not(.nav-link-toggle):focus:before, .navbar-mainnavigation .nav-link:not(.nav-link-toggle):focus-visible:before {
+.navbar-mainnavigation .nav-link:not(.nav-link-toggle):hover:before, .navbar-mainnavigation .nav-link:not(.nav-link-toggle):focus-visible:before {
   opacity: .5;
 }
 
@@ -15270,6 +15270,19 @@ textarea.form-control.error {
   background-color: transparent;
 }
 
+.active > .subnav-link:before {
+  display: block;
+  content: '';
+  position: absolute;
+  left: .4rem;
+  top: 50%;
+  opacity: .75;
+  transition: opacity .25s ease-in-out;
+  border: 4px solid transparent;
+  border-left: 4px solid #55755e;
+  transform: translate(0, -50%);
+}
+
 .subnav-link:hover, .subnav-link:focus {
   z-index: 1;
   position: relative;

diff --git a/Resources/Public/Css/bootstrap5-theme.min.css b/Resources/Public/Css/bootstrap5-theme.min.css
diff --git a/Resources/Public/Scss/bootstrap5/_variables.scss b/Resources/Public/Scss/bootstrap5/_variables.scss
@@ -131,6 +131,11 @@ $accordion-padding-x:               1.25rem !default;
 $accordion-body-padding-y:          $accordion-padding-x !default;
 $accordion-body-padding-x:          $accordion-padding-x !default;
 
+//
+// Carousel
+//
+$carousel-control-opacity:          .8 !default;
+
 //
 // Components
 //

diff --git a/Resources/Public/Scss/components/_subnav.scss b/Resources/Public/Scss/components/_subnav.scss
@@ -63,6 +63,18 @@ $subnav-active-bg:            transparent !default;
     .active > & {
         color: $subnav-active-color !important;
         background-color: $subnav-active-bg;
+        &:before {
+            display: block;
+            content: '';
+            position: absolute;
+            left: .4rem;
+            top: 50%;
+            opacity: .75;
+            transition: opacity .25s ease-in-out;
+            border: 4px solid transparent;
+            border-left: 4px solid $subnav-active-color;
+            transform: translate(0, -50%);
+        }
     }
     &:hover,
     &:focus {

diff --git a/Resources/Public/Scss/components/navbar/_status.scss b/Resources/Public/Scss/components/navbar/_status.scss
@@ -11,12 +11,11 @@
             top: 50%;
             opacity: 0;
             transition: opacity .25s ease-in-out;
-            border: 3px solid transparent;
-            border-left: 3px solid var(--mainnavigation-hightlight);
+            border: 4px solid transparent;
+            border-left: 4px solid var(--mainnavigation-hightlight);
             transform: translate(1px, -50%);
         }
         &:hover:before,
-        &:focus:before,
         &:focus-visible:before {
             opacity: .5;
         }