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

Iteration on menu fixes with flex, along with some design changes to make menu more neutral Fixes: #1281, #1475

pull/2034/head
jlukic 9 years ago
parent
6b17f8fe77
commit
5cc8f33aeb
4 changed files with 131 additions and 123 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      src/definitions/collections/menu.less
  2. 1
      src/definitions/modules/transition.js
  3. 71
      src/themes/default/collections/menu.variables
  4. 6
      src/themes/github/collections/menu.variables

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

@ -51,96 +51,70 @@
margin-bottom: 0rem;
}
/*--------------
Sub-Menu
---------------*/
.ui.menu .menu {
margin: 0em;
}
.ui.menu:not(.vertical) > *,
.ui.menu:not(.vertical) > .menu {
display: flex;
}
.ui.menu:not(.vertical) .item {
display: flex;
align-items: center;
}
/*--------------
Colors
Item
---------------*/
/* Text Color */
.ui.menu .item {
color: @menuTextColor;
}
.ui.menu .item .item {
color: @subMenuTextColor;
}
/* Hover */
.ui.menu .item .menu a.item:hover,
.ui.menu .item .menu .link.item:hover {
color: @darkTextColor;
.ui.menu:not(.vertical) .item {
display: flex;
align-items: center;
}
/*--------------
Items
---------------*/
.ui.menu .item {
position: relative;
padding: @verticalPadding @horizontalPadding;
border-top: @borderSize solid transparent;
background: @itemBackground;
vertical-align: middle;
line-height: 1;
text-decoration: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
transition: @transition;
}
background: @itemBackground;
padding: @itemVerticalPadding @itemHorizontalPadding;
color: @textColor;
transition: @itemTransition;
}
/* Floated Content */
.ui.menu > .item:first-child {
border-radius: @borderRadius 0px 0px @borderRadius;
}
.ui.menu:not(.vertical) .item.left,
.ui.menu:not(.vertical) .menu.left {
display: flex;
margin-right: auto;
}
.ui.menu:not(.vertical) .item.right,
.ui.menu:not(.vertical) .menu.right {
display: flex;
margin-left: auto;
}
/*--------------
Borders
---------------*/
/* Border */
.ui.menu .item:before {
position: absolute;
content: '';
top: 0%;
right: 0px;
width: @dividerSize;
height: 100%;
width: @dividerSize;
background: @dividerBackground;
}
.ui.menu > .right.menu:first-child:before {
display: none;
/*--------------
Sub-Item
---------------*/
.ui.menu .item .menu .item {
color: @subMenuTextColor;
}
.ui.menu .menu.right .item:before,
.ui.menu .item.right:before {
right: auto;
left: 0px;
.ui.menu .item .menu a.item:hover,
.ui.menu .item .menu .link.item:hover {
color: @darkTextColor;
}
/*--------------
@ -176,7 +150,6 @@
margin-left: @dropdownIconDistance;
}
/*--------------
Button
---------------*/
@ -222,8 +195,8 @@
.ui.menu .header.item,
.ui.vertical.menu .header.item {
background: @headerBackground;
margin: 0em;
background: @headerBackground;
text-transform: @headerTextTransform;
font-weight: @headerWeight;
}
@ -235,9 +208,9 @@
/* Dropdown */
.ui.menu .ui.dropdown.item.visible {
background: @subtleTransparentBlack;
border-bottom-right-radius: 0em;
border-bottom-left-radius: 0em;
background: @subtleTransparentBlack;
}
.ui.menu .ui.dropdown.active {
box-shadow: none;
@ -245,36 +218,22 @@
/* Menu Position */
.ui.menu .dropdown.item .menu {
background: @dropdownBackground;
left: 0px;
background: @dropdownBackground;
margin: @dropdownMenuOffset 0px 0px;
min-width: ~"calc(100% - 1px)";
box-shadow: @dropdownBoxShadow;
}
.ui.menu:not(.secondary) .pointing.dropdown.item .menu {
margin-top: @dropdownPointingDistance;
border-top-left-radius: 0em;
border-top-right-radius: 0em;
margin-top: @dropdownPointingDistance;
}
.ui.menu .simple.dropdown.item .menu {
margin: 0px !important;
}
/* Secondary Menu Dropdown */
.ui.secondary.menu > .menu > .active.dropdown.item {
background-color: transparent;
}
.ui.secondary.menu .dropdown.item .menu {
left: 0px;
min-width: 100%;
}
/* Even Width Menu Dropdown */
.ui.item.menu .dropdown .menu .item {
width: 100%;
}
/*--------------
Labels
---------------*/
@ -340,17 +299,17 @@
background: @activeBackground;
color: @selectedTextColor;
font-weight: @activeFontWeight;
box-shadow: 0em @activeBorderSize 0em inset;
box-shadow: @activeBoxShadow;
}
.ui.menu .active.item > i.icon {
opacity: @activeIconOpacity;
}
/* Vertical */
/* Vertical Active */
.ui.vertical.menu .active.item {
background: @activeBackground;
border-radius: 0em;
box-shadow: @activeBorderSize 0em 0em inset;
box-shadow: @activeVerticalBoxShadow;
}
.ui.vertical.menu > .active.item:first-child {
border-radius: 0em @borderRadius 0em 0em;
@ -395,6 +354,34 @@
Types
*******************************/
/*--------------
Floated Content
---------------*/
/* Left Floated */
.ui.menu:not(.vertical) .item.left,
.ui.menu:not(.vertical) .menu.left {
display: flex;
margin-right: auto;
}
/* Right Floated */
.ui.menu:not(.vertical) .item.right,
.ui.menu:not(.vertical) .menu.right {
display: flex;
margin-left: auto;
}
/* Floated Borders */
.ui.menu > .right.menu:first-child:before {
display: none;
}
.ui.menu .menu.right .item:before,
.ui.menu .item.right:before {
right: auto;
left: 0px;
}
/*--------------
Vertical
---------------*/
@ -410,7 +397,6 @@
display: block;
background: @verticalItemBackground;
border-top: none;
border-left: @borderSize solid transparent;
border-right: none;
}
.ui.vertical.menu > .item:first-child {
@ -480,7 +466,7 @@
/*--- Sub Menu ---*/
.ui.vertical.menu .item:not(.dropdown) > .menu {
margin: @subMenuMargin -@horizontalPadding 0em;
margin: @subMenuMargin -@itemHorizontalPadding 0em;
}
.ui.vertical.menu .item:not(.dropdown) > .menu > .item {
background: none;
@ -547,7 +533,7 @@
/* Sub Menu Active */
.ui.tiered.menu .sub.menu .active.item {
padding-top: @verticalPadding;
padding-top: @itemVerticalPadding;
background: @tieredSubMenuActiveBackground;
border-radius: 0;
border-top: medium none;
@ -675,7 +661,7 @@
/* Active */
.ui.pagination.menu .active.item {
border-top: none;
padding-top: @verticalPadding;
padding-top: @itemVerticalPadding;
background-color: @paginationActiveBackground;
box-shadow: none;
}
@ -753,6 +739,15 @@
background-color: @secondaryInvertedActiveBackground;
}
/* Dropdown */
.ui.secondary.menu > .menu > .active.dropdown.item {
background-color: transparent;
}
.ui.secondary.menu .dropdown.item .menu {
left: 0px;
min-width: 100%;
}
/* Disable variations */
.ui.secondary.item.menu > .item {
@ -978,7 +973,7 @@
}
.ui.vertical.text.menu .item > i.icon {
float: none;
margin: 0em @verticalPadding 0em 0em;
margin: 0em @itemVerticalPadding 0em 0em;
}
.ui.vertical.text.menu .header.item {
margin: 0.8em 0em;
@ -1058,6 +1053,7 @@
/* Item Icon Only */
.ui.menu .icon.item .icon {
margin: 0em;
width: auto;
}
.ui.vertical.icon.menu {
@ -1178,7 +1174,13 @@
color: @invertedSubMenuColor;
}
.ui.inverted.menu .dropdown .menu .item {
color: @dropdownTextColor !important;
background: @dropdownItemBackground !important;
color: @dropdownItemColor !important;
transition: @dropdownItemTransition;
}
.ui.inverted.menu .dropdown .menu .item:hover {
background: @dropdownHoveredItemBackground !important;
color: @dropdownHoveredItemColor !important;
}
.ui.inverted.menu .item.disabled,
.ui.inverted.menu .item.disabled:hover {
@ -1359,14 +1361,14 @@
.ui.horizontally.fitted.menu .item,
.ui.horizontally.fitted.menu .item .menu .item,
.ui.menu .horizontally.fitted.item {
padding-top: @verticalPadding;
padding-bottom: @verticalPadding;
padding-top: @itemVerticalPadding;
padding-bottom: @itemVerticalPadding;
}
.ui.vertically.fitted.menu .item,
.ui.vertically.fitted.menu .item .menu .item,
.ui.menu .vertically.fitted.item {
padding-left: @horizontalPadding;
padding-right: @horizontalPadding;
padding-left: @itemHorizontalPadding;
padding-right: @itemHorizontalPadding;
}
/*--------------
@ -1453,6 +1455,10 @@
width: 8.333%;
}
/* Dropdown */
.ui.item.menu .dropdown .menu .item {
width: 100%;
}
/*--------------
Fixed

1
src/definitions/modules/transition.js
View File

@ -392,7 +392,6 @@ $.fn.transition = function() {
$module.removeAttr('class');
}
if(module.cache.style) {
console.log(module.cache.style);
module.verbose('Restoring original style attribute', module.cache.style);
$module.attr('style', module.cache.style);
}

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

@ -15,28 +15,29 @@
Collection
--------------------*/
/* Menu */
@margin: 1em 0rem;
@verticalPadding: 0.78571em;
@horizontalPadding: 0.95em;
@background: #FFFFFF;
@itemBackground: none;
@fontWeight: normal;
@borderWidth: 1px;
@boxShadow:
0px 0px 0px 1px @borderColor,
0px 0px 0px @borderWidth @borderColor,
@subtleShadow
;
@borderRadius: @defaultBorderRadius;
@borderSize: 0em;
@transition:
opacity 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease
/* Menu Item */
@itemVerticalPadding: @relativeSmall;
@itemHorizontalPadding: @relativeLarge;
@itemTransition:
opacity @transitionDuration @transitionEasing,
background @transitionDuration @transitionEasing,
box-shadow @transitionDuration @transitionEasing
;
@borderRadius: @defaultBorderRadius;
@itemTextColor: @textColor;
/* Divider */
@dividerSize: 1px;
@dividerBackground: linear-gradient(
rgba(0, 0, 0, 0.05) 0%,
@ -44,19 +45,6 @@
rgba(0, 0, 0, 0.05) 100%)
;
@headerBackground: rgba(0, 0, 0, 0.04);
@headerWeight: bold;
@textLineHeight: 1.3;
@transition:
opacity 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease
;
@menuTextColor: @textColor;
/* Sub Menu */
@subMenuMargin: 0.5em;
@subMenuFontSize: 0.875em;
@ -65,6 +53,13 @@
@subMenuHorizontalPadding: 0.5em;
@subMenuVerticalPadding: 1.5em;
/* Header Item */
@headerBackground: rgba(0, 0, 0, 0.04);
@headerWeight: bold;
/* Text Item */
@textLineHeight: 1.3;
/*--------------
Elements
---------------*/
@ -124,9 +119,14 @@
@dropdownMenuOffset: 0px;
@dropdownPointingDistance: 0px;
@dropdownTextColor: @textColor;
@dropdownTextColorHover: @darkTextColor;
@dropdownItemBackground: transparent;
@dropdownItemTextColorHover: @selectedTextColor;
@dropdownIconMargin: 0em 0em 0em 1em;
@dropdownItemColor: @textColor;
@dropdownItemTransition: none;
@dropdownHoveredItemBackground: @transparentBlack;
@dropdownHoveredItemColor: @selectedTextColor;
@dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
@dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
@ -157,9 +157,11 @@
@activeBackground: @subtleTransparentBlack;
@activeColor: @darkTextColor;
@activeBorderSize: 2px;
@activePointerSize: 0px;
@activeFontWeight: normal;
@activeIconOpacity: 1;
@activeBoxShadow: 0em @activePointerSize 0em inset;
@activeVerticalBoxShadow: @verticalActivePointerSize 0em 0em inset;
@activeHoverBackground: @hoverBackground;
@subMenuActiveBackground: transparent;
@ -174,6 +176,7 @@
---------------*/
/* Vertical */
@verticalPointerWidth: 2px;
@verticalBackground: #FFFFFF;
@verticalItemBackground: none;
@verticalDividerBackground: linear-gradient(to right,
@ -181,6 +184,7 @@
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
@verticalActivePointerSize: 2px;
/* Secondary */
@ -244,11 +248,10 @@
@tabularBackgroundColor: #FFFFFF;
@tabularBorderWidth: 1px;
@tabularHorizontalPadding: 1.4em;
@tabularMenuTextColor: @menuTextColor;
@tabularMenuTextColor: @itemTextColor;
@tabularFluidOffset: 1px;
@tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
@tabularActiveColor: @selectedTextColor;
@tabularActiveBoxShadow: none;
@ -303,14 +306,14 @@
/* Inverted Menu Divider */
@invertedDividerBackground: linear-gradient(
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
rgba(255, 255, 255, 0.06) 100%)
;
@invertedVerticalDividerBackground: linear-gradient(to right,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
rgba(255, 255, 255, 0.06) 100%)
;
/* Fixed */

6
src/themes/github/collections/menu.variables
View File

@ -2,8 +2,8 @@
Collection
--------------------*/
@verticalPadding : 1em;
@horizontalPadding : 1.25em;
@itemVerticalPadding : 1em;
@itemHorizontalPadding : 1.25em;
@background : #FFFFFF linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
@fontWeight : normal;
@ -18,7 +18,7 @@
@boxShadow :
0px 1px 2px 0px rgba(0, 0, 0, 0.15),
0px 0px 0px 1px rgba(0, 0, 0, 0.05)
0px 0px 0px 1px rgba(0, 0, 0, 0.1)
;
@headerBackground: rgba(0, 0, 0, 0.08);

Write Preview
Loading…
Cancel
Save