weekly release 3.6dev
[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
7bfebce0
ME
4$drawer-width: 285px !default;
5$drawer-padding-x: 20px !default;
6$drawer-padding-y: 20px !default;
7$drawer-offscreen-gutter: 20px !default;
99061152
DW
8
9:target {
947970fc
DM
10 padding-top: ($fixed-header-y + 30px) !important; /* stylelint-disable declaration-no-important */
11 margin-top: -$fixed-header-y !important; /* negative fixed header height */
99061152 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;
6ec7fb8d 33 height: calc(100% - #{$navbar-height});
ba5c5083 34 overflow-y: auto;
99061152
DW
35 -webkit-overflow-scrolling: touch;
36 z-index: $zindex-dropdown - 1;
3ec69c2e 37 background-color: darken($body-bg, 5%);
99061152 38 -webkit-transition: right 0.5s ease, left 0.5s ease;
947970fc
DM
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;
947970fc 44 left: 0;
99061152 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;
947970fc
DM
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;
99061152
DW
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}