Browse Source

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

pull/4046/head
Jack Lukic 8 years ago
parent
commit
7140349bdf
3 changed files with 188 additions and 36 deletions
  1. 1
      RELEASE-NOTES.md
  2. 213
      src/definitions/elements/button.less
  3. 10
      src/themes/default/elements/button.variables

1
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`. - **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** - 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. - **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** - 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** - 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** - **Dropdown** - Added `fullSearchSearch: 'exact'` setting, which requires exact matches for dropdown values #3085 #3994 **Thanks @ShawnCholeva**

213
src/definitions/elements/button.less

@ -3055,15 +3055,16 @@
Primary Primary
--------------------*/ --------------------*/
/*--- Standard ---*/
.ui.primary.buttons .button, .ui.primary.buttons .button,
.ui.primary.button { .ui.primary.button {
background-color: @primaryColor; background-color: @primaryColor;
color: @primaryTextColor; color: @primaryTextColor;
text-shadow: @primaryTextShadow; text-shadow: @primaryTextShadow;
background-image: @primaryBackgroundImage;
background-image: @coloredBackgroundImage;
} }
.ui.primary.button { .ui.primary.button {
box-shadow: @primaryBoxShadow;
box-shadow: @coloredBoxShadow;
} }
.ui.primary.buttons .button:hover, .ui.primary.buttons .button:hover,
.ui.primary.button:hover { .ui.primary.button:hover {
@ -3084,25 +3085,61 @@
text-shadow: @primaryTextShadow; text-shadow: @primaryTextShadow;
} }
.ui.primary.buttons .active.button, .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; background-color: @primaryColorActive;
color: @primaryTextColor; color: @primaryTextColor;
text-shadow: @primaryTextShadow; 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 Secondary
--------------------*/ --------------------*/
/* Standard */
.ui.secondary.buttons .button, .ui.secondary.buttons .button,
.ui.secondary.button { .ui.secondary.button {
background-color: @secondaryColor; background-color: @secondaryColor;
color: @secondaryTextColor; color: @secondaryTextColor;
text-shadow: @secondaryTextShadow; text-shadow: @secondaryTextShadow;
background-image: @secondaryBackgroundImage;
background-image: @coloredBackgroundImage;
} }
.ui.secondary.button { .ui.secondary.button {
box-shadow: @secondaryBoxShadow;
box-shadow: @coloredBoxShadow;
} }
.ui.secondary.buttons .button:hover, .ui.secondary.buttons .button:hover,
.ui.secondary.button:hover { .ui.secondary.button:hover {
@ -3123,21 +3160,57 @@
text-shadow: @secondaryTextShadow; text-shadow: @secondaryTextShadow;
} }
.ui.secondary.buttons .active.button, .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; background-color: @secondaryColorActive;
color: @secondaryTextColor; color: @secondaryTextColor;
text-shadow: @secondaryTextShadow; 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 Positive
----------------*/ ----------------*/
/* Standard */
.ui.positive.buttons .button, .ui.positive.buttons .button,
.ui.positive.button { .ui.positive.button {
background-color: @positiveColor !important;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
background-color: @positiveColor;
color: @positiveTextColor;
text-shadow: @positiveTextShadow;
background-image: @coloredBackgroundImage; background-image: @coloredBackgroundImage;
} }
.ui.positive.button { .ui.positive.button {
@ -3145,40 +3218,74 @@
} }
.ui.positive.buttons .button:hover, .ui.positive.buttons .button:hover,
.ui.positive.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.buttons .button:focus,
.ui.positive.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.buttons .button:active,
.ui.positive.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,
.ui.positive.buttons .active.button:active,
.ui.positive.active.button, .ui.positive.active.button,
.ui.positive.buttons .active.button:active {
.ui.positive.button .active.button:active {
background-color: @positiveColorActive; 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 Negative
----------------*/ ----------------*/
/* Standard */
.ui.negative.buttons .button, .ui.negative.buttons .button,
.ui.negative.button { .ui.negative.button {
background-color: @negativeColor !important;
color: @invertedTextColor;
text-shadow: @invertedTextShadow;
background-color: @negativeColor;
color: @negativeTextColor;
text-shadow: @negativeTextShadow;
background-image: @coloredBackgroundImage; background-image: @coloredBackgroundImage;
} }
.ui.negative.button { .ui.negative.button {
@ -3186,28 +3293,62 @@
} }
.ui.negative.buttons .button:hover, .ui.negative.buttons .button:hover,
.ui.negative.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.buttons .button:focus,
.ui.negative.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.buttons .button:active,
.ui.negative.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,
.ui.negative.buttons .active.button:active,
.ui.negative.active.button, .ui.negative.active.button,
.ui.negative.buttons .active.button:active {
.ui.negative.button .active.button:active {
background-color: @negativeColorActive; 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;
} }
/******************************* /*******************************

10
src/themes/default/elements/button.variables

@ -326,6 +326,16 @@
@secondaryTextShadow: @invertedTextShadow; @secondaryTextShadow: @invertedTextShadow;
@secondaryBoxShadow: @coloredBoxShadow; @secondaryBoxShadow: @coloredBoxShadow;
@positiveBackgroundImage: @coloredBackgroundImage;
@positiveTextColor: @invertedTextColor;
@positiveTextShadow: @invertedTextShadow;
@positiveBoxShadow: @coloredBoxShadow;
@negativeBackgroundImage: @coloredBackgroundImage;
@negativeTextColor: @invertedTextColor;
@negativeTextShadow: @invertedTextShadow;
@negativeBoxShadow: @coloredBoxShadow;
/* Compact */ /* Compact */
@compactVerticalPadding: (@verticalPadding * 0.75); @compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75); @compactHorizontalPadding: (@horizontalPadding * 0.75);

Loading…
Cancel
Save