fix phone input height (#585)
* fix phone input height * fix width classes --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
GitHub
parent
2ab5e09750
commit
fa8c264cd4
|
|
@ -12,7 +12,7 @@
|
|||
>
|
||||
<v-select
|
||||
v-model="selectedCountryCode"
|
||||
class="w-[130px]"
|
||||
:class="theme.PhoneInput.countrySelectWidth"
|
||||
dropdown-class="max-w-[300px]"
|
||||
input-class="rounded-r-none"
|
||||
:data="countries"
|
||||
|
|
@ -41,13 +41,14 @@
|
|||
<template #selected="props">
|
||||
<div
|
||||
class="flex items-center space-x-2 justify-center overflow-hidden"
|
||||
:class="theme.PhoneInput.maxHeight"
|
||||
>
|
||||
<country-flag
|
||||
size="normal"
|
||||
class="!-mt-[9px] rounded"
|
||||
:country="props.option.code"
|
||||
/>
|
||||
<span>{{ props.option.dial_code }}</span>
|
||||
<span class="text-sm">{{ props.option.dial_code }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-select>
|
||||
|
|
@ -57,11 +58,11 @@
|
|||
class="inline-flex-grow !border-l-0 !rounded-l-none"
|
||||
:disabled="disabled ? true : null"
|
||||
:class="[
|
||||
theme.default.input,
|
||||
theme.default.spacing.horizontal,
|
||||
theme.default.spacing.vertical,
|
||||
theme.default.fontSize,
|
||||
theme.default.borderRadius,
|
||||
theme.PhoneInput.input,
|
||||
theme.PhoneInput.spacing.horizontal,
|
||||
theme.PhoneInput.spacing.vertical,
|
||||
theme.PhoneInput.fontSize,
|
||||
theme.PhoneInput.borderRadius,
|
||||
{
|
||||
'!ring-red-500 !ring-2': hasError,
|
||||
'!cursor-not-allowed !bg-gray-200': disabled,
|
||||
|
|
|
|||
|
|
@ -73,18 +73,40 @@ export const themes = {
|
|||
lg: 'w-6 h-6 mx-1'
|
||||
}
|
||||
},
|
||||
PhoneInput: {
|
||||
countrySelectWidth: {
|
||||
sm: 'w-[100px]',
|
||||
md: 'w-[120px]',
|
||||
lg: 'w-[120px]'
|
||||
},
|
||||
flag: {
|
||||
sm: '!-mt-[14px]',
|
||||
md: '!-mt-[9px] rounded',
|
||||
lg: '!-mt-[9px] rounded'
|
||||
},
|
||||
flagSize: {
|
||||
sm: 'small',
|
||||
md: 'normal',
|
||||
lg: 'normal'
|
||||
},
|
||||
maxHeight: {
|
||||
sm: 'max-h-[20px]',
|
||||
md: 'max-h-[24px]',
|
||||
lg: 'max-h-[28px]'
|
||||
}
|
||||
},
|
||||
DateInput: {
|
||||
input:
|
||||
'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100'
|
||||
},
|
||||
CheckboxInput:{
|
||||
CheckboxInput: {
|
||||
size: {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-5 h-5',
|
||||
lg: 'w-5 h-5'
|
||||
},
|
||||
},
|
||||
SwitchInput:{
|
||||
SwitchInput: {
|
||||
containerSize: {
|
||||
sm: 'h-5 w-10 p-0.5',
|
||||
md: 'h-6 w-12 p-1',
|
||||
|
|
@ -101,7 +123,7 @@ export const themes = {
|
|||
lg: 'translate-x-6'
|
||||
}
|
||||
},
|
||||
RatingInput:{
|
||||
RatingInput: {
|
||||
size: {
|
||||
sm: 'w-6 h-6',
|
||||
md: 'w-8 h-8',
|
||||
|
|
@ -202,17 +224,39 @@ export const themes = {
|
|||
lg: 'w-6 h-6 mx-1'
|
||||
}
|
||||
},
|
||||
PhoneInput: {
|
||||
countrySelectWidth: {
|
||||
sm: 'w-[100px]',
|
||||
md: 'w-[120px]',
|
||||
lg: 'w-[120px]'
|
||||
},
|
||||
flag: {
|
||||
sm: '!-mt-[14px]',
|
||||
md: '!-mt-[9px] rounded',
|
||||
lg: '!-mt-[9px] rounded'
|
||||
},
|
||||
flagSize: {
|
||||
sm: 'small',
|
||||
md: 'normal',
|
||||
lg: 'normal'
|
||||
},
|
||||
maxHeight: {
|
||||
sm: 'max-h-[20px]',
|
||||
md: 'max-h-[24px]',
|
||||
lg: 'max-h-[28px]'
|
||||
}
|
||||
},
|
||||
DateInput: {
|
||||
input: 'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 placeholder-gray-400 text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100'
|
||||
},
|
||||
CheckboxInput:{
|
||||
CheckboxInput: {
|
||||
size: {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-5 h-5',
|
||||
lg: 'w-5 h-5'
|
||||
},
|
||||
},
|
||||
SwitchInput:{
|
||||
SwitchInput: {
|
||||
containerSize: {
|
||||
sm: 'h-5 w-10',
|
||||
md: 'h-6 w-12',
|
||||
|
|
@ -224,7 +268,7 @@ export const themes = {
|
|||
lg: 'h-4 w-4'
|
||||
},
|
||||
},
|
||||
RatingInput:{
|
||||
RatingInput: {
|
||||
size: {
|
||||
sm: 'w-6 h-6',
|
||||
md: 'w-8 h-8',
|
||||
|
|
@ -325,17 +369,39 @@ export const themes = {
|
|||
lg: 'w-6 h-6 mx-1'
|
||||
}
|
||||
},
|
||||
PhoneInput: {
|
||||
countrySelectWidth: {
|
||||
sm: 'w-[100px]',
|
||||
md: 'w-[120px]',
|
||||
lg: 'w-[120px]'
|
||||
},
|
||||
flag: {
|
||||
sm: '!-mt-[14px]',
|
||||
md: '!-mt-[9px] rounded',
|
||||
lg: '!-mt-[9px] rounded'
|
||||
},
|
||||
flagSize: {
|
||||
sm: 'small',
|
||||
md: 'normal',
|
||||
lg: 'normal'
|
||||
},
|
||||
maxHeight: {
|
||||
sm: 'max-h-[20px]',
|
||||
md: 'max-h-[24px]',
|
||||
lg: 'max-h-[28px]'
|
||||
}
|
||||
},
|
||||
DateInput: {
|
||||
input: 'shadow-inner-notion border-transparent focus:border-transparent flex-1 appearance-none w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 placeholder-gray-400 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion p-[1px]'
|
||||
},
|
||||
CheckboxInput:{
|
||||
CheckboxInput: {
|
||||
size: {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-5 h-5',
|
||||
lg: 'w-5 h-5'
|
||||
},
|
||||
},
|
||||
SwitchInput:{
|
||||
SwitchInput: {
|
||||
containerSize: {
|
||||
sm: 'h-5 w-10',
|
||||
md: 'h-6 w-12',
|
||||
|
|
@ -347,7 +413,7 @@ export const themes = {
|
|||
lg: 'h-4 w-4'
|
||||
},
|
||||
},
|
||||
RatingInput:{
|
||||
RatingInput: {
|
||||
size: {
|
||||
sm: 'w-6 h-6',
|
||||
md: 'w-8 h-8',
|
||||
|
|
|
|||
Loading…
Reference in New Issue