feat(phoneNumber): update flag style

ovh · Jul 29, 2024 · 43cc43a · 43cc43a
1 parent c10fca5
commit 43cc43a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/...ges/ods/src/components/phone-number/src/components/ods-phone-number/ods-phone-number.scss b/...ges/ods/src/components/phone-number/src/components/ods-phone-number/ods-phone-number.scss
@@ -15,7 +15,7 @@
 
     &::part(flag) {
       display: inline-block;
-      filter: drop-shadow(0 0 5px rgba(0, 13, 31, 0.25));
+      filter: drop-shadow(0 0 2px rgba(0, 13, 31, 0.25));
       z-index: 1;
       background-image: $sprite-flags-background-image;
       background-repeat: no-repeat;
@@ -28,6 +28,12 @@
         background-position: $background-position;
       }
     }
+
+    &--is-disabled {
+      &::part(flag) {
+        opacity: .5;
+      }
+    }
   }
 
   &__input {

diff --git a/...ages/ods/src/components/phone-number/src/components/ods-phone-number/ods-phone-number.tsx b/...ages/ods/src/components/phone-number/src/components/ods-phone-number/ods-phone-number.tsx
@@ -135,7 +135,10 @@ export class OdsPhoneNumber {
           this.hasCountries &&
           <ods-select
             borderRounded="left"
-            class="ods-phone-number__iso-codes"
+            class={{
+              'ods-phone-number__iso-codes': true,
+              'ods-phone-number__iso-codes--is-disabled': this.isDisabled,
+            }}
             customRenderer={{
               item: (data: OdsSelectCustomRendererData) => `<span part="flag flag-${data.value}"></span>`,
               option: (data: OdsSelectCustomRendererData) => `