ca-components 1.0.33 → 1.0.35

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.
@@ -0,0 +1,193 @@
1
+ @import "./variables.scss";
2
+ * {
3
+ font-family: $main-font, $fallback-font;
4
+ }
5
+
6
+ p {
7
+ margin: 0;
8
+ padding: 0;
9
+ }
10
+
11
+ .form-control:focus {
12
+ box-shadow: none !important;
13
+ outline: none;
14
+ }
15
+
16
+ .payment-type {
17
+ &.col-12,
18
+ &.col-6 {
19
+ padding-left: 6px;
20
+ padding-right: 6px;
21
+ }
22
+ }
23
+
24
+ .btn-primary {
25
+ input {
26
+ display: none;
27
+ }
28
+ }
29
+
30
+ ::ng-deep .tooltip {
31
+ .arrow::before {
32
+ display: none;
33
+ }
34
+ }
35
+
36
+ ::ng-deep .tooltip-inner {
37
+ background-color: $white;
38
+ color: $muted;
39
+ height: 17px;
40
+ display: flex;
41
+ align-items: center;
42
+ border-radius: 2px;
43
+ font-size: 10px;
44
+ font-weight: 600;
45
+ box-shadow: $box-shadow;
46
+ }
47
+
48
+ .form-label-group {
49
+ ng-select {
50
+ width: 100%;
51
+ }
52
+ }
53
+
54
+ .btn-primary {
55
+ font-size: 11px !important;
56
+ border-radius: 3px;
57
+ padding: 0.1rem 0.45rem !important;
58
+ background-color: $bw-9 !important;
59
+ transition: 0.25s;
60
+ font-weight: 600;
61
+ border: none;
62
+ }
63
+
64
+ .choice-wrapper {
65
+ display: flex;
66
+ align-items: center;
67
+ }
68
+
69
+ .note-label-wrapper {
70
+ background-color: $white;
71
+ font-weight: 600;
72
+ color: $bw6-2;
73
+ margin: 0 -12px;
74
+ padding: 0 12px;
75
+ transition: 0.3s;
76
+ cursor: pointer;
77
+ height: 32px;
78
+ line-height: 32px;
79
+ user-select: none;
80
+ }
81
+
82
+ .dropzone-label-wrapper {
83
+ background-color: $white;
84
+ font-weight: 700;
85
+ color: $bw6-2;
86
+ margin: 0 -16px;
87
+ padding: 6px 18px;
88
+ transition: all 0.3s ease-in-out;
89
+ cursor: pointer;
90
+ height: 30px;
91
+ user-select: none;
92
+ }
93
+
94
+ textarea.input-custom-textarea.form-textarea {
95
+ font-size: 12px;
96
+ padding: 0;
97
+ margin-top: 6px;
98
+ resize: none;
99
+ color: $bw4;
100
+ width: 100% !important;
101
+ border: none !important;
102
+ box-shadow: none !important;
103
+ outline: none !important;
104
+
105
+ &::placeholder {
106
+ color: $bw-9 !important;
107
+ }
108
+ }
109
+
110
+ .note-visible {
111
+ max-height: 60px;
112
+ transition: 0.3s;
113
+ }
114
+
115
+ .note-hidden {
116
+ max-height: 0;
117
+ overflow: hidden;
118
+ transition: 0.3s;
119
+ }
120
+
121
+ .dropzone-visible {
122
+ height: auto;
123
+ transition: all 0.3s ease-in-out;
124
+ padding-top: 12px;
125
+ position: relative;
126
+ right: 5px;
127
+ }
128
+
129
+ .dropzone-hidden {
130
+ height: 0;
131
+ overflow: hidden;
132
+ transition: all 0.3s ease-in-out;
133
+ }
134
+
135
+ .note-label-wrapper,
136
+ .dropzone-label-wrapper {
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: space-between;
140
+ }
141
+
142
+ .note-wrapper.hidden-note .down-icon,
143
+ .dropzone-wrapper.hidden-dropzone .down-icon {
144
+ transform: rotate(0deg);
145
+ transition: 0.3s all;
146
+ }
147
+
148
+ .note-wrapper.visible-note .down-icon,
149
+ .dropzone-wrapper.visible-dropzone .down-icon {
150
+ transform: rotate(180deg);
151
+ transition: 0.3s all;
152
+ }
153
+
154
+ .notifications-holder {
155
+ margin-bottom: 28px;
156
+
157
+ p {
158
+ margin-right: 20px;
159
+ margin-bottom: 0;
160
+ }
161
+
162
+ .multiple-choices-wrapper {
163
+ .btn-group {
164
+ position: relative;
165
+ display: inline-flex;
166
+ vertical-align: middle;
167
+ margin-right: 6px;
168
+
169
+ .btn.btn-primary:not(:disabled):not(.disabled) {
170
+ background-color: $ceil-blue !important;
171
+ transition: 0.25s;
172
+ font-weight: 600;
173
+ }
174
+
175
+ .btn.btn-primary:not(:disabled):not(.disabled).active {
176
+ background-color: $bw-9 !important;
177
+ }
178
+
179
+ .btn.btn-primary:not(:disabled):not(.disabled):hover {
180
+ opacity: 1;
181
+ transition: 0.25s;
182
+ }
183
+
184
+ .btn:not(:disabled):not(.disabled) {
185
+ cursor: pointer;
186
+ }
187
+ }
188
+ }
189
+ }
190
+
191
+ .choice-wrapper.twic-choice label {
192
+ width: 66px;
193
+ }
@@ -0,0 +1,411 @@
1
+ //@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700, light');
2
+
3
+ // Trailer and truck colors
4
+ $trailer_colors: 'FF5454', '6D82C7', '56AB62', '3C3C3C', '6FDFE4', 'F89A3D',
5
+ '1E9DF3', '59A5A5', 'A468FF', 'A34CB8', '4A9A4F', 'F3D542', '3074D3';
6
+ $truck_colors: '97D568', 'FFB74D', 'E57373', '68C3FF', 'BA68C8', '59A5A5',
7
+ '415FC1';
8
+ $dispatch-status-colors: '919191', '008496', '6C6C6C', 'F276EF', 'FF9800',
9
+ '3074D3', '62B264', 'FF9800', 'D80300', '26A690';
10
+
11
+ // Color variables
12
+ $white: #ffffff;
13
+ $white-2: #ffffff66;
14
+ $white-3: #ffffff70;
15
+ $white-4: #ffffffb2;
16
+ $white-5: #ffffff20;
17
+ $white-6: #fbe9e9;
18
+
19
+ $black: #000000;
20
+ $primary: #536bc2;
21
+ $primary-light: #7690be;
22
+ $secondary: #ea5d33;
23
+ $success: #18da35;
24
+ $info: #01b8ff;
25
+ $warning: #ffc107;
26
+ $danger: #f87566;
27
+ $muted: #919191;
28
+ $dark: #191919;
29
+ $dark-2: #91919133;
30
+ $dark-3: #91919166;
31
+ $dark-4: #91919120;
32
+ $light-blue: #5673aa;
33
+ $light-blue-07: rgba(86, 115, 170, 0.71);
34
+ $gray: #f1f2f3;
35
+ $icons-bg: #3d3d3d;
36
+ $icons-avatar: #d8d8d8;
37
+ $progress-orange: #ffb35d;
38
+ $progress-danger: #ff5d5d;
39
+ $link-color: #889cc3;
40
+ $ceil-blue: #91a4c7;
41
+ $cerulean-frost: #778fbb;
42
+ $icons-bg-empty: #cfcfcf;
43
+
44
+ // App main colors
45
+ $app-main-blue: #28529f;
46
+ $app-main-gray: #606060;
47
+ $app-menu-border: #f1f2f5;
48
+
49
+ // Font variables main and fallback
50
+ $main-font: 'Montserrat';
51
+ $fallback-font: 'sans-serif';
52
+
53
+ // New Color Variables
54
+ $text-color: #656565;
55
+ // Transition variable
56
+ $transition: all 0.3s ease-in-out;
57
+
58
+ //Scale size
59
+ $scaleSize: 1.1;
60
+
61
+ // Black&White pallete
62
+ $bw1: #f9f9f9;
63
+ $bw2: #eeeeee;
64
+ $bw3: #d1d1d1;
65
+ $bw4: #b7b7b7;
66
+ $bw5: #919191;
67
+ $bw6: #606060;
68
+ $bw6-2: #6c6c6c;
69
+ $bw6-3: #6c6c6c20;
70
+ $bw7: #3d3d3d;
71
+ $bw8: #dbdbdb;
72
+ $bw-9: #dadada;
73
+ $bw-10: #eeeeee00;
74
+ $bw-11: #a1887f;
75
+
76
+ //blue color
77
+ $bc1: #6d82c7;
78
+ // Box Shadow
79
+ $box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
80
+
81
+ @mixin triangletop {
82
+ width: 0;
83
+ height: 0;
84
+ border-left: 10px solid transparent;
85
+ border-right: 10px solid transparent;
86
+ border-bottom: 6px solid $white;
87
+ -webkit-filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.1));
88
+ filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.1));
89
+ position: absolute;
90
+ top: -6px;
91
+ left: calc(50% - 10px);
92
+ }
93
+
94
+ // chips pallete
95
+ $chip-0: #30c862;
96
+ $chip-0-20: #30c86220;
97
+ $chip-1: #ffad43;
98
+ $chip-1-20: #ffad4320;
99
+ $chip-2: #ff5d5d;
100
+ $chip-2-20: #ff5d5d20;
101
+
102
+ $input-color: #a7a7a7;
103
+
104
+ // table pallete
105
+ $row-hover: #dfdfdf;
106
+ $row-select: #7f7f7f;
107
+ $th-color: #b7b7b7;
108
+ $tb-border: #cfcfcf;
109
+ $th-start-date: #b93636;
110
+
111
+ $trash-icon-color: #ff5d5d;
112
+ $special-filter-green: #007a6e;
113
+ $special-filter-green-1: #26a69020;
114
+
115
+ $special-filter-purple: #9e47ec;
116
+ $special-filter-purple-1: #7919d0;
117
+ $special-filter-purple-2: #ab47bc;
118
+ $special-filter-purple-3: #ab47bc20;
119
+ $special-filter-orange: #ffa726;
120
+
121
+ // Applicant
122
+ $confirm: #24c1a1;
123
+ $ta-border-grey: #00000026;
124
+ $ta-light-grey: #e5e5e5;
125
+ $ta-light-grey-2: #aaaaaa;
126
+ $ta-light-grey-3: #3c3c3c;
127
+ $ta-light-grey-4: #f3f3f3;
128
+ $ta-light-grey-5: #f7f7f7;
129
+ $ta-light-grey-6: #cccccc;
130
+ $ta-light-grey-7: #fbfbfb;
131
+ $ta-light-grey-8: #cccccc40;
132
+ $ta-light-grey-9: #cccccc20;
133
+ $ta-light-grey-10: #aaaaaa20;
134
+ $ta-blue: #536bc2;
135
+ $ta-blue-2: #3551b7;
136
+ $ta-blue-3: #97a8dc;
137
+ $ta-blue-4: #bdcaeb;
138
+ $ta-blue-5: #3074d3;
139
+ $ta-blue-6: #3074d333;
140
+ $ta-blue-7: #6f9ee0;
141
+ $ta-blue-8: #98b9ea;
142
+ $ta-blue-9: #255bb9;
143
+ $ta-blue-10: #6f9ee033;
144
+ $ta-blue-11: #6f9ee066;
145
+ $ta-blue-12: #3074d366;
146
+ $ta-blue-13: #3b73ed;
147
+ $ta-blue-20: #6f9ee020;
148
+ $ta-blue-21: #3b73ed66;
149
+ $ta-blue-22: #6f9ee04d;
150
+ $ta-blue-23: #536bc220;
151
+ $ta-blue-24: #8785e8;
152
+ $ta-blue-25: #e0eaf8;
153
+
154
+ // $ta-blue-14: #0B49D1;
155
+ $dark-blue-07: #5673aa70;
156
+ $ta-red: #e57373;
157
+ $ta-red-2: #ef5350;
158
+ $ta-red-3: #f44336;
159
+ $ta-red-4: #ef9a9a;
160
+ $ta-red-5: #ffcdd2;
161
+ $ta-red-6: #ef535033;
162
+ $ta-red-7: #e5737333;
163
+ $ta-red-8: #ef53504d;
164
+ $ta-red-9: #e5737366;
165
+ $ta-red-10: #e66767;
166
+ $ta-red-11: #df3c3c;
167
+ $ta-red-12: #f4433620;
168
+ $ta-red-13: #ed9292;
169
+ $ta-red-14: #c20c0c;
170
+ $ta-red-15: #f4bebe;
171
+ $ta-red-16: #df3c3c33;
172
+ $ta-red-17: #ff0000;
173
+ $ta-red-18: #e668a0;
174
+ $ta-red-19: #df3d85;
175
+ $ta-red-20: #df3c3c66;
176
+ $ta-red-21: #ffebee;
177
+ $ta-red-22: #e67374;
178
+
179
+ $ta-review-green: #4db6a2;
180
+ $ta-review-green-2: #26a690;
181
+ $ta-review-green-3: #00967e;
182
+ $ta-black: #424242;
183
+ $ta-black-2: #2f2f2f;
184
+ $ta-black-3: #1d1d1d;
185
+ $ta-black-4: #42424220;
186
+
187
+ // Authentication
188
+ $ta-blue: #536bc2;
189
+ $ta-light-blue: #6d82c7;
190
+ $ta-gray-01: #f3f3f3;
191
+ $ta-gray-02: #e5e5e5;
192
+
193
+ // Dashboard
194
+ $ta-blue-13: #6692f1;
195
+ $ta-blue-14: #3b73ed;
196
+ $ta-blue-15: #0b49d1;
197
+ $ta-blue-16: #e9effd;
198
+ $ta-blue-17: #bed0f9;
199
+ $ta-blue-18: #3b73ed;
200
+ $ta-blue-19: #92b1f5;
201
+ $ta-blue-20: #3b73ed33;
202
+
203
+ $ta-white-2: #ffffff1a;
204
+ $ta-white-3: #ffffffb3;
205
+ $ta-white-4: #ffffff33;
206
+ $ta-white-5: #f7f7f780;
207
+ $ta-white-6: #ffa72620;
208
+ $ta-white-7: #fff3e0;
209
+
210
+ $ta-yellow-1: #fab15c;
211
+ $ta-yellow-2: #de7700;
212
+ $ta-yellow-3: #fddeb9;
213
+ $ta-yellow-4: #fbc88b;
214
+ $ta-yellow-5: #f89b2e;
215
+ $ta-yellow-6: #cdb255;
216
+ $ta-yellow-7: #f89b2e33;
217
+ $ta-yellow-8: #daad4f;
218
+
219
+ $ta-black-3: #1d1d1d;
220
+ // Cards
221
+ $ta-green: #56b4ac;
222
+ $ta-green-1: #50ac25;
223
+ $ta-green-2: #259f94;
224
+ $ta-green-3: #b6dfdb;
225
+ $ta-green-4: #86c9c3;
226
+ $ta-green-5: #259f9466;
227
+ $ta-green-6: #77bf56;
228
+ $ta-green-7: #259f9433;
229
+
230
+ $ta-orange-1: #ff7043;
231
+ $ta-orange-2: #f77d3b;
232
+ $ta-orange-3: #ffb097;
233
+ $ta-orange-4: #ff906d;
234
+ $ta-orange-5: #a08266;
235
+ $ta-orange-6: #ffa72610;
236
+
237
+ $ta-purple-1: #b370f0;
238
+
239
+ // mixins
240
+ @mixin border($direction, $width: 1px, $style: solid, $color: $gray-300) {
241
+ border-#{$direction}: $width $style $color;
242
+ }
243
+
244
+ @mixin downAnimation {
245
+ animation: dropdown 0.3s;
246
+ }
247
+
248
+ @keyframes dropdown {
249
+ 0% {
250
+ margin-top: 20px;
251
+ visibility: hidden;
252
+ opacity: 0;
253
+ }
254
+ 100% {
255
+ opacity: 1;
256
+ margin-top: 10px;
257
+ visibility: visible !important;
258
+ }
259
+ }
260
+
261
+ @mixin AnimationUp {
262
+ animation: dropup ease-out 0.15s;
263
+ }
264
+
265
+ @keyframes dropup {
266
+ 0% {
267
+ margin-top: -19px;
268
+ visibility: hidden;
269
+ opacity: 0;
270
+ }
271
+ 100% {
272
+ margin-top: inherit;
273
+ visibility: visible !important;
274
+ }
275
+ }
276
+
277
+ //Color Variables
278
+
279
+ $white: #dadada;
280
+ $white-2: #ffffff;
281
+ $white-3: #ebebeb;
282
+ $white-4: #ffffffb2;
283
+ $white-5: #dddddd;
284
+ $white-6: #f1f1f1;
285
+ $white-7: #ffffff20;
286
+ $white-8: #fbe9e9;
287
+ $ca-white: #f1f1f1;
288
+ $ca-white-2: #ffffff70;
289
+
290
+ $black: #424242;
291
+ $black-2: #2f2f2f;
292
+ $black-3: rgb(46, 45, 45);
293
+ $black-4: #ffffff38;
294
+ $black-5: #42424220;
295
+ $black-6: #aaaaaa10;
296
+ $black-7: #aaaaaa40;
297
+ $black-8: #aaaaaa20;
298
+ $black-9: #1d1d1d;
299
+ $black-10: rgb(108, 108, 108, 0.2);
300
+ $black-11: rgba(22, 9, 9, 0.2);
301
+ $black-12: rgb(66, 66, 66, 0.2);
302
+ $black-13: rgb(145, 145, 145, 0.2);
303
+ $black-14: #3b3b3b;
304
+
305
+ $grey: #919191;
306
+ $grey-2: #6c6c6c;
307
+ $grey-3: #aaaaaa;
308
+ $grey-4: #cccccc;
309
+ $grey-5: #91919120;
310
+ $grey-6: #ffffff66;
311
+ $grey-7: #cccccc33;
312
+ $grey-8: #91919133;
313
+ $grey-9: #b7b7b7;
314
+ $grey-10: rgb(218, 218, 218);
315
+ $grey-11: rgb(218, 218, 218, 0.2);
316
+ $grey-12: #eeeeee;
317
+ $grey-13: #f3f3f3;
318
+ $grey-14: rgb(47, 47, 47, 0.2);
319
+ $grey-button: #91919133;
320
+ $grey-15: rgba(145, 145, 145, 0.4);
321
+ $grey-16: #919191b3;
322
+ $grey-17: #6c6c6c66;
323
+ $grey-18: #9191911a;
324
+ $grey-19: #e2e2e2;
325
+
326
+ $green: #4db6a240;
327
+ $green-2: #80cbba;
328
+ $green-3: #4db6a2;
329
+ $green-4: rgb(86, 180, 172);
330
+ $green-5: rgb(86, 180, 172, 0.2);
331
+ $green-6: #56b4ac;
332
+ $green-7: #259f94;
333
+ $green-8: rgba(37, 159, 148, 0.4);
334
+ $green-9: #e7f4f3;
335
+ $green-10: #97d568;
336
+ $green-11: #59a5a5;
337
+ $green-12: #008496;
338
+ $green-13: #56ab62;
339
+ $green-14: #81c784;
340
+ $green-15: #66bb6a;
341
+
342
+ $blue: #6f9ee040;
343
+ $blue-2: #98b9ea;
344
+ $blue-3: #6f9ee0;
345
+ $blue-4: #3074d3;
346
+ $blue-5: #6f9ee0;
347
+ $blue-6: rgb(102, 146, 241);
348
+ $blue-7: rgb(102, 146, 241, 0.2);
349
+ $blue-8: #6692f1;
350
+ $blue-9: #0b49d1;
351
+ $blue-10: #bed0f9;
352
+ $blue-11: #3b73ed;
353
+ $blue-12: rgba(59, 115, 237, 0.4);
354
+ $blue-13: #38bdeb;
355
+ $blue-14: #68c3ff;
356
+ $blue-15: #415fc1;
357
+ $blue-16: #546fd2;
358
+ $blue-17: #64b5f6;
359
+ $blue-18: #304fc1;
360
+ $blue-19: #5673aab3;
361
+ $blue-20: #42a5f5;
362
+ $blue-21: #3b73ed33;
363
+
364
+ $red: #e5737340;
365
+ $red-2: #ef9a9a;
366
+ $red-3: #e57373;
367
+ $red-4: #ef5350;
368
+ $red-5: rgb(230, 103, 103);
369
+ $red-6: rgb(230, 103, 103, 0.2);
370
+ $red-7: #e66767;
371
+ $red-8: #f4bebe;
372
+ $red-9: #df3c3c;
373
+ $red-10: rgba(223, 60, 60, 0.4);
374
+ $red-11: #d80300;
375
+ $red-12: #f96b69;
376
+ $red-13: #ff6666;
377
+ $red-14: rgb(239, 83, 80, 0.2);
378
+ $red: red;
379
+
380
+ $yellow: rgb(250, 177, 92);
381
+ $yellow-2: rgb(250, 177, 92, 0.2);
382
+ $yellow-3: #fab15c;
383
+ $yellow-4: #f89b2e;
384
+ $yellow-5: #ffb74d;
385
+ $yellow-6: #ff9800;
386
+ $yellow-7: #f76629;
387
+ $yellow-8: #bcad79;
388
+ $yellow-9: #ffd54f;
389
+ $yellow-10: #ffca28;
390
+ $yellow-11: #aa9c6e;
391
+
392
+ $orange: #ff8a65;
393
+
394
+ $purple: rgb(179, 112, 240);
395
+ $purple-2: rgb(179, 112, 240, 0.2);
396
+ $purple-3: #b370f0;
397
+ $purple-4: #9e47ec;
398
+ $purple-5: #f276ef;
399
+ $purple-6: #ba68c8;
400
+
401
+ $brown: #8d6e63;
402
+
403
+ $pink: #fd4d96;
404
+ $pink-2: #f26ec2;
405
+ $pink-3: #fa4daa;
406
+ // Box Shadow
407
+ $box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
408
+ $box-shadow-2: rgba(204, 204, 204, 0);
409
+ $box-shadow-3: 0 0 4px rgba(0, 0, 0, 0.15);
410
+ $box-shadow-4: 0 2px 10px rgba(0, 0, 0, 0.2);
411
+ $box-shadow-5: 0 0 3px 0 rgba(0, 0, 0, 0.2);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ca-components",
3
- "version": "1.0.33",
3
+ "version": "1.0.35",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^16.2.0",
6
6
  "@angular/core": "^16.2.0",