Flyout menu have to be 100% width

yagopv · Oct 15, 2013 · bf84846 · bf84846
1 parent 23a5d85
commit bf84846
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 34 deletions.
diff --git a/dist/css/Stashy.css b/dist/css/Stashy.css
@@ -545,6 +545,9 @@
   width: 100%;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 .st-offcanvas * {
   -webkit-box-sizing: border-box;
@@ -591,8 +594,8 @@
 .st-offcanvas.active-transitions .st-offcanvas-menu,
 .st-offcanvas.active-transitions .st-offcanvas-main,
 .st-offcanvas.active-transitions .st-offcanvas-additional {
-  -webkit-transition: 0.1s all ease;
-  transition: 0.1s all ease;
+  -webkit-transition: all 0.15s ease;
+  transition: all 0.15s ease;
 }
 .js .st-offcanvas .st-offcanvas-menu {
   margin-left: -100%;
@@ -706,6 +709,9 @@
 .st-flyout-container {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 .st-flyout-container * {
   margin: 0;
@@ -745,8 +751,8 @@
 }
 .st-flyout-container.st-push {
   position: relative;
-  -webkit-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
+  -webkit-transition: all 0.15s ease;
+  transition: all 0.15s ease;
 }
 .st-flyout-container.st-push.active-menu {
   left: 75%;
@@ -773,13 +779,8 @@
 }
 .st-flyout-container.st-reveal .st-flyout-menu,
 .st-flyout-container.st-reveal .st-flyout-main {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -webkit-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
+  -webkit-transition: all 0.15s ease;
+  transition: all 0.15s ease;
 }
 .st-flyout-container.st-reveal.active-menu .st-flyout-main {
   left: 75%;
@@ -802,7 +803,7 @@
 }
 .js .st-flyout-container .st-flyout-menu {
   position: relative;
-  width: 75%;
+  width: 100%;
   height: 100%;
   position: absolute;
   top: 0;

diff --git a/dist/css/Stashy.min.css b/dist/css/Stashy.min.css
diff --git a/docs/public/Content/Stashy.css b/docs/public/Content/Stashy.css
@@ -539,6 +539,9 @@
   width: 100%;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 .st-offcanvas * {
   -webkit-box-sizing: border-box;
@@ -585,8 +588,8 @@
 .st-offcanvas.active-transitions .st-offcanvas-menu,
 .st-offcanvas.active-transitions .st-offcanvas-main,
 .st-offcanvas.active-transitions .st-offcanvas-additional {
-  -webkit-transition: 0.1s all ease;
-  transition: 0.1s all ease;
+  -webkit-transition: all 0.15s ease;
+  transition: all 0.15s ease;
 }
 .js .st-offcanvas .st-offcanvas-menu {
   margin-left: -100%;
@@ -700,6 +703,9 @@
 .st-flyout-container {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 .st-flyout-container * {
   margin: 0;
@@ -739,8 +745,8 @@
 }
 .st-flyout-container.st-push {
   position: relative;
-  -webkit-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
+  -webkit-transition: all 0.15s ease;
+  transition: all 0.15s ease;
 }
 .st-flyout-container.st-push.active-menu {
   left: 75%;
@@ -767,13 +773,8 @@
 }
 .st-flyout-container.st-reveal .st-flyout-menu,
 .st-flyout-container.st-reveal .st-flyout-main {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -webkit-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
+  -webkit-transition: all 0.15s ease;
+  transition: all 0.15s ease;
 }
 .st-flyout-container.st-reveal.active-menu .st-flyout-main {
   left: 75%;
@@ -796,7 +797,7 @@
 }
 .js .st-flyout-container .st-flyout-menu {
   position: relative;
-  width: 75%;
+  width: 100%;
   height: 100%;
   position: absolute;
   top: 0;

diff --git a/docs/public/Content/styles.css b/docs/public/Content/styles.css
diff --git a/less/Stashy.Flyout.less b/less/Stashy.Flyout.less
@@ -13,7 +13,8 @@
         .box-sizing(border-box);
     }
 
-    .translate3d(0,0,0); 
+    .translate3d(0,0,0);
+	.backface-visibility(hidden);                
 
     .st-flyout-menu {
     	clear: both;
@@ -35,7 +36,7 @@
     	z-index:1;   
     	box-shadow: @flyout-boxshadow;
 	    .translate3d(0,0,0);
-	    .backface-visibility(hidden);        
+	    .backface-visibility(hidden);
     }
 
     .st-flyout-toggle {
@@ -44,7 +45,7 @@
 
     &.st-push {
     	 position: relative; 
-    	 .transition(all 0.1s ease-out);
+    	 .transition(@flyout-transition);
 
     	 &.active-menu {
     	    left: 75%; 
@@ -69,9 +70,7 @@
     &.st-reveal {
         position: relative; 
         .st-flyout-menu, .st-flyout-main {
-            .translate3d(0,0,0);
-            .backface-visibility(hidden);
-            .transition(all 0.1s ease-out);
+            .transition(@flyout-transition);
         }
 
         &.active-menu {
@@ -102,7 +101,7 @@
     .st-flyout-container {
         .st-flyout-menu {
             position:relative;
-            width: 75%;
+            width: 100%;
             height: 100%;
             position: absolute;
             top: 0;            

diff --git a/less/Stashy.OffCanvas.less b/less/Stashy.OffCanvas.less
@@ -6,6 +6,7 @@
     overflow: hidden;
 	width : 100%;
 	.translate3d(0,0,0);
+    .backface-visibility(hidden);  
 
     * {
         .box-sizing(border-box);
@@ -53,7 +54,7 @@
         .st-offcanvas-menu, 
         .st-offcanvas-main, 
         .st-offcanvas-additional {
-            .transition(0.1s all ease);
+            .transition(@offcanvas-transition);
         }
     }
 

diff --git a/less/Stashy.Variables.less b/less/Stashy.Variables.less
@@ -11,17 +11,20 @@
 // Common
 //-------------------------------------------
 @fontsize-base :  1em;
+@base-transition : all 0.15s ease;
 
 // OffCanvas Layout
 //-------------------------------------------
 @offcanvas-menu-boxshadow :  0 0 70px rgba(0,0,0,.4) inset;
 @offcanvas-additional-boxshadow : 0 0 70px rgba(0,0,0,.4) inset;
+@offcanvas-transition : @base-transition;
 
 // Flyout Layout
 //-------------------------------------------
 @flyout-menu-background : @grey;
 @flyout-main-background : @white;
 @flyout-boxshadow : 0 0 70px rgba(0,0,0,.4);
+@flyout-transition : @base-transition;
 
 // Toggle Layout
 //-------------------------------------------