1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
6 | */
|
---|
7 | md-sidenav {
|
---|
8 | box-sizing: border-box;
|
---|
9 | position: absolute;
|
---|
10 | flex-direction: column;
|
---|
11 | z-index: 60;
|
---|
12 | width: 320px;
|
---|
13 | max-width: 320px;
|
---|
14 | bottom: 0;
|
---|
15 | overflow: auto;
|
---|
16 | -webkit-overflow-scrolling: touch; }
|
---|
17 | md-sidenav ul {
|
---|
18 | list-style: none; }
|
---|
19 | md-sidenav.md-closed {
|
---|
20 | display: none; }
|
---|
21 | md-sidenav.md-closed-add, md-sidenav.md-closed-remove {
|
---|
22 | display: flex;
|
---|
23 | transition: 0.2s ease-in all; }
|
---|
24 | md-sidenav.md-closed-add.md-closed-add-active, md-sidenav.md-closed-remove.md-closed-remove-active {
|
---|
25 | transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
|
---|
26 | md-sidenav.md-locked-open-add, md-sidenav.md-locked-open-remove {
|
---|
27 | position: static;
|
---|
28 | display: flex;
|
---|
29 | transform: translate3d(0, 0, 0); }
|
---|
30 | 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 {
|
---|
31 | position: static;
|
---|
32 | display: flex;
|
---|
33 | transform: translate3d(0, 0, 0); }
|
---|
34 | md-sidenav.md-locked-open-remove.md-closed {
|
---|
35 | position: static;
|
---|
36 | display: flex;
|
---|
37 | transform: translate3d(0, 0, 0); }
|
---|
38 | md-sidenav.md-closed.md-locked-open-add {
|
---|
39 | position: static;
|
---|
40 | display: flex;
|
---|
41 | transform: translate3d(0%, 0, 0); }
|
---|
42 | md-sidenav.md-closed.md-locked-open-add:not(.md-locked-open-add-active) {
|
---|
43 | 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);
|
---|
44 | width: 0 !important;
|
---|
45 | min-width: 0 !important; }
|
---|
46 | md-sidenav.md-closed.md-locked-open-add-active {
|
---|
47 | 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); }
|
---|
48 | md-sidenav.md-locked-open-remove-active {
|
---|
49 | 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);
|
---|
50 | width: 0 !important;
|
---|
51 | min-width: 0 !important; }
|
---|
52 |
|
---|
53 | .md-sidenav-backdrop.md-locked-open {
|
---|
54 | display: none; }
|
---|
55 |
|
---|
56 | .md-sidenav-left, md-sidenav {
|
---|
57 | left: 0;
|
---|
58 | top: 0;
|
---|
59 | transform: translate3d(0%, 0, 0); }
|
---|
60 | .md-sidenav-left.md-closed, md-sidenav.md-closed {
|
---|
61 | transform: translate3d(-100%, 0, 0); }
|
---|
62 |
|
---|
63 | .md-sidenav-right {
|
---|
64 | left: 100%;
|
---|
65 | top: 0;
|
---|
66 | transform: translate(-100%, 0); }
|
---|
67 | .md-sidenav-right.md-closed {
|
---|
68 | transform: translate(0%, 0); }
|
---|
69 |
|
---|
70 | @media (min-width: 600px) {
|
---|
71 | md-sidenav {
|
---|
72 | max-width: 400px; } }
|
---|
73 |
|
---|
74 | @media (max-width: 456px) {
|
---|
75 | md-sidenav {
|
---|
76 | width: calc(100% - 56px);
|
---|
77 | min-width: calc(100% - 56px);
|
---|
78 | max-width: calc(100% - 56px); } }
|
---|
79 |
|
---|
80 | @media screen and (-ms-high-contrast: active) {
|
---|
81 | .md-sidenav-left, md-sidenav {
|
---|
82 | border-right: 1px solid #fff; }
|
---|
83 | .md-sidenav-right {
|
---|
84 | border-left: 1px solid #fff; } }
|
---|