sdga-ui 1.0.7 → 1.0.8

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 (33) hide show
  1. package/css/dga-ui.css +24869 -27624
  2. package/css/dga-ui.css.map +1 -1
  3. package/demo-angular/angular.json +3 -0
  4. package/demo-angular/package.json +2 -2
  5. package/demo-angular/src/app/app.html +1 -1
  6. package/demo-angular/src/app/app.routes.ts +0 -4
  7. package/demo-angular/src/app/app.ts +5 -2
  8. package/demo-angular/src/app/shared/code-example/code-example.component.html +1 -1
  9. package/demo-angular/src/app/shared/code-example/code-example.component.ts +12 -1
  10. package/demo-angular/src/app/views/buttons/buttons.component.html +95 -24
  11. package/demo-angular/src/app/views/buttons/buttons.component.scss +0 -3
  12. package/demo-angular/src/app/views/buttons/buttons.component.ts +77 -7
  13. package/demo-angular/src/app/views/footer/footer.html +138 -150
  14. package/demo-angular/src/app/views/footer/footer.ts +200 -66
  15. package/demo-angular/src/app/views/links/links.component.ts +1 -1
  16. package/demo-angular/tsconfig.app.json +2 -1
  17. package/package.json +1 -1
  18. package/theme/_variables.scss +0 -1
  19. package/theme/components/_buttons.scss +1 -302
  20. package/theme/config/_base.scss +1 -1
  21. package/theme/customizations/_alerts.scss +15 -14
  22. package/theme/customizations/_buttons.scss +305 -244
  23. package/theme/customizations/_footer.scss +122 -45
  24. package/theme/customizations/_global.scss +20 -2
  25. package/theme/customizations/_links.scss +45 -44
  26. package/theme/customizations/_toasts.scss +13 -14
  27. package/theme/dga-ui.scss +1 -2
  28. package/demo-angular/src/app/views/contexts/contexts.component.html +0 -204
  29. package/demo-angular/src/app/views/contexts/contexts.component.ts +0 -10
  30. package/demo-angular/src/app/views/footer/footer.scss +0 -0
  31. package/demo-angular/src/app/views/footer/footer.spec.ts +0 -23
  32. package/theme/config/_contexts.scss +0 -471
  33. package/theme/customizations/_contexts.scss +0 -432
package/demo-angular/src/app/views/footer/footer.html CHANGED
@@ -1,10 +1,10 @@
1
1
  <footer class="dga-footer on-primary">
2
- <div class="container-fluid">
2
+ <div class="dga-footer-content container-fluid">
3
3
  <!-- Main Footer Content -->
4
- <div class="row dga-list-group-container">
4
+ <div class="dga-footer-nav-wrapper">
5
5
  <!-- Footer Link Groups (5 columns) -->
6
- <div class="col-6 col-md-4 col-lg dga-link-group">
7
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
6
+ <div class="dga-footer-nav-group">
7
+ <h6 class="dga-footer-section-title">Group Label</h6>
8
8
  <ul class="list-unstyled">
9
9
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
10
10
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -14,8 +14,8 @@
14
14
  </ul>
15
15
  </div>
16
16
 
17
- <div class="col-6 col-md-4 col-lg dga-link-group">
18
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
17
+ <div class="dga-footer-nav-group">
18
+ <h6 class="dga-footer-section-title">Group Label</h6>
19
19
  <ul class="list-unstyled">
20
20
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
21
21
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -25,8 +25,8 @@
25
25
  </ul>
26
26
  </div>
27
27
 
28
- <div class="col-6 col-md-4 col-lg dga-link-group">
29
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
28
+ <div class="dga-footer-nav-group">
29
+ <h6 class="dga-footer-section-title">Group Label</h6>
30
30
  <ul class="list-unstyled">
31
31
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
32
32
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -36,8 +36,8 @@
36
36
  </ul>
37
37
  </div>
38
38
 
39
- <div class="col-6 col-md-4 col-lg dga-link-group">
40
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
39
+ <div class="dga-footer-nav-group">
40
+ <h6 class="dga-footer-section-title">Group Label</h6>
41
41
  <ul class="list-unstyled">
