Skip to content

Commit 14a4f8c

Browse files
lubber-delubber-de
authored
feat(button): make consequences optional
positive and negative button colors were not optional and always generated. This PR makes them optional via new @variationButtonConsequences variable
1 parent 51e0c45 commit 14a4f8c

File tree

2 files changed

+85
-92
lines changed

2 files changed

+85
-92
lines changed

‎src/definitions/elements/button.less

Lines changed: 84 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1756,101 +1756,93 @@
17561756
})
17571757
}
17581758

1759-
.addConsequence(@consequence) {
1760-
1761-
@_backgroundColor: "@{consequence}Color";
1762-
@_backgroundColorHover: "@{consequence}ColorHover";
1763-
@_backgroundColorFocus: "@{consequence}ColorFocus";
1764-
@_backgroundColorDown: "@{consequence}ColorDown";
1765-
@_backgroundColorActive: "@{consequence}ColorActive";
1766-
@_textColor: "@{consequence}TextColor";
1767-
@_textShadow: "@{consequence}TextShadow";
1768-
1769-
/* Standard */
1770-
.ui.@{consequence}.buttons .button,
1771-
.ui.@{consequence}.button {
1772-
background-color: @@_backgroundColor;
1773-
color: @@_textColor;
1774-
text-shadow: @@_textShadow;
1775-
background-image: @coloredBackgroundImage;
1776-
}
1777-
.ui.@{consequence}.button {
1778-
box-shadow: @coloredBoxShadow;
1779-
}
1780-
.ui.@{consequence}.buttons .button:hover,
1781-
.ui.@{consequence}.button:hover {
1782-
background-color: @@_backgroundColorHover;
1783-
color: @@_textColor;
1784-
text-shadow: @@_textShadow;
1785-
}
1786-
.ui.@{consequence}.buttons .button:focus,
1787-
.ui.@{consequence}.button:focus {
1788-
background-color: @@_backgroundColorFocus;
1789-
color: @@_textColor;
1790-
text-shadow: @@_textShadow;
1791-
}
1792-
.ui.@{consequence}.buttons .button:active,
1793-
.ui.@{consequence}.button:active {
1794-
background-color: @@_backgroundColorDown;
1795-
color: @@_textColor;
1796-
text-shadow: @@_textShadow;
1797-
}
1798-
.ui.@{consequence}.buttons .active.button,
1799-
.ui.@{consequence}.buttons .active.button:active,
1800-
.ui.@{consequence}.active.button,
1801-
.ui.@{consequence}.button .active.button:active {
1802-
background-color: @@_backgroundColorActive;
1803-
color: @@_textColor;
1804-
text-shadow: @@_textShadow;
1805-
}
1806-
& when (@variationButtonBasic) {
1807-
/* Basic */
1808-
.ui.basic.@{consequence}.buttons .button,
1809-
.ui.basic.@{consequence}.button {
1810-
background: transparent;
1811-
box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset;
1812-
color: @@_backgroundColor;
1813-
}
1814-
.ui.basic.@{consequence}.buttons .button:hover,
1815-
.ui.basic.@{consequence}.button:hover {
1816-
background: transparent;
1817-
box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset;
1818-
color: @@_backgroundColorHover;
1819-
}
1820-
.ui.basic.@{consequence}.buttons .button:focus,
1821-
.ui.basic.@{consequence}.button:focus {
1822-
background: transparent;
1823-
box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset;
1824-
color: @@_backgroundColorHover;
1825-
}
1826-
.ui.basic.@{consequence}.buttons .active.button,
1827-
.ui.basic.@{consequence}.active.button {
1828-
background: transparent;
1829-
box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset;
1830-
color: @@_backgroundColorDown;
1831-
}
1832-
.ui.basic.@{consequence}.buttons .button:active,
1833-
.ui.basic.@{consequence}.button:active {
1834-
box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset;
1835-
color: @@_backgroundColorDown;
1836-
}
1837-
.ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) {
1838-
margin-left: -@basicColoredBorderSize;
1759+
& when not (@variationButtonConsequences = false) {
1760+
each(@variationButtonConsequences, {
1761+
@consequence: @value;
1762+
1763+
@_backgroundColor: "@{consequence}Color";
1764+
@_backgroundColorHover: "@{consequence}ColorHover";
1765+
@_backgroundColorFocus: "@{consequence}ColorFocus";
1766+
@_backgroundColorDown: "@{consequence}ColorDown";
1767+
@_backgroundColorActive: "@{consequence}ColorActive";
1768+
@_textColor: "@{consequence}TextColor";
1769+
@_textShadow: "@{consequence}TextShadow";
1770+
1771+
/* Standard */
1772+
.ui.@{consequence}.buttons .button,
1773+
.ui.@{consequence}.button {
1774+
background-color: @@_backgroundColor;
1775+
color: @@_textColor;
1776+
text-shadow: @@_textShadow;
1777+
background-image: @coloredBackgroundImage;
18391778
}
1840-
}
1779+
.ui.@{consequence}.button {
1780+
box-shadow: @coloredBoxShadow;
1781+
}
1782+
.ui.@{consequence}.buttons .button:hover,
1783+
.ui.@{consequence}.button:hover {
1784+
background-color: @@_backgroundColorHover;
1785+
color: @@_textColor;
1786+
text-shadow: @@_textShadow;
1787+
}
1788+
.ui.@{consequence}.buttons .button:focus,
1789+
.ui.@{consequence}.button:focus {
1790+
background-color: @@_backgroundColorFocus;
1791+
color: @@_textColor;
1792+
text-shadow: @@_textShadow;
1793+
}
1794+
.ui.@{consequence}.buttons .button:active,
1795+
.ui.@{consequence}.button:active {
1796+
background-color: @@_backgroundColorDown;
1797+
color: @@_textColor;
1798+
text-shadow: @@_textShadow;
1799+
}
1800+
.ui.@{consequence}.buttons .active.button,
1801+
.ui.@{consequence}.buttons .active.button:active,
1802+
.ui.@{consequence}.active.button,
1803+
.ui.@{consequence}.button .active.button:active {
1804+
background-color: @@_backgroundColorActive;
1805+
color: @@_textColor;
1806+
text-shadow: @@_textShadow;
1807+
}
1808+
& when (@variationButtonBasic) {
1809+
/* Basic */
1810+
.ui.basic.@{consequence}.buttons .button,
1811+
.ui.basic.@{consequence}.button {
1812+
background: transparent;
1813+
box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset;
1814+
color: @@_backgroundColor;
1815+
}
1816+
.ui.basic.@{consequence}.buttons .button:hover,
1817+
.ui.basic.@{consequence}.button:hover {
1818+
background: transparent;
1819+
box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset;
1820+
color: @@_backgroundColorHover;
1821+
}
1822+
.ui.basic.@{consequence}.buttons .button:focus,
1823+
.ui.basic.@{consequence}.button:focus {
1824+
background: transparent;
1825+
box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset;
1826+
color: @@_backgroundColorHover;
1827+
}
1828+
.ui.basic.@{consequence}.buttons .active.button,
1829+
.ui.basic.@{consequence}.active.button {
1830+
background: transparent;
1831+
box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset;
1832+
color: @@_backgroundColorDown;
1833+
}
1834+
.ui.basic.@{consequence}.buttons .button:active,
1835+
.ui.basic.@{consequence}.button:active {
1836+
box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset;
1837+
color: @@_backgroundColorDown;
1838+
}
1839+
.ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) {
1840+
margin-left: -@basicColoredBorderSize;
1841+
}
1842+
}
1843+
})
18411844
}
18421845

1843-
/*---------------
1844-
Positive
1845-
----------------*/
1846-
1847-
.addConsequence(positive);
1848-
1849-
/*---------------
1850-
Negative
1851-
----------------*/
1852-
1853-
.addConsequence(negative);
18541846

18551847
& when (@variationButtonGroups) {
18561848
/*******************************

‎src/themes/default/globals/variation.variables

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
@variationButtonWrapping: true;
3939
@variationButtonWrapped: true;
4040
@variationButtonSpaced: true;
41+
@variationButtonConsequences: positive, negative;
4142
@variationButtonSizes: @variationAllSizes;
4243
@variationButtonColors: @variationAllColors;
4344

0 commit comments

Comments
 (0)