Browse Source

Adjust default menu styles

pull/2092/head
jlukic 9 years ago
parent
commit
75973bbdfd
2 changed files with 37 additions and 39 deletions
  1. 17
      src/definitions/collections/menu.less
  2. 59
      src/themes/default/collections/menu.variables

17
src/definitions/collections/menu.less

@ -222,10 +222,6 @@
---------------*/ ---------------*/
.ui.menu .ui.active.dropdown.item {
font-weight: normal;
}
/* Dropdown Icon */ /* Dropdown Icon */
.ui.menu .item > i.dropdown.icon { .ui.menu .item > i.dropdown.icon {
padding: 0em; padding: 0em;
@ -389,31 +385,32 @@
color: @pressedItemColor; color: @pressedItemColor;
} }
/*-------------- /*--------------
Active Active
---------------*/ ---------------*/
.ui.menu .active.item:not(.dropdown) {
.ui.menu .active.item {
background: @activeItemBackground; background: @activeItemBackground;
color: @activeItemTextColor; color: @activeItemTextColor;
font-weight: @activeItemFontWeight; font-weight: @activeItemFontWeight;
box-shadow: @activeItemBoxShadow; box-shadow: @activeItemBoxShadow;
} }
.ui.menu .active.item:not(.dropdown) > i.icon {
.ui.menu .active.item > i.icon {
opacity: @activeIconOpacity; opacity: @activeIconOpacity;
} }
/*-------------- /*--------------
Active Hover 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; background-color: @activeHoverItemBackground;
color: @activeHoverItemColor; color: @activeHoverItemColor;
} }
/*-------------- /*--------------
Disabled Disabled
---------------*/ ---------------*/
@ -421,8 +418,8 @@
.ui.menu .item.disabled, .ui.menu .item.disabled,
.ui.menu .item.disabled:hover { .ui.menu .item.disabled:hover {
cursor: default; cursor: default;
color: @disabledTextColor;
background-color: transparent !important; background-color: transparent !important;
color: @disabledTextColor;
} }

59
src/themes/default/collections/menu.variables

@ -83,6 +83,21 @@
@verticalHeaderFontSize: @relativeMedium; @verticalHeaderFontSize: @relativeMedium;
@verticalHeaderFontWeight: bold; @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 Couplings
---------------*/ ---------------*/
@ -144,44 +159,29 @@
@pointingDropdownMenuDistance: 0.75em; @pointingDropdownMenuDistance: 0.75em;
@invertedSelectionDropdownColor: @invertedTextColor; @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 States
---------------*/ ---------------*/
/* Hovered Item */ /* Hovered Item */
@hoverItemBackground: @subtleTransparentBlack;
@hoverItemTextColor: @textColor;
@hoverItemBackground: transparent;
@hoverItemTextColor: @selectedTextColor;
/* Pressed Item */ /* Pressed Item */
@pressedItemBackground: @subtleTransparentBlack;
@pressedItemBackground: transparent;
@pressedItemColor: @pressedTextColor; @pressedItemColor: @pressedTextColor;
/* Active Item */ /* Active Item */
@activeItemBackground: @subtleTransparentBlack;
@activeItemBackground: @transparentBlack;
@activeItemTextColor: @selectedTextColor; @activeItemTextColor: @selectedTextColor;
@activeItemFontWeight: normal; @activeItemFontWeight: normal;
@activeIconOpacity: 1; @activeIconOpacity: 1;
@activeItemBoxShadow: none; @activeItemBoxShadow: none;
/* Active Hovered Item */ /* Active Hovered Item */
@activeHoverItemBackground: @hoverItemBackground;
@activeHoverItemColor: @hoverItemTextColor;
@activeHoverItemBackground: @transparentBlack;
@activeHoverItemColor: @selectedTextColor;
/* Active Dropdown */ /* Active Dropdown */
@dropdownActiveItemBackground: @transparentBlack; @dropdownActiveItemBackground: @transparentBlack;
@ -367,22 +367,23 @@
@invertedSubMenuColor: @invertedUnselectedTextColor; @invertedSubMenuColor: @invertedUnselectedTextColor;
/* Inverted Hover */ /* Inverted Hover */
@invertedHoverBackground: rgba(255, 255, 255, 0.1);
@invertedHoverColor: @white;
@invertedHoverBackground: transparent;
@invertedHoverColor: @invertedSelectedTextColor;
@invertedSubMenuHoverBackground: transparent; @invertedSubMenuHoverBackground: transparent;
@invertedSubMenuHoverColor: @white;
@invertedSubMenuHoverColor: @invertedSelectedTextColor;
/* Pressed */ /* Pressed */
@invertedMenuPressedBackground: rgba(255, 255, 255, 0.05);
@invertedMenuPressedColor: @white;
@invertedMenuPressedBackground: @transparentBlack;
@invertedMenuPressedColor: @invertedSelectedTextColor;
/* Inverted Active */ /* Inverted Active */
@invertedActiveBackground: rgba(255, 255, 255, 0.15);
@invertedActiveColor: @white;
@invertedActiveBackground: @strongTransparentWhite;
@invertedActiveColor: @invertedSelectedTextColor;
@invertedArrowActiveColor: #3C3C3C; @invertedArrowActiveColor: #3C3C3C;
/* Inverted Active Hover */ /* Inverted Active Hover */
@invertedActiveHoverBackground: rgba(255, 255, 255, 0.15);
@invertedActiveHoverBackground: @invertedActiveBackground;
@invertedActiveHoverColor: @white; @invertedActiveHoverColor: @white;
@invertedArrowActiveHoverColor: #3C3C3C; @invertedArrowActiveHoverColor: #3C3C3C;

Loading…
Cancel
Save