sdga-ui 1.0.1 → 1.0.3

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 (62) hide show
  1. package/.editorconfig +23 -23
  2. package/.github/workflows/publish.yml +38 -0
  3. package/.prettierignore +73 -73
  4. package/.prettierrc +17 -17
  5. package/LICENSE +21 -21
  6. package/README.md +167 -167
  7. package/css/dga-ui.css +27286 -27286
  8. package/fonts/IBM_Plex_Sans_Arabic/OFL.txt +93 -93
  9. package/package.json +51 -37
  10. package/theme/_fonts.scss +58 -58
  11. package/theme/_functions.scss +11 -11
  12. package/theme/_variables.scss +50 -50
  13. package/theme/components/_accordion.scss +35 -35
  14. package/theme/components/_alerts.scss +11 -11
  15. package/theme/components/_badges.scss +8 -8
  16. package/theme/components/_breadcrumb.scss +13 -13
  17. package/theme/components/_buttons.scss +270 -270
  18. package/theme/components/_cards.scss +21 -21
  19. package/theme/components/_carousel.scss +33 -33
  20. package/theme/components/_content.scss +211 -211
  21. package/theme/components/_dropdowns.scss +45 -45
  22. package/theme/components/_forms-check.scss +124 -124
  23. package/theme/components/_forms-floating.scss +17 -17
  24. package/theme/components/_forms-inputs.scss +70 -70
  25. package/theme/components/_forms-range.scss +26 -26
  26. package/theme/components/_forms-select.scss +47 -47
  27. package/theme/components/_forms-switch.scss +63 -63
  28. package/theme/components/_forms-validation.scss +16 -16
  29. package/theme/components/_forms.scss +14 -14
  30. package/theme/components/_list-group.scss +26 -26
  31. package/theme/components/_modals.scss +42 -42
  32. package/theme/components/_navbar.scss +40 -40
  33. package/theme/components/_navigation.scss +151 -151
  34. package/theme/components/_offcanvas.scss +15 -15
  35. package/theme/components/_overlays.scss +112 -112
  36. package/theme/components/_pagination.scss +39 -39
  37. package/theme/components/_popovers.scss +26 -26
  38. package/theme/components/_progress.scss +11 -11
  39. package/theme/components/_spinners.scss +11 -11
  40. package/theme/components/_tables.scss +47 -47
  41. package/theme/components/_toasts.scss +16 -16
  42. package/theme/components/_tooltips.scss +15 -15
  43. package/theme/config/_base.scss +111 -111
  44. package/theme/config/_colors.scss +303 -303
  45. package/theme/config/_effects.scss +227 -227
  46. package/theme/config/_radius.scss +78 -78
  47. package/theme/config/_spacing.scss +155 -155
  48. package/theme/config/_typography.scss +118 -118
  49. package/theme/customizations/_alerts.scss +242 -242
  50. package/theme/customizations/_badges.scss +15 -15
  51. package/theme/customizations/_buttons.scss +209 -209
  52. package/theme/customizations/_cards.scss +117 -117
  53. package/theme/customizations/_forms-check.scss +278 -278
  54. package/theme/customizations/_forms-inputs.scss +9 -9
  55. package/theme/customizations/_forms-switch.scss +91 -91
  56. package/theme/customizations/_forms.scss +5 -5
  57. package/theme/customizations/_global.scss +25 -25
  58. package/theme/customizations/_links.scss +46 -46
  59. package/theme/customizations/_tables.scss +67 -67
  60. package/theme/customizations/_toasts.scss +221 -221
  61. package/theme/customizations/_utilities.scss +138 -138
  62. package/theme/dga-ui.scss +28 -28
