Make sizing across margins/padding/width/height the same
This commit is contained in:
Dane Everitt
parent
5d5a5c2afc
commit
3df134b558
3 changed files with 57 additions and 156 deletions
|
|
@ -43,7 +43,7 @@ export default () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={'my-10'}>
|
||||
<div className={'mt-10 mb-6'}>
|
||||
<FlashMessageRender byKey={'users'} className={'mb-4'}/>
|
||||
{!subusers.length ?
|
||||
<p className={'text-center text-sm text-neutral-400'}>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
transition: opacity 250ms ease;
|
||||
|
||||
& > .modal-container {
|
||||
@apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
|
||||
@apply .relative .w-full .max-w-1/2 .m-auto .flex-col .flex;
|
||||
|
||||
/*&.top {
|
||||
margin-top: 10%;
|
||||
|
|
|
|||
209
tailwind.js
209
tailwind.js
|
|
@ -120,6 +120,52 @@ let colors = {
|
|||
'green-900': 'hsl(125, 97%, 14%)',
|
||||
};
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------------------------
|
||||
| Sizes
|
||||
|-------------------------------------------------------------------------------
|
||||
|
|
||||
| Here you can specify the sizes that should be available to all of the height,
|
||||
| width, padding, and margin utilities.
|
||||
|
|
||||
*/
|
||||
|
||||
let sizes = {
|
||||
'auto': 'auto',
|
||||
'0': '0',
|
||||
'px': '1px',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'20': '5rem',
|
||||
'24': '6rem',
|
||||
'28': '7rem',
|
||||
'32': '8rem',
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'96': '24rem',
|
||||
'1/2': '50%',
|
||||
'1/3': '33.33333%',
|
||||
'2/3': '66.66667%',
|
||||
'1/4': '25%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.66667%',
|
||||
'5/6': '83.33333%',
|
||||
'full': '100%',
|
||||
'screen': '100vw',
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
|
||||
/*
|
||||
|
|
@ -452,38 +498,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
width: {
|
||||
'auto': 'auto',
|
||||
'px': '1px',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'96': '24rem',
|
||||
'1/2': '50%',
|
||||
'1/3': '33.33333%',
|
||||
'2/3': '66.66667%',
|
||||
'1/4': '25%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.66667%',
|
||||
'5/6': '83.33333%',
|
||||
'full': '100%',
|
||||
'screen': '100vw',
|
||||
},
|
||||
width: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
@ -500,26 +515,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
height: {
|
||||
'auto': 'auto',
|
||||
'px': '1px',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'full': '100%',
|
||||
'screen': '100vh',
|
||||
},
|
||||
height: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
@ -535,25 +531,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
minWidth: {
|
||||
'0': '0',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'96': '24rem',
|
||||
'full': '100%',
|
||||
},
|
||||
minWidth: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
@ -569,11 +547,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
minHeight: {
|
||||
'0': '0',
|
||||
'full': '100%',
|
||||
'screen': '100vh',
|
||||
},
|
||||
minHeight: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
@ -590,19 +564,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
maxWidth: {
|
||||
'xxs': '10rem',
|
||||
'xs': '20rem',
|
||||
'sm': '30rem',
|
||||
'md': '40rem',
|
||||
'lg': '50rem',
|
||||
'xl': '60rem',
|
||||
'2xl': '70rem',
|
||||
'3xl': '80rem',
|
||||
'4xl': '90rem',
|
||||
'5xl': '100rem',
|
||||
'full': '100%',
|
||||
},
|
||||
maxWidth: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
@ -618,10 +580,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
maxHeight: {
|
||||
'full': '100%',
|
||||
'screen': '100vh',
|
||||
},
|
||||
maxHeight: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
@ -638,23 +597,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
padding: {
|
||||
'px': '1px',
|
||||
'0': '0',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'20': '5rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
},
|
||||
padding: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
@ -671,33 +614,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
margin: {
|
||||
'n-12': '-3rem',
|
||||
'n-10': '-2.5rem',
|
||||
'n-8': '-2rem',
|
||||
'n-6': '-1.5rem',
|
||||
'n-4': '-1rem',
|
||||
'n-3': '-0.75rem',
|
||||
'n-2': '-0.5rem',
|
||||
'n-1': '-0.25rem',
|
||||
'n-px': '-1px',
|
||||
'auto': 'auto',
|
||||
'px': '1px',
|
||||
'0': '0',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'20': '5rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
},
|
||||
margin: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
@ -714,23 +631,7 @@ module.exports = {
|
|||
|
|
||||
*/
|
||||
|
||||
negativeMargin: {
|
||||
'px': '1px',
|
||||
'0': '0',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'20': '5rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
},
|
||||
negativeMargin: { ...sizes },
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
|
|||
Loading…
Reference in a new issue