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      Pagination
  73 -------------------*/
  74 @media only screen and (max-width: 991px) {
  75   .ui.menu.pagination {
  76     width: 100%;
  77   }
  78 }
  79
  80 /*----------------------------------
  81      Compact mode logout menu
  82 -----------------------------------*/
  83 .compact_menu #logoutmenu {
  84   & > a.item {
  85     &.darkmode {
  86       background-color: @darkmodeItemBackground;
  87       &:hover,
  88       &:focus {
  89         background-color: @darkmodeHover;
  90       }
  91       &:active {
  92         background-color: @darkmodeActive;
  93       }
  94       &.black {
  95         background-color: @darkmodeItemBackgroundInverted;
  96         color: @invertedTextColor;
  97         &:hover,
  98         &:focus {
  99           background-color: @blackHover;
 100         }
 101         &:active {
 102           background-color: @blackDown;
 103         }
 104       }
 105     }
 106     &.purple {
 107       background-color: @logoutItemBackgroundImpersonated;
 108       color: @invertedTextColor;
 109       &:hover,
 110       &:focus {
 111         background-color: @purpleHover;
 112       }
 113       &:active {
 114         background-color: @purpleDown;
 115       }
 116     }
 117     &.red {
 118       background-color: @logoutItemBackground;
 119       color: @invertedTextColor;
 120       &:hover,
 121       &:focus {
 122         background-color: @redHover;
 123       }
 124       &:active {
 125         background-color: @redDown;
 126       }
 127     }
 128   }
 129 }