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;
   3
   4 $drawer-width: 285px !default;
   5 $drawer-padding-x: 20px !default;
   6 $drawer-padding-y: 20px !default;
   7 $drawer-offscreen-gutter: 20px !default;
   8
   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 }
  17
  18 .pagelayout-embedded :target {
  19     padding-top: initial;
  20     margin-top: initial;
  21 }
  22
  23 #nav-drawer.closed {
  24     left: -($drawer-width + $drawer-offscreen-gutter);
  25 }
  26
  27 #nav-drawer[aria-hidden=true] .list-group-item {
  28     display: none;
  29 }
  30
  31 /* Use a variable for the drawer background colors. */
  32 $drawer-bg: darken($body-bg, 5%) !default;
  33
  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 }
  47
  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;
  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     }
  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     }
  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 }
  95
  96 body.drawer-open-left {
  97     @include media-breakpoint-up(md) {
  98         margin-left: $drawer-width;
  99     }
 100 }
 101 body.drawer-open-right {
 102     @include media-breakpoint-up(md) {
 103         margin-right: $drawer-width;
 104     }
 105 }
 106
 107 $right-drawer-width: 320px;
 108
 109 [data-region=right-hand-drawer] {
 110     display: flex;
 111     flex-direction: column;
 112     @include transition(right .2s ease-in-out);
 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;
 123         visibility: visible;
 124         opacity: 1;
 125     }
 126
 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     }
 137 }
 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         }
 146     }
 147     body.drawer-open-left,
 148     body.drawer-open-right {
 149         overflow: hidden;
 150     }
 151 }
 152
 153 .dir-rtl {
 154     [data-region=right-hand-drawer] {
 155         box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
 156     }
 157 }