@stackoverflow/stacks 3.0.0-beta.0 → 3.0.0-beta.11

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 (47) hide show
  1. package/dist/css/stacks.css +1579 -1510
  2. package/dist/css/stacks.min.css +1 -1
  3. package/dist/js/stacks.js +0 -14
  4. package/dist/js/stacks.min.js +1 -1
  5. package/lib/atomic/border.less +2 -20
  6. package/lib/atomic/misc.less +1 -1
  7. package/lib/atomic/typography.less +13 -26
  8. package/lib/base/body.less +2 -7
  9. package/lib/components/activity-indicator/activity-indicator.less +17 -29
  10. package/lib/components/anchor/anchor.less +1 -1
  11. package/lib/components/avatar/avatar.less +9 -11
  12. package/lib/components/badge/badge.less +156 -177
  13. package/lib/components/bling/bling.less +130 -0
  14. package/lib/components/block-link/block-link.less +1 -1
  15. package/lib/components/button/button.less +222 -374
  16. package/lib/components/button-group/button-group.less +1 -1
  17. package/lib/components/card/card.less +1 -1
  18. package/lib/components/checkbox_radio/checkbox_radio.less +13 -11
  19. package/lib/components/input-icon/input-icon.less +3 -3
  20. package/lib/components/input_textarea/input_textarea.less +70 -58
  21. package/lib/components/link/link.less +1 -1
  22. package/lib/components/link-preview/link-preview.less +6 -6
  23. package/lib/components/menu/menu.less +100 -21
  24. package/lib/components/modal/modal.less +11 -11
  25. package/lib/components/navigation/navigation.less +61 -37
  26. package/lib/components/notice/notice.less +1 -1
  27. package/lib/components/pagination/pagination.less +44 -43
  28. package/lib/components/popover/popover.less +3 -103
  29. package/lib/components/popover/popover.ts +0 -6
  30. package/lib/components/popover/tooltip.ts +0 -12
  31. package/lib/components/post-summary/post-summary.less +4 -3
  32. package/lib/components/progress-bar/progress-bar.less +13 -12
  33. package/lib/components/prose/prose.less +2 -2
  34. package/lib/components/select/select.less +26 -37
  35. package/lib/components/skeleton/skeleton.less +1 -1
  36. package/lib/components/tag/tag.less +59 -70
  37. package/lib/components/toggle-switch/toggle-switch.less +4 -2
  38. package/lib/components/topbar/topbar.less +3 -3
  39. package/lib/components/uploader/uploader.less +3 -3
  40. package/lib/exports/color-mixins.less +13 -3
  41. package/lib/exports/color-sets.less +256 -216
  42. package/lib/exports/constants-helpers.less +5 -3
  43. package/lib/exports/constants-type.less +25 -25
  44. package/lib/exports/mixins.less +2 -2
  45. package/lib/stacks-static.less +1 -1
  46. package/package.json +1 -1
  47. 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
+ }
package/lib/components/block-link/block-link.less CHANGED
@@ -62,7 +62,7 @@ a.s-block-link,
62
62
 
63
63
  &:focus-visible,
64
64
  &.focus-inset {
65
- border-radius: var(--br-sm);
65
+ border-radius: var(--br-md);
66
66
  }
67
67
 
68
68
  background-color: var(--_bl-bg); // [1]