package/theme/customizations/_toasts.scss CHANGED
@@ -1,222 +1,222 @@
1
- // Toast Customizations - SDGA Custom Enhancements
2
-
3
- // ============================================
4
- // TOAST BASE STYLES
5
- // ============================================
6
- .toast-container {
7
- position: fixed;
8
- inset-inline-end: 1rem;
9
- top: 1rem;
10
- z-index: $zindex-toast;
11
- }
12
- .toast {
13
- position: relative;
14
- border-inline-start-width: .5rem;
15
- min-width: $toast-max-width;
16
- box-shadow: $toast-box-shadow;
17
- padding: $toast-padding-y $toast-padding-x;
18
- padding-inline-end: $toast-padding-x * 3;
19
- display: flex;
20
- align-items: flex-start;
21
- gap: .75rem;
22
-
23
- .btn-close {
24
- position: absolute;
25
- top: 1rem;
26
- inset-inline-end: 1.5rem;
27
- margin: 0;
28
- }
29
- .toast-content {
30
- width: 100%;
31
- }
32
-
33
- .toast-icon {
34
- z-index: 1;
35
- width: 2.5rem;
36
- height: 2.5rem;
37
- position: relative;
38
- display: inline-flex;
39
- align-items: center;
40
- justify-content: center;
41
- color: $toast-icon-color;
42
- font-size: 1.5rem;
43
- flex-shrink: 0;
44
- margin-inline-end: 0;
45
-
46
- &::after {
47
- content: '';
48
- width: 2.5rem;
49
- height: 2.5rem;
50
- border-radius: $radius-full;
51
- background-color: $toast-icon-bg;
52
- position: absolute;
53
- top: 0;
54
- left: 0;
55
- z-index: -1;
56
- opacity: 1;
57
- }
58
- }
59
-
60
- .toast-header {
61
- display: flex;
62
- flex-direction: column;
63
- align-items: start;
64
- padding: 0;
65
- margin-bottom: .25rem;
66
- }
67
-
68
- .toast-body {
69
- padding: 0;
70
- }
71
-
72
-
73
- .toast-footer {
74
- margin-inline-start: -.5rem;
75
- margin-top: 1rem;
76
- display: flex;
77
- gap: .5rem;
78
- }
79
-
80
-
81
- // ============================================
82
- // TOAST VARIANTS
83
- // ============================================
84
-
85
- &.toast-primary {
86
- border-inline-start-color: rgba($primary-600, 0.7);
87
- --#{$prefix}border-color: #{$primary-200};
88
- --#{$prefix}toast-icon-bg: #{$primary-50};
89
- --#{$prefix}toast-icon-color: #{$primary-700};
90
- --#{$prefix}toast-title-color: #{$primary-700};
91
- }
92
-
93
- &.toast-secondary {
94
- border-inline-start-color: rgba($secondary-200, 0.7);
95
- --#{$prefix}border-color: #{$secondary-200};
96
- --#{$prefix}toast-icon-bg: #{$secondary-50};
97
- --#{$prefix}toast-icon-color: #{$black};
98
- --#{$prefix}toast-title-color: #{$black};
99
- }
100
-
101
- &.toast-success {
102
- border-inline-start-color: rgba($success-600, 0.7);
103
- --#{$prefix}border-color: #{$success-200};
104
- --#{$prefix}toast-icon-bg: #{$success-50};
105
- --#{$prefix}toast-icon-color: #{$success-700};
106
- --#{$prefix}toast-title-color: #{$success-700};
107
- }
108
-
109
- &.toast-danger {
110
- border-inline-start-color: rgba($danger-600, 0.7);
111
- --#{$prefix}border-color: #{$danger-200};
112
- --#{$prefix}toast-icon-bg: #{$danger-50};
113
- --#{$prefix}toast-icon-color: #{$danger-700};
114
- --#{$prefix}toast-title-color: #{$danger-700};
115
- }
116
-
117
- &.toast-warning {
118
- border-inline-start-color: rgba($warning-600, 0.7);
119
- --#{$prefix}border-color: #{$warning-200};
120
- --#{$prefix}toast-icon-bg: #{$warning-50};
121
- --#{$prefix}toast-icon-color: #{$warning-700};
122
- --#{$prefix}toast-title-color: #{$warning-700};
123
- }
124
-
125
- &.toast-info {
126
- border-inline-start-color: rgba($info-600, 0.7);
127
- --#{$prefix}border-color: #{$info-200};
128
- --#{$prefix}toast-icon-bg: #{$info-50};
129
- --#{$prefix}toast-icon-color: #{$info-700};
130
- --#{$prefix}toast-title-color: #{$info-700};
131
- }
132
-
133
- &.toast-lavender {
134
- border-inline-start-color: rgba($lavender-600, 0.7);
135
- --#{$prefix}border-color: #{$lavender-200};
136
- --#{$prefix}toast-icon-bg: #{$lavender-50};
137
- --#{$prefix}toast-icon-color: #{$lavender-700};
138
- --#{$prefix}toast-title-color: #{$lavender-700};
139
- }
140
-
141
- &.toast-neutral {
142
- border-inline-start-color: rgba($neutral-300, 0.7);
143
- --#{$prefix}border-color: #{$neutral-300};
144
- --#{$prefix}toast-icon-bg: #{$neutral-50};
145
- --#{$prefix}toast-icon-color: #{$black};
146
- --#{$prefix}toast-title-color: #{$black};
147
- }
148
-
149
- // ============================================
150
- // MOBILE RESPONSIVE
151
- // ============================================
152
- @media (max-width: $mobile) {
153
- border-inline-start-width: $toast-border-width;
154
- padding-inline-end: $toast-padding-x;
155
- border-top-width: 0.5rem;
156
- min-width: 100%;
157
- width: 100%;
158
- flex-direction: column;
159
-
160
- &.toast-primary {
161
- border-inline-start-color: $toast-border-color;
162
- border-top-color: rgba($primary-600, 0.7);
163
- }
164
-
165
- &.toast-secondary {
166
- border-inline-start-color: $toast-border-color;
167
- border-top-color: rgba($secondary-200, 0.7);
168
- }
169
-
170
- &.toast-success {
171
- border-inline-start-color: $toast-border-color;
172
- border-top-color: rgba($success-600, 0.7);
173
- }
174
-
175
- &.toast-danger {
176
- border-inline-start-color: $toast-border-color;
177
- border-top-color: rgba($danger-600, 0.7);
178
- }
179
-
180
- &.toast-warning {
181
- border-inline-start-color: $toast-border-color;
182
- border-top-color: rgba($warning-600, 0.7);
183
- }
184
-
185
- &.toast-info {
186
- border-inline-start-color: $toast-border-color;
187
- border-top-color: rgba($info-600, 0.7);
188
- }
189
-
190
- &.toast-lavender {
191
- border-inline-start-color: $toast-border-color;
192
- border-top-color: rgba($lavender-600, 0.7);
193
- }
194
-
195
- &.toast-neutral {
196
- border-inline-start-color: $toast-border-color;
197
- border-top-color: rgba($neutral-300, 0.7);
198
- }
199
-
200
- .toast-footer {
201
- flex-direction: column;
202
- gap: 0.75rem;
203
- margin-inline-start: 0;
204
-
205
- button {
206
- --#{$prefix}btn-color: #{$btn-secondary-color};
207
- --#{$prefix}btn-bg: #{$btn-secondary-bg};
208
- --#{$prefix}btn-border-color: #{$btn-secondary-border-color};
209
- --#{$prefix}btn-hover-color: #{$btn-secondary-hover-color};
210
- --#{$prefix}btn-hover-bg: #{$btn-secondary-hover-bg};
211
- --#{$prefix}btn-hover-border-color: #{$btn-secondary-hover-border-color};
212
- --#{$prefix}btn-focus-shadow-rgb: #{$btn-secondary-focus-shadow-rgb};
213
- --#{$prefix}btn-active-color: #{$btn-secondary-active-color};
214
- --#{$prefix}btn-active-bg: #{$btn-secondary-active-bg};
215
- --#{$prefix}btn-active-border-color: #{$btn-secondary-active-border-color};
216
- --#{$prefix}btn-disabled-color: #{$btn-secondary-disabled-color};
217
- --#{$prefix}btn-disabled-bg: #{$btn-secondary-disabled-bg};
218
- --#{$prefix}btn-disabled-border-color: #{$btn-secondary-disabled-border-color};
219
- }
220
- }
221
- }
1
+ // Toast Customizations - SDGA Custom Enhancements
2
+
3
+ // ============================================
4
+ // TOAST BASE STYLES
5
+ // ============================================
6
+ .toast-container {
7
+ position: fixed;
8
+ inset-inline-end: 1rem;
9
+ top: 1rem;
10
+ z-index: $zindex-toast;
11
+ }
12
+ .toast {
13
+ position: relative;
14
+ border-inline-start-width: .5rem;
15
+ min-width: $toast-max-width;
16
+ box-shadow: $toast-box-shadow;
17
+ padding: $toast-padding-y $toast-padding-x;
18
+ padding-inline-end: $toast-padding-x * 3;
19
+ display: flex;
20
+ align-items: flex-start;
21
+ gap: .75rem;
22
+
23
+ .btn-close {
24
+ position: absolute;
25
+ top: 1rem;
26
+ inset-inline-end: 1.5rem;
27
+ margin: 0;
28
+ }
29
+ .toast-content {
30
+ width: 100%;
31
+ }
32
+
33
+ .toast-icon {
34
+ z-index: 1;
35
+ width: 2.5rem;
36
+ height: 2.5rem;
37
+ position: relative;
38
+ display: inline-flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ color: $toast-icon-color;
42
+ font-size: 1.5rem;
43
+ flex-shrink: 0;
44
+ margin-inline-end: 0;
45
+
46
+ &::after {
47
+ content: '';
48
+ width: 2.5rem;
49
+ height: 2.5rem;
50
+ border-radius: $radius-full;
51
+ background-color: $toast-icon-bg;
52
+ position: absolute;
53
+ top: 0;
54
+ left: 0;
55
+ z-index: -1;
56
+ opacity: 1;
57
+ }
58
+ }
59
+
60
+ .toast-header {
61
+ display: flex;
62
+ flex-direction: column;
63
+ align-items: start;
64
+ padding: 0;
65
+ margin-bottom: .25rem;
66
+ }
67
+
68
+ .toast-body {
69
+ padding: 0;
70
+ }
71
+
72
+
73
+ .toast-footer {
74
+ margin-inline-start: -.5rem;
75
+ margin-top: 1rem;
76
+ display: flex;
77
+ gap: .5rem;
78
+ }
79
+
80
+
81
+ // ============================================
82
+ // TOAST VARIANTS
83
+ // ============================================
84
+
85
+ &.toast-primary {
86
+ border-inline-start-color: rgba($primary-600, 0.7);
87
+ --#{$prefix}border-color: #{$primary-200};
88
+ --#{$prefix}toast-icon-bg: #{$primary-50};
89
+ --#{$prefix}toast-icon-color: #{$primary-700};
90
+ --#{$prefix}toast-title-color: #{$primary-700};
91
+ }
92
+
93
+ &.toast-secondary {
94
+ border-inline-start-color: rgba($secondary-200, 0.7);
95
+ --#{$prefix}border-color: #{$secondary-200};
96
+ --#{$prefix}toast-icon-bg: #{$secondary-50};
97
+ --#{$prefix}toast-icon-color: #{$black};
98
+ --#{$prefix}toast-title-color: #{$black};
99
+ }
100
+
101
+ &.toast-success {
102
+ border-inline-start-color: rgba($success-600, 0.7);
103
+ --#{$prefix}border-color: #{$success-200};
104
+ --#{$prefix}toast-icon-bg: #{$success-50};
105
+ --#{$prefix}toast-icon-color: #{$success-700};
106
+ --#{$prefix}toast-title-color: #{$success-700};
107
+ }
108
+
109
+ &.toast-danger {
110
+ border-inline-start-color: rgba($danger-600, 0.7);
111
+ --#{$prefix}border-color: #{$danger-200};
112
+ --#{$prefix}toast-icon-bg: #{$danger-50};
113
+ --#{$prefix}toast-icon-color: #{$danger-700};
114
+ --#{$prefix}toast-title-color: #{$danger-700};
115
+ }
116
+
117
+ &.toast-warning {
118
+ border-inline-start-color: rgba($warning-600, 0.7);
119
+ --#{$prefix}border-color: #{$warning-200};
120
+ --#{$prefix}toast-icon-bg: #{$warning-50};
121
+ --#{$prefix}toast-icon-color: #{$warning-700};
122
+ --#{$prefix}toast-title-color: #{$warning-700};
123
+ }
124
+
125
+ &.toast-info {
126
+ border-inline-start-color: rgba($info-600, 0.7);
127
+ --#{$prefix}border-color: #{$info-200};
128
+ --#{$prefix}toast-icon-bg: #{$info-50};
129
+ --#{$prefix}toast-icon-color: #{$info-700};
130
+ --#{$prefix}toast-title-color: #{$info-700};
131
+ }
132
+
133
+ &.toast-lavender {
134
+ border-inline-start-color: rgba($lavender-600, 0.7);
135
+ --#{$prefix}border-color: #{$lavender-200};
136
+ --#{$prefix}toast-icon-bg: #{$lavender-50};
137
+ --#{$prefix}toast-icon-color: #{$lavender-700};
138
+ --#{$prefix}toast-title-color: #{$lavender-700};
139
+ }
140
+
141
+ &.toast-neutral {
142
+ border-inline-start-color: rgba($neutral-300, 0.7);
143
+ --#{$prefix}border-color: #{$neutral-300};
144
+ --#{$prefix}toast-icon-bg: #{$neutral-50};
145
+ --#{$prefix}toast-icon-color: #{$black};
146
+ --#{$prefix}toast-title-color: #{$black};
147
+ }
148
+
149
+ // ============================================
150
+ // MOBILE RESPONSIVE
151
+ // ============================================
152
+ @media (max-width: $mobile) {
153
+ border-inline-start-width: $toast-border-width;
154
+ padding-inline-end: $toast-padding-x;
155
+ border-top-width: 0.5rem;
156
+ min-width: 100%;
157
+ width: 100%;
158
+ flex-direction: column;
159
+
160
+ &.toast-primary {
161
+ border-inline-start-color: $toast-border-color;
162
+ border-top-color: rgba($primary-600, 0.7);
163
+ }
164
+
165
+ &.toast-secondary {
166
+ border-inline-start-color: $toast-border-color;
167
+ border-top-color: rgba($secondary-200, 0.7);
168
+ }
169
+
170
+ &.toast-success {
171
+ border-inline-start-color: $toast-border-color;
172
+ border-top-color: rgba($success-600, 0.7);
173
+ }
174
+
175
+ &.toast-danger {
176
+ border-inline-start-color: $toast-border-color;
177
+ border-top-color: rgba($danger-600, 0.7);
178
+ }
179
+
180
+ &.toast-warning {
181
+ border-inline-start-color: $toast-border-color;
182
+ border-top-color: rgba($warning-600, 0.7);
183
+ }
184
+
185
+ &.toast-info {
186
+ border-inline-start-color: $toast-border-color;
187
+ border-top-color: rgba($info-600, 0.7);
188
+ }
189
+
190
+ &.toast-lavender {
191
+ border-inline-start-color: $toast-border-color;
192
+ border-top-color: rgba($lavender-600, 0.7);
193
+ }
194
+
195
+ &.toast-neutral {
196
+ border-inline-start-color: $toast-border-color;
197
+ border-top-color: rgba($neutral-300, 0.7);
198
+ }
199
+
200
+ .toast-footer {
201
+ flex-direction: column;
202
+ gap: 0.75rem;
203
+ margin-inline-start: 0;
204
+
205
+ button {
206
+ --#{$prefix}btn-color: #{$btn-secondary-color};
207
+ --#{$prefix}btn-bg: #{$btn-secondary-bg};
208
+ --#{$prefix}btn-border-color: #{$btn-secondary-border-color};
209
+ --#{$prefix}btn-hover-color: #{$btn-secondary-hover-color};
210
+ --#{$prefix}btn-hover-bg: #{$btn-secondary-hover-bg};
211
+ --#{$prefix}btn-hover-border-color: #{$btn-secondary-hover-border-color};
212
+ --#{$prefix}btn-focus-shadow-rgb: #{$btn-secondary-focus-shadow-rgb};
213
+ --#{$prefix}btn-active-color: #{$btn-secondary-active-color};
214
+ --#{$prefix}btn-active-bg: #{$btn-secondary-active-bg};
215
+ --#{$prefix}btn-active-border-color: #{$btn-secondary-active-border-color};
216
+ --#{$prefix}btn-disabled-color: #{$btn-secondary-disabled-color};
217
+ --#{$prefix}btn-disabled-bg: #{$btn-secondary-disabled-bg};
218
+ --#{$prefix}btn-disabled-border-color: #{$btn-secondary-disabled-border-color};
219
+ }
220
+ }
221
+ }
222
222
  }