restore sidenav.scss to SHA e26a275 version

angular · Aug 28, 2015 · b22b00f · b22b00f
1 parent 22c34ba
commit b22b00f
Showing 1 changed file with 71 additions and 20 deletions.
diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
@@ -1,55 +1,103 @@
 $sidenav-default-width: 304px !default;
 $sidenav-min-space: 56px !default;
 
-.md-sidenav-left {
-  transform: translate3d(-100%, 0, 0);
-}
-
 md-sidenav {
   box-sizing: border-box;
-  position: relative;
+  position: absolute;
   flex-direction: column;
   z-index: $z-index-sidenav;
 
-  top:0;
-  bottom: 0;
-  left:0;
   width: $sidenav-default-width;
   min-width: $sidenav-default-width;
   max-width: $sidenav-default-width;
-
-  display:none;
-  transition: 0s ease-out transform;
-
+  bottom: 0;
   background-color: white;
   overflow: auto;
 
   ul {
     list-style: none;
   }
 
+  &.md-closed {
+    display: none;
+  }
+  &.md-closed-add,
+  &.md-closed-remove {
+    display: flex;
+    transition: 0.2s ease-in all;
+  }
+
+  &.md-closed-add.md-closed-add-active,
+  &.md-closed-remove.md-closed-remove-active {
+    transition: $swift-ease-out;
+  }
 
   &.md-locked-open-add,
   &.md-locked-open-remove {
-    display: block;
+    position: static;
+    display: flex;
+    transform: translate3d(0, 0, 0);
   }
   &.md-locked-open {
-    display: block;
-    transition-duration: 0.2s;
+    width: $sidenav-default-width;
+    min-width: $sidenav-default-width;
+    max-width: $sidenav-default-width;
+  }
 
-    &.md-sidenav-left {
-      transform: translate3d(0, 0, 0);
-    }
+  &.md-locked-open,
+  &.md-locked-open.md-closed,
+  &.md-locked-open.md-closed.md-sidenav-left,
+  &.md-locked-open.md-closed.md-sidenav-right,
+  &.md-locked-open-remove.md-closed {
+    position: static;
+    display: flex;
+    transform: translate3d(0, 0, 0);
+  }
+  &.md-locked-open-remove-active {
+    transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
+                min-width $swift-ease-in-duration $swift-ease-in-timing-function;
+    width: 0;
+    min-width: 0;
   }
 
-  @extend .md-sidenav-left;
-}
+  &.md-closed.md-locked-open-add {
+    width: 0;
+    min-width: 0;
+    transform: translate3d(0%, 0, 0);
+  }
 
+  &.md-closed.md-locked-open-add-active {
+    transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
+                min-width $swift-ease-in-duration $swift-ease-in-timing-function;
+    width: $sidenav-default-width;
+    min-width: $sidenav-default-width;
+    transform: translate3d(0%, 0, 0);
+  }
 
+  @extend .md-sidenav-left;
+}
 .md-sidenav-backdrop.md-locked-open {
   display: none;
 }
 
+.md-sidenav-left {
+  left: 0;
+  top: 0;
+  transform: translate3d(0%, 0, 0);
+  &.md-closed {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.md-sidenav-right {
+  left: 100%;
+  top: 0;
+  transform: translate3d(-100%, 0, 0);
+  &.md-closed {
+    transform: translate3d(0%, 0, 0);
+  }
+}
+
 @media (max-width: $sidenav-default-width + $sidenav-min-space) {
   md-sidenav {
     width: 85%;
@@ -60,4 +108,7 @@ md-sidenav {
   .md-sidenav-left {
     border-right: 1px solid #fff;
   }
+  .md-sidenav-right {
+    border-left: 1px solid #fff;
+  }
 }