@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

package/dist/phone-input.scss

@@ -1,208 +1,208 @@
-.sc-phone-container {
-  position: relative;
-  width: 100%;
-  border: none !important;
-  padding: 0 !important;
-
-  // phone input styles
-  // .sc-phone-dial-code {
-  //   padding: 8px !important;
-  // }
-  .sc-phone-input-wrapper {
-    .sc-phone-chevron {
-      display: inline-flex;
-      width: 12px;
-      height: 12px;
-      font-size: 0;
-      line-height: 0;
-      margin-left: 2px;
-      align-items: center;
-      justify-content: center;
-      &::before {
-        content: "";
-        width: 6px;
-        height: 6px;
-        border-right: 1.5px solid var(--_gray-500, #667085);
-        border-bottom: 1.5px solid var(--_gray-500, #667085);
-        transform: rotate(45deg) translateY(-1px);
-      }
-    }
-  }
-
-  .sc-phone-input-wrapper {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--_gray-300);
-    border-radius: 6px;
-    height: 40px;
-    background-color: var(--_base-white);
-    overflow: hidden;
-
-    &:focus-within {
-      outline: 2px solid var(--_gray-100);
-    }
-  }
-
-  .sc-phone-country-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 0 10px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    height: 100%;
-    border-right: none;
-    flex-shrink: 0;
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-  }
-
-  .sc-phone-flag {
-    width: 24px;
-    height: 24px;
-    min-width: 24px;
-    min-height: 24px;
-    object-fit: cover;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .sc-phone-chevron {
-    font-size: 0;
-    line-height: 0;
-  }
-
-  .sc-phone-dial-code {
-    padding: 10px;
-    font-size: 14px;
-    color: var(--_gray-700, #344054);
-    white-space: nowrap;
-    flex-shrink: 0;
-    min-width: 36px;
-  }
-
-  input[type="tel"].sc-phone-input {
-    flex: 1;
-    outline: none !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    height: 100%;
-    font-size: 14px;
-    padding: 16px !important;
-    background: transparent !important;
-    min-width: 0;
-    border-left: 1px solid var(--_gray-300) !important;
-    border-right: 0px !important;
-
-    &:focus {
-      outline: none !important;
-      box-shadow: none !important;
-    }
-  }
-
-  .sc-phone-dropdown {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    width: 240px;
-    background: var(--_base-white, #fff);
-    border: 1px solid var(--_gray-300);
-    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    z-index: 9999;
-    overflow: hidden;
-  }
-
-  .sc-phone-search-wrapper {
-    position: relative;
-    padding: 8px;
-    border-bottom: 1px solid var(--_gray-200, #e4e7ec);
-  }
-
-  input[type="text"].sc-phone-search {
-    width: 100%;
-    padding: 6px 30px 6px 10px !important;
-    border: 1px solid var(--_gray-300, #d0d5dd) !important;
-    border-radius: 6px !important;
-    font-size: 14px;
-    outline: none !important;
-    box-sizing: border-box;
-    height: auto !important;
-
-    &:focus {
-      border-color: var(--_gray-300) !important;
-      outline: none !important;
-    }
-  }
-
-  .sc-phone-search-icon {
-    position: absolute;
-    right: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    display: flex;
-  }
-
-  .sc-phone-dropdown-list {
-    max-height: 200px;
-    overflow-y: auto;
-  }
-
-  .sc-phone-dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    font-size: 14px;
-    color: var(--_gray-700, #344054);
-
-    &:hover {
-      background-color: var(--_gray-50, #f9fafb);
-    }
-
-    &.selected {
-      background-color: var(--_gray-100, #f0f4ff);
-    }
-  }
-
-  .sc-phone-country-name {
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .sc-phone-check {
-    position: relative;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    font-size: 0;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      top: -1px;
-      left: 5px;
-      width: 4px;
-      height: 9px;
-      border-right: 1px solid var(--_gray-600, #475467);
-      border-bottom: 1px solid var(--_gray-600, #475467);
-      transform: rotate(45deg);
-    }
-  }
-
-  .sc-phone-no-results {
-    padding: 12px;
-    text-align: center;
-    color: var(--_gray-500, #667085);
-    font-size: 14px;
-  }
-}
+.sc-phone-container {
+  position: relative;
+  width: 100%;
+  border: none !important;
+  padding: 0 !important;
+
+  // phone input styles
+  // .sc-phone-dial-code {
+  //   padding: 8px !important;
+  // }
+  .sc-phone-input-wrapper {
+    .sc-phone-chevron {
+      display: inline-flex;
+      width: 12px;
+      height: 12px;
+      font-size: 0;
+      line-height: 0;
+      margin-left: 2px;
+      align-items: center;
+      justify-content: center;
+      &::before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        border-right: 1.5px solid var(--_gray-500, #667085);
+        border-bottom: 1.5px solid var(--_gray-500, #667085);
+        transform: rotate(45deg) translateY(-1px);
+      }
+    }
+  }
+
+  .sc-phone-input-wrapper {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--_gray-300);
+    border-radius: 6px;
+    height: 40px;
+    background-color: var(--_base-white);
+    overflow: hidden;
+
+    &:focus-within {
+      outline: 2px solid var(--_gray-100);
+    }
+  }
+
+  .sc-phone-country-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 10px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    height: 100%;
+    border-right: none;
+    flex-shrink: 0;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  .sc-phone-flag {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    object-fit: cover;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .sc-phone-chevron {
+    font-size: 0;
+    line-height: 0;
+  }
+
+  .sc-phone-dial-code {
+    padding: 10px;
+    font-size: 14px;
+    color: var(--_gray-700, #344054);
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-width: 36px;
+  }
+
+  input[type="tel"].sc-phone-input {
+    flex: 1;
+    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    height: 100%;
+    font-size: 14px;
+    padding: 16px !important;
+    background: transparent !important;
+    min-width: 0;
+    border-left: 1px solid var(--_gray-300) !important;
+    border-right: 0px !important;
+
+    &:focus {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .sc-phone-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    width: 240px;
+    background: var(--_base-white, #fff);
+    border: 1px solid var(--_gray-300);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    z-index: 9999;
+    overflow: hidden;
+  }
+
+  .sc-phone-search-wrapper {
+    position: relative;
+    padding: 8px;
+    border-bottom: 1px solid var(--_gray-200, #e4e7ec);
+  }
+
+  input[type="text"].sc-phone-search {
+    width: 100%;
+    padding: 6px 30px 6px 10px !important;
+    border: 1px solid var(--_gray-300, #d0d5dd) !important;
+    border-radius: 6px !important;
+    font-size: 14px;
+    outline: none !important;
+    box-sizing: border-box;
+    height: auto !important;
+
+    &:focus {
+      border-color: var(--_gray-300) !important;
+      outline: none !important;
+    }
+  }
+
+  .sc-phone-search-icon {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    display: flex;
+  }
+
+  .sc-phone-dropdown-list {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .sc-phone-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--_gray-700, #344054);
+
+    &:hover {
+      background-color: var(--_gray-50, #f9fafb);
+    }
+
+    &.selected {
+      background-color: var(--_gray-100, #f0f4ff);
+    }
+  }
+
+  .sc-phone-country-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sc-phone-check {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    font-size: 0;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -1px;
+      left: 5px;
+      width: 4px;
+      height: 9px;
+      border-right: 1px solid var(--_gray-600, #475467);
+      border-bottom: 1px solid var(--_gray-600, #475467);
+      transform: rotate(45deg);
+    }
+  }
+
+  .sc-phone-no-results {
+    padding: 12px;
+    text-align: center;
+    color: var(--_gray-500, #667085);
+    font-size: 14px;
+  }
+}