@stackoverflow/stacks 3.0.0-beta.1 → 3.0.0-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/css/stacks.css +1543 -1285
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/atomic/misc.less +1 -1
  4. package/lib/atomic/typography.less +64 -38
  5. package/lib/base/body.less +2 -7
  6. package/lib/components/activity-indicator/activity-indicator.less +2 -19
  7. package/lib/components/anchor/anchor.less +1 -1
  8. package/lib/components/badge/badge.less +156 -177
  9. package/lib/components/bling/bling.less +130 -0
  10. package/lib/components/button/button.less +222 -374
  11. package/lib/components/checkbox_radio/checkbox_radio.less +12 -10
  12. package/lib/components/input-icon/input-icon.less +3 -3
  13. package/lib/components/input_textarea/input_textarea.less +70 -58
  14. package/lib/components/link/link.less +1 -1
  15. package/lib/components/link-preview/link-preview.less +1 -1
  16. package/lib/components/menu/menu.less +100 -21
  17. package/lib/components/modal/modal.less +10 -10
  18. package/lib/components/navigation/navigation.less +61 -37
  19. package/lib/components/pagination/pagination.less +44 -43
  20. package/lib/components/popover/popover.less +3 -5
  21. package/lib/components/post-summary/post-summary.less +3 -2
  22. package/lib/components/progress-bar/progress-bar.less +11 -10
  23. package/lib/components/select/select.less +26 -37
  24. package/lib/components/tag/tag.less +59 -70
  25. package/lib/components/toggle-switch/toggle-switch.less +4 -2
  26. package/lib/exports/color-mixins.less +13 -3
  27. package/lib/exports/color-sets.less +256 -216
  28. package/lib/exports/constants-helpers.less +4 -1
  29. package/lib/exports/constants-type.less +25 -25
  30. package/lib/stacks-static.less +1 -1
  31. package/package.json +1 -1
  32. package/lib/components/award-bling/award-bling.less +0 -31
package/lib/components/bling/bling.less ADDED
@@ -0,0 +1,130 @@
1
+ .s-bling {
2
+ --_bl-bg: unset;
3
+ --_bl-size: calc(var(--su8) + var(--su2));
4
+ // Icon
5
+ --_bl-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='4' r='4'/></svg>");
6
+ --_bl-icon-bg: var(--black-500);
7
+ --_bl-icon-size: var(--su8);
8
+
9
+ // VARIANTS
10
+ &&__activity {
11
+ --_bl-icon-bg: var(--pink-400);
12
+ }
13
+ // Metals
14
+ &&__gold {
15
+ --_bl-icon-bg: var(--yellow-400);
16
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 9' xmlns='http://www.w3.org/2000/svg'><path d='M3.89709 0L7.79421 2.25V6.75L3.89709 9L-1.95503e-05 6.75V2.25L3.89709 0Z'/></svg>");
17
+ }
18
+
19
+ &&__silver {
20
+ --_bl-icon-bg: var(--blue-400);
21
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'><path d='M4.27979 0L8.55954 3.10942L6.92482 8.14058H1.63475L3.09944e-05 3.10942L4.27979 0Z'/></svg>");
22
+ }
23
+
24
+ &&__bronze {
25
+ --_bl-icon-bg: var(--orange-400);
26
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><rect width='8' height='8'/></svg>");
27
+ }
28
+
29
+ // MODIFIERS
30
+ // Filled
31
+ &&__filled {
32
+ --_bl-bg: var(--black-225);
33
+ --_bl-icon-bg: var(--black-600);
34
+ --_bl-size: var(--su24);
35
+
36
+ &.s-bling {
37
+ &__rep {
38
+ --_bl-bg: var(--black-300);
39
+ .highcontrast-dark-mode({
40
+ --_bl-icon-bg: var(--black-050);
41
+ });
42
+ }
43
+ &__activity {
44
+ --_bl-bg: var(--pink-300);
45
+ --_bl-icon-bg: var(--pink-600);
46
+ .highcontrast-mode({
47
+ --_bl-icon-bg: var(--black-050);
48
+ });
49
+ .highcontrast-dark-mode({
50
+ --_bl-bg: var(--pink-400);
51
+ });
52
+ }
53
+ &__gold {
54
+ --_bl-bg: var(--yellow-300);
55
+ --_bl-icon-bg: var(--yellow-600);
56
+ .highcontrast-mode({
57
+ --_bl-icon-bg: var(--black-050);
58
+ });
59
+ .highcontrast-dark-mode({
60
+ --_bl-bg: var(--yellow-400);
61
+ });
62
+ }
63
+ &__silver {
64
+ --_bl-bg: var(--blue-300);
65
+ --_bl-icon-bg: var(--blue-600);
66
+ .highcontrast-mode({
67
+ --_bl-icon-bg: var(--black-050);
68
+ });
69
+ .highcontrast-dark-mode({
70
+ --_bl-bg: var(--blue-400);
71
+ });
72
+ }
73
+ &__bronze {
74
+ --_bl-bg: var(--orange-300);
75
+ --_bl-icon-bg: var(--orange-600);
76
+ .highcontrast-mode({
77
+ --_bl-icon-bg: var(--black-050);
78
+ });
79
+ .highcontrast-dark-mode({
80
+ --_bl-bg: var(--orange-400);
81
+ });
82
+ }
83
+ }
84
+ }
85
+
86
+ // SIZES
87
+ // Unfilled Sizes
88
+ &&__sm:not(&__filled) {
89
+ --_bl-size: var(--su8);
90
+ }
91
+ // Filled Sizes
92
+ &&__sm&__filled {
93
+ --_bl-size: var(--su16);
94
+ }
95
+ &&__lg&__filled {
96
+ --_bl-size: calc(var(--su24) + var(--su4)); // 28px
97
+ }
98
+ // Icon Sizes
99
+ &&__sm {
100
+ --_bl-icon-size: var(--su6);
101
+ }
102
+ &&__sm&__gold,
103
+ &&__sm&__silver {
104
+ --_bl-icon-size: calc(var(--su6) + var(--su1)); // 7px
105
+ }
106
+ &&__gold:not(&__sm),
107
+ &&__silver:not(&__sm) {
108
+ --_bl-icon-size: calc(var(--su8) + var(--su1)); // 9px
109
+ }
110
+
111
+ // CHILD ELEMENTS
112
+ &:before {
113
+ -webkit-mask: var(--_bl-icon) no-repeat center;
114
+ mask: var(--_bl-icon) no-repeat center;
115
+
116
+ background-color: var(--_bl-icon-bg);
117
+ content: "";
118
+ height: var(--_bl-icon-size);
119
+ width: var(--_bl-icon-size);
120
+ }
121
+
122
+ background-color: var(--_bl-bg);
123
+ height: var(--_bl-size);
124
+ width: var(--_bl-size);
125
+
126
+ align-items: center;
127
+ color: inherit;
128
+ display: inline-flex;
129
+ justify-content: center;
130
+ }