From 32cf183e5bef6c26915ef308dece8d277a664f13 Mon Sep 17 00:00:00 2001 From: Jason Noble Date: Thu, 19 Dec 2019 12:17:41 +1000 Subject: [PATCH] Added input range styling --- docs/pages/index.mdx | 90 +++++++++++++++++++++++++++++++- src/defaultOptions.js | 16 +++++- src/index.js | 119 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 222 insertions(+), 3 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 29a7e2d..7e1e3bf 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -92,6 +92,14 @@ styles that look the same in all browsers, and are easy to tweak with utilities: \n +
+ +
+ + +
+
\n +
-
+
+ +
+ {document.querySelector("#cc-value").value = e.target.value}} /> + +
+
+
+`}/> + +### Changing the color + +You can customize the range colors in your tailwind configuration file. + +```js +// tailwind.config.js +module.exports = { + theme: { + customForms: theme => ({ + default: { + range: { + thumbBorderColor: theme('colors.orange.500'), + thumbBackgroundColor: theme('colors.orange.500'), + trackBorderColor: theme('colors.orange.300'), + trackBackgroundColor: theme('colors.orange.100'), + // disabled state + disabledThumbBorderColor: theme('colors.orange.300'), + disabledThumbBackgroundColor: theme('colors.orange.300'), + disabledTrackBorderColor: theme('colors.orange.200'), + disabledTrackBackgroundColor: theme('colors.orange.100'), + // active state + activeThumbBorderColor: theme('colors.orange.600'), + activeThumbBackgroundColor: theme('colors.orange.600'), + // focus state + focusColor: theme('colors.orange.400'), + }, + }, + }) + }, + plugins: [ + require('@tailwindcss/custom-forms'), + ] +} +``` + +### Changing the size + +You can change the size of the range input in your tailwind configuration file. + +```js +// tailwind.config.js +module.exports = { + theme: { + customForms: theme => ({ + default: { + range: { + thumbSize: "1.5rem", + }, + }, + }) + }, + plugins: [ + require('@tailwindcss/custom-forms'), + ] +} +``` + +--- + ## Customizing the default styles You can customize the default styles applied by this plugin in the `theme.customForms.default` section of your `tailwind.config.js` file. Each form element can be customized under the `input`, `textarea`, `select`, `multiselect`, -`checkbox`, and `radio` keys respectively. +`checkbox`, `radio` and `range` keys respectively. ```js // tailwind.config.js diff --git a/src/defaultOptions.js b/src/defaultOptions.js index bfb60c9..eeae95a 100644 --- a/src/defaultOptions.js +++ b/src/defaultOptions.js @@ -167,6 +167,20 @@ module.exports = { backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', - }, + } + }, + range: { + thumbSize: "1.25rem", + focusColor: defaultTheme.colors.blue[400], + thumbBorderColor: defaultTheme.colors.gray[500], + thumbBackgroundColor: defaultTheme.colors.white, + trackBorderColor: defaultTheme.colors.gray[300], + trackBackgroundColor: defaultTheme.colors.gray[100], + disabledThumbBorderColor: defaultTheme.colors.gray[300], + disabledThumbBackgroundColor: defaultTheme.colors.white, + disabledTrackBorderColor: defaultTheme.colors.gray[200], + disabledTrackBackgroundColor: defaultTheme.colors.gray[100], + activeThumbBorderColor: defaultTheme.colors.gray[600], + activeThumbBackgroundColor: defaultTheme.colors.gray[300], } } diff --git a/src/index.js b/src/index.js index 07ca1ad..db8acdf 100644 --- a/src/index.js +++ b/src/index.js @@ -150,6 +150,123 @@ module.exports = function ({ addUtilities, addComponents, theme, postcss }) { })) } + function addRange(options, modifier = '') { + if (isEmpty(options)) { + return + } + + const focusRing = "4px" + const focus = { + boxShadow: `0 0 0 1px white, 0 0 0 ${focusRing} ${options.focusColor}` + } + const active = { + backgroundColor: options.activeThumbBackgroundColor, + borderColor: options.activeThumbBorderColor + } + const disabledThumb = { + 'cursor': 'default', + borderColor: options.disabledThumbBorderColor, + backgroundColor: options.disabledThumbBackgroundColor + } + const disabledTrack = { + 'cursor': 'default', + borderColor: options.disabledTrackBorderColor, + backgroundColor: options.disabledTrackBackgroundColor + } + const thumb = { + boxSizing: 'border-box', + width: options.thumbSize, + height: options.thumbSize, + borderWidth: '1px', + borderStyle: 'solid', + borderColor: options.thumbBorderColor, + borderRadius: '9999px', + backgroundColor: options.thumbBackgroundColor, + cursor: 'pointer', + appearance: 'none', + } + const track = { + boxSizing: 'border-box', + width: '100%', + height: `calc(${options.thumbSize} / 2)`, + backgroundColor: options.trackBackgroundColor, + borderWidth: '1px', + borderStyle: 'solid', + borderColor: options.trackBorderColor, + borderRadius: options.thumbSize, + cursor: 'pointer' + } + + addComponents({ + [`.form-range${modifier}`]: { + appearance: 'none', + backgroundColor: 'transparent', + cursor: 'pointer', + padding: '0', + // thumb size + focus ring + track border (1px top & 1px bottom) + + // thumb border (1px top & 1px bottom) + height: `calc(${options.thumbSize} + ${focusRing} + 4px)`, + '&:focus': { + outline: 'none', + '&::-webkit-slider-thumb': focus, + '&::-moz-range-thumb': focus, + '&::-ms-thumb': focus + }, + '&::-moz-focus-outer': { + border: '0' + }, + '&:disabled': { + cursor: 'default', + '&::-webkit-slider-thumb': disabledThumb, + '&::-moz-range-thumb': disabledThumb, + '&::-ms-thumb': disabledThumb, + '&::-webkit-slider-runnable-track': disabledTrack, + '&::-moz-range-track': disabledTrack, + '&::-ms-fill-lower': disabledTrack, + '&::-ms-fill-upper': disabledTrack + }, + // Chrome & Safari + '&::-webkit-slider-thumb': { + // Position fix for chrome: + // half of the track size (thumb size / 2 = track size) + // plus the thumb top border width (1px) + marginTop: `calc(-${options.thumbSize} / 4 - 1px)`, + ...thumb, + '&:active': active + }, + '&::-webkit-slider-runnable-track': track, + // Firefox + '&::-moz-range-thumb': { + ...thumb, + '&:active': active + }, + '&::-moz-range-track': track, + // IE11 & Edge + '&::-ms-thumb': { + // remove added margin + marginTop: '0', + // prevent focus ring being cut off + marginRight: focusRing, + marginLeft: focusRing, + ...thumb, + '&:active': active + }, + '&::-ms-track': { + width: '100%', + boxSizing: 'border-box', + color: 'transparent', + cursor: 'pointer', + backgroundColor: 'transparent', + // border used to add space for the focus ring + borderColor: 'transparent', + borderWidth: `calc(${options.thumbSize} / 2)`, + }, + '&::-ms-fill-lower': track, + '&::-ms-fill-upper': track + } + }) + } + function registerComponents() { const options = resolveOptions(theme('customForms')) @@ -159,6 +276,7 @@ module.exports = function ({ addUtilities, addComponents, theme, postcss }) { addSelect(options.default.select) addCheckbox(options.default.checkbox) addRadio(options.default.radio) + addRange(options.default.range) Object.keys((({ default: _default, ...rest }) => rest)(options)).forEach(key => { const modifier = `-${key}` @@ -169,6 +287,7 @@ module.exports = function ({ addUtilities, addComponents, theme, postcss }) { addSelect(options[key].select || {}, modifier) addCheckbox(options[key].checkbox || {}, modifier) addRadio(options[key].radio || {}, modifier) + addRange(options[key].range || {}, modifier) }) }