42
42
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
43
43
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -47,8 +47,8 @@
47
47
  </ul>
48
48
  </div>
49
49
 
50
- <div class="col-6 col-md-4 col-lg dga-link-group">
51
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
50
+ <div class="dga-footer-nav-group">
51
+ <h6 class="dga-footer-section-title">Group Label</h6>
52
52
  <ul class="list-unstyled">
53
53
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
54
54
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -59,94 +59,87 @@
59
59
  </div>
60
60
 
61
61
  <!-- Social Media & Accessibility -->
62
- <div class="col-12 col-lg-auto">
63
- <div class="dga-social-container">
64
- <!-- Social Media -->
65
- <div>
66
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
67
- <div class="d-flex gap-2 flex-wrap">
68
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
69
- <i class="bi bi-twitter"></i>
70
- </button>
71
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
72
- <i class="bi bi-facebook"></i>
73
- </button>
74
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
75
- <i class="bi bi-instagram"></i>
76
- </button>
77
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
78
- <i class="bi bi-linkedin"></i>
79
- </button>
62
+ <div class="dga-footer-social">
63
+ <!-- Social Media -->
64
+ <div class="dga-footer-nav-group">
65
+ <h6 class="dga-footer-section-title">Social Media</h6>
66
+ <div class="d-flex gap-2 flex-wrap">
67
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
68
+ <i class="bi bi-twitter"></i>
69
+ </a>
70
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
71
+ <i class="bi bi-facebook"></i>
72
+ </a>
73
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
74
+ <i class="bi bi-instagram"></i>
75
+ </a>
76
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
77
+ <i class="bi bi-linkedin"></i>
78
+ </a>
79
+ </div>
80
80
  </div>
81
- </div>
82
81
 
83
- <!-- Accessibility Tools -->
84
- <div>
85
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
86
- <div class="d-flex gap-2 flex-wrap">
87
- <button class="btn btn-outline-secondary btn-icon">
88
- <i class="bi bi-eye"></i>
89
- </button>
90
- <button class="btn btn-outline-secondary btn-icon">
91
- <i class="bi bi-volume-up"></i>
92
- </button>
93
- <button class="btn btn-outline-secondary btn-icon">
94
- <i class="bi bi-universal-access"></i>
95
- </button>
82
+ <!-- Accessibility Tools -->
83
+ <div class="dga-footer-nav-group">
84
+ <h6 class="dga-footer-section-title">Accessibility Tools</h6>
85
+ <div class="d-flex gap-2 flex-wrap">
86
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
87
+ <i class="bi bi-eye"></i>
88
+ </a>
89
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
90
+ <i class="bi bi-volume-up"></i>
91
+ </a>
92
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
93
+ <i class="bi bi-universal-access"></i>
94
+ </a>
95
+ </div>
96
96
  </div>
97
- </div>
98
- </div>
99
97
  </div>
100
98
  </div>
101
99
 
102
100
  <!-- Bottom Footer -->
103
- <div class="dga-footer-bottom">
104
- <div class="row g-4 align-items-center">
105
- <div class="col-lg-8">
106
- <!-- Footer Links Row -->
107
- <div class="dga-footer-bottom-links">
108
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
109
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
110
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
111
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
112
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
113
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
114
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
115
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
116
- </div>
117
-
118
- <!-- Copyright -->
119
- <div class="dga-footer-copyright">
120
- <p class="fw-semibold small mb-2">All Right Reserved For Digital Government Authority © 2024</p>
121
- <div class="dga-footer-copyright-links">
122
- <a href="#" class="link-neutral small">Terms and Conditions</a>
123
- <a href="#" class="link-neutral small">Privacy Policy</a>
124
- </div>
125
- </div>
101
+ <div class="dga-footer-meta">
102
+ <div class="dga-footer-meta-content">
103
+ <!-- Footer Links Row -->
104
+ <div class="dga-footer-meta-links">
105
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
106
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
107
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
108
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
109
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
110
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
111
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
112
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
126
113
  </div>
