richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixes for inverted menus, changes to active styles

pull/2034/head
jlukic 9 years ago
parent
7b3a84f861
commit
0db9045878
2 changed files with 33 additions and 139 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      src/definitions/collections/menu.less
  2. 37
      src/themes/default/collections/menu.variables

135
src/definitions/collections/menu.less
View File

@ -550,110 +550,12 @@ Floated Menu / Item
border-left: none;
}
.ui.vertical.menu .item .menu .active.item {
box-shadow: none;
background-color: @subMenuActiveBackground;
font-weight: @subMenuActiveFontWeight;
color: @subMenuActiveTextColor;
}
/*--------------
Tiered
---------------*/
.ui.tiered.menu {
flex-wrap: wrap;
}
.ui.tiered.menu > .menu {
width: 100%;
}
.ui.tiered.menu > .menu > .item:hover {
color: @tieredSubMenuActiveColor;
}
.ui.tiered.menu .active.item {
background: @tieredActiveItemBackground;
}
.ui.tiered.menu > .menu .item.active:after {
position: absolute;
content: '';
margin-top: -@dividerSize;
top: 100%;
left: 0px;
width: 100%;
height: 2px;
background-color: @tieredActiveMenuBackground;
}
/* Sub Menu */
.ui.tiered.menu .sub.menu {
background-color: @tieredActiveMenuBackground;
border-radius: 0em 0em @borderRadius @borderRadius;
border-top: 1px solid @borderColor;
box-shadow: none;
}
.ui.tiered.menu > .sub.menu > .item {
color: @tieredSubMenuColor;
font-weight: @tieredSubMenuFontWeight;
text-transform: @tieredSubMenuTextTransform;
font-size: @subMenuFontSize;
}
/* Sub Menu Divider */
.ui.tiered.menu .sub.menu .item:before {
background: none;
}
/* Sub Menu Hover */
.ui.tiered.menu .sub.menu .item:hover {
background: @tieredSubMenuHoverBackground;
color: @tieredSubMenuHoverColor;
}
/* Sub Menu Active */
.ui.tiered.menu .sub.menu .active.item {
padding-top: @itemVerticalPadding;
background: @tieredSubMenuActiveBackground;
border-radius: 0;
border-top: medium none;
box-shadow: none;
color: @tieredSubMenuActiveColor !important;
}
.ui.tiered.menu .sub.menu .active.item:after {
display: none;
}
/* Inverted Tiered Menu */
.ui.inverted.tiered.menu > .menu > .item {
color: @invertedUnselectedTextColor;
}
.ui.inverted.tiered.menu .sub.menu {
background-color: @tieredInvertedSubMenuBackground;
}
.ui.inverted.tiered.menu .sub.menu .item {
color: @invertedLightTextColor;
}
.ui.inverted.tiered.menu > .menu > .item:hover {
color: @invertedHoveredTextColor;
}
.ui.inverted.tiered.menu .active.item:after {
display: none;
}
.ui.inverted.tiered.menu > .sub.menu > .active.item,
.ui.inverted.tiered.menu > .menu > .active.item {
color: @invertedSelectedTextColor !important;
box-shadow: none;
}
/* Tiered Pointing */
.ui.pointing.tiered.menu > .menu > .item:after {
display: none;
}
.ui.pointing.tiered.menu > .sub.menu > .item:after {
display: block;
}
/*--------------
Tabular
---------------*/
@ -839,14 +741,15 @@ Floated Menu / Item
/* Inverted */
.ui.secondary.inverted.menu .link.item,
.ui.secondary.inverted.menu a.item {
color: @secondaryInvertedColor;
color: @secondaryInvertedColor !important;
}
.ui.secondary.inverted.menu .dropdown.item:hover,
.ui.secondary.inverted.menu .link.item:hover,
.ui.secondary.inverted.menu a.item:hover {
color: @secondaryInvertedHoverColor;
color: @secondaryInvertedHoverColor !important;
}
.ui.secondary.inverted.menu .active.item {
color: @secondaryInvertedActiveColor !important;
background-color: @secondaryInvertedActiveBackground;
}
@ -1285,11 +1188,6 @@ Floated Menu / Item
.ui.inverted.menu .item:before {
background: @invertedDividerBackground;
}
.ui.inverted.menu .dropdown.item:hover:before,
.ui.inverted.menu .link.item:hover:before,
.ui.inverted.menu a.item:hover:before {
background: none;
}
.ui.vertical.inverted.menu .item:before {
background: @invertedVerticalDividerBackground;
}
@ -1329,8 +1227,6 @@ Floated Menu / Item
background: @invertedSubMenuBackground;
color: @invertedSubMenuHoverColor;
}
/*--- Pressed ---*/
.ui.inverted.menu a.item:active,
.ui.inverted.menu .link.item:active,
@ -1341,7 +1237,6 @@ Floated Menu / Item
/*--- Active ---*/
.ui.inverted.menu .active.item {
box-shadow: none !important;
background: @invertedActiveBackground;
color: @invertedActiveColor !important;
}
@ -1349,19 +1244,18 @@ Floated Menu / Item
background: @invertedSubMenuActiveBackground;
color: @invertedSubMenuActiveColor;
}
/*--- Pointers ---*/
.ui.inverted.pointing.menu .item:hover:after {
background: @invertedArrowHoverColor;
box-shadow: none;
}
.ui.inv
.ui.inverted.pointing.menu .active.item:after {
background: @invertedArrowActiveColor;
box-shadow: none;
background: @invertedArrowActiveColor !important;
box-shadow: none !important;
}
/*--- Active Hover ---*/
.ui.inverted.menu .active.item:hover {
background: @invertedActiveHoverBackground;
color: @invertedActiveHoverColor !important;
}
.ui.inverted.pointing.menu .active.item:hover:after {
background: @invertedArrowActiveHoverColor;
background: @invertedArrowActiveHoverColor !important;
}
@ -1408,11 +1302,6 @@ Floated Menu / Item
Inverted Colors
---------------*/
/*--- Light Colors ---*/
.ui.grey.menu {
background-color: @offWhite;
}
/*--- Inverted Colors ---*/
/* Blue */

