MDL-67472 theme_boost: configurable sass variable for drawer bgcolour
[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 8
0e202eca
BB
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 */
600de03e
TM
14 width: 1px;
15 pointer-events: none;
99061152 16}
0e202eca 17
ba5c5083
DW
18.pagelayout-embedded :target {
19 padding-top: initial;
20 margin-top: initial;
21}
99061152
DW
22
23#nav-drawer.closed {
0a58ec24 24 left: -($drawer-width + $drawer-offscreen-gutter);
99061152 25}
99061152
DW
26
27/* Use a variable for the drawer background colors. */
e097ddcd 28$drawer-bg: darken($body-bg, 5%) !default;
99061152
DW
29
30[data-region="drawer"] {
31 position: fixed;
32 padding: $drawer-padding-x $drawer-padding-y;
33 width: $drawer-width;
34 top: $fixed-header-y;
6ec7fb8d 35 height: calc(100% - #{$navbar-height});
ba5c5083 36 overflow-y: auto;
99061152
DW
37 -webkit-overflow-scrolling: touch;
38 z-index: $zindex-dropdown - 1;
e097ddcd 39 background-color: $drawer-bg;
99061152 40 -webkit-transition: right 0.5s ease, left 0.5s ease;
947970fc
DM
41 -moz-transition: right 0.5s ease, left 0.5s ease;
42 transition: right 0.5s ease, left 0.5s ease;
99061152
DW
43}
44#nav-drawer {
45 right: auto;
947970fc 46 left: 0;
ca0e331c
KO
47
48 /* Override the z-indexes defined in bootstrap/_list-group.scss that
49 lead to side effects on the user tours positioning. */
50 .list-group-item-action.active,
51 .list-group-item.active {
52 z-index: inherit;
53 }
54 .list-group-item-action.active + .list-group-item,
55 .list-group-item.active + .list-group-item {
56 border-top: none;
57 }
1ea3940c
AM
58
59 .list-group {
60 // Remove default list styling in nav menus.
61 ul {
62 list-style: none;
63 padding: 0;
64 margin: 0;
65 }
66 // Add margin to be consistent with `.list-group-item` spacing.
67 li {
68 margin-bottom: -1px;
69 }
70 li:last-child {
71 margin-bottom: 0;
72 }
73 }
99061152 74}
99061152
DW
75#page {
76 margin-top: $fixed-header-y;
77}
ba5c5083
DW
78.pagelayout-embedded #page {
79 margin-top: 0;
80}
99061152
DW
81body.drawer-ease {
82 -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
947970fc
DM
83 -moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
84 transition: margin-left 0.5s ease, margin-right 0.5s ease;
99061152
DW
85}
86
87body.drawer-open-left {
0a58ec24 88 @include media-breakpoint-up(md) {
99061152
DW
89 margin-left: $drawer-width;
90 }
91}
92body.drawer-open-right {
0a58ec24 93 @include media-breakpoint-up(md) {
99061152
DW
94 margin-right: $drawer-width;
95 }
96}
a2517225
JP
97
98$right-drawer-width: 320px;
99
100[data-region=right-hand-drawer] {
101 display: flex;
102 flex-direction: column;
b17bb71e 103 @include transition(right .2s ease-in-out);
a2517225
JP
104
105 &.drawer {
106 z-index: $zindex-sticky;
107 position: fixed;
108 top: $navbar-height;
109 right: 0;
110 height: calc(100% - #{$navbar-height});
111 width: $right-drawer-width;
112 box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
113 padding: 0;
b17bb71e
RW
114 visibility: visible;
115 opacity: 1;
a2517225
JP
116 }
117
118 &.hidden {
119 display: block;
120 right: $right-drawer-width * -1;
b17bb71e
RW
121 // Turn off visibility so that nothing in the drawer can receive focus when
122 // it is hidden.
123 visibility: hidden;
124 opacity: 0;
125 // Delay visibility changes until after the slide right animation has completed.
126 @include transition(right .2s ease-in-out, visibility 0s ease-in-out .2s, opacity 0s ease-in-out .2s);
a2517225
JP
127 }
128}
129.dir-rtl {
130 [data-region=right-hand-drawer] {
131 box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
132 }
133}