127
114
 
128
- <!-- Logos -->
129
- <div class="col-lg-4">
130
- <div class="dga-logo-container">
131
- <img src="https://placehold.co/125x42" alt="logo">
132
- <img src="https://placehold.co/125x42" alt="logo">
115
+ <!-- Copyright -->
116
+ <div class="dga-footer-copyright-container">
117
+ <p class="dga-footer-copyright">All Right Reserved For Digital Government Authority © 2024</p>
118
+ <div class="dga-footer-legal-links">
119
+ <a href="#" class="link-neutral small">Terms and Conditions</a>
120
+ <a href="#" class="link-neutral small">Privacy Policy</a>
133
121
  </div>
134
122
  </div>
135
123
  </div>
124
+
125
+ <!-- Logos -->
126
+ <div class="dga-footer-logo">
127
+ <img src="https://placehold.co/125x42" alt="logo">
128
+ <img src="https://placehold.co/125x42" alt="logo">
129
+ </div>
136
130
  </div>
137
131
  </div>
138
132
  </footer>
139
133
 
140
134
  <app-code-example [htmlCode]="primaryFooterCode"></app-code-example>
141
135
 
142
-
143
- <footer class="dga-footer on-secondary">
144
- <div class="container-fluid">
136
+ <footer class="dga-footer bg-neutral-100">
137
+ <div class="dga-footer-content container-fluid">
145
138
  <!-- Main Footer Content -->
146
- <div class="row dga-list-group-container">
139
+ <div class="dga-footer-nav-wrapper">
147
140
  <!-- Footer Link Groups (5 columns) -->
148
- <div class="col-6 col-md-4 col-lg dga-link-group">
149
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
141
+ <div class="dga-footer-nav-group">
142
+ <h6 class="dga-footer-section-title">Group Label</h6>
150
143
  <ul class="list-unstyled">
151
144
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
152
145
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -156,8 +149,8 @@
156
149
  </ul>
157
150
  </div>
158
151
 
159
- <div class="col-6 col-md-4 col-lg dga-link-group">
160
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
152
+ <div class="dga-footer-nav-group">
153
+ <h6 class="dga-footer-section-title">Group Label</h6>
161
154
  <ul class="list-unstyled">
162
155
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
163
156
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -167,8 +160,8 @@
167
160
  </ul>
168
161
  </div>
169
162
 
170
- <div class="col-6 col-md-4 col-lg dga-link-group">
171
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
163
+ <div class="dga-footer-nav-group">
164
+ <h6 class="dga-footer-section-title">Group Label</h6>
172
165
  <ul class="list-unstyled">
173
166
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
174
167
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -178,8 +171,8 @@
178
171
  </ul>
179
172
  </div>
180
173
 
181
- <div class="col-6 col-md-4 col-lg dga-link-group">
182
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
174
+ <div class="dga-footer-nav-group">
175
+ <h6 class="dga-footer-section-title">Group Label</h6>
183
176
  <ul class="list-unstyled">
184
177
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
185
178
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -189,8 +182,8 @@
189
182
  </ul>
190
183
  </div>
191
184
 
192
- <div class="col-6 col-md-4 col-lg dga-link-group">
193
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
185
+ <div class="dga-footer-nav-group">
186
+ <h6 class="dga-footer-section-title">Group Label</h6>
194
187
  <ul class="list-unstyled">
195
188
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
196
189
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
@@ -201,82 +194,77 @@
201
194
  </div>
202
195
 
203
196
  <!-- Social Media & Accessibility -->
