MDL-69878 core_message: always show message drawer close icon
[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 }
27 #nav-drawer[aria-hidden=true] .list-group-item {
28     display: none;
29 }
31 /* Use a variable for the drawer background colors. */
32 $drawer-bg: darken($body-bg, 5%) !default;
34 [data-region="drawer"] {
35     position: fixed;
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: $drawer-bg;
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 }
48 @include media-breakpoint-up(sm) {
49     [data-region="drawer"] {
50         padding: $drawer-padding-x $drawer-padding-y;
51     }
52 }
53 #nav-drawer {
54     right: auto;
55     left: 0;
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     }
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     }
83 }
84 #page {
85     margin-top: $fixed-header-y;
86 }
87 .pagelayout-embedded #page {
88     margin-top: 0;
89 }
90 body.drawer-ease {
91     -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
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;
94 }
96 body.drawer-open-left {
97     @include media-breakpoint-up(md) {
98         margin-left: $drawer-width;
99     }
101 body.drawer-open-right {
102     @include media-breakpoint-up(md) {
103         margin-right: $drawer-width;
104     }
107 $right-drawer-width: 320px;
109 [data-region=right-hand-drawer] {
110     display: flex;
111     flex-direction: column;
112     @include transition(right .2s ease-in-out);
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;
123         visibility: visible;
124         opacity: 1;
125     }
127     &.hidden {
128         display: block;
129         right: $right-drawer-width * -1;
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);
136     }
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         }
146     }
147     body.drawer-open-left,
148     body.drawer-open-right {
149         overflow: hidden;
150     }
153 .dir-rtl {
154     [data-region=right-hand-drawer] {
155         box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
156     }