@ebay/skin 17.3.0 → 17.4.0-next.1

package/src/less/phone-input/phone-input.less

@@ -0,0 +1,175 @@
+@import "../variables/variables.less";
+@import "../mixins/private/token-mixins.less";
+
+.phone-input,
+.phone-input .listbox-button {
+    display: inline-flex;
+}
+
+.phone-input button.btn {
+    border-radius: 8px 0 0 8px;
+    min-width: 64px;
+    outline: none;
+    padding-inline: var(--spacing-200) var(--spacing-100);
+}
+
+.phone-input button.btn svg.icon:last-child {
+    margin-inline-start: var(--spacing-50);
+}
+
+.phone-input .listbox-button span.fflag,
+.phone-input .listbox-button svg.flag {
+    height: 18px;
+    width: 24px;
+}
+
+.phone-input .listbox-button__value,
+.phone-input .listbox__value {
+    display: inline-flex;
+
+    & svg {
+        margin-inline-end: var(--spacing-200);
+    }
+
+    & span {
+        margin-inline-end: var(--spacing-100);
+    }
+
+    & span:last-child {
+        color: var(--color-foreground-secondary);
+    }
+}
+
+.phone-input .listbox-button__value span:nth-of-type(1),
+.phone-input .listbox__value span:nth-of-type(1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.phone-input .textbox {
+    align-items: center;
+    .background-color-token(textbox-background-color, color-background-secondary);
+    .border-color-token(textbox-border-color, color-stroke-default);
+    border-radius: 0 var(--border-radius-50) var(--border-radius-50) 0;
+    border-style: solid;
+    border-width: 1px;
+    color: var(--textbox-prefix-color, var(--color-foreground-primary));
+    display: inline-flex;
+    margin-left: -1px;
+    padding-inline-start: var(--spacing-100);
+}
+
+// To vertically re-align the text inside the textbox excluding floating label
+// stylelint-disable no-descending-specificity
+.phone-input > .textbox > span:first-child,
+.phone-input > .textbox > input.textbox__control {
+    padding-top: 2px;
+}
+
+.phone-input .textbox > input.textbox__control {
+    border: none;
+    height: 36px;
+    padding-inline: var(--spacing-50);
+}
+
+.phone-input .textbox > input.textbox__control:focus {
+    .background-color-token(textbox-focus-background-color, color-background-secondary);
+    outline: none;
+}
+
+.phone-input button.btn:focus,
+.phone-input:not(.phone-input--readonly) .textbox:focus-within {
+    .background-color-token(textbox-focus-background-color, color-background-secondary);
+    .border-color-token(textbox-focus-border-color, color-stroke-strong);
+    box-shadow: 0 0 0 0.5pt var(--color-stroke-strong);
+    position: relative;
+    z-index: 1;
+}
+
+.phone-input--large {
+    height: 48px;
+}
+
+.phone-input--fluid,
+.phone-input--fluid .textbox,
+.phone-input--fluid .textbox > input.textbox__control {
+    width: 100%;
+}
+
+.phone-input--readonly .listbox-button button[aria-disabled="true"],
+.phone-input--readonly .listbox-button button[disabled] {
+    .border-color-token(textbox-border-color, color-stroke-default);
+}
+
+.phone-input--readonly .textbox span:first-child {
+    .color-token(textbox-disabled-foreground-color, color-foreground-secondary);
+}
+
+.phone-input--readonly input.textbox__control[readonly] {
+    .background-color-token(textbox-background-color, color-background-secondary);
+    .color-token(textbox-foreground-color, color-foreground-secondary);
+}
+
+.phone-input--disabled span.fflag,
+.phone-input--disabled svg.flag {
+    filter: var(--color-icon-disabled-filter);
+}
+
+.phone-input--disabled .textbox {
+    .border-color-token(textbox-disabled-border-color, color-background-disabled);
+}
+
+.phone-input--disabled .textbox span:first-child {
+    .color-token(textbox-disabled-foreground-color, color-foreground-disabled);
+}
+
+.phone-input--error .textbox {
+    .border-color-token(textbox-invalid-foreground-color, color-stroke-attention);
+    .border-left-color-token(textbox-border-color, color-stroke-default);
+}
+
+// added to fix the floating label because of the z-index in :focus-within
+.phone-input .floating-label .floating-label__label {
+    z-index: 2;
+}
+
+.phone-input .floating-label .textbox > span:first-child {
+    padding-bottom: 2px;
+    padding-top: 18px;
+}
+
+.phone-input .floating-label--large .textbox > span:first-child {
+    padding-bottom: 5px;
+    padding-top: 23px;
+}
+
+@media screen and (min-width: @_screen-size-XS) {
+    .phone-input .listbox-button__value span:nth-of-type(1),
+    .phone-input .listbox__value span:nth-of-type(1) {
+        max-width: 50vw;
+    }
+
+    .phone-input .textbox > input.textbox__control {
+        max-width: 180px;
+    }
+}
+
+[dir="rtl"] {
+    .phone-input button.btn {
+        border-radius: 0 8px 8px 0;
+    }
+
+    .phone-input .textbox {
+        border-radius: var(--border-radius-50) 0 0 var(--border-radius-50);
+        /* input type='tel | number' by default starts from left to right in RTL mode */
+        direction: ltr;
+        margin-left: 0;
+        margin-right: -1px;
+    }
+
+    .phone-input .listbox-button__value span:last-child,
+    .phone-input .listbox__value span:last-child {
+        direction: ltr;
+    }
+}