unigrid.css 0.3.0 → 0.3.2

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 (44) hide show
  1. package/README.md +101 -101
  2. package/dist/dropdown.js +36 -36
  3. package/dist/scrollspy.js +57 -57
  4. package/dist/tabs.js +30 -30
  5. package/dist/unigrid.css +4608 -4501
  6. package/dist/unigrid.js +173 -124
  7. package/dist/unigrid.min.css +1 -1
  8. package/dist/unigrid.min.js +1 -1
  9. package/package.json +70 -41
  10. package/src/js/dropdown.js +49 -49
  11. package/src/js/index.js +20 -19
  12. package/src/js/modal.js +81 -0
  13. package/src/js/scrollspy.js +87 -87
  14. package/src/js/tabs.js +58 -58
  15. package/src/scss/_accordion.scss +123 -123
  16. package/src/scss/_broadside.scss +125 -125
  17. package/src/scss/_buttons.scss +241 -241
  18. package/src/scss/_card.scss +168 -168
  19. package/src/scss/_components.scss +140 -140
  20. package/src/scss/_container.scss +53 -53
  21. package/src/scss/_dropdown.scss +178 -178
  22. package/src/scss/_footer.scss +147 -147
  23. package/src/scss/_formats.scss +64 -64
  24. package/src/scss/_forms.scss +192 -192
  25. package/src/scss/_grid.scss +114 -114
  26. package/src/scss/_header.scss +169 -169
  27. package/src/scss/_hero.scss +262 -262
  28. package/src/scss/_mixins.scss +120 -120
  29. package/src/scss/_modal.scss +158 -0
  30. package/src/scss/_modules.scss +238 -238
  31. package/src/scss/_navbar.scss +341 -341
  32. package/src/scss/_pagination.scss +160 -160
  33. package/src/scss/_prose.scss +393 -393
  34. package/src/scss/_reset.scss +82 -82
  35. package/src/scss/_scrollspy.scss +62 -62
  36. package/src/scss/_section.scss +91 -91
  37. package/src/scss/_sidebar.scss +147 -147
  38. package/src/scss/_table.scss +122 -122
  39. package/src/scss/_tabs.scss +178 -178
  40. package/src/scss/_typography.scss +105 -105
  41. package/src/scss/_utilities.scss +79 -79
  42. package/src/scss/_variables.scss +183 -183
  43. package/src/scss/unigrid.scss +50 -49
  44. package/dist/index.js +0 -5
