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:not(.pointing) {
  33     display: block;
  34     flex-direction: column;
  35     background: @verticalBackground;
  36     box-shadow: @verticalBoxShadow;
  37   }
  38   .ui.vertical.menu:not(.pointing) {
  39     border: @border;
  40   }
  41   .ui.vertical.menu:not(.pointing) 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:not(.pointing) 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   .ui.vertical.inverted.pointing.menu {
  59     .item:not(.active, :hover) {
  60       .small.disabled.text {
  61         color: @midWhite;
  62       }
  63     }
  64   }
  65 }
  66
  67 /* --------------
  68       Hover
  69 --------------- */
  70
  71 .ui.link.menu .item:hover,
  72 .ui.menu .dropdown.item:hover,
  73 .ui.menu .link.item:hover,
  74 .ui.menu a.item:hover {
  75     color: @hoveredTextColor;
  76 }
  77
  78 /* -------------------------------------------------------------------
  79       Sortable pointing inverted menu on Core fields Configuration
  80 -------------------------------------------------------------------- */
  81
  82 #sortable_categories.ui.pointing.inverted.menu {
  83   .item.sortable-chosen,
  84   .item.moved {
  85     background-color: @invertedActiveBackground;
  86     color: @red !important;
  87   }
  88   .item.active.moved {
  89     background-color: @yellow;
  90   }
  91 }
  92
  93 /* -----------------------------------------------
  94       Wrapping pointing inverted tabbed menus
  95 ------------------------------------------------ */
  96 .ui.wrapping.menu.tabbed .item:last-child,
  97 .ui.wrapping.menu.tabbed .item:last-of-type {
  98   border-right-color: transparent !important;
  99 }
 100 .ui.wrapping.menu.tabbed .item::before {
 101   right: 0;
 102   left: auto;
 103 }
 104
 105 /*------------------
 106      Pagination
 107 -------------------*/
 108 @media only screen and (max-width: 991px) {
 109   .ui.menu.pagination {
 110     width: 100%;
 111   }
 112 }
 113
 114 /*----------------------------------
 115      Compact mode logout menu
 116 -----------------------------------*/
 117 .compact_menu #logoutmenu {
 118   & > a.item {
 119     &.darkmode {
 120       background-color: @darkmodeItemBackground;
 121       &:hover,
 122       &:focus {
 123         background-color: @darkmodeHover;
 124       }
 125       &:active {
 126         background-color: @darkmodeActive;
 127       }
 128       &.black {
 129         background-color: @darkmodeItemBackgroundInverted;
 130         color: @invertedTextColor;
 131         &:hover,
 132         &:focus {
 133           background-color: @blackHover;
 134         }
 135         &:active {
 136           background-color: @blackDown;
 137         }
 138       }
 139     }
 140     &.purple {
 141       background-color: @logoutItemBackgroundImpersonated;
 142       color: @invertedTextColor;
 143       &:hover,
 144       &:focus {
 145         background-color: @purpleHover;
 146       }
 147       &:active {
 148         background-color: @purpleDown;
 149       }
 150     }
 151     &.red {
 152       background-color: @logoutItemBackground;
 153       color: @invertedTextColor;
 154       &:hover,
 155       &:focus {
 156         background-color: @redHover;
 157       }
 158       &:active {
 159         background-color: @redDown;
 160       }
 161     }
 162   }
 163 }