feat(navbar): use transitions between standard and minimized navbar

Orange-OpenSource · Jan 7, 2020 · fad4ae4 · fad4ae4
1 parent e54cb31
commit fad4ae4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -23,6 +23,7 @@
   justify-content: space-between; // space out brand from logo
   padding: 0; // Boosted mod
   font-weight: $font-weight-bold; // Boosted mod
+  @include transition($navbar-transition); // Boosted mod
 
   @include media-breakpoint-up(md) {
     padding: $navbar-padding-y $navbar-padding-x;
@@ -86,7 +87,7 @@
   letter-spacing: inherit; // Boosted mod
   white-space: nowrap;
   outline-offset: $spacer; // Boosted mod
-  @include transition($transition-focus); // Boosted mod
+  @include transition($transition-focus, $navbar-brand-transition); // Boosted mod
 
   // Boosted mod
   @include media-breakpoint-up(sm) {
@@ -130,6 +131,7 @@
   img {
     width: $navbar-brand-logo-height;
     height: $navbar-brand-logo-height;
+    @include transition($navbar-brand-logo-transition);
 
     + * {
       margin: 0 $spacer 0 .9375rem;
@@ -160,7 +162,7 @@
     position: relative;
     padding: map-get($spacers, 2) map-get($spacers, 1);
     outline-offset: $spacer;
-    @include transition($transition-focus);
+    @include transition($transition-focus, $navbar-transition);
 
     &[class*="svg-"]::after {
       width: $navbar-supra-icon-size;
@@ -179,6 +181,7 @@
       height: $border-width * 2;
       content: "";
       background-color: currentColor;
+      @include transition($navbar-active-transition);
     }
   }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -828,12 +828,19 @@ $navbar-expanded-padding-y:           1.5625rem !default;
 $navbar-expanded-padding-x:           0 !default;
 $navbar-expanded-minimized-padding-y: $navbar-padding-y !default; // Boosted mod
 
+
 // Boosted mod : adapt navbar padding when mobile view
 $navbar-height:                        6.25rem !default;
 $navbar-brand-logo-height:             map-get($spacers, 4) !default;
 $navbar-brand-logo-expanded-height:    3.125rem !default;
 $navbar-supra-padding-y:               $navbar-brand-logo-height / 10 !default;
 $navbar-supra-icon-size:               1.5625rem !default;
+$navbar-transition-duration:           .2s !default;
+$navbar-transition-timing-function:    ease-in-out !default;
+$navbar-transition:                    padding $navbar-transition-duration $navbar-transition-timing-function !default;
+$navbar-brand-transition:              margin $navbar-transition-duration $navbar-transition-timing-function !default;
+$navbar-brand-logo-transition:         width $navbar-transition-duration $navbar-transition-timing-function, height $navbar-transition-duration $navbar-transition-timing-function !default;
+$navbar-active-transition:             bottom $navbar-transition-duration $navbar-transition-timing-function !default;
 // end mod
 
 //$navbar-nav-link-padding-x:         0 !default;