unigrid.css 0.3.0 → 0.3.1

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 (42) 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 +4501 -4501
  6. package/dist/unigrid.js +124 -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 +19 -19
  12. package/src/js/scrollspy.js +87 -87
  13. package/src/js/tabs.js +58 -58
  14. package/src/scss/_accordion.scss +123 -123
  15. package/src/scss/_broadside.scss +125 -125
  16. package/src/scss/_buttons.scss +241 -241
  17. package/src/scss/_card.scss +168 -168
  18. package/src/scss/_components.scss +140 -140
  19. package/src/scss/_container.scss +53 -53
  20. package/src/scss/_dropdown.scss +178 -178
  21. package/src/scss/_footer.scss +147 -147
  22. package/src/scss/_formats.scss +64 -64
  23. package/src/scss/_forms.scss +192 -192
  24. package/src/scss/_grid.scss +114 -114
  25. package/src/scss/_header.scss +169 -169
  26. package/src/scss/_hero.scss +262 -262
  27. package/src/scss/_mixins.scss +120 -120
  28. package/src/scss/_modules.scss +238 -238
  29. package/src/scss/_navbar.scss +341 -341
  30. package/src/scss/_pagination.scss +160 -160
  31. package/src/scss/_prose.scss +393 -393
  32. package/src/scss/_reset.scss +82 -82
  33. package/src/scss/_scrollspy.scss +62 -62
  34. package/src/scss/_section.scss +91 -91
  35. package/src/scss/_sidebar.scss +147 -147
  36. package/src/scss/_table.scss +122 -122
  37. package/src/scss/_tabs.scss +178 -178
  38. package/src/scss/_typography.scss +105 -105
  39. package/src/scss/_utilities.scss +79 -79
  40. package/src/scss/_variables.scss +183 -183
  41. package/src/scss/unigrid.scss +49 -49
  42. 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
+ }