weekly back-to-dev release 3.8dev
[moodle.git] / theme / boost / scss / moodle / drawer.scss
... / ...
CommitLineData
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 !default;
5$drawer-padding-x: 20px !default;
6$drawer-padding-y: 20px !default;
7$drawer-offscreen-gutter: 20px !default;
8
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}
17
18.pagelayout-embedded :target {
19 padding-top: initial;
20 margin-top: initial;
21}
22
23#nav-drawer.closed {
24 left: -($drawer-width + $drawer-offscreen-gutter);
25}
26#page {
27 margin-top: $navbar-height;
28}
29
30/* Use a variable for the drawer background colors. */
31$drawer-bg: $gray-lighter !default;
32
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}
57body.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}
62
63body.drawer-open-left {
64 @include media-breakpoint-up(md) {
65 margin-left: $drawer-width;
66 }
67}
68body.drawer-open-right {
69 @include media-breakpoint-up(md) {
70 margin-right: $drawer-width;
71 }
72}