diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 98adcbe6e..3467c1ae0 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -721,6 +721,7 @@ Floated Menu / Item /* Active */ .ui.vertical.tabular.menu .active.item { background-color: @tabularMenuActiveBackground; + color: @tabularMenuActiveColor; border-color: @tabularBorderColor; margin: 0px -@tabularBorderWidth 0px 0px; border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius; @@ -862,41 +863,16 @@ Floated Menu / Item border-radius: 0em; } -/* Inverted */ -.ui.secondary.inverted.menu { +/* Sub Menu */ +.ui.vertical.secondary.menu .item > .menu .item { background-color: transparent; } -.ui.secondary.inverted.pointing.menu { - border-width: @secondaryPointingBorderWidth; - border-color: @secondaryPointingBorderColor; -} -.ui.secondary.inverted.pointing.menu > .item { - color: rgba(255, 255, 255, 0.7); -} -.ui.secondary.inverted.pointing.menu > .header.item { - color: #FFFFFF !important; -} -/* Hover */ -.ui.secondary.inverted.pointing.menu > .menu > .item:hover, -.ui.secondary.inverted.pointing.menu > .item:hover { - color: rgba(255, 255, 255, 0.85); -} - -/* Pressed */ -.ui.secondary.inverted.pointing.menu > .menu > .item:active, -.ui.secondary.inverted.pointing.menu > .item:active { - border-color: rgba(255, 255, 255, 0.4); -} - -/* Active */ -.ui.secondary.inverted.pointing.menu > .menu > .item.active, -.ui.secondary.inverted.pointing.menu > .item.active { - border-color: rgba(255, 255, 255, 0.8); - color: rgba(255, 255, 255, 1); +/* Inverted */ +.ui.secondary.inverted.menu { + background-color: transparent; } - /*--------------------- Secondary Pointing -----------------------*/ @@ -910,6 +886,7 @@ Floated Menu / Item border-bottom-color: transparent; border-bottom-style: solid; border-radius: 0em; + align-self: flex-end; margin: @secondaryPointingItemMargin; padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding; @@ -992,9 +969,29 @@ Floated Menu / Item .ui.secondary.inverted.pointing.menu { border-color: @secondaryPointingInvertedBorderColor; } + +.ui.secondary.inverted.pointing.menu { + border-width: @secondaryPointingBorderWidth; + border-color: @secondaryPointingBorderColor; +} +.ui.secondary.inverted.pointing.menu > .item { + color: @secondaryPointingInvertedItemTextColor; +} +.ui.secondary.inverted.pointing.menu > .header.item { + color: @secondaryPointingInvertedItemHeaderColor !important; +} + +/* Hover */ +.ui.secondary.inverted.pointing.menu > .menu > .item:hover, +.ui.secondary.inverted.pointing.menu > .item:hover { + color: @secondaryPointingInvertedItemHoverTextColor; +} + +/* Active */ .ui.secondary.inverted.pointing.menu > .menu > .item.active, .ui.secondary.inverted.pointing.menu > .item.active { - border-color: @secondaryPointinInvertedActiveColor; + border-color: @secondaryPointingInvertedActiveBorderColor; + color: @secondaryPointingInvertedActiveColor; } /*-------------- diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 729729f7f..09ff5644f 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -117,7 +117,7 @@ @labelTextMargin: 1em; @labelVerticalPadding: 0.3em; -@labelHorizontalPadding: 0.8em; +@labelHorizontalPadding: @relativeMini; @labelAndIconFloat: none; @labelAndIconMargin: 0em 0.5em 0em 0em; @@ -255,12 +255,10 @@ /* Pointing */ @secondaryPointingBorderWidth: 2px; @secondaryPointingBorderColor: @borderColor; -@secondaryPointingInvertedBorderColor: @whiteBorderColor; -@secondaryPointinInvertedActiveColor: @white; - @secondaryPointingItemMargin: 0em 0em -@secondaryPointingBorderWidth; @secondaryPointingItemVerticalPadding: @relativeTiny; @secondaryPointingItemHorizontalPadding: @relativeMedium; + @secondaryPointingHoverTextColor: @textColor; @secondaryPointingActiveBorderColor: @black; @@ -270,11 +268,17 @@ @secondaryPointingActiveHoverBorderColor: @secondaryPointingActiveBorderColor; @secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor; - @secondaryPointingHeaderColor: @darkTextColor; @secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em; +@secondaryPointingInvertedBorderColor: @whiteBorderColor; +@secondaryPointingInvertedItemTextColor: @invertedTextColor; +@secondaryPointingInvertedItemHeaderColor: @white; +@secondaryPointingInvertedItemHoverTextColor: @selectedTextColor; +@secondaryPointingInvertedActiveBorderColor: @white; +@secondaryPointingInvertedActiveColor: @invertedSelectedTextColor; + /* Tiered */ @tieredActiveItemBackground: #FCFCFC; @@ -312,7 +316,9 @@ @tabularActiveColor: @selectedTextColor; @tabularActiveBoxShadow: none; -@tabularMenuActiveBackground: #FFFFFF; +@tabularMenuActiveBackground: @white; +@tabularMenuActiveColor: @selectedTextColor; + @tabularActiveWeight: bold; @tabularBorderRadius: 5px;