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/_buttons.scss CHANGED
@@ -1,241 +1,241 @@
1
- // ==========================================================================
2
- // Unigrid CSS Framework — Buttons (BEM)
3
- //
4
- // Block: .ug-btn
5
- // Elements: __icon
6
- // Modifiers: --black, --brown, --red, --green, --blue, --light, --ghost,
7
- // --sm, --lg, --block, --disabled
8
- // ==========================================================================
9
-
10
- @use "sass:color";
11
- @use "variables" as *;
12
- @use "mixins" as *;
13
-
14
- .ug-btn {
15
- display: inline-flex;
16
- align-items: center;
17
- justify-content: center;
18
- gap: calc(var(--ug-leading) * 0.5);
19
- height: calc(var(--ug-leading) * 1.5);
20
- padding: 0 var(--ug-leading);
21
- @include ug-font-size("base");
22
- @include ug-font-weight("bold");
23
- font-family: inherit;
24
- text-decoration: none;
25
- text-align: center;
26
- white-space: nowrap;
27
- cursor: pointer;
28
- border: 2px solid $ug-black;
29
- background-color: $ug-black;
30
- color: $ug-white;
31
- transition: background-color 0.15s, border-color 0.15s, color 0.15s;
32
-
33
- &:hover {
34
- background-color: $ug-dark-gray;
35
- border-color: $ug-dark-gray;
36
- color: $ug-white;
37
- text-decoration: none;
38
- }
39
-
40
- &:active {
41
- background-color: color.adjust($ug-black, $lightness: -5%);
42
- border-color: color.adjust($ug-black, $lightness: -5%);
43
- }
44
-
45
- // ==============================
46
- // Color Variants
47
- // ==============================
48
-
49
- &--brown {
50
- background-color: $ug-brown;
51
- border-color: $ug-brown;
52
-
53
- &:hover {
54
- background-color: color.adjust($ug-brown, $lightness: 8%);
55
- border-color: color.adjust($ug-brown, $lightness: 8%);
56
- }
57
- }
58
-
59
- &--red {
60
- background-color: $ug-red;
61
- border-color: $ug-red;
62
-
63
- &:hover {
64
- background-color: color.adjust($ug-red, $lightness: 8%);
65
- border-color: color.adjust($ug-red, $lightness: 8%);
66
- }
67
- }
68
-
69
- &--green {
70
- background-color: $ug-green;
71
- border-color: $ug-green;
72
-
73
- &:hover {
74
- background-color: color.adjust($ug-green, $lightness: 8%);
75
- border-color: color.adjust($ug-green, $lightness: 8%);
76
- }
77
- }
78
-
79
- &--blue {
80
- background-color: $ug-blue;
81
- border-color: $ug-blue;
82
-
83
- &:hover {
84
- background-color: color.adjust($ug-blue, $lightness: 8%);
85
- border-color: color.adjust($ug-blue, $lightness: 8%);
86
- }
87
- }
88
-
89
- // Light: dark text on light bg
90
- &--light {
91
- background-color: $ug-warm-gray;
92
- border-color: $ug-warm-gray;
93
- color: $ug-black;
94
-
95
- &:hover {
96
- background-color: color.adjust($ug-warm-gray, $lightness: -5%);
97
- border-color: color.adjust($ug-warm-gray, $lightness: -5%);
98
- color: $ug-black;
99
- }
100
- }
101
-
102
- // ==============================
103
- // Outline / Ghost Variants
104
- // ==============================
105
-
106
- // Outline: transparent bg, colored border + text
107
- &--outline {
108
- background-color: transparent;
109
- color: $ug-black;
110
-
111
- &:hover {
112
- background-color: $ug-black;
113
- color: $ug-white;
114
- }
115
-
116
- // Outline color variants
117
- &.ug-btn--brown {
118
- border-color: $ug-brown;
119
- color: $ug-brown;
120
- background-color: transparent;
121
- &:hover { background-color: $ug-brown; color: $ug-white; }
122
- }
123
-
124
- &.ug-btn--red {
125
- border-color: $ug-red;
126
- color: $ug-red;
127
- background-color: transparent;
128
- &:hover { background-color: $ug-red; color: $ug-white; }
129
- }
130
-
131
- &.ug-btn--green {
132
- border-color: $ug-green;
133
- color: $ug-green;
134
- background-color: transparent;
135
- &:hover { background-color: $ug-green; color: $ug-white; }
136
- }
137
-
138
- &.ug-btn--blue {
139
- border-color: $ug-blue;
140
- color: $ug-blue;
141
- background-color: transparent;
142
- &:hover { background-color: $ug-blue; color: $ug-white; }
143
- }
144
-
145
- &.ug-btn--light {
146
- border-color: $ug-light-gray;
147
- color: $ug-dark-gray;
148
- background-color: transparent;
149
- &:hover { background-color: $ug-warm-gray; color: $ug-black; }
150
- }
151
- }
152
-
153
- // Ghost: no border, just text with hover bg
154
- &--ghost {
155
- background-color: transparent;
156
- border-color: transparent;
157
- color: $ug-black;
158
-
159
- &:hover {
160
- background-color: $ug-warm-gray;
161
- border-color: $ug-warm-gray;
162
- color: $ug-black;
163
- }
164
- }
165
-
166
- // ==============================
167
- // Size Variants
168
- // ==============================
169
-
170
- // sm = 1 leading height
171
- &--sm {
172
- @include ug-font-size("sm");
173
- height: var(--ug-leading);
174
- padding: 0 calc(var(--ug-leading) * 0.5);
175
- }
176
-
177
- // lg = 2 leading height
178
- &--lg {
179
- @include ug-font-size("lg");
180
- height: calc(var(--ug-leading) * 2);
181
- padding: 0 calc(var(--ug-leading) * 1.5);
182
- }
183
-
184
- // ==============================
185
- // Layout Variants
186
- // ==============================
187
-
188
- // Full width
189
- &--block {
190
- display: flex;
191
- width: 100%;
192
- }
193
-
194
- // ==============================
195
- // States
196
- // ==============================
197
-
198
- &--disabled,
199
- &:disabled {
200
- opacity: 0.4;
201
- cursor: not-allowed;
202
- pointer-events: none;
203
- }
204
-
205
- // ==============================
206
- // Icon element
207
- // ==============================
208
-
209
- &__icon {
210
- display: inline-flex;
211
- width: 1em;
212
- height: 1em;
213
- flex-shrink: 0;
214
-
215
- svg {
216
- width: 100%;
217
- height: 100%;
218
- }
219
- }
220
-
221
- // ==============================
222
- // Button Group
223
- // ==============================
224
- }
225
-
226
- .ug-btn-group {
227
- display: inline-flex;
228
- gap: 0;
229
-
230
- .ug-btn {
231
- border-radius: 0;
232
-
233
- &:not(:last-child) {
234
- border-right-width: 1px;
235
- }
236
-
237
- &:not(:first-child) {
238
- border-left-width: 1px;
239
- }
240
- }
241
- }
1
+ // ==========================================================================
2
+ // Unigrid CSS Framework — Buttons (BEM)
3
+ //
4
+ // Block: .ug-btn
5
+ // Elements: __icon
6
+ // Modifiers: --black, --brown, --red, --green, --blue, --light, --ghost,
7
+ // --sm, --lg, --block, --disabled
8
+ // ==========================================================================
9
+
10
+ @use "sass:color";
11
+ @use "variables" as *;
12
+ @use "mixins" as *;
13
+
14
+ .ug-btn {
15
+ display: inline-flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ gap: calc(var(--ug-leading) * 0.5);
19
+ height: calc(var(--ug-leading) * 1.5);
20
+ padding: 0 var(--ug-leading);
21
+ @include ug-font-size("base");
22
+ @include ug-font-weight("bold");
23
+ font-family: inherit;
24
+ text-decoration: none;
25
+ text-align: center;
26
+ white-space: nowrap;
27
+ cursor: pointer;
28
+ border: 2px solid $ug-black;
29
+ background-color: $ug-black;
30
+ color: $ug-white;
31
+ transition: background-color 0.15s, border-color 0.15s, color 0.15s;
32
+
33
+ &:hover {
34
+ background-color: $ug-dark-gray;
35
+ border-color: $ug-dark-gray;
36
+ color: $ug-white;
37
+ text-decoration: none;
38
+ }
39
+
40
+ &:active {
41
+ background-color: color.adjust($ug-black, $lightness: -5%);
42
+ border-color: color.adjust($ug-black, $lightness: -5%);
43
+ }
44
+
45
+ // ==============================
46
+ // Color Variants
47
+ // ==============================
48
+
49
+ &--brown {
50
+ background-color: $ug-brown;
51
+ border-color: $ug-brown;
52
+
53
+ &:hover {
54
+ background-color: color.adjust($ug-brown, $lightness: 8%);
55
+ border-color: color.adjust($ug-brown, $lightness: 8%);
56
+ }
57
+ }
58
+
59
+ &--red {
60
+ background-color: $ug-red;
61
+ border-color: $ug-red;
62
+
63
+ &:hover {
64
+ background-color: color.adjust($ug-red, $lightness: 8%);
65
+ border-color: color.adjust($ug-red, $lightness: 8%);
66
+ }
67
+ }
68
+
69
+ &--green {
70
+ background-color: $ug-green;
71
+ border-color: $ug-green;
72
+
73
+ &:hover {
74
+ background-color: color.adjust($ug-green, $lightness: 8%);
75
+ border-color: color.adjust($ug-green, $lightness: 8%);
76
+ }
77
+ }
78
+
79
+ &--blue {
80
+ background-color: $ug-blue;
81
+ border-color: $ug-blue;
82
+
83
+ &:hover {
84
+ background-color: color.adjust($ug-blue, $lightness: 8%);
85
+ border-color: color.adjust($ug-blue, $lightness: 8%);
86
+ }
87
+ }
88
+
89
+ // Light: dark text on light bg
90
+ &--light {
91
+ background-color: $ug-warm-gray;
92
+ border-color: $ug-warm-gray;
93
+ color: $ug-black;
94
+
95
+ &:hover {
96
+ background-color: color.adjust($ug-warm-gray, $lightness: -5%);
97
+ border-color: color.adjust($ug-warm-gray, $lightness: -5%);
98
+ color: $ug-black;
99
+ }
100
+ }
101
+
102
+ // ==============================
103
+ // Outline / Ghost Variants
104
+ // ==============================
105
+
106
+ // Outline: transparent bg, colored border + text
107
+ &--outline {
108
+ background-color: transparent;
109
+ color: $ug-black;
110
+
111
+ &:hover {
112
+ background-color: $ug-black;
113
+ color: $ug-white;
114
+ }
115
+
116
+ // Outline color variants
117
+ &.ug-btn--brown {
118
+ border-color: $ug-brown;
119
+ color: $ug-brown;
120
+ background-color: transparent;
121
+ &:hover { background-color: $ug-brown; color: $ug-white; }
122
+ }
123
+
124
+ &.ug-btn--red {
125
+ border-color: $ug-red;
126
+ color: $ug-red;
127
+ background-color: transparent;
128
+ &:hover { background-color: $ug-red; color: $ug-white; }
129
+ }
130
+
131
+ &.ug-btn--green {
132
+ border-color: $ug-green;
133
+ color: $ug-green;
134
+ background-color: transparent;
135
+ &:hover { background-color: $ug-green; color: $ug-white; }
136
+ }
137
+
138
+ &.ug-btn--blue {
139
+ border-color: $ug-blue;
140
+ color: $ug-blue;
141
+ background-color: transparent;
142
+ &:hover { background-color: $ug-blue; color: $ug-white; }
143
+ }
144
+
145
+ &.ug-btn--light {
146
+ border-color: $ug-light-gray;
147
+ color: $ug-dark-gray;
148
+ background-color: transparent;
149
+ &:hover { background-color: $ug-warm-gray; color: $ug-black; }
150
+ }
151
+ }
152
+
153
+ // Ghost: no border, just text with hover bg
154
+ &--ghost {
155
+ background-color: transparent;
156
+ border-color: transparent;
157
+ color: $ug-black;
158
+
159
+ &:hover {
160
+ background-color: $ug-warm-gray;
161
+ border-color: $ug-warm-gray;
162
+ color: $ug-black;
163
+ }
164
+ }
165
+
166
+ // ==============================
167
+ // Size Variants
168
+ // ==============================
169
+
170
+ // sm = 1 leading height
171
+ &--sm {
172
+ @include ug-font-size("sm");
173
+ height: var(--ug-leading);
174
+ padding: 0 calc(var(--ug-leading) * 0.5);
175
+ }
176
+
177
+ // lg = 2 leading height
178
+ &--lg {
179
+ @include ug-font-size("lg");
180
+ height: calc(var(--ug-leading) * 2);
181
+ padding: 0 calc(var(--ug-leading) * 1.5);
182
+ }
183
+
184
+ // ==============================
185
+ // Layout Variants
186
+ // ==============================
187
+
188
+ // Full width
189
+ &--block {
190
+ display: flex;
191
+ width: 100%;
192
+ }
193
+
194
+ // ==============================
195
+ // States
196
+ // ==============================
197
+
198
+ &--disabled,
199
+ &:disabled {
200
+ opacity: 0.4;
201
+ cursor: not-allowed;
202
+ pointer-events: none;
203
+ }
204
+
205
+ // ==============================
206
+ // Icon element
207
+ // ==============================
208
+
209
+ &__icon {
210
+ display: inline-flex;
211
+ width: 1em;
212
+ height: 1em;
213
+ flex-shrink: 0;
214
+
215
+ svg {
216
+ width: 100%;
217
+ height: 100%;
218
+ }
219
+ }
220
+
221
+ // ==============================
222
+ // Button Group
223
+ // ==============================
224
+ }
225
+
226
+ .ug-btn-group {
227
+ display: inline-flex;
228
+ gap: 0;
229
+
230
+ .ug-btn {
231
+ border-radius: 0;
232
+
233
+ &:not(:last-child) {
234
+ border-right-width: 1px;
235
+ }
236
+
237
+ &:not(:first-child) {
238
+ border-left-width: 1px;
239
+ }
240
+ }
241
+ }