Skip to content

Commit 3df134b

Browse files
DaneEverittDaneEveritt
committed
Make sizing across margins/padding/width/height the same
1 parent 5d5a5c2 commit 3df134b

File tree

3 files changed

+57
-156
lines changed

3 files changed

+57
-156
lines changed

‎resources/scripts/components/server/users/UsersContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default () => {
4343
}
4444

4545
return (
46-
<div className={'my-10'}>
46+
<div className={'mt-10 mb-6'}>
4747
<FlashMessageRender byKey={'users'} className={'mb-4'}/>
4848
{!subusers.length ?
4949
<p className={'text-center text-sm text-neutral-400'}>

‎resources/styles/components/modal.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
transition: opacity 250ms ease;
55

66
& > .modal-container {
7-
@apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
7+
@apply .relative .w-full .max-w-1/2 .m-auto .flex-col .flex;
88

99
/*&.top {
1010
margin-top: 10%;

‎tailwind.js‎

Lines changed: 55 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,52 @@ let colors = {
120120
'green-900': 'hsl(125, 97%, 14%)',
121121
};
122122

123+
/*
124+
|-------------------------------------------------------------------------------
125+
| Sizes
126+
|-------------------------------------------------------------------------------
127+
|
128+
| Here you can specify the sizes that should be available to all of the height,
129+
| width, padding, and margin utilities.
130+
|
131+
*/
132+
133+
let sizes = {
134+
'auto': 'auto',
135+
'0': '0',
136+
'px': '1px',
137+
'1': '0.25rem',
138+
'2': '0.5rem',
139+
'3': '0.75rem',
140+
'4': '1rem',
141+
'5': '1.25rem',
142+
'6': '1.5rem',
143+
'8': '2rem',
144+
'10': '2.5rem',
145+
'12': '3rem',
146+
'16': '4rem',
147+
'20': '5rem',
148+
'24': '6rem',
149+
'28': '7rem',
150+
'32': '8rem',
151+
'48': '12rem',
152+
'64': '16rem',
153+
'96': '24rem',
154+
'1/2': '50%',
155+
'1/3': '33.33333%',
156+
'2/3': '66.66667%',
157+
'1/4': '25%',
158+
'3/4': '75%',
159+
'1/5': '20%',
160+
'2/5': '40%',
161+
'3/5': '60%',
162+
'4/5': '80%',
163+
'1/6': '16.66667%',
164+
'5/6': '83.33333%',
165+
'full': '100%',
166+
'screen': '100vw',
167+
};
168+
123169
module.exports = {
124170

125171
/*
@@ -452,38 +498,7 @@ module.exports = {
452498
|
453499
*/
454500

455-
width: {
456-
'auto': 'auto',
457-
'px': '1px',
458-
'1': '0.25rem',
459-
'2': '0.5rem',
460-
'3': '0.75rem',
461-
'4': '1rem',
462-
'5': '1.25rem',
463-
'6': '1.5rem',
464-
'8': '2rem',
465-
'10': '2.5rem',
466-
'12': '3rem',
467-
'16': '4rem',
468-
'24': '6rem',
469-
'32': '8rem',
470-
'48': '12rem',
471-
'64': '16rem',
472-
'96': '24rem',
473-
'1/2': '50%',
474-
'1/3': '33.33333%',
475-
'2/3': '66.66667%',
476-
'1/4': '25%',
477-
'3/4': '75%',
478-
'1/5': '20%',
479-
'2/5': '40%',
480-
'3/5': '60%',
481-
'4/5': '80%',
482-
'1/6': '16.66667%',
483-
'5/6': '83.33333%',
484-
'full': '100%',
485-
'screen': '100vw',
486-
},
501+
width: { ...sizes },
487502

488503
/*
489504
|-----------------------------------------------------------------------------
@@ -500,26 +515,7 @@ module.exports = {
500515
|
501516
*/
502517

503-
height: {
504-
'auto': 'auto',
505-
'px': '1px',
506-
'1': '0.25rem',
507-
'2': '0.5rem',
508-
'3': '0.75rem',
509-
'4': '1rem',
510-
'5': '1.25rem',
511-
'6': '1.5rem',
512-
'8': '2rem',
513-
'10': '2.5rem',
514-
'12': '3rem',
515-
'16': '4rem',
516-
'24': '6rem',
517-
'32': '8rem',
518-
'48': '12rem',
519-
'64': '16rem',
520-
'full': '100%',
521-
'screen': '100vh',
522-
},
518+
height: { ...sizes },
523519

524520
/*
525521
|-----------------------------------------------------------------------------
@@ -535,25 +531,7 @@ module.exports = {
535531
|
536532
*/
537533

538-
minWidth: {
539-
'0': '0',
540-
'1': '0.25rem',
541-
'2': '0.5rem',
542-
'3': '0.75rem',
543-
'4': '1rem',
544-
'5': '1.25rem',
545-
'6': '1.5rem',
546-
'8': '2rem',
547-
'10': '2.5rem',
548-
'12': '3rem',
549-
'16': '4rem',
550-
'24': '6rem',
551-
'32': '8rem',
552-
'48': '12rem',
553-
'64': '16rem',
554-
'96': '24rem',
555-
'full': '100%',
556-
},
534+
minWidth: { ...sizes },
557535

558536
/*
559537
|-----------------------------------------------------------------------------
@@ -569,11 +547,7 @@ module.exports = {
569547
|
570548
*/
571549

572-
minHeight: {
573-
'0': '0',
574-
'full': '100%',
575-
'screen': '100vh',
576-
},
550+
minHeight: { ...sizes },
577551

578552
/*
579553
|-----------------------------------------------------------------------------
@@ -590,19 +564,7 @@ module.exports = {
590564
|
591565
*/
592566

593-
maxWidth: {
594-
'xxs': '10rem',
595-
'xs': '20rem',
596-
'sm': '30rem',
597-
'md': '40rem',
598-
'lg': '50rem',
599-
'xl': '60rem',
600-
'2xl': '70rem',
601-
'3xl': '80rem',
602-
'4xl': '90rem',
603-
'5xl': '100rem',
604-
'full': '100%',
605-
},
567+
maxWidth: { ...sizes },
606568

607569
/*
608570
|-----------------------------------------------------------------------------
@@ -618,10 +580,7 @@ module.exports = {
618580
|
619581
*/
620582

621-
maxHeight: {
622-
'full': '100%',
623-
'screen': '100vh',
624-
},
583+
maxHeight: { ...sizes },
625584

626585
/*
627586
|-----------------------------------------------------------------------------
@@ -638,23 +597,7 @@ module.exports = {
638597
|
639598
*/
640599

641-
padding: {
642-
'px': '1px',
643-
'0': '0',
644-
'1': '0.25rem',
645-
'2': '0.5rem',
646-
'3': '0.75rem',
647-
'4': '1rem',
648-
'5': '1.25rem',
649-
'6': '1.5rem',
650-
'8': '2rem',
651-
'10': '2.5rem',
652-
'12': '3rem',
653-
'16': '4rem',
654-
'20': '5rem',
655-
'24': '6rem',
656-
'32': '8rem',
657-
},
600+
padding: { ...sizes },
658601

659602
/*
660603
|-----------------------------------------------------------------------------
@@ -671,33 +614,7 @@ module.exports = {
671614
|
672615
*/
673616

674-
margin: {
675-
'n-12': '-3rem',
676-
'n-10': '-2.5rem',
677-
'n-8': '-2rem',
678-
'n-6': '-1.5rem',
679-
'n-4': '-1rem',
680-
'n-3': '-0.75rem',
681-
'n-2': '-0.5rem',
682-
'n-1': '-0.25rem',
683-
'n-px': '-1px',
684-
'auto': 'auto',
685-
'px': '1px',
686-
'0': '0',
687-
'1': '0.25rem',
688-
'2': '0.5rem',
689-
'3': '0.75rem',
690-
'4': '1rem',
691-
'5': '1.25rem',
692-
'6': '1.5rem',
693-
'8': '2rem',
694-
'10': '2.5rem',
695-
'12': '3rem',
696-
'16': '4rem',
697-
'20': '5rem',
698-
'24': '6rem',
699-
'32': '8rem',
700-
},
617+
margin: { ...sizes },
701618

702619
/*
703620
|-----------------------------------------------------------------------------
@@ -714,23 +631,7 @@ module.exports = {
714631
|
715632
*/
716633

717-
negativeMargin: {
718-
'px': '1px',
719-
'0': '0',
720-
'1': '0.25rem',
721-
'2': '0.5rem',
722-
'3': '0.75rem',
723-
'4': '1rem',
724-
'5': '1.25rem',
725-
'6': '1.5rem',
726-
'8': '2rem',
727-
'10': '2.5rem',
728-
'12': '3rem',
729-
'16': '4rem',
730-
'20': '5rem',
731-
'24': '6rem',
732-
'32': '8rem',
733-
},
634+
negativeMargin: { ...sizes },
734635

735636
/*
736637
|-----------------------------------------------------------------------------

0 commit comments

Comments
 (0)