From 098d9fc02c1c441c3bd6da69a89c4b14a56c6723 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 30 Jul 2015 18:19:51 -0400 Subject: [PATCH] Add labeled button variation, basic label variation --- RELEASE-NOTES.md | 10 ++++++-- src/definitions/elements/button.less | 26 ++++++++++++++++++++ src/definitions/elements/label.less | 21 ++++++++++++++-- src/themes/default/elements/button.variables | 9 +++++-- src/themes/default/elements/label.variables | 14 ++++++++++- 5 files changed, 73 insertions(+), 7 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 63c72b7db..9f9cc0ec4 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -3,13 +3,19 @@ ### Version 2.x.x - July 23, 2015 **[Enhancements](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)** - - **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** - Added new `tabular` menu types, `right tabular`, `bottom tabular`, added many new `tabular` menu variables for customizing -- **Dropdown** - Dropdown `@arrowSize` will now automatically reposition itself if size is changed with variable +- **Label** - Added `basic` label variation, useful for item counts +- **Button** - Added `labeled button` variation for display a count next to a button. + + +**Additional Enhancements** - **Menu** - `text menu` now uses padding for hitboxes to make target area for links larger - **List** - Lists can now be `right floated` or `left floated` +- **Dropdown** - Dropdown arrow now has a variable `@dropdownArrowSize`, and is slightly smaller than previously +- **Dropdown** - Dropdown `@arrowSize` will now automatically reposition itself if size is changed with variable + **[Reported Bugs](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)** - **Container** - Fix issue with `fluid container` being `100% + gutter` at mobile resolution (causing overflow) diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 60cc8c601..53fb02811 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -363,6 +363,32 @@ color: @focusColor; } +/*------------------- + Labeled Button +--------------------*/ + +.ui.labeled.button:not(.icon) { + display: inline-flex; + flex-direction: row; + background: none !important; + padding: 0px !important; + border: none !important; + box-shadow: none !important; +} + +.ui.labeled.button > .button { + margin: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.button > .label { + margin: 0px 0px 0px -@borderBoxShadowWidth; + padding: @labeledLabelPadding; + font-size: @labeledLabelFontSize; + border-color: @labeledLabelBorderColor; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} /*------------------- Social diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index e10f35e6b..7d7af7372 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -32,12 +32,12 @@ margin: @verticalMargin @horizontalMargin; background-color: @backgroundColor; - border-color: @backgroundColor; + border-color: @borderColor; background-image: @backgroundImage; padding: @verticalPadding @horizontalPadding; - color: @labelTextColor; + color: @color; text-transform: @textTransform; font-weight: @fontWeight; @@ -952,6 +952,23 @@ a.ui.black.label:hover:before { } +/*------------------- + Basic +--------------------*/ + +.ui.basic.label { + background: @basicBackground; + border: @basicBorder; + color: @basicColor; + box-shadow: @basicBoxShadow; +} +.ui.basic.label:hover { + text-decoration: none; + background: @basicHoverBackground; + color: @basicHoverColor; + box-shadow: @basicHoverBorder; + box-shadow: @basicHoverBoxShadow; +} /*------------------- Fluid diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index d566ee4e7..6963f9d90 100644 --- a/src/themes/default/elements/button.variables +++ b/src/themes/default/elements/button.variables @@ -18,7 +18,6 @@ @verticalPadding: @inputVerticalPadding; @horizontalPadding: 1.5em; - /* Text */ @textTransform: none; @tapColor: transparent; @@ -45,7 +44,7 @@ ; /* Icon */ -@iconHeight: @relativeSmall; +@iconHeight: @relativeTiny; @iconOpacity: 0.8; @iconDistance: @relative6px; @iconColor: ''; @@ -160,6 +159,11 @@ /* Icon */ @iconButtonOpacity: 0.9; +/* Labeled */ +@labeledLabelPadding: @verticalPadding @horizontalPadding; +@labeledLabelFontSize: @relativeMedium; +@labeledLabelBorderColor: @borderColor; + /* Labeled Icon */ @labeledIconWidth: 1em + (@verticalPadding * 2); @labeledIconBackgroundColor: rgba(0, 0, 0, 0.05); @@ -170,6 +174,7 @@ @labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset; @labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset; + /* Inverted */ @invertedBorderSize: 2px; @invertedTextColor: @white; diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index 149ec0b92..83a28a574 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -10,8 +10,9 @@ @verticalMargin: 0em; @horizontalMargin: @relative2px; @backgroundColor: #E8E8E8; +@color: @mutedTextColor; +@borderColor: @backgroundColor; @backgroundImage: none; -@labelTextColor: rgba(0, 0, 0, 0.6); @verticalPadding: 0.5833em; @horizontalPadding: 0.833em; @borderRadius: @absoluteBorderRadius; @@ -100,6 +101,17 @@ Variations --------------------*/ +/* Basic */ +@basicBackground: none @white; +@basicBorder: 1px solid @borderColor; +@basicColor: @textColor; +@basicBoxShadow: none; + +@basicHoverBackground: @basicBackground; +@basicHoverColor: @linkHoverColor; +@basicHoverBorder: @basicBorder; +@basicHoverBoxShadow: @basicBoxShadow; + /* Tag */ @tagCircleColor: @white; @tagCircleSize: 0.5em;