c261e05eb355d38362e9e83dd6b894fc8dea01df
[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 /* Use a variable for the drawer background colors. */
28 $drawer-bg: darken($body-bg, 5%) !default;
30 [data-region="drawer"] {
31     position: fixed;
32     padding: $drawer-padding-x $drawer-padding-y;
33     width: $drawer-width;
34     top: $fixed-header-y;
35     height: calc(100% - #{$navbar-height});
36     overflow-y: auto;
37     -webkit-overflow-scrolling: touch;
38     z-index: $zindex-dropdown - 1;
39     background-color: $drawer-bg;
40     -webkit-transition: right 0.5s ease, left 0.5s ease;
41     -moz-transition: right 0.5s ease, left 0.5s ease;
42     transition: right 0.5s ease, left 0.5s ease;
43 }
44 #nav-drawer {
45     right: auto;
46     left: 0;
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     }
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     }
74 }
75 #page {
76     margin-top: $fixed-header-y;
77 }
78 .pagelayout-embedded #page {
79     margin-top: 0;
80 }
81 body.drawer-ease {
82     -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
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;
85 }
87 body.drawer-open-left {
88     @include media-breakpoint-up(md) {
89         margin-left: $drawer-width;
90     }
91 }
92 body.drawer-open-right {
93     @include media-breakpoint-up(md) {
94         margin-right: $drawer-width;
95     }
96 }
98 $right-drawer-width: 320px;
100 [data-region=right-hand-drawer] {
101     display: flex;
102     flex-direction: column;
103     @include transition(right .2s ease-in-out);
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;
114         visibility: visible;
115         opacity: 1;
116     }
118     &.hidden {
119         display: block;
120         right: $right-drawer-width * -1;
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);
127     }
129 .dir-rtl {
130     [data-region=right-hand-drawer] {
131         box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
132     }