37
src/themes/default/collections/menu.variables
View File

@ -155,10 +155,6 @@
@arrowActiveColor: #F7F7F7;
@arrowActiveHoverColor: @arrowHoverColor;
@invertedArrowHoverColor: #5B5B5B;
@invertedArrowActiveColor: #4A4A4A;
@invertedArrowActiveHoverColor: @invertedArrowHoverColor;
@arrowVerticalHoverColor: @arrowHoverColor;
@arrowVerticalActiveColor: @arrowActiveColor;
@arrowVerticalSubMenuColor: @white;
@ -179,7 +175,7 @@
/* Active Item */
@activeItemBackground: @subtleTransparentBlack;
@activeItemTextColor: @selectedTextColor;
@activeItemFontWeight: @itemFontWeight;
@activeItemFontWeight: bold;
@activeIconOpacity: 1;
@activeItemBoxShadow: none;
@ -236,8 +232,6 @@
@secondaryHeaderBackground: none transparent;
@secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
@secondaryInvertedActiveBackground: @transparentWhite;
@secondaryVerticalItemMargin: 0em 0em 0.3em;
@secondaryVerticalItemBorderRadius: @defaultBorderRadius;
@ -258,9 +252,17 @@
@secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor;
@secondaryPointingHeaderColor: @darkTextColor;
@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
/* Inverted Secondary */
@secondaryInvertedColor: @invertedLightTextColor;
@secondaryInvertedHoverBackground: @transparentWhite;
@secondaryInvertedHoverColor: @invertedSelectedTextColor;
@secondaryInvertedActiveBackground: @strongTransparentWhite;
@secondaryInvertedActiveColor: @invertedSelectedTextColor;
/* Inverted Pointing */
@secondaryPointingInvertedBorderColor: @whiteBorderColor;
@secondaryPointingInvertedItemTextColor: @invertedTextColor;
@secondaryPointingInvertedItemHeaderColor: @white;
@ -371,22 +373,25 @@
@invertedSubMenuHoverColor: @white;
/* Pressed */
@invertedMenuPressedBackground: rgba(255, 255, 255, 0.15);
@invertedMenuPressedBackground: rgba(255, 255, 255, 0.05);
@invertedMenuPressedColor: @white;
/* Inverted Active */
@invertedActiveBackground: rgba(255, 255, 255, 0.2);
@invertedActiveBackground: rgba(255, 255, 255, 0.15);
@invertedActiveColor: @white;
@invertedArrowActiveColor: #3C3C3C;
/* Inverted Active Hover */
@invertedActiveHoverBackground: rgba(255, 255, 255, 0.15);
@invertedActiveHoverColor: @white;
@invertedArrowActiveHoverColor: #3C3C3C;
@invertedSubMenuActiveBackground: transparent;
@invertedSubMenuActiveColor: @white;
/* Inverted Secondary */
@secondaryInvertedColor: @invertedLightTextColor;
@secondaryInvertedHoverColor: @invertedSelectedTextColor;
/* Inverted Menu Divider */
@invertedDividerBackground: @invertedBorderColor;
@invertedVerticalDividerBackground: @invertedBorderColor;
@invertedDividerBackground: rgba(255, 255, 255, 0.05);
@invertedVerticalDividerBackground: @invertedDividerBackground;
/* Fixed */
@fixedGridMargin: 2.75rem;

Write Preview
Loading…
Cancel
Save