Updates to menu flex

9 years ago · 9852706943
2 changed files with 75 additions and 73 deletions
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@ -228,9 +228,15 @@
 .ui.menu .item > .label {
  background: @labelBackground;
  color: @labelTextColor;
-  margin: @labelOffset 0em @labelOffset @labelTextMargin;
+  margin-left: @labelTextMargin;
+  padding: @labelVerticalPadding @labelHorizontalPadding;
+}
+.ui.vertical.menu .item > .label {
+  background: @labelBackground;
+  color: @labelTextColor;
+  margin-top: @labelOffset;
+  margin-bottom: @labelOffset;
  padding: @labelVerticalPadding @labelHorizontalPadding;
-  vertical-align: baseline;
 }
 .ui.menu .item > .label:before {
  background-color: @labelBackground;
@ -246,11 +252,12 @@
 .ui.menu .item > img:not(.ui) {
  display: inline-block;
  vertical-align: middle;
-  max-width: 100%;
+  margin: @imageMargin;
  width: @imageWidth;
 }
 .ui.vertical.menu .item > img:only-child {
  display: block;
+  max-width: 100%;
  width: @verticalImageWidth;
 }

@ -468,8 +475,10 @@ Floated Menu / Item
  border-left: none;
 }
 .ui.vertical.menu .item .menu .active.item {
-  background-color: @subMenuActiveBackground;
  box-shadow: none;
+  background-color: @subMenuActiveBackground;
+  font-weight: @subMenuActiveFontWeight;
+  color: @subMenuActiveColor;
 }


@ -770,9 +779,9 @@ Floated Menu / Item
 .ui.secondary.inverted.menu {
  background-color: transparent;
 }
