Merge branch 'MDL-55074-master' of git://github.com/damyon/moodle
[moodle.git] / theme / boost / scss / moodle / drawer.scss
CommitLineData
99061152
DW
1/* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
2$fixed-header-y: $navbar-height;
3
4$drawer-width: 285px;
5$drawer-padding-x: 20px;
6$drawer-padding-y: 20px;
7$drawer-offscreen-gutter: 20px;
8
9:target {
10 padding-top: ($fixed-header-y + 30px) ! important; /* negative fixed header height */
11 margin-top: -$fixed-header-y ! important; /* negative fixed header height */
12}
ba5c5083
DW
13.pagelayout-embedded :target {
14 padding-top: initial;
15 margin-top: initial;
16}
99061152
DW
17
18#nav-drawer.closed {
0a58ec24 19 left: -($drawer-width + $drawer-offscreen-gutter);
99061152
DW
20}
21#page {
22 margin-top: $navbar-height;
23}
24
25/* Use a variable for the drawer background colors. */
26$drawer-bg: $gray-lighter !default;
27
28[data-region="drawer"] {
29 position: fixed;
30 padding: $drawer-padding-x $drawer-padding-y;
31 width: $drawer-width;
32 top: $fixed-header-y;
33 height: 100%;
ba5c5083 34 overflow-y: auto;
99061152
DW
35 -webkit-overflow-scrolling: touch;
36 z-index: $zindex-dropdown - 1;
37 background-color: $drawer-bg;
38 -webkit-transition: right 0.5s ease, left 0.5s ease;
39 -moz-transition: right 0.5s ease, left 0.5s ease;
40 transition: right 0.5s ease, left 0.5s ease;
99061152
DW
41}
42#nav-drawer {
43 right: auto;
44 left: 0px;
45}
99061152
DW
46#page {
47 margin-top: $fixed-header-y;
48}
ba5c5083
DW
49.pagelayout-embedded #page {
50 margin-top: 0;
51}
99061152
DW
52body.drawer-ease {
53 -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
54 -moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
55 transition: margin-left 0.5s ease, margin-right 0.5s ease;
56}
57
58body.drawer-open-left {
0a58ec24 59 @include media-breakpoint-up(md) {
99061152
DW
60 margin-left: $drawer-width;
61 }
62}
63body.drawer-open-right {
0a58ec24 64 @include media-breakpoint-up(md) {
99061152
DW
65 margin-right: $drawer-width;
66 }
67}