diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 337b2cb36..bddc89f89 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -33,6 +33,7 @@ font-family: @fontFamily; background: @background; font-weight: @fontWeight; + border: @border; box-shadow: @boxShadow; border-radius: @borderRadius; min-height: @minHeight; @@ -266,6 +267,11 @@ display: block; } +.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) { + float: @dropdownItemIconFloat; + margin: @dropdownItemIconMargin; +} + /* Secondary */ .ui.secondary.menu .dropdown.item > .menu, @@ -303,9 +309,6 @@ border-top-right-radius: 0em; border-bottom-right-radius: 0em; } -.ui.vertical.menu .dropdown.item .menu .item i.icon { - margin-right: 0em; -} .ui.vertical.menu .dropdown.item.active { box-shadow: none; } @@ -659,6 +662,7 @@ Floated Menu / Item background-color: transparent; border-radius: 0em; box-shadow: none !important; + border: none; border-bottom: @tabularBorderWidth solid @tabularBorderColor; } .ui.tabular.fluid.menu { @@ -771,6 +775,7 @@ Floated Menu / Item .ui.secondary.menu { background: @secondaryBackground; border-radius: 0em; + border: none; box-shadow: none; } @@ -861,7 +866,7 @@ Floated Menu / Item .ui.secondary.vertical.menu > .item { border: none; margin: @secondaryVerticalItemMargin; - border-radius: @secondaryVerticalItemBorderRadius; + border-radius: @secondaryVerticalItemBorderRadius !important; } .ui.secondary.vertical.menu > .header.item { border-radius: 0em; @@ -958,7 +963,7 @@ Floated Menu / Item border-bottom: none; border-right-style: solid; border-right-color: transparent; - border-radius: 0em; + border-radius: 0em !important; margin: @secondaryVerticalPointingItemMargin; border-right-width: @secondaryPointingBorderWidth; } @@ -1006,6 +1011,7 @@ Floated Menu / Item background: none transparent; border-radius: 0px; box-shadow: none; + border: none; margin: @textMenuMargin; } @@ -1699,15 +1705,29 @@ Floated Menu / Item .ui.menu.attached { margin: 0rem; border-radius: 0px; + margin-left: -@borderWidth; + margin-right: -@borderWidth; + width: @attachedWidth; box-shadow: @attachedBoxShadow; /* avoid rgba multiplying */ } .ui.top.attached.menu { border-radius: @borderRadius @borderRadius 0em 0em; } -.ui.menu.bottom.attached { +.ui.bottom.attached.menu { + border-top: none; border-radius: 0em 0em @borderRadius @borderRadius; } +.ui.top.attached.menu:not(.tabular) { + border-bottom: none; +} + +.ui.attached.tabular.menu { + margin-left: 0; + margin-right: 0; + width: 100%; +} + /*-------------- Sizes ---------------*/ diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 66a11c0d8..9bd1dce0a 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -22,10 +22,8 @@ @itemBackground: none; @fontWeight: normal; @borderWidth: 1px; -@boxShadow: - 0px 0px 0px @borderWidth @borderColor, - @subtleShadow -; +@border: @borderWidth solid @borderColor; +@boxShadow: @subtleShadow; @borderRadius: @defaultBorderRadius; @minHeight: (@itemVerticalPadding * 2) + 1em; @@ -43,11 +41,7 @@ /* Divider */ @dividerSize: 1px; -@dividerBackground: linear-gradient( - rgba(0, 0, 0, 0.05) 0%, - rgba(0, 0, 0, 0.1) 50%, - rgba(0, 0, 0, 0.05) 100%) -; +@dividerBackground: @borderColor; /* Sub Menu */ @subMenuDistance: 0.5em; @@ -138,6 +132,9 @@ @dropdownItemBoxShadow: none; @dropdownItemTransition: none; +@dropdownItemIconFloat: none; +@dropdownItemIconMargin: 0em 0.75em 0em 0em; + @dropdownHoveredItemBackground: @transparentBlack; @dropdownHoveredItemColor: @selectedTextColor; @@ -210,17 +207,9 @@ @verticalPointerWidth: 2px; @verticalBackground: #FFFFFF; @verticalItemBackground: none; -@verticalDividerBackground: linear-gradient(to right, - rgba(0, 0, 0, 0.03) 0%, - rgba(0, 0, 0, 0.1) 1.5em, - rgba(0, 0, 0, 0.03) 100%) -; +@verticalDividerBackground: @borderColor; -@verticalActivePointerSize: @verticalPointerWidth; -@verticalActiveBoxShadow: - (@verticalActivePointerSize - @borderWidth) 0em 0em inset, - -@borderWidth 0em 0em -; +@verticalActiveBoxShadow: none; /* Secondary */ @@ -396,18 +385,15 @@ @secondaryInvertedHoverColor: @invertedSelectedTextColor; /* Inverted Menu Divider */ -@invertedDividerBackground: rgba(255, 255, 255, 0.08); -@invertedVerticalDividerBackground: linear-gradient(to right, - rgba(255, 255, 255, 0.06) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(255, 255, 255, 0.06) 100%) -; +@invertedDividerBackground: @invertedBorderColor; +@invertedVerticalDividerBackground: @invertedBorderColor; /* Fixed */ @fixedGridMargin: 2.75rem; /* Attached */ -@attachedBoxShadow: 0px 0px 0px 1px @solidBorderColor; +@attachedBoxShadow: none; +@attachedWidth: ~"calc(100% + "@borderWidth * 2~")"; /* Sizes */ @smallWidth: 13rem; diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 5eaabf57d..829ad2e5f 100644 --- a/src/themes/default/elements/segment.variables +++ b/src/themes/default/elements/segment.variables @@ -76,10 +76,10 @@ /* Attached */ @attachedTopOffset: 0px; @attachedBottomOffset: 0px; -@attachedHorizontalOffset: -1px; +@attachedHorizontalOffset: -@borderWidth; @attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")"; @attachedBoxShadow: none; -@attachedBorder: 1px solid @solidBorderColor; +@attachedBorder: @borderWidth solid @solidBorderColor; @attachedBottomBoxShadow: @attachedBoxShadow, @subtleShadow diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index a21a3b218..e0c5a7fc2 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -358,7 +358,7 @@ @circularRadius : 500rem; -@borderColor : rgba(34, 36, 38, 0.2); +@borderColor : rgba(34, 36, 38, 0.15); @selectedBorderColor : rgba(34, 36, 38, 0.3); @disabledBorderColor : rgba(34, 36, 38, 0.5);