theme/boost/scss/moodle/moremenu.scss

   1 .moremenu {
   2     opacity: 0;
   3     height: $moremenu-height;
   4     &.observed {
   5         opacity: 1;
   6     }
   7     .nav-link {
   8         height: $moremenu-height;
   9         display: flex;
  10         align-items: center;
  11         border-right: none;
  12         border-bottom: solid 3px transparent;
  13         border-left: none;
  14         border-top: none;
  15         @include hover-focus() {
  16             @include hover-navbar();
  17         }
  18
  19         &.active {
  20             font-weight: bold;
  21             border-bottom: solid 3px $primary;
  22         }
  23         &[data-toggle="tab"] {
  24             display: inline-flex;
  25             flex-direction: column;
  26             align-items: center;
  27             justify-content: center;
  28
  29             &::after {
  30                 content: attr(data-text) / "";
  31                 height: 0;
  32                 visibility: hidden;
  33                 overflow: hidden;
  34                 user-select: none;
  35                 pointer-events: none;
  36                 font-weight: bold;
  37
  38                 @media speech {
  39                     display: none;
  40                 }
  41             }
  42         }
  43     }
  44     .nav-tabs {
  45         margin-left: 0;
  46         background-color: $body-bg;
  47     }
  48     .show > .nav-link,
  49     .active > .nav-link,
  50     .nav-link.show,
  51     .nav-link.active {
  52         background: transparent;
  53     }
  54
  55     // Styling for dropdown menus inside the MoreButton.
  56     .dropdownmoremenu > .dropdown-menu {
  57         & > .dropdown-item {
  58             padding: 0;
  59         }
  60         .dropdown-menu {
  61             position: static;
  62             padding: 0;
  63             border: 0;
  64             &.show {
  65                 display: block;
  66             }
  67             .dropdown-item {
  68                 background-color: $gray-100;
  69                 @include hover-focus() {
  70                     color: $dropdown-link-hover-color;
  71                     @include gradient-bg($dropdown-link-active-bg);
  72                 }
  73             }
  74             .dropdown-divider {
  75                 display: none;
  76             }
  77         }
  78     }
  79 }