| /*! |
| * Angular Material Design |
| * https://github.com/angular/material |
| * @license MIT |
| * v1.0.1 |
| */ |
| md-sidenav { |
| box-sizing: border-box; |
| position: absolute; |
| -webkit-flex-direction: column; |
| -ms-flex-direction: column; |
| flex-direction: column; |
| z-index: 60; |
| width: 320px; |
| max-width: 320px; |
| bottom: 0; |
| overflow: auto; } |
| md-sidenav ul { |
| list-style: none; } |
| md-sidenav.md-closed { |
| display: none; } |
| md-sidenav.md-closed-add, md-sidenav.md-closed-remove { |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| transition: 0.2s ease-in all; } |
| md-sidenav.md-closed-add.md-closed-add-active, md-sidenav.md-closed-remove.md-closed-remove-active { |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } |
| md-sidenav.md-locked-open-add, md-sidenav.md-locked-open-remove { |
| position: static; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| -webkit-transform: translate3d(0, 0, 0); |
| transform: translate3d(0, 0, 0); } |
| md-sidenav.md-locked-open, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-left, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-right, md-sidenav.md-locked-open-remove.md-closed { |
| position: static; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| -webkit-transform: translate3d(0, 0, 0); |
| transform: translate3d(0, 0, 0); } |
| md-sidenav.md-locked-open-remove-active { |
| transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); |
| width: 0; |
| min-width: 0; } |
| md-sidenav.md-closed.md-locked-open-add { |
| width: 0; |
| min-width: 0; |
| -webkit-transform: translate3d(0%, 0, 0); |
| transform: translate3d(0%, 0, 0); } |
| md-sidenav.md-closed.md-locked-open-add-active { |
| transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); |
| width: 320px; |
| min-width: 320px; |
| -webkit-transform: translate3d(0%, 0, 0); |
| transform: translate3d(0%, 0, 0); } |
| |
| .md-sidenav-backdrop.md-locked-open { |
| display: none; } |
| |
| .md-sidenav-left, md-sidenav { |
| left: 0; |
| top: 0; |
| -webkit-transform: translate3d(0%, 0, 0); |
| transform: translate3d(0%, 0, 0); } |
| .md-sidenav-left.md-closed, md-sidenav.md-closed { |
| -webkit-transform: translate3d(-100%, 0, 0); |
| transform: translate3d(-100%, 0, 0); } |
| |
| .md-sidenav-right { |
| left: 100%; |
| top: 0; |
| -webkit-transform: translate3d(-100%, 0, 0); |
| transform: translate3d(-100%, 0, 0); } |
| .md-sidenav-right.md-closed { |
| -webkit-transform: translate3d(0%, 0, 0); |
| transform: translate3d(0%, 0, 0); } |
| |
| @media screen and (min-width: 600px) { |
| md-sidenav { |
| max-width: 400px; } } |
| |
| @media screen and (max-width: 456px) { |
| md-sidenav { |
| width: calc(100% - 56px); |
| min-width: calc(100% - 56px); |
| max-width: calc(100% - 56px); } } |
| |
| @media screen and (-ms-high-contrast: active) { |
| .md-sidenav-left, md-sidenav { |
| border-right: 1px solid #fff; } |
| .md-sidenav-right { |
| border-left: 1px solid #fff; } } |