-
 .ui.secondary.inverted.pointing.menu {
-  border-bottom: @secondaryPointingBorderWidth solid rgba(255, 255, 255, 0.1);
+  border-width: @secondaryPointingBorderWidth;
+  border-color: @secondaryPointingBorderColor;
 }
 .ui.secondary.inverted.pointing.menu > .item {
  color: rgba(255, 255, 255, 0.7);
@ -806,24 +815,23 @@ Floated Menu / Item
 -----------------------*/

 .ui.secondary.pointing.menu {
-  border-bottom: @secondaryPointingBorderWidth solid rgba(0, 0, 0, 0.1);
+  border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
 }

-.ui.secondary.pointing.menu > .menu > .item,
-.ui.secondary.pointing.menu > .item {
-  margin: 0em 0em -@secondaryPointingBorderWidth;
-  padding: @secondaryPointingVerticalPadding @secondaryPointingHorizontalPadding;
-  border-bottom: @secondaryPointingBorderWidth solid transparent;
+.ui.secondary.pointing.menu > .item,
+.ui.secondary.pointing.menu .menu > .item {
+  border-bottom-color: transparent;
+  border-bottom-style: solid;
  border-radius: 0em;
+
+  margin: @secondaryPointingItemMargin;
+  padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
+  border-bottom-width: @secondaryPointingBorderWidth;
  transition: @secondaryTransition;
 }

 /* Item Types */
 .ui.secondary.pointing.menu .header.item {
-  margin-bottom: -@secondaryPointingBorderWidth;
-  background-color: transparent !important;
-  border-right-width: 0px !important;
-  font-weight: bold !important;
  color: @secondaryPointingHeaderColor !important;
 }
 .ui.secondary.pointing.menu .text.item {
@ -856,48 +864,40 @@ Floated Menu / Item
 .ui.secondary.pointing.menu > .menu > .item.active,
 .ui.secondary.pointing.menu > .item.active {
  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: none;
+  border-color: @secondaryPointingActiveBorderColor;
+  font-weight: @secondaryPointingActiveFontWeight;
  color: @secondaryPointingActiveTextColor;
 }

-/* Secondary Vertical Pointing */
+/* Vertical Pointing */
 .ui.secondary.vertical.pointing.menu {
-  border: none;
-  border-right: @secondaryPointingBorderWidth solid rgba(0, 0, 0, 0.1);
+  border-bottom-width: 0px;
+  border-right-width: @secondaryPointingBorderWidth;
 }
 .ui.secondary.vertical.pointing.menu > .item {
-  margin: 0em -@secondaryPointingBorderWidth 0em 0em;
  border-bottom: none;
-  border-right: @secondaryPointingBorderWidth solid transparent;
+  border-right-style: solid;
+  border-right-color: transparent;
  border-radius: 0em;
+  margin: @secondaryVerticalPointingItemMargin;
+  border-right-width: @secondaryPointingBorderWidth;
 }

-/* Hover */
-.ui.secondary.vertical.pointing.menu > .item:hover {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
-}
-
-/* Pressed */
-.ui.secondary.vertical.pointing.menu > .item:active {
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.2);
-}
-
-/* Active */
+/* Vertical Active */
+.ui.secondary.vertical.pointing.menu > .menu > .item.active,
 .ui.secondary.vertical.pointing.menu > .item.active {
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.4);
-  color: rgba(0, 0, 0, 0.85);
+  border-color: @secondaryPointingActiveBorderColor;
 }

-/* Inverted Vertical Pointing Secondary */
-.ui.secondary.inverted.vertical.pointing.menu {
-  border-right: @secondaryPointingBorderWidth solid rgba(255, 255, 255, 0.1);
-  border-bottom: none;
+/* Inverted */
+.ui.secondary.inverted.pointing.menu {
+  border-color: @secondaryPointingInvertedBorderColor;
+}
+.ui.secondary.inverted.pointing.menu > .menu > .item.active,
+.ui.secondary.inverted.pointing.menu > .item.active {
+  border-color: @secondaryPointinInvertedActiveColor;
 }
-

 /*--------------
    Text Menu
@ -911,13 +911,13 @@ Floated Menu / Item
  margin: @textMenuMargin;
 }
 .ui.text.menu > .item,
-.ui.text.menu .menu > .item {
+.ui.text.menu > .menu > .item {
  padding: 0em;
  border-radius: 0px;
  box-shadow: none;
  opacity: @textMenuItemOpacity;
  margin: @textMenuItemMargin;
-  transition: @textMenuTransition;
+  transition: @textMenuItemTransition;
 }
 .ui.text.menu > .item:before,
 .ui.text.menu .menu > .item:before {
@ -937,7 +937,7 @@ Floated Menu / Item
 }

 /*--- fluid text ---*/
-.ui.text.item.menu .item {
+.ui.text.item.menu > .item {
  margin: 0em;
 }

@ -1190,12 +1190,14 @@ Floated Menu / Item
  background: @invertedHoverBackground;
  color: @invertedHoverColor;
 }
-.ui.inverted.menu .item .menu a.item:hover,
-.ui.inverted.menu .item .menu .link.item:hover {
+
+.ui.vertical.menu .item:not(.dropdown) .menu a.item:hover,
+.ui.vertical.menu .item:not(.dropdown) .menu .link.item:hover {
  background: @invertedSubMenuBackground;
  color: @invertedSubMenuHoverColor;
 }

+
 /*--- Pressed ---*/
 .ui.inverted.menu a.item:active,
 .ui.inverted.menu .dropdown.item:active,
@ -1371,7 +1373,7 @@ Floated Menu / Item
 --------------------*/

 .ui.compact.menu {
-  display: inline-block;
+  display: inline-flex;
  margin: 0em;
  vertical-align: middle;
 }
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@ -53,10 +53,6 @@
@subMenuHorizontalPadding: 0.5em;
@subMenuVerticalPadding: 1.5em;

-/* Header Item */
-@headerBackground: rgba(0, 0, 0, 0.04);
-@headerWeight: bold;
-
 /* Text Item */
@textLineHeight: 1.3;

@ -76,7 +72,7 @@
@verticalIconMargin: 0em 0em 0em 0.5em;

 /* Header */
-@headerBackground: rgba(0, 0, 0, 0.04);
+@headerBackground: '';
@headerWeight: bold;
@headerTextTransform: normal;

@ -103,6 +99,7 @@
@largeInputVerticalPadding: 0.6em;

 /* Image */
+@imageMargin: -0.5em -0.2em;
@imageWidth: 2.5em;
@verticalImageWidth: auto;

@ -111,7 +108,7 @@
@labelBackground: #999999;
@labelTextColor: @white;

-@labelTextMargin: 0.5em;
+@labelTextMargin: 1em;
@labelVerticalPadding: 0.3em;
@labelHorizontalPadding: 0.8em;

@ -160,7 +157,7 @@
@pressedColor: @pressedTextColor;

@activeBackground: @subtleTransparentBlack;
-@activeColor: @darkTextColor;
+@activeColor: @selectedTextColor;
@activePointerSize: 0px;
@activeFontWeight: normal;
@activeIconOpacity: 1;
@ -168,10 +165,8 @@

@activeHoverBackground: @hoverBackground;
@subMenuActiveBackground: transparent;
-
-@loadingBackgroundColor: rgba(255, 255, 255, 0.8);
-@loadingImage: "@{imagePath}/loader-large.gif";
-@loadingPosition: 50% 50%;
+@subMenuActiveColor: @selectedTextColor;
+@subMenuActiveFontWeight: bold;


 /*--------------
@ -202,8 +197,8 @@

@secondaryMargin: 0.25em;
@secondaryVerticalMargin: 0.3em;
-@secondaryVerticalPadding: 0.5em;
-@secondaryHorizontalPadding: 0.8em;
+@secondaryVerticalPadding: @relativeMini;
+@secondaryHorizontalPadding: @relativeSmall;

@secondaryLinkOpacity: 0.8;

@ -215,18 +210,23 @@


 /* Pointing */
-@secondaryPointingBorderWidth: 3px;
-@secondaryPointingVerticalPadding: 0.6em;
-@secondaryPointingHorizontalPadding: 0.95em;
+@secondaryPointingBorderWidth: 2px;

-@secondaryPointingBorderColor: rgba(0, 0, 0, 0.2);
-@secondaryPointingHoverTextColor: @textColor;
+@secondaryPointingBorderColor: @borderColor;
+@secondaryPointingInvertedBorderColor: @whiteBorderColor;
+@secondaryPointingActiveBorderColor: @black;
+@secondaryPointinInvertedActiveColor: @white;

-@secondaryPointingActiveBorderColor: rgba(0, 0, 0, 0.4);
+@secondaryPointingItemMargin: 0em 0em -@secondaryPointingBorderWidth;
+@secondaryPointingItemVerticalPadding: @relativeTiny;
+@secondaryPointingItemHorizontalPadding: @relativeMedium;
+@secondaryPointingHoverTextColor: @textColor;
+@secondaryPointingActiveFontWeight: bold;
@secondaryPointingActiveTextColor: @selectedTextColor;
-
@secondaryPointingHeaderColor: @darkTextColor;

+@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
+
 /* Tiered */
@tieredActiveItemBackground: #FCFCFC;
@tieredActiveMenuBackground: #FCFCFC;
@ -274,12 +274,12 @@
@labeledIconTextMargin: 0.5em;

 /* Text */
+@textMenuMargin: @relativeLarge -@textMenuItemSpacing;
+
@textMenuItemSpacing: 1em;
@textMenuItemOpacity: 0.8;
@textMenuItemMargin: 0em @textMenuItemSpacing;
-
-@textMenuMargin: 1em -@textMenuItemSpacing;
-@textMenuTransition: opacity @transitionDuration @transitionEasing;
+@textMenuItemTransition: opacity @transitionDuration @transitionEasing;

@textMenuHeaderSize: @relativeSmall;
@textMenuHeaderColor: @darkTextColor;
@ -288,7 +288,7 @@

@textVerticalMenuMargin: 1em 0em;
@textVerticalMenuHeaderMargin: 1.25em 0em;
-@textVerticalMenuItemMargin: @textMenuItemSpacing 0em;
+@textVerticalMenuItemMargin: @relativeLarge 0em;

@textVerticalMenuIconFloat: none;
@textVerticalMenuIconMargin: @iconMargin;