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