@design-factory/design-factory 20.0.0 → 20.0.1

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/design-factory-initial-branding.css +1 -1
  2. package/design-factory.css +1 -1
  3. package/package.json +1 -1
  4. package/styles/scss/components/select/_select.scss +18 -4
  5. package/styles/scss/themes/brand2023/_variables.scss +2 -0
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@design-factory/design-factory",
3
3
  "description": "Amadeus design system",
4
4
  "license": "BSD-3-Clause",
5
- "version": "20.0.0",
5
+ "version": "20.0.1",
6
6
  "dependencies": {
7
7
  "tslib": "^2.0.0"
8
8
  },
package/styles/scss/components/select/_select.scss CHANGED
@@ -399,8 +399,11 @@
399
399
  // add
400
400
  height: initial; // in single case we will only have one line
401
401
 
402
- > .ng-select-container .ng-value-container .ng-value {
403
- font-size: inherit;
402
+ > .ng-select-container .ng-value-container {
403
+ min-height: calc($input-height-lg - 2 * $input-border-width);
404
+ .ng-value {
405
+ font-size: inherit;
406
+ }
404
407
  }
405
408
  }
406
409
  &.form-control-sm {
@@ -409,6 +412,9 @@
409
412
 
410
413
  > .ng-select-container {
411
414
  height: inherit;
415
+ .ng-value-container {
416
+ min-height: calc($input-height-sm - 2 * $input-border-width);
417
+ }
412
418
  }
413
419
  }
414
420
  &.ng-select-disabled {
@@ -519,11 +525,14 @@
519
525
  margin-bottom: var(--#{$prefix}select-value-margin); // override
520
526
  @include ngs-root('.form-control-lg') {
521
527
  // add
522
- margin-top: var(--#{$prefix}select-value-margin-lg); // override
528
+ margin-top: calc(
529
+ ($input-height-lg - 2 * $input-border-width - var(--#{$prefix}select-clear-button-height)) / 2
530
+ ); //override
523
531
  }
524
532
  @include ngs-root('.form-control-sm') {
525
533
  // add
526
534
  margin-top: var(--#{$prefix}select-value-margin-sm); // add
535
+ margin-bottom: var(--#{$prefix}select-value-margin-sm); // add
527
536
  }
528
537
  @include ltr {
529
538
  margin-left: var(--#{$prefix}select-clear-button-margin-left); // add
@@ -583,7 +592,12 @@
583
592
  margin-top: var(--#{$prefix}select-value-margin); // add
584
593
  @include ngs-root('.form-control-lg') {
585
594
  // add
586
- margin-top: var(--#{$prefix}select-value-margin-lg); // override
595
+ margin-top: calc(
596
+ ($input-height-lg - 2 * $input-border-width - var(--#{$prefix}select-arrow-wrapper-height)) / 2
597
+ ); // add
598
+ @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
599
+ font-size: var(--#{$prefix}typo-sizing-default); // in order to have the arrow verticaly aligned in large
600
+ }
587
601
  }
588
602
  @include ngs-root('.form-control-sm') {
589
603
  // add
package/styles/scss/themes/brand2023/_variables.scss CHANGED
@@ -956,6 +956,8 @@ $df-select-value-height-sm: calc(var(--#{prefix}typo-sizing-small) * $line-heigh
956
956
  $df-select-value-height-lg: calc(var(--#{prefix}typo-sizing-large) * $line-height-lg) !default;
957
957
  $df-select-witharrow-clear-button-margin: var(--#{$prefix}spacing-3) !default;
958
958
  $df-select-disabled-bg: var(--#{$prefix}color-disabled-main-background) !default;
959
+ $df-select-value-margin-sm: 0.125rem !default;
960
+ $df-select-value-margin-lg: 0.5rem !default;
959
961
 
960
962
  // Sidenav
961
963
  $df-sidenav-item-active-bg-color: var(--#{$prefix}primary-200) !default; // todo define a var for this ?