Add transition to flyout

rbrtsmith · rbrtsmith · commit be1df47c5126 · 2017-10-02T23:01:54.000+01:00
diff --git a/nebula-components/components/_flyout.scss b/nebula-components/components/_flyout.scss
@@ -6,23 +6,30 @@
 
   .#{$nb-namespace}c-flyout.is-open > .#{$nb-namespace}c-flyout__content {
     transform: scale(1);
+    opacity: 1;
+    transition: transform $nb-flyout-transition-duration, opacity $nb-flyout-transition-duration;
   }
 
   .#{$nb-namespace}c-flyout__content {
     position: absolute;
     z-index: 1;
     width: $nb-flyout-width;
     max-width: calc(100vw - #{$nb-spacing-unit-double});
+    opacity: 0;
     transform: scale(0);
   }
 
+  .#{$nb-namespace}c-flyout__content--transition {
+  }
+
   .#{$nb-namespace}c-flyout__toggle {
     background-color: transparent;
   }
 
   .#{$nb-namespace}c-flyout__content--ne {
     bottom: calc(100% + #{$nb-spacing-unit-half});
     left: 0;
+    transform-origin: 0 100%;
 
     &::after {
       @include nb-triangle(down);
@@ -32,6 +39,7 @@
   .#{$nb-namespace}c-flyout__content--se {
     top: calc(100% + #{$nb-spacing-unit-half});
     left: 0;
+    transform-origin: 0 0;
 
     &::after {
       @include nb-triangle(up);
@@ -41,6 +49,7 @@
   .#{$nb-namespace}c-flyout__content--sw {
     top: calc(100% + #{$nb-spacing-unit-half});
     right: 0;
+    transform-origin: 100% 0;
 
     &::after {
       @include nb-triangle(left);
@@ -50,6 +59,7 @@
   .#{$nb-namespace}c-flyout__content--nw {
     bottom: calc(100% + #{$nb-spacing-unit-half});
     right: 0;
+    transform-origin: 100% 100%;
 
     &::after {
       @include nb-triangle(right);
diff --git a/nebula-components/settings/_globals.scss b/nebula-components/settings/_globals.scss
@@ -1,5 +1,5 @@
 $nb-border-radius: 0.3rem !default;
-$nb-transition-duration: 0.2s !default;
+$nb-transition-duration: 0.3s !default;
 $nb-nav-bp-key: 'nav';
 
 $nb-active-border-width: ($nb-spacing-unit / 3) !default;
diff --git a/nebula-components/settings/components/_flyout.scss b/nebula-components/settings/components/_flyout.scss
@@ -1 +1,2 @@
 $nb-flyout-width: 160px !default;
+$nb-flyout-transition-duration: $nb-transition-duration !default;

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`$nb-flyout-width: 160px !default;`
	`2`	`+$nb-flyout-transition-duration: $nb-transition-duration !default;`