package/dist/unigrid.js CHANGED
@@ -1,124 +1,173 @@
1
- (() => {
2
- // src/js/dropdown.js
3
- (function() {
4
- function init() {
5
- document.addEventListener("click", function(e) {
6
- var trigger = e.target.closest(".ug-dropdown__trigger");
7
- if (trigger) {
8
- e.preventDefault();
9
- }
10
- document.querySelectorAll(".ug-dropdown--open").forEach(function(dd) {
11
- if (dd.closest(".docs-example__preview")) return;
12
- if (!trigger || dd !== trigger.closest(".ug-dropdown")) {
13
- dd.classList.remove("ug-dropdown--open");
14
- }
15
- });
16
- if (trigger) {
17
- var dropdown = trigger.closest(".ug-dropdown");
18
- if (dropdown) {
19
- dropdown.classList.toggle("ug-dropdown--open");
20
- }
21
- }
22
- });
23
- document.addEventListener("keydown", function(e) {
24
- if (e.key === "Escape") {
25
- document.querySelectorAll(".ug-dropdown--open").forEach(function(dd) {
26
- dd.classList.remove("ug-dropdown--open");
27
- });
28
- }
29
- });
30
- }
31
- if (document.readyState === "loading") {
32
- document.addEventListener("DOMContentLoaded", init);
33
- } else {
34
- init();
35
- }
36
- })();
37
-
38
- // src/js/tabs.js
39
- (function() {
40
- function init() {
41
- document.addEventListener("click", function(e) {
42
- var link = e.target.closest("[data-ug-tab]");
43
- if (!link) return;
44
- e.preventDefault();
45
- var tabs = link.closest(".ug-tabs");
46
- if (!tabs) return;
47
- var target = link.getAttribute("data-ug-tab");
48
- tabs.querySelectorAll(".ug-tabs__link").forEach(function(l) {
49
- l.classList.remove("ug-tabs__link--active");
50
- });
51
- tabs.querySelectorAll(".ug-tabs__panel").forEach(function(p) {
52
- p.classList.remove("ug-tabs__panel--active");
53
- });
54
- link.classList.add("ug-tabs__link--active");
55
- var panel = tabs.querySelector('[data-ug-panel="' + target + '"]');
56
- if (panel) {
57
- panel.classList.add("ug-tabs__panel--active");
58
- }
59
- });
60
- }
61
- if (document.readyState === "loading") {
62
- document.addEventListener("DOMContentLoaded", init);
63
- } else {
64
- init();
65
- }
66
- })();
67
-
68
- // src/js/scrollspy.js
69
- (function() {
70
- function init() {
71
- document.querySelectorAll("[data-ug-scrollspy]").forEach(function(nav) {
72
- var links = nav.querySelectorAll(".ug-scrollspy__link, [data-ug-spy]");
73
- if (!links.length) return;
74
- var offset = parseInt(nav.getAttribute("data-ug-scrollspy-offset") || "100", 10);
75
- var activeClass = nav.getAttribute("data-ug-scrollspy-class") || "ug-scrollspy__link--active";
76
- var targets = [];
77
- links.forEach(function(link) {
78
- var href = link.getAttribute("href");
79
- if (!href || href.charAt(0) !== "#") return;
80
- var target = document.querySelector(href);
81
- if (target) {
82
- targets.push({ link, target });
83
- }
84
- });
85
- if (!targets.length) return;
86
- var visibleSections = /* @__PURE__ */ new Set();
87
- var observer = new IntersectionObserver(function(entries) {
88
- entries.forEach(function(entry) {
89
- if (entry.isIntersecting) {
90
- visibleSections.add(entry.target.id);
91
- } else {
92
- visibleSections.delete(entry.target.id);
93
- }
94
- });
95
- var activeId = null;
96
- for (var i = 0; i < targets.length; i++) {
97
- if (visibleSections.has(targets[i].target.id)) {
98
- activeId = targets[i].target.id;
99
- break;
100
- }
101
- }
102
- targets.forEach(function(item) {
103
- if (item.target.id === activeId) {
104
- item.link.classList.add(activeClass);
105
- } else {
106
- item.link.classList.remove(activeClass);
107
- }
108
- });
109
- }, {
110
- rootMargin: "-" + offset + "px 0px -50% 0px",
111
- threshold: 0
112
- });
113
- targets.forEach(function(item) {
114
- observer.observe(item.target);
115
- });
116
- });
117
- }
118
- if (document.readyState === "loading") {
119
- document.addEventListener("DOMContentLoaded", init);
120
- } else {
121
- init();
122
- }
123
- })();
124
- })();
1
+ (() => {
2
+ // src/js/dropdown.js
3
+ (function() {
4
+ function init() {
5
+ document.addEventListener("click", function(e) {
6
+ var trigger = e.target.closest(".ug-dropdown__trigger");
7
+ if (trigger) {
8
+ e.preventDefault();
9
+ }
10
+ document.querySelectorAll(".ug-dropdown--open").forEach(function(dd) {
11
+ if (dd.closest(".docs-example__preview")) return;
12
+ if (!trigger || dd !== trigger.closest(".ug-dropdown")) {
13
+ dd.classList.remove("ug-dropdown--open");
14
+ }
15
+ });
16
+ if (trigger) {
17
+ var dropdown = trigger.closest(".ug-dropdown");
18
+ if (dropdown) {
19
+ dropdown.classList.toggle("ug-dropdown--open");
20
+ }
21
+ }
22
+ });
23
+ document.addEventListener("keydown", function(e) {
24
+ if (e.key === "Escape") {
25
+ document.querySelectorAll(".ug-dropdown--open").forEach(function(dd) {
26
+ dd.classList.remove("ug-dropdown--open");
27
+ });
28
+ }
29
+ });
30
+ }
31
+ if (document.readyState === "loading") {
32
+ document.addEventListener("DOMContentLoaded", init);
33
+ } else {
34
+ init();
35
+ }
36
+ })();
37
+
38
+ // src/js/tabs.js
39
+ (function() {
40
+ function init() {
41
+ document.addEventListener("click", function(e) {
42
+ var link = e.target.closest("[data-ug-tab]");
43
+ if (!link) return;
44
+ e.preventDefault();
45
+ var tabs = link.closest(".ug-tabs");
46
+ if (!tabs) return;
47
+ var target = link.getAttribute("data-ug-tab");
48
+ tabs.querySelectorAll(".ug-tabs__link").forEach(function(l) {
49
+ l.classList.remove("ug-tabs__link--active");
50
+ });
51
+ tabs.querySelectorAll(".ug-tabs__panel").forEach(function(p) {
52
+ p.classList.remove("ug-tabs__panel--active");
53
+ });
54
+ link.classList.add("ug-tabs__link--active");
55
+ var panel = tabs.querySelector('[data-ug-panel="' + target + '"]');
56
+ if (panel) {
57
+ panel.classList.add("ug-tabs__panel--active");
58
+ }
59
+ });
60
+ }
61
+ if (document.readyState === "loading") {
62
+ document.addEventListener("DOMContentLoaded", init);
63
+ } else {
64
+ init();
65
+ }
66
+ })();
67
+
68
+ // src/js/scrollspy.js
69
+ (function() {
70
+ function init() {
71
+ document.querySelectorAll("[data-ug-scrollspy]").forEach(function(nav) {
72
+ var links = nav.querySelectorAll(".ug-scrollspy__link, [data-ug-spy]");
73
+ if (!links.length) return;
74
+ var offset = parseInt(nav.getAttribute("data-ug-scrollspy-offset") || "100", 10);
75
+ var activeClass = nav.getAttribute("data-ug-scrollspy-class") || "ug-scrollspy__link--active";
76
+ var targets = [];
77
+ links.forEach(function(link) {
78
+ var href = link.getAttribute("href");
79
+ if (!href || href.charAt(0) !== "#") return;
80
+ var target = document.querySelector(href);
81
+ if (target) {
82
+ targets.push({ link, target });
83
+ }
84
+ });
85
+ if (!targets.length) return;
86
+ var visibleSections = /* @__PURE__ */ new Set();
87
+ var observer = new IntersectionObserver(function(entries) {
88
+ entries.forEach(function(entry) {
89
+ if (entry.isIntersecting) {
90
+ visibleSections.add(entry.target.id);
91
+ } else {
92
+ visibleSections.delete(entry.target.id);
93
+ }
94
+ });
95
+ var activeId = null;
96
+ for (var i = 0; i < targets.length; i++) {
97
+ if (visibleSections.has(targets[i].target.id)) {
98
+ activeId = targets[i].target.id;
99
+ break;
100
+ }
101
+ }
102
+ targets.forEach(function(item) {
103
+ if (item.target.id === activeId) {
104
+ item.link.classList.add(activeClass);
105
+ } else {
106
+ item.link.classList.remove(activeClass);
107
+ }
108
+ });
109
+ }, {
110
+ rootMargin: "-" + offset + "px 0px -50% 0px",
111
+ threshold: 0
112
+ });
113
+ targets.forEach(function(item) {
114
+ observer.observe(item.target);
115
+ });
116
+ });
117
+ }
118
+ if (document.readyState === "loading") {
119
+ document.addEventListener("DOMContentLoaded", init);
120
+ } else {
121
+ init();
122
+ }
123
+ })();
124
+
125
+ // src/js/modal.js
126
+ (function() {
127
+ function openModal(id) {
128
+ var modal = document.getElementById(id);
129
+ if (!modal) return;
130
+ modal.classList.add("ug-modal--open");
131
+ document.body.classList.add("ug-modal-open");
132
+ }
133
+ function closeModal(modal) {
134
+ if (!modal) return;
135
+ modal.classList.remove("ug-modal--open");
136
+ if (!document.querySelector(".ug-modal--open")) {
137
+ document.body.classList.remove("ug-modal-open");
138
+ }
139
+ }
140
+ function closeAllModals() {
141
+ document.querySelectorAll(".ug-modal--open").forEach(function(m) {
142
+ m.classList.remove("ug-modal--open");
143
+ });
144
+ document.body.classList.remove("ug-modal-open");
145
+ }
146
+ function init() {
147
+ document.addEventListener("click", function(e) {
148
+ var openTrigger = e.target.closest("[data-ug-modal-open]");
149
+ if (openTrigger) {
150
+ e.preventDefault();
151
+ openModal(openTrigger.getAttribute("data-ug-modal-open"));
152
+ return;
153
+ }
154
+ var closeTrigger = e.target.closest("[data-ug-modal-close]");
155
+ if (closeTrigger) {
156
+ e.preventDefault();
157
+ var modal = closeTrigger.closest(".ug-modal");
158
+ closeModal(modal);
159
+ }
160
+ });
161
+ document.addEventListener("keydown", function(e) {
162
+ if (e.key === "Escape") {
163
+ closeAllModals();
164
+ }
165
+ });
166
+ }
167
+ if (document.readyState === "loading") {
168
+ document.addEventListener("DOMContentLoaded", init);
169
+ } else {
170
+ init();
171
+ }
172
+ })();
173
+ })();