@agorapulse/ui-theme 16.3.1 → 16.3.2

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.2.tgz +0 -0
  2. package/assets/style/_select.scss +227 -224
  3. package/assets/style/components-custom-style/_ng-select.scss +4 -4
  4. package/package.json +1 -1
  5. package/agorapulse-ui-theme-16.3.1.tgz +0 -0
package/agorapulse-ui-theme-16.3.2.tgz ADDED
Binary file
package/assets/style/_select.scss CHANGED
@@ -247,82 +247,75 @@
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
+ }
310
293
 
311
- .option {
312
- background-color: var(--ref-color-electric-blue-10);
313
- span {
314
- color: var(--ref-color-grey-100);
294
+ &:not(.multiple) {
295
+ background-color: var(--ref-color-electric-blue-10);
296
+ color: var(--ref-color-electric-blue-150);
297
+ .label {
298
+ color: var(--ref-color-electric-blue-150);
299
+ }
300
+ .caption {
301
+ color: var(--ref-color-electric-blue-100);
302
+ }
303
+ }
315
304
  }
305
+ }
316
306
 
317
- .label {
318
- color: var(--ref-color-grey-100);
307
+ &.ng-option-marked:not(.ng-option-selected) {
308
+ background-color: transparent;
309
+ &:hover {
310
+ background-color: transparent;
319
311
  }
320
312
 
321
- .caption {
322
- color: var(--ref-color-grey-80);
323
- }
313
+ .option {
314
+ background-color: var(--ref-color-electric-blue-10);
315
+ span {
316
+ color: var(--ref-color-grey-100);
317
+ }
324
318
 
325
- &.multiple {
326
319
  .label {
327
320
  color: var(--ref-color-grey-100);
328
321
  }
@@ -330,221 +323,231 @@
330
323
  .caption {
331
324
  color: var(--ref-color-grey-80);
332
325
  }
326
+
327
+ &.multiple {
328
+ .label {
329
+ color: var(--ref-color-grey-100);
330
+ }
331
+
332
+ .caption {
333
+ color: var(--ref-color-grey-80);
334
+ }
335
+ }
333
336
  }
334
337
  }
335
- }
336
- &.ng-option-marked:has(.divider) {
337
- background-color: transparent;
338
- }
338
+ &.ng-option-marked:has(.divider) {
339
+ background-color: transparent;
340
+ }
339
341
 
340
- &.ng-option-disabled {
341
- color: var(--ref-color-grey-40);
342
+ &.ng-option-disabled {
343
+ color: var(--ref-color-grey-40);
342
344
 
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;
345
+ .disabled-opaque {
346
+ position: absolute;
347
+ inset: 0;
348
+ opacity: 0.6;
349
+ background-color: var(--ref-color-white);
350
+ cursor: default;
351
+ width: 100%;
352
+ height: 100%;
353
+ z-index: 999;
354
+ }
352
355
  }
353
356
  }
354
- }
355
357
 
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;
358
+ .loading-state {
359
+ display: flex;
360
+ justify-content: center;
361
+ align-items: center;
362
+ flex-direction: column;
363
+ gap: var(--ref-spacing-xxs);
364
+ min-height: 90px;
365
+ max-height: 90px;
366
+ padding: var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);
367
+ box-sizing: border-box;
366
368
 
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);
369
+ span {
370
+ font-size: var(--ref-font-size-sm);
371
+ line-height: var(--ref-font-line-height-sm);
372
+ font-style: italic;
373
+ font-weight: var(--ref-font-weight-regular);
374
+ color: var(--ref-color-grey-80);
375
+ }
373
376
  }
