Adds primary/secondary/positive/negative basic variations #3756

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**

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;
 }
 
 /*******************************

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);