From 75973bbdfd717d87a1bd55d12f216c13f8bcc4d7 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 6 Apr 2015 00:44:00 -0400 Subject: [PATCH] Adjust default menu styles --- src/definitions/collections/menu.less | 17 +++--- src/themes/default/collections/menu.variables | 59 ++++++++++--------- 2 files changed, 37 insertions(+), 39 deletions(-) diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index c8595c78c..03326e12a 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -222,10 +222,6 @@ ---------------*/ -.ui.menu .ui.active.dropdown.item { - font-weight: normal; -} - /* Dropdown Icon */ .ui.menu .item > i.dropdown.icon { padding: 0em; @@ -389,31 +385,32 @@ color: @pressedItemColor; } + /*-------------- Active ---------------*/ -.ui.menu .active.item:not(.dropdown) { +.ui.menu .active.item { background: @activeItemBackground; color: @activeItemTextColor; font-weight: @activeItemFontWeight; box-shadow: @activeItemBoxShadow; } -.ui.menu .active.item:not(.dropdown) > i.icon { +.ui.menu .active.item > i.icon { opacity: @activeIconOpacity; } - /*-------------- Active Hover ---------------*/ -.ui.vertical.menu .active.item:hover, -.ui.menu .active.item:hover { +.ui.menu .active.item:hover, +.ui.vertical.menu .active.item:hover { background-color: @activeHoverItemBackground; color: @activeHoverItemColor; } + /*-------------- Disabled ---------------*/ @@ -421,8 +418,8 @@ .ui.menu .item.disabled, .ui.menu .item.disabled:hover { cursor: default; - color: @disabledTextColor; background-color: transparent !important; + color: @disabledTextColor; } diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 5159eb456..86f074e2a 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -83,6 +83,21 @@ @verticalHeaderFontSize: @relativeMedium; @verticalHeaderFontWeight: bold; +/* Pointing Arrow */ +@arrowSize: 0.6em; +@arrowBorderSize: 1px; +@arrowBorder: @arrowBorderSize solid @solidBorderColor; +@arrowTransition: background @transitionDuration @transitionEasing; +@arrowZIndex: 11; + +@arrowHoverColor: #FAFAFA; +@arrowActiveColor: #F7F7F7; +@arrowActiveHoverColor: @arrowHoverColor; + +@arrowVerticalHoverColor: @arrowHoverColor; +@arrowVerticalActiveColor: @arrowActiveColor; +@arrowVerticalSubMenuColor: @white; + /*-------------- Couplings ---------------*/ @@ -144,44 +159,29 @@ @pointingDropdownMenuDistance: 0.75em; @invertedSelectionDropdownColor: @invertedTextColor; -/* Pointing Arrow */ -@arrowSize: 0.6em; -@arrowBorderSize: 1px; -@arrowBorder: @arrowBorderSize solid @solidBorderColor; -@arrowTransition: background @transitionDuration @transitionEasing; -@arrowZIndex: 11; - -@arrowHoverColor: #FAFAFA; -@arrowActiveColor: #F7F7F7; -@arrowActiveHoverColor: @arrowHoverColor; - -@arrowVerticalHoverColor: @arrowHoverColor; -@arrowVerticalActiveColor: @arrowActiveColor; -@arrowVerticalSubMenuColor: @white; - /*-------------- States ---------------*/ /* Hovered Item */ -@hoverItemBackground: @subtleTransparentBlack; -@hoverItemTextColor: @textColor; +@hoverItemBackground: transparent; +@hoverItemTextColor: @selectedTextColor; /* Pressed Item */ -@pressedItemBackground: @subtleTransparentBlack; +@pressedItemBackground: transparent; @pressedItemColor: @pressedTextColor; /* Active Item */ -@activeItemBackground: @subtleTransparentBlack; +@activeItemBackground: @transparentBlack; @activeItemTextColor: @selectedTextColor; @activeItemFontWeight: normal; @activeIconOpacity: 1; @activeItemBoxShadow: none; /* Active Hovered Item */ -@activeHoverItemBackground: @hoverItemBackground; -@activeHoverItemColor: @hoverItemTextColor; +@activeHoverItemBackground: @transparentBlack; +@activeHoverItemColor: @selectedTextColor; /* Active Dropdown */ @dropdownActiveItemBackground: @transparentBlack; @@ -367,22 +367,23 @@ @invertedSubMenuColor: @invertedUnselectedTextColor; /* Inverted Hover */ -@invertedHoverBackground: rgba(255, 255, 255, 0.1); -@invertedHoverColor: @white; +@invertedHoverBackground: transparent; +@invertedHoverColor: @invertedSelectedTextColor; + @invertedSubMenuHoverBackground: transparent; -@invertedSubMenuHoverColor: @white; +@invertedSubMenuHoverColor: @invertedSelectedTextColor; /* Pressed */ -@invertedMenuPressedBackground: rgba(255, 255, 255, 0.05); -@invertedMenuPressedColor: @white; +@invertedMenuPressedBackground: @transparentBlack; +@invertedMenuPressedColor: @invertedSelectedTextColor; /* Inverted Active */ -@invertedActiveBackground: rgba(255, 255, 255, 0.15); -@invertedActiveColor: @white; +@invertedActiveBackground: @strongTransparentWhite; +@invertedActiveColor: @invertedSelectedTextColor; @invertedArrowActiveColor: #3C3C3C; /* Inverted Active Hover */ -@invertedActiveHoverBackground: rgba(255, 255, 255, 0.15); +@invertedActiveHoverBackground: @invertedActiveBackground; @invertedActiveHoverColor: @white; @invertedArrowActiveHoverColor: #3C3C3C;