feat(Range): add 2xs, xs, xl and 2xl sizes to match progress component

Fixes #673
This commit is contained in:
Benjamin Canac
2023-10-27 16:35:25 +02:00
parent 5ce60f775d
commit 3cb3914386

View File

@@ -746,9 +746,13 @@ export const range = {
rounded: 'rounded-s-lg',
background: 'bg-{color}-500 dark:bg-{color}-400',
size: {
'2xs': 'h-px',
xs: 'h-0.5',
sm: 'h-1',
md: 'h-2',
lg: 'h-3'
lg: 'h-3',
xl: 'h-4',
'2xl': 'h-5'
}
},
thumb: {
@@ -757,9 +761,13 @@ export const range = {
background: '[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current',
ring: '[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current',
size: {
'2xs': '[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]',
xs: '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
sm: '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
md: '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
xl: '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
'2xl': '[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
}
},
track: {
@@ -767,15 +775,23 @@ export const range = {
background: '[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700',
rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg',
size: {
'2xs': '[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px',
xs: '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3'
lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
xl: '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
'2xl': '[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5'
}
},
size: {
'2xs': 'h-1.5',
xs: 'h-2',
sm: 'h-3',
md: 'h-4',
lg: 'h-5'
lg: 'h-5',
xl: 'h-6',
'2xl': 'h-7'
},
default: {
size: 'md',