weekly back-to-dev release 3.8dev
[moodle.git] / theme / boost / scss / moodle / drawer.scss
1 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
2 $fixed-header-y: $navbar-height;
4 $drawer-width: 285px !default;
5 $drawer-padding-x: 20px !default;
6 $drawer-padding-y: 20px !default;
7 $drawer-offscreen-gutter: 20px !default;
9 :target::before {
10     content: " ";
11     display: block;
12     height: ($fixed-header-y + 10px); /* fixed header height*/
13     margin-top: -($fixed-header-y + 10px); /* negative fixed header height */
14     width: 1px;
15     pointer-events: none;
16 }
18 .pagelayout-embedded :target {
19     padding-top: initial;
20     margin-top: initial;
21 }
23 #nav-drawer.closed {
24     left: -($drawer-width + $drawer-offscreen-gutter);
25 }
26 #page {
27     margin-top: $navbar-height;
28 }
30 /* Use a variable for the drawer background colors. */
31 $drawer-bg: $gray-lighter !default;
33 [data-region="drawer"] {
34     position: fixed;
35     padding: $drawer-padding-x $drawer-padding-y;
36     width: $drawer-width;
37     top: $fixed-header-y;
38     height: calc(100% - #{$navbar-height});
39     overflow-y: auto;
40     -webkit-overflow-scrolling: touch;
41     z-index: $zindex-dropdown - 1;
42     background-color: darken($body-bg, 5%);
43     -webkit-transition: right 0.5s ease, left 0.5s ease;
44     -moz-transition: right 0.5s ease, left 0.5s ease;
45     transition: right 0.5s ease, left 0.5s ease;
46 }
47 #nav-drawer {
48     right: auto;
49     left: 0;
50 }
51 #page {
52     margin-top: $fixed-header-y;
53 }
54 .pagelayout-embedded #page {
55     margin-top: 0;
56 }
57 body.drawer-ease {
58     -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
59     -moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
60     transition: margin-left 0.5s ease, margin-right 0.5s ease;
61 }
63 body.drawer-open-left {
64     @include media-breakpoint-up(md) {
65         margin-left: $drawer-width;
66     }
67 }
68 body.drawer-open-right {
69     @include media-breakpoint-up(md) {
70         margin-right: $drawer-width;
71     }
72 }