refactor(components/molecule/phoneInput): structure styles

SUI-Components · Dec 19, 2023 · 602e691 · 602e691
1 parent 133d7f6
commit 602e691
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 11 deletions.
diff --git a/components/molecule/phoneInput/src/index.scss b/components/molecule/phoneInput/src/index.scss
@@ -1,10 +1,8 @@
-@import '~@s-ui/theme/lib/index.scss';
-@import '~@s-ui/react-molecule-dropdown-option/lib/index.scss';
-@import '~@s-ui/react-molecule-dropdown-list/lib/index.scss';
-@import '~@s-ui/react-molecule-input-field/lib/index.scss';
-@import '~@s-ui/react-atom-button/lib/index.scss';
+@import '~@s-ui/theme/lib/index';
 
-@import './settings.scss';
+@import './styles/settings.scss';
+
+@import './styles/index.scss';
 
 $h-molecule-phone-input: 40px;
 

diff --git a/components/molecule/phoneInput/src/settings.scss b/components/molecule/phoneInput/src/settings.scss
diff --git a/components/molecule/phoneInput/src/styles/index.scss b/components/molecule/phoneInput/src/styles/index.scss
@@ -0,0 +1,158 @@
+@import '~@s-ui/react-molecule-dropdown-option/lib/index.scss';
+@import '~@s-ui/react-molecule-dropdown-list/lib/index.scss';
+@import '~@s-ui/react-molecule-input-field/lib/index.scss';
+@import '~@s-ui/react-atom-button/lib/index.scss';
+
+$base-class: '.sui-MoleculePhoneInput';
+
+#{$base-class} {
+  display: flex;
+  flex-direction: column;
+  gap: $m-l;
+  position: relative;
+
+  &.withLabel {
+    padding-top: $p-xl;
+  }
+
+  &-input {
+    border-radius: $bdrs-l;
+    border: $bdw-s solid $c-gray-light;
+    display: flex;
+    height: $h-molecule-phone-input;
+
+    &.sui-MoleculePhoneInput--error {
+      border-color: $c-error;
+    }
+
+    &.splitted {
+      border: none;
+      gap: $m-s;
+    }
+
+    &-phone {
+      border: none;
+      outline: none;
+      width: 100%;
+
+      &Container {
+        width: 100%;
+        align-items: center;
+        display: flex;
+
+        & > input {
+          background: none;
+        }
+
+        & .sui-AtomInput-input {
+          position: relative;
+
+          &:focus {
+            border: none;
+            box-shadow: none;
+          }
+        }
+
+        & span.sui-AtomHelpText,
+        & span.sui-AtomValidationText {
+          bottom: -$m-s;
+          left: 0;
+          position: absolute;
+          transform: translate(0, 100%);
+        }
+
+        & .sui-MoleculeField .sui-AtomInput-input {
+          font-size: $fz-molecule-phone-input-input;
+        }
+        & .sui-MoleculeField-labelContainer {
+          left: 0;
+          position: absolute;
+          top: 0;
+        }
+
+        &.splitted {
+          border-radius: $bdrs-l;
+          border: $bdw-s solid $c-gray-light;
+          width: 100%;
+
+          &.sui-MoleculePhoneInput--error {
+            border-color: $c-error;
+          }
+        }
+      }
+    }
+
+    &-prefix {
+      align-items: center;
+      background-color: $c-gray-light-5;
+      border-radius: $bdrs-l;
+      display: flex;
+      gap: $p-m;
+      justify-content: center;
+      padding: $p-m $p-l;
+
+      &.splitted {
+        background-color: transparent;
+        border: $bdw-s solid $c-gray-light;
+
+        &.sui-MoleculePhoneInput--error {
+          border-color: $c-error;
+        }
+      }
+
+      &-flag {
+        font-size: $fz-l;
+      }
+
+      &-code {
+        align-items: center;
+        color: $c-gray;
+        font-size: $fz-molecule-phone-input-input-prefix-code;
+        display: flex;
+        margin: 0;
+        padding: 0;
+        padding: 0 $m-m;
+      }
+    }
+  }
+
+  &-dropdown {
+    position: absolute;
+    top: 45px;
+    width: 100%;
+    z-index: 1;
+    border: $bdw-s solid $c-gray-light;
+    border-radius: $bdrs-l;
+
+    & > ul {
+      border-radius: $bdrs-l;
+    }
+
+    &-option {
+      display: flex;
+      align-items: center;
+      &-flag {
+        font-size: $fz-l;
+      }
+      &-label {
+        margin-left: $m-m;
+        font-size: $fz-molecule-phone-input-dropdown-option-label;
+      }
+
+      &-code {
+        font-weight: $fw-regular;
+        margin-left: $m-s;
+      }
+    }
+  }
+
+  &-label {
+    font-size: $fz-molecule-phone-input-label;
+    font-weight: $fw-semi-bold;
+    margin: 0;
+  }
+
+  &-info {
+    font-size: $fz-molecule-phone-input-info;
+  }
+}
diff --git a/components/molecule/phoneInput/src/styles/settings.scss b/components/molecule/phoneInput/src/styles/settings.scss
@@ -0,0 +1,6 @@
+$h-molecule-phone-input: 40px;
+$fz-molecule-phone-input-input-prefix-code: $fz-m !default;
+$fz-molecule-phone-input-input: $fz-base !default;
+$fz-molecule-phone-input-dropdown-option-label: $fz-m !default;
+$fz-molecule-phone-input-label: $fz-s !default;
+$fz-molecule-phone-input-info: $fz-xs !default;