ui/semantic/galette/collections/menu.overrides

   1 /*******************************
   2          Galette Overrides
   3 *******************************/
   4
   5 /*--------------
   6      Header
   7 ---------------*/
   8
   9 .ui.menu .header.item,
  10 .ui.vertical.menu .header.item {
  11   font-weight: @headerWeight;
  12   text-align: left;
  13 }
  14
  15 & when (@variationMenuFixed) {
  16   /*--------------
  17        Fixed
  18   ---------------*/
  19   .ui.fixed.menu .item {
  20     background: rgba(255,255,255,.6);
  21   }
  22   .ui.fixed.menu .item.active {
  23     background: @activeItemBackground;
  24   }
  25 }
  26
  27 & when (@variationMenuVertical) {
  28   /*--------------
  29       Vertical
  30   ---------------*/
  31
  32   .ui.vertical.menu {
  33     display: block;
  34     flex-direction: column;
  35     background: @verticalBackground;
  36     box-shadow: @verticalBoxShadow;
  37   }
  38   .ui.vertical.menu {
  39     border: @border;
  40   }
  41   .ui.vertical.menu div.item .ui.button {
  42     width: 100%;
  43     border: @border;
  44     margin: 0 0 .4rem 0;
  45     box-shadow: none;
  46   }
  47   .ui.vertical.menu div.item .item.button::before {
  48     content: none;
  49   }
  50   .ui.vertical.accordion.menu {
  51     a.active.item,
  52     a.item:hover {
  53       & > .title {
  54         color: @hoveredTextColor;
  55       }
  56     }
  57   }
  58 }
  59
  60 /* --------------
  61       Hover
  62 --------------- */
  63
  64 .ui.link.menu .item:hover,
  65 .ui.menu .dropdown.item:hover,
  66 .ui.menu .link.item:hover,
  67 .ui.menu a.item:hover {
  68     color: @hoveredTextColor;
  69 }
  70
  71 /* -----------------------------------------------
  72       Wrapping pointing inverted tabbed menus
  73 ------------------------------------------------ */
  74 .ui.wrapping.menu.tabbed .item:last-child,
  75 .ui.wrapping.menu.tabbed .item:last-of-type {
  76   border-right-color: transparent !important;
  77 }
  78 .ui.wrapping.menu.tabbed .item::before {
  79   right: 0;
  80   left: auto;
  81 }
  82
  83 /*------------------
  84      Pagination
  85 -------------------*/
  86 @media only screen and (max-width: 991px) {
  87   .ui.menu.pagination {
  88     width: 100%;
  89   }
  90 }
  91
  92 /*----------------------------------
  93      Compact mode logout menu
  94 -----------------------------------*/
  95 .compact_menu #logoutmenu {
  96   & > a.item {
  97     &.darkmode {
  98       background-color: @darkmodeItemBackground;
  99       &:hover,
 100       &:focus {
 101         background-color: @darkmodeHover;
 102       }
 103       &:active {
 104         background-color: @darkmodeActive;
 105       }
 106       &.black {
 107         background-color: @darkmodeItemBackgroundInverted;
 108         color: @invertedTextColor;
 109         &:hover,
 110         &:focus {
 111           background-color: @blackHover;
 112         }
 113         &:active {
 114           background-color: @blackDown;
 115         }
 116       }
 117     }
 118     &.purple {
 119       background-color: @logoutItemBackgroundImpersonated;
 120       color: @invertedTextColor;
 121       &:hover,
 122       &:focus {
 123         background-color: @purpleHover;
 124       }
 125       &:active {
 126         background-color: @purpleDown;
 127       }
 128     }
 129     &.red {
 130       background-color: @logoutItemBackground;
 131       color: @invertedTextColor;
 132       &:hover,
 133       &:focus {
 134         background-color: @redHover;
 135       }
 136       &:active {
 137         background-color: @redDown;
 138       }
 139     }
 140   }
 141 }