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/src/scss/_pagination.scss CHANGED
@@ -1,160 +1,160 @@
1
- // ==========================================================================
2
- // Unigrid CSS Framework — Pagination (BEM)
3
- //
4
- // Inspired by GOV.UK Design System pagination.
5
- // Two variants: block-level (prev/next with labels) and numbered list.
6
- //
7
- // Block: .ug-pagination
8
- // Elements: __prev, __next, __label, __title, __list, __item, __link,
9
- // __ellipsis, __arrow
10
- // Modifiers: --block
11
- // __item--current, __item--ellipsis
12
- // ==========================================================================
13
-
14
- @use "variables" as *;
15
- @use "mixins" as *;
16
-
17
- .ug-pagination {
18
- display: flex;
19
- align-items: center;
20
- justify-content: center;
21
- gap: 0;
22
- @include ug-rhythm-margin-top(1);
23
- @include ug-rhythm-margin-bottom(1);
24
-
25
- // ==============================
26
- // Numbered Pagination
27
- // ==============================
28
-
29
- &__list {
30
- display: flex;
31
- align-items: center;
32
- gap: 0;
33
- list-style: none;
34
- margin: 0;
35
- padding: 0;
36
- }
37
-
38
- &__item {
39
- display: flex;
40
- }
41
-
42
- &__link {
43
- display: inline-flex;
44
- align-items: center;
45
- justify-content: center;
46
- min-width: calc(var(--ug-leading) * 1.5);
47
- height: calc(var(--ug-leading) * 1.5);
48
- padding: 0 calc(var(--ug-leading) * 0.25);
49
- @include ug-font-size("base");
50
- @include ug-font-weight("regular");
51
- color: $ug-black;
52
- text-decoration: none;
53
- border-bottom: 2px solid transparent;
54
- transition: border-color 0.15s, color 0.15s;
55
-
56
- &:hover {
57
- border-bottom-color: $ug-black;
58
- }
59
- }
60
-
61
- // Current page
62
- &__item--current &__link {
63
- @include ug-font-weight("bold");
64
- border-bottom-color: $ug-black;
65
- }
66
-
67
- // Ellipsis
68
- &__ellipsis {
69
- display: inline-flex;
70
- align-items: center;
71
- justify-content: center;
72
- min-width: calc(var(--ug-leading) * 1.5);
73
- height: calc(var(--ug-leading) * 1.5);
74
- @include ug-font-size("base");
75
- color: $ug-medium-gray;
76
- }
77
-
78
- // Arrow icons (prev/next in numbered mode)
79
- &__arrow {
80
- display: inline-flex;
81
- align-items: center;
82
- justify-content: center;
83
- min-width: calc(var(--ug-leading) * 1.5);
84
- height: calc(var(--ug-leading) * 1.5);
85
- @include ug-font-size("base");
86
- color: $ug-black;
87
- text-decoration: none;
88
- transition: color 0.15s;
89
-
90
- &:hover {
91
- color: $ug-medium-gray;
92
- }
93
-
94
- // Disabled arrow
95
- &--disabled {
96
- color: $ug-light-gray;
97
- pointer-events: none;
98
- }
99
-
100
- // SVG/icon inside
101
- svg {
102
- width: 0.75em;
103
- height: 0.75em;
104
- }
105
- }
106
-
107
- // ==============================
108
- // Block Pagination (prev/next)
109
- // ==============================
110
-
111
- &--block {
112
- flex-direction: column;
113
- gap: var(--ug-leading);
114
- align-items: stretch;
115
-
116
- @include ug-breakpoint("md") {
117
- flex-direction: row;
118
- justify-content: space-between;
119
- }
120
- }
121
-
122
- &__prev,
123
- &__next {
124
- display: flex;
125
- flex-direction: column;
126
- padding: var(--ug-leading);
127
- text-decoration: none;
128
- color: $ug-black;
129
- border: 1px solid $ug-light-gray;
130
- transition: border-color 0.15s, background-color 0.15s;
131
- flex: 1;
132
-
133
- &:hover {
134
- border-color: $ug-black;
135
- background-color: $ug-warm-gray;
136
- }
137
- }
138
-
139
- &__next {
140
- text-align: right;
141
- align-items: flex-end;
142
- }
143
-
144
- &__label {
145
- display: flex;
146
- align-items: center;
147
- gap: calc(var(--ug-leading) * 0.25);
148
- @include ug-font-size("sm");
149
- @include ug-rhythm-line-height(1);
150
- @include ug-font-weight("regular");
151
- color: $ug-medium-gray;
152
- @include ug-rhythm-margin-bottom(0.5);
153
- }
154
-
155
- &__title {
156
- @include ug-font-size("lg");
157
- @include ug-rhythm-line-height(1);
158
- @include ug-font-weight("bold");
159
- }
160
- }
1
+ // ==========================================================================
2
+ // Unigrid CSS Framework — Pagination (BEM)
3
+ //
4
+ // Inspired by GOV.UK Design System pagination.
5
+ // Two variants: block-level (prev/next with labels) and numbered list.
6
+ //
7
+ // Block: .ug-pagination
8
+ // Elements: __prev, __next, __label, __title, __list, __item, __link,
9
+ // __ellipsis, __arrow
10
+ // Modifiers: --block
11
+ // __item--current, __item--ellipsis
12
+ // ==========================================================================
13
+
14
+ @use "variables" as *;
15
+ @use "mixins" as *;
16
+
17
+ .ug-pagination {
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ gap: 0;
22
+ @include ug-rhythm-margin-top(1);
23
+ @include ug-rhythm-margin-bottom(1);
24
+
25
+ // ==============================
26
+ // Numbered Pagination
27
+ // ==============================
28
+
29
+ &__list {
30
+ display: flex;
31
+ align-items: center;
32
+ gap: 0;
33
+ list-style: none;
34
+ margin: 0;
35
+ padding: 0;
36
+ }
37
+
38
+ &__item {
39
+ display: flex;
40
+ }
41
+
42
+ &__link {
43
+ display: inline-flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ min-width: calc(var(--ug-leading) * 1.5);
47
+ height: calc(var(--ug-leading) * 1.5);
48
+ padding: 0 calc(var(--ug-leading) * 0.25);
49
+ @include ug-font-size("base");
50
+ @include ug-font-weight("regular");
51
+ color: $ug-black;
52
+ text-decoration: none;
53
+ border-bottom: 2px solid transparent;
54
+ transition: border-color 0.15s, color 0.15s;
55
+
56
+ &:hover {
57
+ border-bottom-color: $ug-black;
58
+ }
59
+ }
60
+
61
+ // Current page
62
+ &__item--current &__link {
63
+ @include ug-font-weight("bold");
64
+ border-bottom-color: $ug-black;
65
+ }
66
+
67
+ // Ellipsis
68
+ &__ellipsis {
69
+ display: inline-flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ min-width: calc(var(--ug-leading) * 1.5);
73
+ height: calc(var(--ug-leading) * 1.5);
74
+ @include ug-font-size("base");
75
+ color: $ug-medium-gray;
76
+ }
77
+
78
+ // Arrow icons (prev/next in numbered mode)
79
+ &__arrow {
80
+ display: inline-flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ min-width: calc(var(--ug-leading) * 1.5);
84
+ height: calc(var(--ug-leading) * 1.5);
85
+ @include ug-font-size("base");
86
+ color: $ug-black;
87
+ text-decoration: none;
88
+ transition: color 0.15s;
89
+
90
+ &:hover {
91
+ color: $ug-medium-gray;
92
+ }
93
+
94
+ // Disabled arrow
95
+ &--disabled {
96
+ color: $ug-light-gray;
97
+ pointer-events: none;
98
+ }
99
+
100
+ // SVG/icon inside
101
+ svg {
102
+ width: 0.75em;
103
+ height: 0.75em;
104
+ }
105
+ }
106
+
107
+ // ==============================
108
+ // Block Pagination (prev/next)
109
+ // ==============================
110
+
111
+ &--block {
112
+ flex-direction: column;
113
+ gap: var(--ug-leading);
114
+ align-items: stretch;
115
+
116
+ @include ug-breakpoint("md") {
117
+ flex-direction: row;
118
+ justify-content: space-between;
119
+ }
120
+ }
121
+
122
+ &__prev,
123
+ &__next {
124
+ display: flex;
125
+ flex-direction: column;
126
+ padding: var(--ug-leading);
127
+ text-decoration: none;
128
+ color: $ug-black;
129
+ border: 1px solid $ug-light-gray;
130
+ transition: border-color 0.15s, background-color 0.15s;
131
+ flex: 1;
132
+
133
+ &:hover {
134
+ border-color: $ug-black;
135
+ background-color: $ug-warm-gray;
136
+ }
137
+ }
138
+
139
+ &__next {
140
+ text-align: right;
141
+ align-items: flex-end;
142
+ }
143
+
144
+ &__label {
145
+ display: flex;
146
+ align-items: center;
147
+ gap: calc(var(--ug-leading) * 0.25);
148
+ @include ug-font-size("sm");
149
+ @include ug-rhythm-line-height(1);
150
+ @include ug-font-weight("regular");
151
+ color: $ug-medium-gray;
152
+ @include ug-rhythm-margin-bottom(0.5);
153
+ }
154
+
155
+ &__title {
156
+ @include ug-font-size("lg");
157
+ @include ug-rhythm-line-height(1);
158
+ @include ug-font-weight("bold");
159
+ }
160
+ }