From 7140349bdf39a01955c1d6265a3a84bdda1f4fd4 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sun, 15 May 2016 17:02:52 -0400 Subject: [PATCH] Adds primary/secondary/positive/negative basic variations #3756 --- RELEASE-NOTES.md | 1 + src/definitions/elements/button.less | 213 +++++++++++++++---- src/themes/default/elements/button.variables | 10 + 3 files changed, 188 insertions(+), 36 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 03f77e8f0..c4e39bb1c 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -10,6 +10,7 @@ - **Popup** - Added new settings `autoRemove`, which is enabled by default. This will add special event listeners to auto hide a popup if the triggering element is removed from the DOM. This is useful in controlled DOM environments like Meteor/Ember/React to ensure a popup auto-hides itself when a page navigation or other DOM change occurs that may not trigger `mouseout`. - **Dropdown** - Dropdown now changes user selection on keyboard shortcuts **immediately**, this will save the extra `enter` key press to confirm selection in most cases. To enable previous pre `2.2` selection style use the setting `selectOnKeydown: false` NEEDS DOCS - **Dropdown** - Multiple select dropdown now sizes current dropdown input based on rendered width of a hidden element, not using an estimate based on character count. This means search will never break to a second line earlier than would normally fit in current line. +- **Button** - Added compatibility with `primary` `secondary` `positive` `negative` buttons with the `basic` styling variation. #3756 - **Dropdown** - Added new setting for search selection `hideAdditions` this will remove showing user additions inside the menu, making for a more intuitive adding process. Dropdowns now have a new state `empty` which will format an active dropdown with empty results. #3791 - **Dropdown** - Adds new `allowReselection` option to trigger `onChange` events even when reselecting same value ***NEEEDS DOCUMENTATION*** - **Dropdown** - Added `fullSearchSearch: 'exact'` setting, which requires exact matches for dropdown values #3085 #3994 **Thanks @ShawnCholeva** diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 7e8c7aa84..bd49dbbd5 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -3055,15 +3055,16 @@ Primary --------------------*/ +/*--- Standard ---*/ .ui.primary.buttons .button, .ui.primary.button { background-color: @primaryColor; color: @primaryTextColor; text-shadow: @primaryTextShadow; - background-image: @primaryBackgroundImage; + background-image: @coloredBackgroundImage; } .ui.primary.button { - box-shadow: @primaryBoxShadow; + box-shadow: @coloredBoxShadow; } .ui.primary.buttons .button:hover, .ui.primary.button:hover { @@ -3084,25 +3085,61 @@ text-shadow: @primaryTextShadow; } .ui.primary.buttons .active.button, -.ui.primary.active.button { +.ui.primary.buttons .active.button:active, +.ui.primary.active.button, +.ui.primary.button .active.button:active { background-color: @primaryColorActive; color: @primaryTextColor; text-shadow: @primaryTextShadow; } +/* Basic */ +.ui.basic.primary.buttons .button, +.ui.basic.primary.button { + box-shadow: 0px 0px 0px @basicBorderSize @primaryColor inset !important; + color: @primaryColor !important; +} +.ui.basic.primary.buttons .button:hover, +.ui.basic.primary.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorHover inset !important; + color: @primaryColorHover !important; +} +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorFocus inset !important; + color: @primaryColorHover !important; +} +.ui.basic.primary.buttons .active.button, +.ui.basic.primary.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorActive inset !important; + color: @primaryColorDown !important; +} +.ui.basic.primary.buttons .button:active, +.ui.basic.primary.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorDown inset !important; + color: @primaryColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + /*------------------- Secondary --------------------*/ +/* Standard */ .ui.secondary.buttons .button, .ui.secondary.button { background-color: @secondaryColor; color: @secondaryTextColor; text-shadow: @secondaryTextShadow; - background-image: @secondaryBackgroundImage; + background-image: @coloredBackgroundImage; } .ui.secondary.button { - box-shadow: @secondaryBoxShadow; + box-shadow: @coloredBoxShadow; } .ui.secondary.buttons .button:hover, .ui.secondary.button:hover { @@ -3123,21 +3160,57 @@ text-shadow: @secondaryTextShadow; } .ui.secondary.buttons .active.button, -.ui.secondary.active.button { +.ui.secondary.buttons .active.button:active, +.ui.secondary.active.button, +.ui.secondary.button .active.button:active { background-color: @secondaryColorActive; color: @secondaryTextColor; text-shadow: @secondaryTextShadow; } +/* Basic */ +.ui.basic.secondary.buttons .button, +.ui.basic.secondary.button { + box-shadow: 0px 0px 0px @basicBorderSize @secondaryColor inset !important; + color: @secondaryColor !important; +} +.ui.basic.secondary.buttons .button:hover, +.ui.basic.secondary.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorHover inset !important; + color: @secondaryColorHover !important; +} +.ui.basic.secondary.buttons .button:focus, +.ui.basic.secondary.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorFocus inset !important; + color: @secondaryColorHover !important; +} +.ui.basic.secondary.buttons .active.button, +.ui.basic.secondary.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorActive inset !important; + color: @secondaryColorDown !important; +} +.ui.basic.secondary.buttons .button:active, +.ui.basic.secondary.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorDown inset !important; + color: @secondaryColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + /*--------------- Positive ----------------*/ +/* Standard */ .ui.positive.buttons .button, .ui.positive.button { - background-color: @positiveColor !important; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + background-color: @positiveColor; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; background-image: @coloredBackgroundImage; } .ui.positive.button { @@ -3145,40 +3218,74 @@ } .ui.positive.buttons .button:hover, .ui.positive.button:hover { - background-color: @positiveColorHover !important; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + background-color: @positiveColorHover; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; } .ui.positive.buttons .button:focus, .ui.positive.button:focus { - background-color: @positiveColorFocus !important; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + background-color: @positiveColorFocus; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; } .ui.positive.buttons .button:active, .ui.positive.button:active { - background-color: @positiveColorDown !important; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + background-color: @positiveColorDown; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; } .ui.positive.buttons .active.button, +.ui.positive.buttons .active.button:active, .ui.positive.active.button, -.ui.positive.buttons .active.button:active { +.ui.positive.button .active.button:active { background-color: @positiveColorActive; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; } +/* Basic */ +.ui.basic.positive.buttons .button, +.ui.basic.positive.button { + box-shadow: 0px 0px 0px @basicBorderSize @positiveColor inset !important; + color: @positiveColor !important; +} +.ui.basic.positive.buttons .button:hover, +.ui.basic.positive.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorHover inset !important; + color: @positiveColorHover !important; +} +.ui.basic.positive.buttons .button:focus, +.ui.basic.positive.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorFocus inset !important; + color: @positiveColorHover !important; +} +.ui.basic.positive.buttons .active.button, +.ui.basic.positive.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorActive inset !important; + color: @positiveColorDown !important; +} +.ui.basic.positive.buttons .button:active, +.ui.basic.positive.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorDown inset !important; + color: @positiveColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} /*--------------- Negative ----------------*/ +/* Standard */ .ui.negative.buttons .button, .ui.negative.button { - background-color: @negativeColor !important; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + background-color: @negativeColor; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; background-image: @coloredBackgroundImage; } .ui.negative.button { @@ -3186,28 +3293,62 @@ } .ui.negative.buttons .button:hover, .ui.negative.button:hover { - background-color: @negativeColorHover !important; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + background-color: @negativeColorHover; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; } .ui.negative.buttons .button:focus, .ui.negative.button:focus { - background-color: @negativeColorFocus !important; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + background-color: @negativeColorFocus; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; } .ui.negative.buttons .button:active, .ui.negative.button:active { - background-color: @negativeColorDown !important; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + background-color: @negativeColorDown; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; } .ui.negative.buttons .active.button, +.ui.negative.buttons .active.button:active, .ui.negative.active.button, -.ui.negative.buttons .active.button:active { +.ui.negative.button .active.button:active { background-color: @negativeColorActive; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} + +/* Basic */ +.ui.basic.negative.buttons .button, +.ui.basic.negative.button { + box-shadow: 0px 0px 0px @basicBorderSize @negativeColor inset !important; + color: @negativeColor !important; +} +.ui.basic.negative.buttons .button:hover, +.ui.basic.negative.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorHover inset !important; + color: @negativeColorHover !important; +} +.ui.basic.negative.buttons .button:focus, +.ui.basic.negative.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorFocus inset !important; + color: @negativeColorHover !important; +} +.ui.basic.negative.buttons .active.button, +.ui.basic.negative.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorActive inset !important; + color: @negativeColorDown !important; +} +.ui.basic.negative.buttons .button:active, +.ui.basic.negative.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorDown inset !important; + color: @negativeColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; } /******************************* diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index 11e63ae22..96c00aa1b 100644 --- a/src/themes/default/elements/button.variables +++ b/src/themes/default/elements/button.variables @@ -326,6 +326,16 @@ @secondaryTextShadow: @invertedTextShadow; @secondaryBoxShadow: @coloredBoxShadow; +@positiveBackgroundImage: @coloredBackgroundImage; +@positiveTextColor: @invertedTextColor; +@positiveTextShadow: @invertedTextShadow; +@positiveBoxShadow: @coloredBoxShadow; + +@negativeBackgroundImage: @coloredBackgroundImage; +@negativeTextColor: @invertedTextColor; +@negativeTextShadow: @invertedTextShadow; +@negativeBoxShadow: @coloredBoxShadow; + /* Compact */ @compactVerticalPadding: (@verticalPadding * 0.75); @compactHorizontalPadding: (@horizontalPadding * 0.75);