204
- <div class="col-12 col-lg-auto">
205
- <div class="dga-social-container">
206
- <!-- Social Media -->
207
- <div>
208
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
209
- <div class="d-flex gap-2 flex-wrap">
210
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
211
- <i class="bi bi-twitter"></i>
212
- </button>
213
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
214
- <i class="bi bi-facebook"></i>
215
- </button>
216
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
217
- <i class="bi bi-instagram"></i>
218
- </button>
219
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
220
- <i class="bi bi-linkedin"></i>
221
- </button>
197
+ <div class="dga-footer-social">
198
+ <!-- Social Media -->
199
+ <div class="dga-footer-nav-group">
200
+ <h6 class="dga-footer-section-title">Social Media</h6>
201
+ <div class="d-flex gap-2 flex-wrap">
202
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
203
+ <i class="bi bi-twitter"></i>
204
+ </a>
205
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
206
+ <i class="bi bi-facebook"></i>
207
+ </a>
208
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
209
+ <i class="bi bi-instagram"></i>
210
+ </a>
211
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
212
+ <i class="bi bi-linkedin"></i>
213
+ </a>
214
+ </div>
222
215
  </div>
223
- </div>
224
216
 
225
- <!-- Accessibility Tools -->
226
- <div>
227
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
228
- <div class="d-flex gap-2 flex-wrap">
229
- <button class="btn btn-outline-secondary btn-icon">
230
- <i class="bi bi-eye"></i>
231
- </button>
232
- <button class="btn btn-outline-secondary btn-icon">
233
- <i class="bi bi-volume-up"></i>
234
- </button>
235
- <button class="btn btn-outline-secondary btn-icon">
236
- <i class="bi bi-universal-access"></i>
237
- </button>
217
+ <!-- Accessibility Tools -->
218
+ <div class="dga-footer-nav-group">
219
+ <h6 class="dga-footer-section-title">Accessibility Tools</h6>
220
+ <div class="d-flex gap-2 flex-wrap">
221
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
222
+ <i class="bi bi-eye"></i>
223
+ </a>
224
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
225
+ <i class="bi bi-volume-up"></i>
226
+ </a>
227
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
228
+ <i class="bi bi-universal-access"></i>
229
+ </a>
230
+ </div>
238
231
  </div>
239
- </div>
240
- </div>
241
232
  </div>
242
233
  </div>
243
234
 
244
235
  <!-- Bottom Footer -->
245
- <div class="dga-footer-bottom">
246
- <div class="row g-4 align-items-center">
247
- <div class="col-lg-8">
248
- <!-- Footer Links Row -->
249
- <div class="dga-footer-bottom-links">
250
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
251
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
252
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
253
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
254
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
255
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
256
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
257
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
258
- </div>
259
-
260
- <!-- Copyright -->
261
- <div class="dga-footer-copyright">
262
- <p class="fw-semibold small mb-2">All Right Reserved For Digital Government Authority © 2024</p>
263
- <div class="dga-footer-copyright-links">
264
- <a href="#" class="link-neutral small">Terms and Conditions</a>
265
- <a href="#" class="link-neutral small">Privacy Policy</a>
266
- </div>
267
- </div>
236
+ <div class="dga-footer-meta">
237
+ <div class="dga-footer-meta-content">
238
+ <!-- Footer Links Row -->
239
+ <div class="dga-footer-meta-links">
240
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
241
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
242
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
243
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
244
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
245
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
246
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
247
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
268
248
  </div>
269
249
 
270
- <!-- Logos -->
271
- <div class="col-lg-4">
272
- <div class="dga-logo-container">
273
- <img src="https://placehold.co/125x42" alt="logo">
274
- <img src="https://placehold.co/125x42" alt="logo">
250
+ <!-- Copyright -->
251
+ <div class="dga-footer-copyright-container">
252
+ <p class="dga-footer-copyright">All Right Reserved For Digital Government Authority © 2024</p>
253
+ <div class="dga-footer-legal-links">
254
+ <a href="#" class="link-neutral small">Terms and Conditions</a>
255
+ <a href="#" class="link-neutral small">Privacy Policy</a>
275
256
  </div>
276
257
  </div>
277
258
  </div>
259
+
260
+ <!-- Logos -->
261
+ <div class="dga-footer-logo">
262
+ <img src="https://placehold.co/125x42" alt="logo">
263
+ <img src="https://placehold.co/125x42" alt="logo">
264
+ </div>
278
265
  </div>
279
266
  </div>
280
267
  </footer>
281
268
 
269
+
282
270
  <app-code-example [htmlCode]="secondaryFooterCode"></app-code-example>