@aristobyte-ui/message-box 2.9.1 → 2.10.0

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 (3) hide show
  1. package/es/components/MessageBox/MessageBox.scss +26 -217
  2. package/lib/components/MessageBox/MessageBox.scss +26 -217
  3. package/package.json +2 -2
package/es/components/MessageBox/MessageBox.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  .message-box {
4
4
  align-items: flex-start;
5
5
  color: $white;
6
-
7
6
  display: flex;
8
7
  padding: 0.75rem 1rem;
9
8
  padding: 1rem;
@@ -38,250 +37,60 @@
38
37
  line-height: $line-height-normal;
39
38
  }
40
39
 
41
- &--default.message-box-type {
42
- &--solid {
43
- background-color: rgba($grey-600, 1);
44
-
45
- .message-box__icon {
46
- color: $white;
47
- }
48
- }
49
-
50
- &--outline {
51
- background-color: rgba($grey-600, 0.2);
52
- border: 1px solid $grey-600;
53
-
54
- .message-box__icon {
55
- color: $grey-600;
56
- }
57
- }
58
-
59
- &--outline-dashed {
60
- background-color: rgba($grey-600, 0.2);
61
- border: 1px dashed $grey-600;
62
-
63
- .message-box__icon {
64
- color: $grey-600;
65
- }
66
- }
67
-
68
- &--no-outline {
69
- background-color: rgba($grey-600, 0.2);
70
-
71
- .message-box__icon {
72
- color: $grey-600;
73
- }
74
- }
75
-
76
- &--glowing {
77
- background-color: rgba($grey-600, 0.2);
78
- border: 1px solid $grey-600;
79
- box-shadow:
80
- 0 0 8px rgba($grey-600, 0.5),
81
- 0 0 16px rgba($grey-600, 0.4),
82
- 0 0 24px rgba($grey-600, 0.3);
83
-
84
- .message-box__icon {
85
- color: $grey-600;
86
- }
87
- }
88
- }
89
-
90
- &--info.message-box-type {
91
- &--solid {
92
- background-color: rgba($blue-600, 1);
93
-
94
- .message-box__icon {
95
- color: $white;
96
- }
97
- }
98
-
99
- &--outline {
100
- background-color: rgba($blue-600, 0.2);
101
- border: 1px solid $blue-600;
102
-
103
- .message-box__icon {
104
- color: $blue-600;
105
- }
106
- }
107
-
108
- &--outline-dashed {
109
- background-color: rgba($blue-600, 0.2);
110
- border: 1px dashed $blue-600;
111
-
112
- .message-box__icon {
113
- color: $blue-600;
114
- }
115
- }
116
-
117
- &--no-outline {
118
- background-color: rgba($blue-600, 0.2);
119
-
120
- .message-box__icon {
121
- color: $blue-600;
122
- }
123
- }
124
-
125
- &--glowing {
126
- background-color: rgba($blue-600, 0.2);
127
- border: 1px solid $blue-600;
128
- box-shadow:
129
- 0 0 8px rgba($blue-600, 0.5),
130
- 0 0 16px rgba($blue-600, 0.4),
131
- 0 0 24px rgba($blue-600, 0.3);
132
-
133
- .message-box__icon {
134
- color: $blue-600;
135
- }
136
- }
137
- }
138
-
139
- &--success.message-box-type {
140
- &--solid {
141
- background-color: rgba($green-600, 1);
142
-
143
- .message-box__icon {
144
- color: $white;
145
- }
146
- }
147
-
148
- &--outline {
149
- background-color: rgba($green-600, 0.2);
150
- border: 1px solid $green-600;
151
-
152
- .message-box__icon {
153
- color: $green-600;
154
- }
155
- }
156
-
157
- &--outline-dashed {
158
- background-color: rgba($green-600, 0.2);
159
- border: 1px dashed $green-600;
160
-
161
- .message-box__icon {
162
- color: $green-600;
163
- }
164
- }
165
-
166
- &--no-outline {
167
- background-color: rgba($green-600, 0.2);
168
-
169
- .message-box__icon {
170
- color: $green-600;
171
- }
172
- }
173
-
174
- &--glowing {
175
- background-color: rgba($green-600, 0.2);
176
- border: 1px solid $green-600;
177
- box-shadow:
178
- 0 0 8px rgba($green-600, 0.5),
179
- 0 0 16px rgba($green-600, 0.4),
180
- 0 0 24px rgba($green-600, 0.3);
181
-
182
- .message-box__icon {
183
- color: $green-600;
184
- }
185
- }
186
- }
187
-
188
- &--warning.message-box-type {
189
- &--solid {
190
- background-color: rgba($amber-600, 1);
40
+ @mixin message-box-variant($name, $color) {
41
+ &--#{$name}.message-box-type--solid {
42
+ background-color: rgba($color, 1);
191
43
 
192
44
  .message-box__icon {
193
45
  color: $white;
194
46
  }
195
47
  }
196
48
 
197
- &--outline {
198
- background-color: rgba($amber-600, 0.2);
199
- border: 1px solid $amber-600;
49
+ &--#{$name}.message-box-type--outline {
50
+ background-color: rgba($color, 0.2);
51
+ border: 1px solid $color;
200
52
 
201
53
  .message-box__icon {
202
- color: $amber-600;
54
+ color: $color;
203
55
  }
204
56
  }
205
57
 
206
- &--outline-dashed {
207
- background-color: rgba($amber-600, 0.2);
208
- border: 1px dashed $amber-600;
58
+ &--#{$name}.message-box-type--outline-dashed {
59
+ background-color: rgba($color, 0.2);
60
+ border: 1px dashed $color;
209
61
 
210
62
  .message-box__icon {
211
- color: $amber-600;
63
+ color: $color;
212
64
  }
213
65
  }
214
66
 
215
- &--no-outline {
216
- background-color: rgba($amber-600, 0.2);
67
+ &--#{$name}.message-box-type--no-outline {
68
+ background-color: rgba($color, 0.2);
217
69
 
218
70
  .message-box__icon {
219
- color: $amber-600;
71
+ color: $color;
220
72
  }
221
73
  }
222
74
 
223
- &--glowing {
224
- background-color: rgba($amber-600, 0.2);
225
- border: 1px solid $amber-600;
75
+ &--#{$name}.message-box-type--glowing {
76
+ background-color: rgba($color, 0.2);
77
+ border: 1px solid $color;
226
78
  box-shadow:
227
- 0 0 8px rgba($amber-600, 0.5),
228
- 0 0 16px rgba($amber-600, 0.4),
229
- 0 0 24px rgba($amber-600, 0.3);
79
+ 0 0 8px rgba($color, 0.5),
80
+ 0 0 16px rgba($color, 0.4),
81
+ 0 0 24px rgba($color, 0.3);
230
82
 
231
83
  .message-box__icon {
232
- color: $amber-600;
84
+ color: $color;
233
85
  }
234
86
  }
235
87
  }
236
88
 
237
- &--error.message-box-type {
238
- &--solid {
239
- background-color: rgba($red-600, 1);
240
-
241
- .message-box__icon {
242
- color: $white;
243
- }
244
- }
245
-
246
- &--outline {
247
- background-color: rgba($red-600, 0.2);
248
- border: 1px solid $red-600;
249
-
250
- .message-box__icon {
251
- color: $red-600;
252
- }
253
- }
254
-
255
- &--outline-dashed {
256
- background-color: rgba($red-600, 0.2);
257
- border: 1px dashed $red-600;
258
-
259
- .message-box__icon {
260
- color: $red-600;
261
- }
262
- }
263
-
264
- &--no-outline {
265
- background-color: rgba($red-600, 0.2);
266
-
267
- .message-box__icon {
268
- color: $red-600;
269
- }
270
- }
271
-
272
- &--glowing {
273
- background-color: rgba($red-600, 0.2);
274
- border: 1px solid $red-600;
275
- box-shadow:
276
- 0 0 8px rgba($red-600, 0.5),
277
- 0 0 16px rgba($red-600, 0.4),
278
- 0 0 24px rgba($red-600, 0.3);
279
-
280
- .message-box__icon {
281
- color: $red-600;
282
- }
283
- }
284
- }
89
+ @include message-box-variant('default', $grey-600);
90
+ @include message-box-variant('info', $blue-600);
91
+ @include message-box-variant('success', $green-600);
92
+ @include message-box-variant('warning', $amber-600);
93
+ @include message-box-variant('error', $red-600);
285
94
 
286
95
  &__icon {
287
96
  align-items: center;
package/lib/components/MessageBox/MessageBox.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  .message-box {
4
4
  align-items: flex-start;
5
5
  color: $white;
6
-
7
6
  display: flex;
8
7
  padding: 0.75rem 1rem;
9
8
  padding: 1rem;
@@ -38,250 +37,60 @@
38
37
  line-height: $line-height-normal;
39
38
  }
40
39
 
41
- &--default.message-box-type {
42
- &--solid {
43
- background-color: rgba($grey-600, 1);
44
-
45
- .message-box__icon {
46
- color: $white;
47
- }
48
- }
49
-
50
- &--outline {
51
- background-color: rgba($grey-600, 0.2);
52
- border: 1px solid $grey-600;
53
-
54
- .message-box__icon {
55
- color: $grey-600;
56
- }
57
- }
58
-
59
- &--outline-dashed {
60
- background-color: rgba($grey-600, 0.2);
61
- border: 1px dashed $grey-600;
62
-
63
- .message-box__icon {
64
- color: $grey-600;
65
- }
66
- }
67
-
68
- &--no-outline {
69
- background-color: rgba($grey-600, 0.2);
70
-
71
- .message-box__icon {
72
- color: $grey-600;
73
- }
74
- }
75
-
76
- &--glowing {
77
- background-color: rgba($grey-600, 0.2);
78
- border: 1px solid $grey-600;
79
- box-shadow:
80
- 0 0 8px rgba($grey-600, 0.5),
81
- 0 0 16px rgba($grey-600, 0.4),
82
- 0 0 24px rgba($grey-600, 0.3);
83
-
84
- .message-box__icon {
85
- color: $grey-600;
86
- }
87
- }
88
- }
89
-
90
- &--info.message-box-type {
91
- &--solid {
92
- background-color: rgba($blue-600, 1);
93
-
94
- .message-box__icon {
95
- color: $white;
96
- }
97
- }
98
-
99
- &--outline {
100
- background-color: rgba($blue-600, 0.2);
101
- border: 1px solid $blue-600;
102
-
103
- .message-box__icon {
104
- color: $blue-600;
105
- }
106
- }
107
-
108
- &--outline-dashed {
109
- background-color: rgba($blue-600, 0.2);
110
- border: 1px dashed $blue-600;
111
-
112
- .message-box__icon {
113
- color: $blue-600;
114
- }
115
- }
116
-
117
- &--no-outline {
118
- background-color: rgba($blue-600, 0.2);
119
-
120
- .message-box__icon {
121
- color: $blue-600;
122
- }
123
- }
124
-
125
- &--glowing {
126
- background-color: rgba($blue-600, 0.2);
127
- border: 1px solid $blue-600;
128
- box-shadow:
129
- 0 0 8px rgba($blue-600, 0.5),
130
- 0 0 16px rgba($blue-600, 0.4),
131
- 0 0 24px rgba($blue-600, 0.3);
132
-
133
- .message-box__icon {
134
- color: $blue-600;
135
- }
136
- }
137
- }
138
-
139
- &--success.message-box-type {
140
- &--solid {
141
- background-color: rgba($green-600, 1);
142
-
143
- .message-box__icon {
144
- color: $white;
145
- }
146
- }
147
-
148
- &--outline {
149
- background-color: rgba($green-600, 0.2);
150
- border: 1px solid $green-600;
151
-
152
- .message-box__icon {
153
- color: $green-600;
154
- }
155
- }
156
-
157
- &--outline-dashed {
158
- background-color: rgba($green-600, 0.2);
159
- border: 1px dashed $green-600;
160
-
161
- .message-box__icon {
162
- color: $green-600;
163
- }
164
- }
165
-
166
- &--no-outline {
167
- background-color: rgba($green-600, 0.2);
168
-
169
- .message-box__icon {
170
- color: $green-600;
171
- }
172
- }
173
-
174
- &--glowing {
175
- background-color: rgba($green-600, 0.2);
176
- border: 1px solid $green-600;
177
- box-shadow:
178
- 0 0 8px rgba($green-600, 0.5),
179
- 0 0 16px rgba($green-600, 0.4),
180
- 0 0 24px rgba($green-600, 0.3);
181
-
182
- .message-box__icon {
183
- color: $green-600;
184
- }
185
- }
186
- }
187
-
188
- &--warning.message-box-type {
189
- &--solid {
190
- background-color: rgba($amber-600, 1);
40
+ @mixin message-box-variant($name, $color) {
41
+ &--#{$name}.message-box-type--solid {
42
+ background-color: rgba($color, 1);
191
43
 
192
44
  .message-box__icon {
193
45
  color: $white;
194
46
  }
195
47
  }
196
48
 
197
- &--outline {
198
- background-color: rgba($amber-600, 0.2);
199
- border: 1px solid $amber-600;
49
+ &--#{$name}.message-box-type--outline {
50
+ background-color: rgba($color, 0.2);
51
+ border: 1px solid $color;
200
52
 
201
53
  .message-box__icon {
202
- color: $amber-600;
54
+ color: $color;
203
55
  }
204
56
  }
205
57
 
206
- &--outline-dashed {
207
- background-color: rgba($amber-600, 0.2);
208
- border: 1px dashed $amber-600;
58
+ &--#{$name}.message-box-type--outline-dashed {
59
+ background-color: rgba($color, 0.2);
60
+ border: 1px dashed $color;
209
61
 
210
62
  .message-box__icon {
211
- color: $amber-600;
63
+ color: $color;
212
64
  }
213
65
  }
214
66
 
215
- &--no-outline {
216
- background-color: rgba($amber-600, 0.2);
67
+ &--#{$name}.message-box-type--no-outline {
68
+ background-color: rgba($color, 0.2);
217
69
 
218
70
  .message-box__icon {
219
- color: $amber-600;
71
+ color: $color;
220
72
  }
221
73
  }
222
74
 
223
- &--glowing {
224
- background-color: rgba($amber-600, 0.2);
225
- border: 1px solid $amber-600;
75
+ &--#{$name}.message-box-type--glowing {
76
+ background-color: rgba($color, 0.2);
77
+ border: 1px solid $color;
226
78
  box-shadow:
227
- 0 0 8px rgba($amber-600, 0.5),
228
- 0 0 16px rgba($amber-600, 0.4),
229
- 0 0 24px rgba($amber-600, 0.3);
79
+ 0 0 8px rgba($color, 0.5),
80
+ 0 0 16px rgba($color, 0.4),
81
+ 0 0 24px rgba($color, 0.3);
230
82
 
231
83
  .message-box__icon {
232
- color: $amber-600;
84
+ color: $color;
233
85
  }
234
86
  }
235
87
  }
236
88
 
237
- &--error.message-box-type {
238
- &--solid {
239
- background-color: rgba($red-600, 1);
240
-
241
- .message-box__icon {
242
- color: $white;
243
- }
244
- }
245
-
246
- &--outline {
247
- background-color: rgba($red-600, 0.2);
248
- border: 1px solid $red-600;
249
-
250
- .message-box__icon {
251
- color: $red-600;
252
- }
253
- }
254
-
255
- &--outline-dashed {
256
- background-color: rgba($red-600, 0.2);
257
- border: 1px dashed $red-600;
258
-
259
- .message-box__icon {
260
- color: $red-600;
261
- }
262
- }
263
-
264
- &--no-outline {
265
- background-color: rgba($red-600, 0.2);
266
-
267
- .message-box__icon {
268
- color: $red-600;
269
- }
270
- }
271
-
272
- &--glowing {
273
- background-color: rgba($red-600, 0.2);
274
- border: 1px solid $red-600;
275
- box-shadow:
276
- 0 0 8px rgba($red-600, 0.5),
277
- 0 0 16px rgba($red-600, 0.4),
278
- 0 0 24px rgba($red-600, 0.3);
279
-
280
- .message-box__icon {
281
- color: $red-600;
282
- }
283
- }
284
- }
89
+ @include message-box-variant('default', $grey-600);
90
+ @include message-box-variant('info', $blue-600);
91
+ @include message-box-variant('success', $green-600);
92
+ @include message-box-variant('warning', $amber-600);
93
+ @include message-box-variant('error', $red-600);
285
94
 
286
95
  &__icon {
287
96
  align-items: center;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aristobyte-ui/message-box",
3
3
  "description": "A fully-typed, modular, and flexible MessageBox component for AristoByteUI, supporting multiple variants, types, border-radius options, and optional icons.",
4
- "version": "2.9.1",
4
+ "version": "2.10.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "author": "AristoByte <info@aristobyte.com>",
@@ -50,7 +50,7 @@
50
50
  "sass": "^1.97.3"
51
51
  },
52
52
  "dependencies": {
53
- "@aristobyte-ui/utils": "^2.9.1"
53
+ "@aristobyte-ui/utils": "^2.10.0"
54
54
  },
55
55
  "exports": {
56
56
  ".": {