@design-factory/design-factory 19.1.3 → 19.1.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "19.1.3",
+  "version": "19.1.4",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/styles/scss/components/card/_card.scss

@@ -53,6 +53,7 @@
 
     &:focus-visible {
       --#{$prefix}box-shadow-color: #{$df-card-focusable-focus-box-shadow-color};
+
       &:not(:hover):not(:active) {
         color: var(--#{$prefix}card-focusable-color);
       }
@@ -146,30 +147,47 @@
   }
 }
 
+.card-group {
+  --#{$prefix}card-box-shadow: #{$card-box-shadow};
+  --#{$prefix}card-border-radius: #{$card-border-radius};
+}
+
 @include media-breakpoint-up(md) {
   .card-group {
     box-shadow: var(--#{$prefix}card-box-shadow);
-    border-bottom-right-radius: var(--#{$prefix}card-border-radius);
-    border-bottom-left-radius: var(--#{$prefix}card-border-radius);
+    border-radius: var(--#{$prefix}card-border-radius);
 
     .card {
       box-shadow: none;
+      border-radius: 0;
 
       &:not(:last-of-type) {
         border-inline-end: var(--#{$prefix}card-group-between-border-width) solid
           var(--#{$prefix}card-group-between-border-color);
       }
 
-      &:first-of-type,
-      &:first-of-type .card-img-top {
-        border-start-start-radius: var(--#{$prefix}card-border-radius);
-        border-start-end-radius: 0;
+      .card-img-top {
+        border-radius: 0;
       }
 
-      &:last-of-type,
-      &:last-of-type .card-img-top {
-        border-start-end-radius: var(--#{$prefix}card-border-radius);
-        border-start-start-radius: 0;
+      &:first-of-type {
+        border-end-start-radius: var(--#{$prefix}card-border-radius);
+
+        &,
+        & .card-img-top {
+          border-start-start-radius: var(--#{$prefix}card-border-radius);
+          border-start-end-radius: 0;
+        }
+      }
+
+      &:last-of-type {
+        border-end-end-radius: var(--#{$prefix}card-border-radius);
+
+        &,
+        & .card-img-top {
+          border-start-end-radius: var(--#{$prefix}card-border-radius);
+          border-start-start-radius: 0;
+        }
       }
     }
   }

package/styles/scss/components/select/_select.scss

@@ -273,13 +273,16 @@
         cursor: var(--#{$prefix}select-disabled-cursor);
       }
 
+      .ng-arrow {
+        &:before {
+          color: var(--#{$prefix}disabled-color);
+        }
+      }
+
       .ng-value {
         background-color: var(--#{$prefix}select-disabled-bg) !important; // override
         .badge {
-          // add
-          cursor: var(--#{$prefix}select-disabled-cursor);
-          background-color: var(--#{$prefix}select-disabled-bg);
-          color: var(--#{$prefix}select-disabled-color);
+          @extend [disabled];
         }
       }
     }
@@ -289,17 +292,6 @@
     > .ng-select-container {
       background-color: var(--#{$prefix}select-readonly-bg);
       color: var(--#{$prefix}select-readonly-color);
-
-      .badge {
-        // add
-        background-color: var(--#{$prefix}select-readonly-bg);
-        color: var(--#{$prefix}select-readonly-color);
-      }
-
-      .ng-arrow-wrapper {
-        // override
-        cursor: default;
-      }
     }
   }
   @each $state, $data in $form-validation-states {
@@ -604,9 +596,6 @@
       margin-left: var(--#{$prefix}select-arrow-wrapper-margin-right);
     }
     display: flex;
-    &:hover {
-      background-color: var(--#{$prefix}select-arrow-wrapper-hover-background-color);
-    }
     text-align: var(--#{$prefix}select-arrow-text-align);
     .ng-arrow {
       width: var(--#{$prefix}select-arrow-width) !important;
@@ -617,6 +606,11 @@
       }
     }
   }
+  &:not(.ng-select-disabled):not(.df-ng-select-readonly) {
+    .ng-arrow-wrapper:hover {
+      background-color: var(--#{$prefix}select-arrow-wrapper-hover-background-color);
+    }
+  }
 
   .ng-dropdown-panel {
     background-color: #fff;

package/styles/scss/themes/brand2023/_variables.scss

@@ -954,6 +954,7 @@ $form-select-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $df-select-optionselected-background-color: var(--#{$prefix}primary-200) !default;
 $df-select-panel-box-shadow: $df-box-shadow !default;
 $df-select-panel-border: none !default;
+$df-select-disabled-bg: var(--#{$prefix}gray-200) !default;
 
 // Sidenav
 $df-sidenav-item-active-bg-color: var(--#{$prefix}primary-200) !default; // todo define a var for this ?