Skip to content

Commit e3d7eb6

Browse files
lubber-deSean
lubber-de
authored and
Sean
committed
fix(button,table): move LESS functions out of LESS file and into variables
Closes #736
1 parent 1acf30e commit e3d7eb6

File tree

4 files changed

+203
-57
lines changed

4 files changed

+203
-57
lines changed

‎src/definitions/collections/table.less

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -678,6 +678,8 @@ each(@colors, {
678678
@l: @colors[@@color][light];
679679
@lh: @colors[@@color][lightHover];
680680
@r: @colors[@@color][ribbon];
681+
@b: @colors[@@color][bright];
682+
@bh: @colors[@@color][brightHover];
681683
@isDark: @colors[@@color][isDark];
682684
@isVeryDark: @colors[@@color][isVeryDark];
683685

@@ -695,7 +697,7 @@ each(@colors, {
695697
background: @l;
696698
}
697699
& when not (@isDark) {
698-
background: screen(@l,@blendingBaseColor);
700+
background: @b;
699701
}
700702
& when (@isVeryDark) {
701703
color: @white;
@@ -711,7 +713,7 @@ each(@colors, {
711713
background: @lh;
712714
}
713715
& when not (@isDark) {
714-
background: screen(@lh,@blendingBaseColor);
716+
background: @bh;
715717
}
716718
& when (@isVeryDark) {
717719
color: @white;

‎src/definitions/elements/button.less

Lines changed: 14 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1393,6 +1393,10 @@ each(@colors, {
13931393
@la: @colors[@@color][lightActive];
13941394
@lt: @colors[@@color][lightText];
13951395
@ls: @colors[@@color][lightShadow];
1396+
@ty: @colors[@@color][tertiary];
1397+
@tyh: @colors[@@color][tertiaryHover];
1398+
@tyf: @colors[@@color][tertiaryFocus];
1399+
@tya: @colors[@@color][tertiaryActive];
13961400
@isDark: @colors[@@color][isDark];
13971401
@isVeryDark: @colors[@@color][isVeryDark];
13981402

@@ -1571,20 +1575,12 @@ each(@colors, {
15711575
.ui.tertiary.@{color}.button {
15721576
background: transparent;
15731577

1574-
.tertiaryButtonColor() when (@isVeryDark) {
1575-
@_tertiaryButtonColor: lighten(@c, 20%);
1576-
}
1577-
.tertiaryButtonColor() when not (@isVeryDark) {
1578-
@_tertiaryButtonColor: saturate(@c, 20%);
1579-
}
1580-
.tertiaryButtonColor();
1581-
15821578
& when (@tertiaryWithUnderline = true) {
1583-
box-shadow: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColor ;
1579+
box-shadow: inset 0 -@tertiaryLineHeight 0 @ty;
15841580
}
15851581

15861582
& when (@tertiaryWithOverline = true) {
1587-
box-shadow: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColor ;
1583+
box-shadow: inset 0 @tertiaryLineHeight 0 @ty;
15881584
}
15891585

15901586
& when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){
@@ -1597,67 +1593,38 @@ each(@colors, {
15971593
.ui.tertiary.@{color}.buttons button:hover,
15981594
.ui.tertiary.@{color}.button:hover {
15991595

1600-
.tertiaryButtonColorHover() when (@isVeryDark) {
1601-
@_tertiaryButtonColorHover: lighten(@h, 40%);
1602-
}
1603-
.tertiaryButtonColorHover() when not (@isVeryDark) {
1604-
@_tertiaryButtonColorHover: desaturate(@h, 20%);
1605-
}
1606-
.tertiaryButtonColorHover();
1607-
16081596
& when (@tertiaryHoverWithUnderline = true) {
1609-
box-shadow: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorHover ;
1597+
box-shadow: inset 0 -@tertiaryLineHeight 0 @tyh;
16101598
}
16111599

16121600
& when (@tertiaryHoverWithOverline = true) {
1613-
box-shadow: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorHover ;
1601+
box-shadow: inset 0 @tertiaryLineHeight 0 @tyh;
16141602
}
16151603

16161604
& when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) {
16171605
box-shadow: none ;
16181606
}
16191607

1620-
& when (@isVeryDark) {
1621-
color: lighten(@h, 20%) ;
1622-
}
1623-
1624-
& when not (@isVeryDark) {
1625-
color: @_tertiaryButtonColorHover ;
1626-
}
1608+
color: @tyh;
16271609
}
16281610

16291611
.ui.tertiary.@{color}.buttons .button:focus,
16301612
.ui.tertiary.@{color}.buttons .tertiary.button:focus,
16311613
.ui.tertiary.@{color}.button:focus {
16321614

1633-
1634-
.tertiaryButtonColorFocus() when (@isVeryDark) {
1635-
@_tertiaryButtonColorFocus: lighten(@f, 40%);
1636-
}
1637-
.tertiaryButtonColorFocus() when not (@isVeryDark) {
1638-
@_tertiaryButtonColorFocus: desaturate(@f, 20%);
1639-
}
1640-
.tertiaryButtonColorFocus();
1641-
16421615
& when (@tertiaryFocusWithUnderline = true) {
1643-
box-shadow: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorFocus ;
1616+
box-shadow: inset 0 -@tertiaryLineHeight 0 @tyf;
16441617
}
16451618

16461619
& when (@tertiaryFocusWithOverline = true) {
1647-
box-shadow: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorFocus ;
1620+
box-shadow: inset 0 @tertiaryLineHeight 0 @tyf;
16481621
}
16491622

16501623
& when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false) {
16511624
box-shadow: none;
16521625
}
16531626

1654-
& when (@isVeryDark) {
1655-
color: lighten(@f, 20%) ;
1656-
}
1657-
1658-
& when not (@isVeryDark) {
1659-
color: @_tertiaryButtonColorFocus ;
1660-
}
1627+
color: @tyf;
16611628
}
16621629

16631630
.ui.tertiary.@{color}.buttons .active.button,
@@ -1667,20 +1634,12 @@ each(@colors, {
16671634
.ui.tertiary.@{color}.buttons .tertiary.button:active,
16681635
.ui.tertiary.@{color}.button:active {
16691636

1670-
.tertiaryButtonColorActive() when (@isVeryDark) {
1671-
@_tertiaryButtonColorActive: lighten(@a, 20%);
1672-
}
1673-
.tertiaryButtonColorActive() when not (@isVeryDark) {
1674-
@_tertiaryButtonColorActive: saturate(@a, 20%);
1675-
}
1676-
.tertiaryButtonColorActive();
1677-
16781637
& when (@tertiaryActiveWithUnderline = true) {
1679-
box-shadow: inset 0 -@tertiaryLineHeight 0 @_tertiaryButtonColorActive ;
1638+
box-shadow: inset 0 -@tertiaryLineHeight 0 @tya;
16801639
}
16811640

16821641
& when (@tertiaryActiveWithOverline = true) {
1683-
box-shadow: inset 0 @tertiaryLineHeight 0 @_tertiaryButtonColorActive ;
1642+
box-shadow: inset 0 @tertiaryLineHeight 0 @tya;
16841643
}
16851644

16861645
& when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false) {

‎src/themes/default/globals/colors.less

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@
2626
lightHover : @lightPrimaryColorHover;
2727
ribbon : @primaryRibbonShadow;
2828
invertedRibbon : @primaryInvertedRibbonShadow;
29+
tertiary : @primaryTertiaryColor;
30+
tertiaryHover : @primaryTertiaryColorHover;
31+
tertiaryFocus : @primaryTertiaryColorFocus;
32+
tertiaryActive : @primaryTertiaryColorActive;
33+
bright : @primaryBright;
34+
brightHover : @primaryBrightHover;
2935
isDark : false;
3036
isVeryDark : false;
3137
};
@@ -52,6 +58,12 @@
5258
lightHover : @lightSecondaryColorHover;
5359
ribbon : @secondaryRibbonShadow;
5460
invertedRibbon : @secondaryInvertedRibbonShadow;
61+
tertiary : @secondaryTertiaryColor;
62+
tertiaryHover : @secondaryTertiaryColorHover;
63+
tertiaryFocus : @secondaryTertiaryColorFocus;
64+
tertiaryActive : @secondaryTertiaryColorActive;
65+
bright : @secondaryBright;
66+
brightHover : @secondaryBrightHover;
5567
isDark : false;
5668
isVeryDark : false;
5769
};
@@ -78,6 +90,12 @@
7890
lightHover : @lightRedHover;
7991
ribbon : @redRibbonShadow;
8092
invertedRibbon : @redInvertedRibbonShadow;
93+
tertiary : @redTertiaryColor;
94+
tertiaryHover : @redTertiaryColorHover;
95+
tertiaryFocus : @redTertiaryColorFocus;
96+
tertiaryActive : @redTertiaryColorActive;
97+
bright : @redBright;
98+
brightHover : @redBrightHover;
8199
isDark : false;
82100
isVeryDark : false;
83101
};
@@ -104,6 +122,12 @@
104122
lightHover : @lightOrangeHover;
105123
ribbon : @orangeRibbonShadow;
106124
invertedRibbon : @orangeInvertedRibbonShadow;
125+
tertiary : @orangeTertiaryColor;
126+
tertiaryHover : @orangeTertiaryColorHover;
127+
tertiaryFocus : @orangeTertiaryColorFocus;
128+
tertiaryActive : @orangeTertiaryColorActive;
129+
bright : @orangeBright;
130+
brightHover : @orangeBrightHover;
107131
isDark : false;
108132
isVeryDark : false;
109133
};
@@ -130,6 +154,12 @@
130154
lightHover : @lightYellowHover;
131155
ribbon : @yellowRibbonShadow;
132156
invertedRibbon : @yellowInvertedRibbonShadow;
157+
tertiary : @yellowTertiaryColor;
158+
tertiaryHover : @yellowTertiaryColorHover;
159+
tertiaryFocus : @yellowTertiaryColorFocus;
160+
tertiaryActive : @yellowTertiaryColorActive;
161+
bright : @yellowBright;
162+
brightHover : @yellowBrightHover;
133163
isDark : false;
134164
isVeryDark : false;
135165
};
@@ -156,6 +186,12 @@
156186
lightHover : @lightOliveHover;
157187
ribbon : @oliveRibbonShadow;
158188
invertedRibbon : @oliveInvertedRibbonShadow;
189+
tertiary : @oliveTertiaryColor;
190+
tertiaryHover : @oliveTertiaryColorHover;
191+
tertiaryFocus : @oliveTertiaryColorFocus;
192+
tertiaryActive : @oliveTertiaryColorActive;
193+
bright : @oliveBright;
194+
brightHover : @oliveBrightHover;
159195
isDark : false;
160196
isVeryDark : false;
161197
};
@@ -182,6 +218,12 @@
182218
lightHover : @lightGreenHover;
183219
ribbon : @greenRibbonShadow;
184220
invertedRibbon : @greenInvertedRibbonShadow;
221+
tertiary : @greenTertiaryColor;
222+
tertiaryHover : @greenTertiaryColorHover;
223+
tertiaryFocus : @greenTertiaryColorFocus;
224+
tertiaryActive : @greenTertiaryColorActive;
225+
bright : @greenBright;
226+
brightHover : @greenBrightHover;
185227
isDark : false;
186228
isVeryDark : false;
187229
};
@@ -208,6 +250,12 @@
208250
lightHover : @lightTealHover;
209251
ribbon : @tealRibbonShadow;
210252
invertedRibbon : @tealInvertedRibbonShadow;
253+
tertiary : @tealTertiaryColor;
254+
tertiaryHover : @tealTertiaryColorHover;
255+
tertiaryFocus : @tealTertiaryColorFocus;
256+
tertiaryActive : @tealTertiaryColorActive;
257+
bright : @tealBright;
258+
brightHover : @tealBrightHover;
211259
isDark : false;
212260
isVeryDark : false;
213261
};
@@ -234,6 +282,12 @@
234282
lightHover : @lightBlueHover;
235283
ribbon : @blueRibbonShadow;
236284
invertedRibbon : @blueInvertedRibbonShadow;
285+
tertiary : @blueTertiaryColor;
286+
tertiaryHover : @blueTertiaryColorHover;
287+
tertiaryFocus : @blueTertiaryColorFocus;
288+
tertiaryActive : @blueTertiaryColorActive;
289+
bright : @blueBright;
290+
brightHover : @blueBrightHover;
237291
isDark : false;
238292
isVeryDark : false;
239293
};
@@ -260,6 +314,12 @@
260314
lightHover : @lightVioletHover;
261315
ribbon : @violetRibbonShadow;
262316
invertedRibbon : @violetInvertedRibbonShadow;
317+
tertiary : @violetTertiaryColor;
318+
tertiaryHover : @violetTertiaryColorHover;
319+
tertiaryFocus : @violetTertiaryColorFocus;
320+
tertiaryActive : @violetTertiaryColorActive;
321+
bright : @violetBright;
322+
brightHover : @violetBrightHover;
263323
isDark : false;
264324
isVeryDark : false;
265325
};
@@ -286,6 +346,12 @@
286346
lightHover : @lightPurpleHover;
287347
ribbon : @purpleRibbonShadow;
288348
invertedRibbon : @purpleInvertedRibbonShadow;
349+
tertiary : @purpleTertiaryColor;
350+
tertiaryHover : @purpleTertiaryColorHover;
351+
tertiaryFocus : @purpleTertiaryColorFocus;
352+
tertiaryActive : @purpleTertiaryColorActive;
353+
bright : @purpleBright;
354+
brightHover : @purpleBrightHover;
289355
isDark : false;
290356
isVeryDark : false;
291357
};
@@ -312,6 +378,12 @@
312378
lightHover : @lightPinkHover;
313379
ribbon : @pinkRibbonShadow;
314380
invertedRibbon : @pinkInvertedRibbonShadow;
381+
tertiary : @pinkTertiaryColor;
382+
tertiaryHover : @pinkTertiaryColorHover;
383+
tertiaryFocus : @pinkTertiaryColorFocus;
384+
tertiaryActive : @pinkTertiaryColorActive;
385+
bright : @pinkBright;
386+
brightHover : @pinkBrightHover;
315387
isDark : false;
316388
isVeryDark : false;
317389
};
@@ -338,6 +410,12 @@
338410
lightHover : @lightBrownHover;
339411
ribbon : @brownRibbonShadow;
340412
invertedRibbon : @brownInvertedRibbonShadow;
413+
tertiary : @brownTertiaryColor;
414+
tertiaryHover : @brownTertiaryColorHover;
415+
tertiaryFocus : @brownTertiaryColorFocus;
416+
tertiaryActive : @brownTertiaryColorActive;
417+
bright : @brownBright;
418+
brightHover : @brownBrightHover;
341419
isDark : false;
342420
isVeryDark : false;
343421
};
@@ -364,6 +442,12 @@
364442
lightHover : @lightGreyHover;
365443
ribbon : @greyRibbonShadow;
366444
invertedRibbon : @greyInvertedRibbonShadow;
445+
tertiary : @greyTertiaryColor;
446+
tertiaryHover : @greyTertiaryColorHover;
447+
tertiaryFocus : @greyTertiaryColorFocus;
448+
tertiaryActive : @greyTertiaryColorActive;
449+
bright : @greyBright;
450+
brightHover : @greyBrightHover;
367451
isDark : true;
368452
isVeryDark : false;
369453
};
@@ -390,6 +474,12 @@
390474
lightHover : @lightBlackHover;
391475
ribbon : @blackRibbonShadow;
392476
invertedRibbon : @blackInvertedRibbonShadow;
477+
tertiary : @blackTertiaryColor;
478+
tertiaryHover : @blackTertiaryColorHover;
479+
tertiaryFocus : @blackTertiaryColorFocus;
480+
tertiaryActive : @blackTertiaryColorActive;
481+
bright : @blackBright;
482+
brightHover : @blackBrightHover;
393483
isDark : true;
394484
isVeryDark : true;
395485
};

0 commit comments

Comments
 (0)