Browse Source

Text menu now uses padding for larger hitboxes

pull/2743/head
jlukic 10 years ago
parent
commit
f585d4cf16
3 changed files with 6 additions and 4 deletions
  1. 1
      RELEASE-NOTES.md
  2. 4
      src/definitions/collections/menu.less
  3. 5
      src/themes/default/collections/menu.variables

1
RELEASE-NOTES.md

@ -6,6 +6,7 @@
- **Breadcrumb** - Breadcrumb no longer receives vertical spacing by default. This may often cause vertical alignment issues when displayed next to other `inline-block` content. - **Breadcrumb** - Breadcrumb no longer receives vertical spacing by default. This may often cause vertical alignment issues when displayed next to other `inline-block` content.
- **Menu** - Appearance of `labeled icon menu` has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before. - **Menu** - Appearance of `labeled icon menu` has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before.
- **Menu** - `text menu` now uses padding for hitboxes to make target area for links larger
**[Reported Bugs](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)** **[Reported Bugs](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**
- **Modal** - Fix autofocus setting in modal not working due to improper selector #2737 - **Modal** - Fix autofocus setting in modal not working due to improper selector #2737

4
src/definitions/collections/menu.less

@ -966,11 +966,11 @@ Floated Menu / Item
margin: @textMenuMargin; margin: @textMenuMargin;
} }
.ui.text.menu .item { .ui.text.menu .item {
padding: 0em;
border-radius: 0px; border-radius: 0px;
box-shadow: none; box-shadow: none;
align-self: center; align-self: center;
margin: @textMenuItemMargin; margin: @textMenuItemMargin;
padding: @textMenuItemPadding;
font-weight: @textMenuItemFontWeight; font-weight: @textMenuItemFontWeight;
color: @textMenuItemColor; color: @textMenuItemColor;
transition: @textMenuItemTransition; transition: @textMenuItemTransition;
@ -1038,9 +1038,9 @@ Floated Menu / Item
/*--- active ---*/ /*--- active ---*/
.ui.text.menu .active.item { .ui.text.menu .active.item {
background-color: transparent; background-color: transparent;
padding: 0em;
border: none; border: none;
box-shadow: none; box-shadow: none;
padding: @textMenuItemPadding;
font-weight: @textMenuActiveItemFontWeight; font-weight: @textMenuActiveItemFontWeight;
color: @textMenuActiveItemColor; color: @textMenuActiveItemColor;
} }

5
src/themes/default/collections/menu.variables

@ -332,10 +332,11 @@
/* Text */ /* Text */
@textMenuItemSpacing: 0.5em; @textMenuItemSpacing: 0.5em;
@textMenuMargin: @relativeLarge -@textMenuItemSpacing;
@textMenuMargin: @relativeMedium -(@textMenuItemSpacing);
@textMenuItemColor: @mutedTextColor; @textMenuItemColor: @mutedTextColor;
@textMenuItemFontWeight: normal; @textMenuItemFontWeight: normal;
@textMenuItemMargin: 0em @textMenuItemSpacing;
@textMenuItemMargin: 0em 0em;
@textMenuItemPadding: @relative5px @textMenuItemSpacing;
@textMenuItemTransition: opacity @defaultDuration @defaultEasing; @textMenuItemTransition: opacity @defaultDuration @defaultEasing;
@textMenuSubMenuMargin: 0em; @textMenuSubMenuMargin: 0em;

Loading…
Cancel
Save