1 | @import 'default-theme';
|
2 | @import 'mixins';
|
3 | @import 'variables';
|
4 | @import 'elevation';
|
5 | @import 'sidenav-mixins';
|
6 |
|
7 |
|
8 |
|
9 | $md-sidenav-backdrop-color: invert(md-color($md-background, card, 0.6)) !default;
|
10 | $md-sidenav-background-color: md-color($md-background, dialog) !default;
|
11 | $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | @mixin md-sidenav-transition($open, $close) {
|
20 | transform: translate3d($close, 0, 0);
|
21 |
|
22 | &.md-sidenav-closed {
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | visibility: hidden;
|
28 | }
|
29 | &.md-sidenav-closing {
|
30 | transform: translate3d($close, 0, 0);
|
31 | will-change: transform;
|
32 | }
|
33 | &.md-sidenav-opening {
|
34 | @include md-elevation(1);
|
35 | visibility: visible;
|
36 | transform: translate3d($open, 0, 0);
|
37 | will-change: transform;
|
38 | }
|
39 | &.md-sidenav-opened {
|
40 | @include md-elevation(1);
|
41 | transform: translate3d($open, 0, 0);
|
42 | }
|
43 | }
|
44 |
|
45 | md-sidenav-layout {
|
46 |
|
47 |
|
48 |
|
49 |
|
50 | @include md-stacking-context();
|
51 |
|
52 | box-sizing: border-box;
|
53 | -webkit-overflow-scrolling: touch;
|
54 |
|
55 |
|
56 | display: block;
|
57 |
|
58 |
|
59 | overflow: hidden;
|
60 |
|
61 |
|
62 | &[fullscreen] {
|
63 | @include md-fullscreen();
|
64 |
|
65 | &.md-sidenav-opened {
|
66 | overflow: hidden;
|
67 | }
|
68 | }
|
69 | }
|
70 |
|
71 | .md-sidenav-backdrop {
|
72 | @include md-fullscreen();
|
73 |
|
74 | display: block;
|
75 |
|
76 |
|
77 |
|
78 | z-index: 2;
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 | visibility: hidden;
|
85 |
|
86 | &.md-sidenav-shown {
|
87 | visibility: visible;
|
88 | background-color: $md-sidenav-backdrop-color;
|
89 | }
|
90 | }
|
91 |
|
92 | .md-sidenav-content {
|
93 | @include md-stacking-context();
|
94 |
|
95 | display: block;
|
96 | height: 100%;
|
97 | overflow: auto;
|
98 | }
|
99 |
|
100 | md-sidenav {
|
101 | @include md-stacking-context();
|
102 |
|
103 | display: block;
|
104 | position: absolute;
|
105 | top: 0;
|
106 | bottom: 0;
|
107 | z-index: 3;
|
108 | min-width: 5%;
|
109 |
|
110 |
|
111 | overflow-y: auto;
|
112 |
|
113 | background-color: $md-sidenav-background-color;
|
114 |
|
115 | @include md-sidenav-transition(0, -100%);
|
116 |
|
117 | &.md-sidenav-push {
|
118 | background-color: $md-sidenav-push-background-color;
|
119 | }
|
120 |
|
121 | &.md-sidenav-side {
|
122 | z-index: 1;
|
123 | }
|
124 |
|
125 | &.md-sidenav-end {
|
126 | right: 0;
|
127 |
|
128 | @include md-sidenav-transition(0, 100%);
|
129 | }
|
130 |
|
131 | [dir='rtl'] & {
|
132 | @include md-sidenav-transition(0, 100%);
|
133 |
|
134 | &.md-sidenav-end {
|
135 | left: 0;
|
136 | right: auto;
|
137 |
|
138 | @include md-sidenav-transition(0, -100%);
|
139 | }
|
140 | }
|
141 | }
|