374
- }
375
377
 
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 {
378
+ .group {
379
+ display: flex;
380
+ align-items: center;
384
381
  width: 100%;
382
+ gap: var(--ref-spacing-xxs);
383
+ padding: var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical);
385
384
 
386
- .checkbox {
385
+ ap-checkbox {
387
386
  width: 100%;
388
387
 
389
- label {
390
- display: flex;
391
- gap: var(--ref-spacing-xxs);
392
- flex: 1;
393
- overflow: auto;
394
- .group-label {
388
+ .checkbox {
389
+ width: 100%;
390
+
391
+ label {
392
+ display: flex;
393
+ gap: var(--ref-spacing-xxs);
394
+ flex: 1;
395
395
  overflow: auto;
396
- white-space: nowrap;
397
- text-overflow: ellipsis;
396
+ .group-label {
397
+ overflow: auto;
398
+ white-space: nowrap;
399
+ text-overflow: ellipsis;
400
+ }
398
401
  }
399
402
  }
400
403
  }
401
404
  }
402
- }
403
-
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
405
 
431
- &:active {
432
- color: var(--ref-color-electric-blue-150);
406
+ .divider {
407
+ width: 100%;
408
+ height: 1px;
409
+ background-color: var(--comp-select-separator-color);
410
+ margin: var(--ref-spacing-xxs) 0;
433
411
  }
434
- }
435
412
 
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 {
413
+ .create-new {
414
+ display: flex;
415
+ align-items: center;
416
+ border: none;
451
417
  width: 100%;
452
- .checkbox {
453
- width: 100%;
418
+ background-color: transparent;
419
+ gap: var(--ref-spacing-xxxs);
420
+ color: var(--ref-color-electric-blue-150);
421
+ font-weight: var(--ref-font-weight-bold);
422
+ font-family: var(--ref-font-family);
423
+ cursor: pointer;
424
+ padding: var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal)
425
+ var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);
426
+ line-height: var(--ref-font-line-height-sm);
427
+ font-size: var(--ref-font-size-sm);
454
428
 
455
- label {
456
- flex: 1;
457
- overflow: auto;
458
- }
429
+ &:hover {
430
+ color: var(--ref-color-electric-blue-100);
459
431
  }
460
- }
461
432
 
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;
433
+ &:active {
434
+ color: var(--ref-color-electric-blue-150);
435
+ }
473
436
  }
474
437
 
475
- .label {
438
+ .option {
439
+ display: flex;
440
+ align-items: center;
441
+ box-sizing: border-box;
442
+ min-height: var(--comp-select-one-line-height);
443
+ max-height: var(--comp-select-one-line-height);
444
+ color: var(--comp-select-one-line-text-color);
445
+ background-color: var(--comp-select-one-line-background-color);
476
446
  font-family: var(--comp-select-one-line-text-font-family);
477
447
  font-size: var(--comp-select-one-line-text-size);
478
448
  font-weight: var(--comp-select-one-line-text-font-weight);
479
449
  line-height: var(--comp-select-one-line-text-line-height);
480
- }
481
-
482
- &.with-caption {
483
450
  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
451
 
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;
452
+ ap-checkbox {
453
+ width: 100%;
454
+ .checkbox {
455
+ width: 100%;
456
+
457
+ label {
458
+ flex: 1;
459
+ overflow: auto;
460
+ }
461
+ }
462
+ }
463
+
464
+ .option-item {
502
465
  overflow: hidden;
503
466
  white-space: nowrap;
504
467
  text-overflow: ellipsis;
505
- width: 100%;
468
+ display: inline-block;
506
469
  }
507
- }
508
- &:hover {
509
- .standalone-link {
510
- display: block;
470
+
471
+ &.not-found {
472
+ padding: var(--ref-spacing-sm) var(--ref-spacing-sm) var(--ref-spacing-xxs) var(--ref-spacing-sm);
473
+ color: var(--ref-color-grey-80);
474
+ font-style: italic;
511
475
  }
512
- }
513
- }
514
476
 
515
- .ng-dropdown-panel-items {
516
- padding: 0;
517
- }
477
+ .label {
478
+ font-family: var(--comp-select-one-line-text-font-family);
479
+ font-size: var(--comp-select-one-line-text-size);
480
+ font-weight: var(--comp-select-one-line-text-font-weight);
481
+ line-height: var(--comp-select-one-line-text-line-height);
482
+ }
518
483
 
519
- .ng-optgroup {
520
- display: flex;
521
- align-items: center;
522
- padding: 0;
484
+ &.with-caption {
485
+ padding: var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);
486
+ min-height: var(--comp-select-two-line-height);
487
+ max-height: var(--comp-select-two-line-height);
523
488
 
524
- &:first-child {
525
- .with-search,
526
- .with-select-all {
527
- border: none;
489
+ .label {
490
+ font-weight: var(--comp-select-two-line-title-text-font-weight);
491
+ font-family: var(--comp-select-two-line-title-text-font-family);
492
+ font-size: var(--comp-select-two-line-title-text-size);
493
+ line-height: var(--comp-select-two-line-title-text-line-height);
494
+ color: var(--comp-select-two-line-title-text-color);
495
+ }
496
+
497
+ .caption {
498
+ font-weight: var(--comp-select-two-line-caption-text-font-weight);
499
+ font-family: var(--comp-select-two-line-caption-text-font-family);
500
+ font-size: var(--comp-select-two-line-caption-text-size);
501
+ line-height: var(--comp-select-two-line-caption-text-line-height);
502
+ color: var(--comp-select-two-line-caption-text-color);
503
+ display: inline-block;
504
+ overflow: hidden;
505
+ white-space: nowrap;
506
+ text-overflow: ellipsis;
507
+ width: 100%;
508
+ }
509
+ }
510
+ &:hover {
511
+ .standalone-link {
512
+ display: block;
513
+ }
528
514
  }
529
515
  }
530
516
 
531
- .group {
517
+ .ng-dropdown-panel-items {
518
+ padding: 0;
519
+ }
520
+
521
+ .ng-optgroup {
532
522
  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);
523
+ align-items: center;
524
+ padding: 0;
525
+
526
+ &:first-child {
527
+ .with-search,
528
+ .with-select-all {
529
+ border: none;
530
+ }
531
+ }
532
+
533
+ .group {
534
+ display: flex;
535
+ width: 100%;
536
+ height: 100%;
537
+ background-color: var(--comp-select-group-background-color);
538
+ min-height: 32px;
539
+ box-sizing: border-box;
540
+ max-height: 50px;
541
+ padding: var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);
542
+ border-top: 1px solid var(--comp-select-group-border-top-color);
543
+
544
+ .group-label {
545
+ font-weight: var(--comp-select-group-text-font-weight);
546
+ font-size: var(--comp-select-group-text-size);
547
+ line-height: var(--comp-select-group-text-line-height);
548
+ font-family: var(--comp-select-group-text-font-family);
549
+ color: var(--comp-select-group-text-color);
550
+ }
548
551
  }
549
552
  }
550
553
  }
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.2",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
package/agorapulse-ui-theme-16.3.1.tgz DELETED
Binary file