@agorapulse/ui-theme 16.3.1 → 16.3.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 (5) hide show
  1. package/{agorapulse-ui-theme-16.3.1.tgz → agorapulse-ui-theme-16.3.3.tgz} +0 -0
  2. package/assets/style/_input.scss +3 -0
  3. package/assets/style/_select.scss +228 -224
  4. package/assets/style/components-custom-style/_ng-select.scss +4 -4
  5. package/package.json +1 -1
package/assets/style/_input.scss CHANGED
@@ -33,6 +33,9 @@
33
33
  &.ap-textarea.resizable {
34
34
  resize: auto;
35
35
  }
36
+ &.ap-textarea {
37
+ min-width: 256px;
38
+ }
36
39
  &[type='search']::-webkit-search-decoration,
37
40
  &[type='search']::-webkit-search-cancel-button,
38
41
  &[type='search']::-webkit-search-results-button,
package/assets/style/_select.scss CHANGED
@@ -247,82 +247,76 @@
247
247
  border-radius: var(--ref-border-radius-sm);
248
248
  }
249
249
 
250
- .ng-option {
251
- box-sizing: border-box;
250
+ .ng-dropdown-panel-items {
252
251
  padding: 0;
253
- position: relative;
254
-
255
- .ng-option-label {
252
+ .ng-option {
253
+ box-sizing: border-box;
256
254
  padding: 0;
257
- }
255
+ position: relative;
258
256
 
259
- &.ng-option-child {
260
- padding-left: 0;
261
- }
262
-
263
- &:hover:not(.ng-option-disabled) {
264
- .option {
265
- background-color: var(--ref-color-electric-blue-10);
257
+ .ng-option-label {
258
+ padding: 0;
266
259
  }
267
- }
268
260
 
269
- &:active:not(.ng-option-disabled) {
270
- .option {
271
- background-color: var(--ref-color-electric-blue-20);
261
+ &.ng-option-child {
262
+ padding-left: 0;
272
263
  }
273
- }
274
264
 
275
- &:focus:not(.ng-option-disabled) {
276
- .option {
277
- background-color: var(--ref-color-electric-blue-20);
265
+ &:hover:not(.ng-option-disabled) {
266
+ .option {
267
+ background-color: var(--ref-color-electric-blue-10);
268
+ }
278
269
  }
279
- }
280
270
 
281
- &.ng-option-selected {
282
- background-color: transparent;
283
- .option {
284
- font-family: var(--comp-select-one-line-selected-text-font-family);
285
- font-size: var(--comp-select-one-line-selected-text-size);
286
- line-height: var(--comp-select-one-line-selected-text-line-height);
287
- font-weight: var(--comp-select-one-line-selected-text-font-weight);
288
- .option-item {
289
- font-weight: var(--comp-select-one-line-selected-text-font-weight);
271
+ &:active:not(.ng-option-disabled) {
272
+ .option {
273
+ background-color: var(--ref-color-electric-blue-20);
290
274
  }
275
+ }
291
276
 
292
- &:not(.multiple) {
293
- background-color: var(--ref-color-electric-blue-10);
294
- color: var(--ref-color-electric-blue-150);
295
- .label {
296
- color: var(--ref-color-electric-blue-150);
297
- }
298
- .caption {
299
- color: var(--ref-color-electric-blue-100);
300
- }
277
+ &:focus:not(.ng-option-disabled) {
278
+ .option {
279
+ background-color: var(--ref-color-electric-blue-20);
301
280
  }
302
281
  }
303
- }
304
282
 
305
- &.ng-option-marked:not(.ng-option-selected) {
306
- background-color: transparent;
307
- &:hover {
283
+ &.ng-option-selected {
308
284
  background-color: transparent;
309
- }
285
+ .option {
286
+ font-family: var(--comp-select-one-line-selected-text-font-family);
287
+ font-size: var(--comp-select-one-line-selected-text-size);
288
+ line-height: var(--comp-select-one-line-selected-text-line-height);
289
+ font-weight: var(--comp-select-one-line-selected-text-font-weight);
290
+ .option-item {
291
+ font-weight: var(--comp-select-one-line-selected-text-font-weight);
292
+ color: var(--ref-color-grey-100);
293
+ }
310
294
 
311
- .option {
312
- background-color: var(--ref-color-electric-blue-10);
313
- span {
314
- color: var(--ref-color-grey-100);
295
+ &:not(.multiple) {
296
+ background-color: var(--ref-color-electric-blue-10);
297
+ color: var(--ref-color-electric-blue-150);
298
+ .label {
299
+ color: var(--ref-color-electric-blue-150);
300
+ }
301
+ .caption {
302
+ color: var(--ref-color-electric-blue-100);
303
+ }
304
+ }
315
305
  }
306
+ }
316
307
 
317
- .label {
318
- color: var(--ref-color-grey-100);
308
+ &.ng-option-marked:not(.ng-option-selected) {
309
+ background-color: transparent;
310
+ &:hover {
311
+ background-color: transparent;
319
312
  }
320
313
 
321
- .caption {
322
- color: var(--ref-color-grey-80);
323
- }
314
+ .option {
315
+ background-color: var(--ref-color-electric-blue-10);
316
+ span {
317
+ color: var(--ref-color-grey-100);
318
+ }
324
319
 
325
- &.multiple {
326
320
  .label {
327
321
  color: var(--ref-color-grey-100);
328
322
  }
@@ -330,221 +324,231 @@
330
324
  .caption {
331
325
  color: var(--ref-color-grey-80);
332
326
  }
327
+
328
+ &.multiple {
329
+ .label {
330
+ color: var(--ref-color-grey-100);
331
+ }
332
+
333
+ .caption {
334
+ color: var(--ref-color-grey-80);
335
+ }
336
+ }
333
337
  }
334
338
  }
335
- }
336
- &.ng-option-marked:has(.divider) {
337
- background-color: transparent;
338
- }
339
+ &.ng-option-marked:has(.divider) {
340
+ background-color: transparent;
341
+ }
339
342
 
340
- &.ng-option-disabled {
341
- color: var(--ref-color-grey-40);
343
+ &.ng-option-disabled {
344
+ color: var(--ref-color-grey-40);
342
345
 
343
- .disabled-opaque {
344
- position: absolute;
345
- inset: 0;
346
- opacity: 0.6;
347
- background-color: var(--ref-color-white);
348
- cursor: default;
349
- width: 100%;
350
- height: 100%;
351
- z-index: 999;
346
+ .disabled-opaque {
347
+ position: absolute;
348
+ inset: 0;
349
+ opacity: 0.6;
350
+ background-color: var(--ref-color-white);
351
+ cursor: default;
352
+ width: 100%;
353
+ height: 100%;
354
+ z-index: 999;
355
+ }
352
356
  }
353
357
  }
354
- }
355
358
 
356
- .loading-state {
357
- display: flex;
358
- justify-content: center;
359
- align-items: center;
360
- flex-direction: column;
361
- gap: var(--ref-spacing-xxs);
362
- min-height: 90px;
363
- max-height: 90px;
364
- padding: var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);
365
- box-sizing: border-box;
359
+ .loading-state {
360
+ display: flex;
361
+ justify-content: center;
362
+ align-items: center;
363
+ flex-direction: column;
364
+ gap: var(--ref-spacing-xxs);
365
+ min-height: 90px;
366
+ max-height: 90px;
367
+ padding: var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);
368
+ box-sizing: border-box;
366
369
 
367
- span {
368
- font-size: var(--ref-font-size-sm);
369
- line-height: var(--ref-font-line-height-sm);
370
- font-style: italic;
371
- font-weight: var(--ref-font-weight-regular);
372
- color: var(--ref-color-grey-80);
370
+ span {
371
+ font-size: var(--ref-font-size-sm);
372
+ line-height: var(--ref-font-line-height-sm);
373
+ font-style: italic;
374
+ font-weight: var(--ref-font-weight-regular);
375
+ color: var(--ref-color-grey-80);
376
+ }
373
377
  }
374
- }
375
378
 
376
- .group {
377
- display: flex;
378
- align-items: center;
379
- width: 100%;
380
- gap: var(--ref-spacing-xxs);
381
- padding: var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical);
382
-
383
- ap-checkbox {
379
+ .group {
380
+ display: flex;
381
+ align-items: center;
384
382
  width: 100%;
383
+ gap: var(--ref-spacing-xxs);
384
+ padding: var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical);
385
385
 
386
- .checkbox {
386
+ ap-checkbox {
387
387
  width: 100%;
388
388
 
389
- label {
390
- display: flex;
391
- gap: var(--ref-spacing-xxs);
392
- flex: 1;
393
- overflow: auto;
394
- .group-label {
389
+ .checkbox {
390
+ width: 100%;
391
+
392
+ label {
393
+ display: flex;
394
+ gap: var(--ref-spacing-xxs);
395
+ flex: 1;
395
396
  overflow: auto;
396
- white-space: nowrap;
397
- text-overflow: ellipsis;
397
+ .group-label {
398
+ overflow: auto;
399
+ white-space: nowrap;
400
+ text-overflow: ellipsis;
401
+ }
398
402
  }
399
403
  }
400
404
  }
401
405
  }
402
- }
403
406
 
404
- .divider {
405
- width: 100%;
406
- height: 1px;
407
- background-color: var(--comp-select-separator-color);
408
- margin: var(--ref-spacing-xxs) 0;
409
- }
410
-
411
- .create-new {
412
- display: flex;
413
- align-items: center;
414
- border: none;
415
- width: 100%;
416
- background-color: transparent;
417
- gap: var(--ref-spacing-xxxs);
418
- color: var(--ref-color-electric-blue-150);
419
- font-weight: var(--ref-font-weight-bold);
420
- font-family: var(--ref-font-family);
421
- cursor: pointer;
422
- padding: var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal)
423
- var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);
424
- line-height: var(--ref-font-line-height-sm);
425
- font-size: var(--ref-font-size-sm);
426
-
427
- &:hover {
428
- color: var(--ref-color-electric-blue-100);
429
- }
430
-
431
- &:active {
432
- color: var(--ref-color-electric-blue-150);
407
+ .divider {
408
+ width: 100%;
409
+ height: 1px;
410
+ background-color: var(--comp-select-separator-color);
411
+ margin: var(--ref-spacing-xxs) 0;
433
412
  }
434
- }
435
413
 
436
- .option {
437
- display: flex;
438
- align-items: center;
439
- box-sizing: border-box;
440
- min-height: var(--comp-select-one-line-height);
441
- max-height: var(--comp-select-one-line-height);
442
- color: var(--comp-select-one-line-text-color);
443
- background-color: var(--comp-select-one-line-background-color);
444
- font-family: var(--comp-select-one-line-text-font-family);
445
- font-size: var(--comp-select-one-line-text-size);
446
- font-weight: var(--comp-select-one-line-text-font-weight);
447
- line-height: var(--comp-select-one-line-text-line-height);
448
- padding: var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);
449
-
450
- ap-checkbox {
414
+ .create-new {
415
+ display: flex;
416
+ align-items: center;
417
+ border: none;
451
418
  width: 100%;
452
- .checkbox {
453
- width: 100%;
419
+ background-color: transparent;
420
+ gap: var(--ref-spacing-xxxs);
421
+ color: var(--ref-color-electric-blue-150);
422
+ font-weight: var(--ref-font-weight-bold);
423
+ font-family: var(--ref-font-family);
424
+ cursor: pointer;
425
+ padding: var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal)
426
+ var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);
427
+ line-height: var(--ref-font-line-height-sm);
428
+ font-size: var(--ref-font-size-sm);
454
429
 
455
- label {
456
- flex: 1;
457
- overflow: auto;
458
- }
430
+ &:hover {
431
+ color: var(--ref-color-electric-blue-100);
459
432
  }
460
- }
461
433
 
462
- .option-item {
463
- overflow: hidden;
464
- white-space: nowrap;
465
- text-overflow: ellipsis;
466
- display: inline-block;
467
- }
468
-
469
- &.not-found {
470
- padding: var(--ref-spacing-sm) var(--ref-spacing-sm) var(--ref-spacing-xxs) var(--ref-spacing-sm);
471
- color: var(--ref-color-grey-80);
472
- font-style: italic;
434
+ &:active {
435
+ color: var(--ref-color-electric-blue-150);
436
+ }
473
437
  }
474
438
 
475
- .label {
439
+ .option {
440
+ display: flex;
441
+ align-items: center;
442
+ box-sizing: border-box;
443
+ min-height: var(--comp-select-one-line-height);
444
+ max-height: var(--comp-select-one-line-height);
445
+ color: var(--comp-select-one-line-text-color);
446
+ background-color: var(--comp-select-one-line-background-color);
476
447
  font-family: var(--comp-select-one-line-text-font-family);
477
448
  font-size: var(--comp-select-one-line-text-size);
478
449
  font-weight: var(--comp-select-one-line-text-font-weight);
479
450
  line-height: var(--comp-select-one-line-text-line-height);
480
- }
481
-
482
- &.with-caption {
483
451
  padding: var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);
484
- min-height: var(--comp-select-two-line-height);
485
- max-height: var(--comp-select-two-line-height);
486
452
 
487
- .label {
488
- font-weight: var(--comp-select-two-line-title-text-font-weight);
489
- font-family: var(--comp-select-two-line-title-text-font-family);
490
- font-size: var(--comp-select-two-line-title-text-size);
491
- line-height: var(--comp-select-two-line-title-text-line-height);
492
- color: var(--comp-select-two-line-title-text-color);
493
- }
494
-
495
- .caption {
496
- font-weight: var(--comp-select-two-line-caption-text-font-weight);
497
- font-family: var(--comp-select-two-line-caption-text-font-family);
498
- font-size: var(--comp-select-two-line-caption-text-size);
499
- line-height: var(--comp-select-two-line-caption-text-line-height);
500
- color: var(--comp-select-two-line-caption-text-color);
501
- display: inline-block;
453
+ ap-checkbox {
454
+ width: 100%;
455
+ .checkbox {
456
+ width: 100%;
457
+
458
+ label {
459
+ flex: 1;
460
+ overflow: auto;
461
+ }
462
+ }
463
+ }
464
+
465
+ .option-item {
502
466
  overflow: hidden;
503
467
  white-space: nowrap;
504
468
  text-overflow: ellipsis;
505
- width: 100%;
469
+ display: inline-block;
506
470
  }
507
- }
508
- &:hover {
509
- .standalone-link {
510
- display: block;
471
+
472
+ &.not-found {
473
+ padding: var(--ref-spacing-sm) var(--ref-spacing-sm) var(--ref-spacing-xxs) var(--ref-spacing-sm);
474
+ color: var(--ref-color-grey-80);
475
+ font-style: italic;
511
476
  }
512
- }
513
- }
514
477
 
515
- .ng-dropdown-panel-items {
516
- padding: 0;
517
- }
478
+ .label {
479
+ font-family: var(--comp-select-one-line-text-font-family);
480
+ font-size: var(--comp-select-one-line-text-size);
481
+ font-weight: var(--comp-select-one-line-text-font-weight);
482
+ line-height: var(--comp-select-one-line-text-line-height);
483
+ }
518
484
 
519
- .ng-optgroup {
520
- display: flex;
521
- align-items: center;
522
- padding: 0;
485
+ &.with-caption {
486
+ padding: var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);
487
+ min-height: var(--comp-select-two-line-height);
488
+ max-height: var(--comp-select-two-line-height);
523
489
 
524
- &:first-child {
525
- .with-search,
526
- .with-select-all {
527
- border: none;
490
+ .label {
491
+ font-weight: var(--comp-select-two-line-title-text-font-weight);
492
+ font-family: var(--comp-select-two-line-title-text-font-family);
493
+ font-size: var(--comp-select-two-line-title-text-size);
494
+ line-height: var(--comp-select-two-line-title-text-line-height);
495
+ color: var(--comp-select-two-line-title-text-color);
496
+ }
497
+
498
+ .caption {
499
+ font-weight: var(--comp-select-two-line-caption-text-font-weight);
500
+ font-family: var(--comp-select-two-line-caption-text-font-family);
501
+ font-size: var(--comp-select-two-line-caption-text-size);
502
+ line-height: var(--comp-select-two-line-caption-text-line-height);
503
+ color: var(--comp-select-two-line-caption-text-color);
504
+ display: inline-block;
505
+ overflow: hidden;
506
+ white-space: nowrap;
507
+ text-overflow: ellipsis;
508
+ width: 100%;
509
+ }
510
+ }
511
+ &:hover {
512
+ .standalone-link {
513
+ display: block;
514
+ }
528
515
  }
529
516
  }
530
517
 
531
- .group {
518
+ .ng-dropdown-panel-items {
519
+ padding: 0;
520
+ }
521
+
522
+ .ng-optgroup {
532
523
  display: flex;
533
- width: 100%;
534
- height: 100%;
535
- background-color: var(--comp-select-group-background-color);
536
- min-height: 32px;
537
- box-sizing: border-box;
538
- max-height: 50px;
539
- padding: var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);
540
- border-top: 1px solid var(--comp-select-group-border-top-color);
541
-
542
- .group-label {
543
- font-weight: var(--comp-select-group-text-font-weight);
544
- font-size: var(--comp-select-group-text-size);
545
- line-height: var(--comp-select-group-text-line-height);
546
- font-family: var(--comp-select-group-text-font-family);
547
- color: var(--comp-select-group-text-color);
524
+ align-items: center;
525
+ padding: 0;
526
+
527
+ &:first-child {
528
+ .with-search,
529
+ .with-select-all {
530
+ border: none;
531
+ }
532
+ }
533
+
534
+ .group {
535
+ display: flex;
536
+ width: 100%;
537
+ height: 100%;
538
+ background-color: var(--comp-select-group-background-color);
539
+ min-height: 32px;
540
+ box-sizing: border-box;
541
+ max-height: 50px;
542
+ padding: var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);
543
+ border-top: 1px solid var(--comp-select-group-border-top-color);
544
+
545
+ .group-label {
546
+ font-weight: var(--comp-select-group-text-font-weight);
547
+ font-size: var(--comp-select-group-text-size);
548
+ line-height: var(--comp-select-group-text-line-height);
549
+ font-family: var(--comp-select-group-text-font-family);
550
+ color: var(--comp-select-group-text-color);
551
+ }
548
552
  }
549
553
  }
550
554
  }
package/assets/style/components-custom-style/_ng-select.scss CHANGED
@@ -85,7 +85,7 @@ form.submitted {
85
85
  }
86
86
  }
87
87
 
88
- .ng-dropdown-panel:not(.ap-select) {
88
+ .ng-dropdown-panel {
89
89
  border: none;
90
90
  box-shadow: none;
91
91
  &.ng-select-bottom {
@@ -170,16 +170,16 @@ form.submitted {
170
170
  }
171
171
  }
172
172
 
173
- .ng-dropdown-panel:not(.ap-select).ng-select-top .ng-dropdown-panel-items .ng-option:first-child {
173
+ .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child {
174
174
  border-top-right-radius: 0;
175
175
  border-top-left-radius: 0;
176
176
  }
177
177
 
178
- .ng-dropdown-panel:not(.ap-select).ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child {
178
+ .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child {
179
179
  border-bottom-right-radius: 0;
180
180
  border-bottom-left-radius: 0;
181
181
  }
182
182
 
183
- .ng-select:not(.ap-select).ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
183
+ .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
184
184
  top: unset;
185
185
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "16.3.1",
3
+ "version": "16.3.3",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",