MDL-55074 theme_boost: Navigation and blocks
[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}
13
14#nav-drawer.closed {
15 left: - ($drawer-width + $drawer-offscreen-gutter);
16}
17#blocks-drawer.closed {
18 right: - ($drawer-width + $drawer-offscreen-gutter);
19}
20#page {
21 margin-top: $navbar-height;
22}
23
24/* Use a variable for the drawer background colors. */
25$drawer-bg: $gray-lighter !default;
26
27[data-region="drawer"] {
28 position: fixed;
29 padding: $drawer-padding-x $drawer-padding-y;
30 width: $drawer-width;
31 top: $fixed-header-y;
32 height: 100%;
33 overflow-y: scroll;
34 -webkit-overflow-scrolling: touch;
35 z-index: $zindex-dropdown - 1;
36 background-color: $drawer-bg;
37 -webkit-transition: right 0.5s ease, left 0.5s ease;
38 -moz-transition: right 0.5s ease, left 0.5s ease;
39 transition: right 0.5s ease, left 0.5s ease;
40 .dropdown-menu {
41 max-width: $drawer-width - $drawer-padding-x * 4;
42 }
43 .dropdown-item {
44 max-width: 100%;
45 overflow-x: hidden;
46 text-overflow: ellipsis;
47 }
48}
49#nav-drawer {
50 right: auto;
51 left: 0px;
52}
53#blocks-drawer {
54 left: auto;
55 right: 0px;
56}
57#page {
58 margin-top: $fixed-header-y;
59}
60body.drawer-ease {
61 -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
62 -moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
63 transition: margin-left 0.5s ease, margin-right 0.5s ease;
64}
65
66body.drawer-open-left {
67 @include media-breakpoint-up(lg) {
68 margin-left: $drawer-width;
69 }
70}
71body.drawer-open-right {
72 @include media-breakpoint-up(lg) {
73 margin-right: $drawer-width;
74 }
75}