diff options
Diffstat (limited to 'packages/react-docs')
5 files changed, 892 insertions, 314 deletions
diff --git a/packages/react-docs/example/public/css/basscss_responsive_margin.css b/packages/react-docs/example/public/css/basscss_responsive_margin.css index b601bd491..c9f3e855c 100644 --- a/packages/react-docs/example/public/css/basscss_responsive_margin.css +++ b/packages/react-docs/example/public/css/basscss_responsive_margin.css @@ -1,160 +1,453 @@ /* Basscss Responsive Margin */ -@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */ - - .sm-m0 { margin: 0 } - .sm-mt0 { margin-top: 0 } - .sm-mr0 { margin-right: 0 } - .sm-mb0 { margin-bottom: 0 } - .sm-ml0 { margin-left: 0 } - .sm-mx0 { margin-left: 0; margin-right: 0 } - .sm-my0 { margin-top: 0; margin-bottom: 0 } - - .sm-m1 { margin: .5rem } - .sm-mt1 { margin-top: .5rem } - .sm-mr1 { margin-right: .5rem } - .sm-mb1 { margin-bottom: .5rem } - .sm-ml1 { margin-left: .5rem } - .sm-mx1 { margin-left: .5rem; margin-right: .5rem } - .sm-my1 { margin-top: .5rem; margin-bottom: .5rem } - - .sm-m2 { margin: 1rem } - .sm-mt2 { margin-top: 1rem } - .sm-mr2 { margin-right: 1rem } - .sm-mb2 { margin-bottom: 1rem } - .sm-ml2 { margin-left: 1rem } - .sm-mx2 { margin-left: 1rem; margin-right: 1rem } - .sm-my2 { margin-top: 1rem; margin-bottom: 1rem } - - .sm-m3 { margin: 2rem } - .sm-mt3 { margin-top: 2rem } - .sm-mr3 { margin-right: 2rem } - .sm-mb3 { margin-bottom: 2rem } - .sm-ml3 { margin-left: 2rem } - .sm-mx3 { margin-left: 2rem; margin-right: 2rem } - .sm-my3 { margin-top: 2rem; margin-bottom: 2rem } - - .sm-m4 { margin: 4rem } - .sm-mt4 { margin-top: 4rem } - .sm-mr4 { margin-right: 4rem } - .sm-mb4 { margin-bottom: 4rem } - .sm-ml4 { margin-left: 4rem } - .sm-mx4 { margin-left: 4rem; margin-right: 4rem } - .sm-my4 { margin-top: 4rem; margin-bottom: 4rem } - - .sm-mxn1 { margin-left: -.5rem; margin-right: -.5rem } - .sm-mxn2 { margin-left: -1rem; margin-right: -1rem } - .sm-mxn3 { margin-left: -2rem; margin-right: -2rem } - .sm-mxn4 { margin-left: -4rem; margin-right: -4rem } - - .sm-ml-auto { margin-left: auto } - .sm-mr-auto { margin-right: auto } - .sm-mx-auto { margin-left: auto; margin-right: auto } +@media (max-width: 52em) { + /* Modified by Fabio Berger to max-width from min-width */ + .sm-m0 { + margin: 0; + } + .sm-mt0 { + margin-top: 0; + } + .sm-mr0 { + margin-right: 0; + } + .sm-mb0 { + margin-bottom: 0; + } + .sm-ml0 { + margin-left: 0; + } + .sm-mx0 { + margin-left: 0; + margin-right: 0; + } + .sm-my0 { + margin-top: 0; + margin-bottom: 0; + } + + .sm-m1 { + margin: 0.5rem; + } + .sm-mt1 { + margin-top: 0.5rem; + } + .sm-mr1 { + margin-right: 0.5rem; + } + .sm-mb1 { + margin-bottom: 0.5rem; + } + .sm-ml1 { + margin-left: 0.5rem; + } + .sm-mx1 { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .sm-my1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .sm-m2 { + margin: 1rem; + } + .sm-mt2 { + margin-top: 1rem; + } + .sm-mr2 { + margin-right: 1rem; + } + .sm-mb2 { + margin-bottom: 1rem; + } + .sm-ml2 { + margin-left: 1rem; + } + .sm-mx2 { + margin-left: 1rem; + margin-right: 1rem; + } + .sm-my2 { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .sm-m3 { + margin: 2rem; + } + .sm-mt3 { + margin-top: 2rem; + } + .sm-mr3 { + margin-right: 2rem; + } + .sm-mb3 { + margin-bottom: 2rem; + } + .sm-ml3 { + margin-left: 2rem; + } + .sm-mx3 { + margin-left: 2rem; + margin-right: 2rem; + } + .sm-my3 { + margin-top: 2rem; + margin-bottom: 2rem; + } + + .sm-m4 { + margin: 4rem; + } + .sm-mt4 { + margin-top: 4rem; + } + .sm-mr4 { + margin-right: 4rem; + } + .sm-mb4 { + margin-bottom: 4rem; + } + .sm-ml4 { + margin-left: 4rem; + } + .sm-mx4 { + margin-left: 4rem; + margin-right: 4rem; + } + .sm-my4 { + margin-top: 4rem; + margin-bottom: 4rem; + } + + .sm-mxn1 { + margin-left: -0.5rem; + margin-right: -0.5rem; + } + .sm-mxn2 { + margin-left: -1rem; + margin-right: -1rem; + } + .sm-mxn3 { + margin-left: -2rem; + margin-right: -2rem; + } + .sm-mxn4 { + margin-left: -4rem; + margin-right: -4rem; + } + + .sm-ml-auto { + margin-left: auto; + } + .sm-mr-auto { + margin-right: auto; + } + .sm-mx-auto { + margin-left: auto; + margin-right: auto; + } } @media (min-width: 52em) { + .md-m0 { + margin: 0; + } + .md-mt0 { + margin-top: 0; + } + .md-mr0 { + margin-right: 0; + } + .md-mb0 { + margin-bottom: 0; + } + .md-ml0 { + margin-left: 0; + } + .md-mx0 { + margin-left: 0; + margin-right: 0; + } + .md-my0 { + margin-top: 0; + margin-bottom: 0; + } + + .md-m1 { + margin: 0.5rem; + } + .md-mt1 { + margin-top: 0.5rem; + } + .md-mr1 { + margin-right: 0.5rem; + } + .md-mb1 { + margin-bottom: 0.5rem; + } + .md-ml1 { + margin-left: 0.5rem; + } + .md-mx1 { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .md-my1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } - .md-m0 { margin: 0 } - .md-mt0 { margin-top: 0 } - .md-mr0 { margin-right: 0 } - .md-mb0 { margin-bottom: 0 } - .md-ml0 { margin-left: 0 } - .md-mx0 { margin-left: 0; margin-right: 0 } - .md-my0 { margin-top: 0; margin-bottom: 0 } - - .md-m1 { margin: .5rem } - .md-mt1 { margin-top: .5rem } - .md-mr1 { margin-right: .5rem } - .md-mb1 { margin-bottom: .5rem } - .md-ml1 { margin-left: .5rem } - .md-mx1 { margin-left: .5rem; margin-right: .5rem } - .md-my1 { margin-top: .5rem; margin-bottom: .5rem } - - .md-m2 { margin: 1rem } - .md-mt2 { margin-top: 1rem } - .md-mr2 { margin-right: 1rem } - .md-mb2 { margin-bottom: 1rem } - .md-ml2 { margin-left: 1rem } - .md-mx2 { margin-left: 1rem; margin-right: 1rem } - .md-my2 { margin-top: 1rem; margin-bottom: 1rem } - - .md-m3 { margin: 2rem } - .md-mt3 { margin-top: 2rem } - .md-mr3 { margin-right: 2rem } - .md-mb3 { margin-bottom: 2rem } - .md-ml3 { margin-left: 2rem } - .md-mx3 { margin-left: 2rem; margin-right: 2rem } - .md-my3 { margin-top: 2rem; margin-bottom: 2rem } - - .md-m4 { margin: 4rem } - .md-mt4 { margin-top: 4rem } - .md-mr4 { margin-right: 4rem } - .md-mb4 { margin-bottom: 4rem } - .md-ml4 { margin-left: 4rem } - .md-mx4 { margin-left: 4rem; margin-right: 4rem } - .md-my4 { margin-top: 4rem; margin-bottom: 4rem } - - .md-mxn1 { margin-left: -.5rem; margin-right: -.5rem; } - .md-mxn2 { margin-left: -1rem; margin-right: -1rem; } - .md-mxn3 { margin-left: -2rem; margin-right: -2rem; } - .md-mxn4 { margin-left: -4rem; margin-right: -4rem; } - - .md-ml-auto { margin-left: auto } - .md-mr-auto { margin-right: auto } - .md-mx-auto { margin-left: auto; margin-right: auto; } + .md-m2 { + margin: 1rem; + } + .md-mt2 { + margin-top: 1rem; + } + .md-mr2 { + margin-right: 1rem; + } + .md-mb2 { + margin-bottom: 1rem; + } + .md-ml2 { + margin-left: 1rem; + } + .md-mx2 { + margin-left: 1rem; + margin-right: 1rem; + } + .md-my2 { + margin-top: 1rem; + margin-bottom: 1rem; + } + .md-m3 { + margin: 2rem; + } + .md-mt3 { + margin-top: 2rem; + } + .md-mr3 { + margin-right: 2rem; + } + .md-mb3 { + margin-bottom: 2rem; + } + .md-ml3 { + margin-left: 2rem; + } + .md-mx3 { + margin-left: 2rem; + margin-right: 2rem; + } + .md-my3 { + margin-top: 2rem; + margin-bottom: 2rem; + } + + .md-m4 { + margin: 4rem; + } + .md-mt4 { + margin-top: 4rem; + } + .md-mr4 { + margin-right: 4rem; + } + .md-mb4 { + margin-bottom: 4rem; + } + .md-ml4 { + margin-left: 4rem; + } + .md-mx4 { + margin-left: 4rem; + margin-right: 4rem; + } + .md-my4 { + margin-top: 4rem; + margin-bottom: 4rem; + } + + .md-mxn1 { + margin-left: -0.5rem; + margin-right: -0.5rem; + } + .md-mxn2 { + margin-left: -1rem; + margin-right: -1rem; + } + .md-mxn3 { + margin-left: -2rem; + margin-right: -2rem; + } + .md-mxn4 { + margin-left: -4rem; + margin-right: -4rem; + } + + .md-ml-auto { + margin-left: auto; + } + .md-mr-auto { + margin-right: auto; + } + .md-mx-auto { + margin-left: auto; + margin-right: auto; + } } @media (min-width: 64em) { + .lg-m0 { + margin: 0; + } + .lg-mt0 { + margin-top: 0; + } + .lg-mr0 { + margin-right: 0; + } + .lg-mb0 { + margin-bottom: 0; + } + .lg-ml0 { + margin-left: 0; + } + .lg-mx0 { + margin-left: 0; + margin-right: 0; + } + .lg-my0 { + margin-top: 0; + margin-bottom: 0; + } + + .lg-m1 { + margin: 0.5rem; + } + .lg-mt1 { + margin-top: 0.5rem; + } + .lg-mr1 { + margin-right: 0.5rem; + } + .lg-mb1 { + margin-bottom: 0.5rem; + } + .lg-ml1 { + margin-left: 0.5rem; + } + .lg-mx1 { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .lg-my1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .lg-m2 { + margin: 1rem; + } + .lg-mt2 { + margin-top: 1rem; + } + .lg-mr2 { + margin-right: 1rem; + } + .lg-mb2 { + margin-bottom: 1rem; + } + .lg-ml2 { + margin-left: 1rem; + } + .lg-mx2 { + margin-left: 1rem; + margin-right: 1rem; + } + .lg-my2 { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .lg-m3 { + margin: 2rem; + } + .lg-mt3 { + margin-top: 2rem; + } + .lg-mr3 { + margin-right: 2rem; + } + .lg-mb3 { + margin-bottom: 2rem; + } + .lg-ml3 { + margin-left: 2rem; + } + .lg-mx3 { + margin-left: 2rem; + margin-right: 2rem; + } + .lg-my3 { + margin-top: 2rem; + margin-bottom: 2rem; + } + + .lg-m4 { + margin: 4rem; + } + .lg-mt4 { + margin-top: 4rem; + } + .lg-mr4 { + margin-right: 4rem; + } + .lg-mb4 { + margin-bottom: 4rem; + } + .lg-ml4 { + margin-left: 4rem; + } + .lg-mx4 { + margin-left: 4rem; + margin-right: 4rem; + } + .lg-my4 { + margin-top: 4rem; + margin-bottom: 4rem; + } - .lg-m0 { margin: 0 } - .lg-mt0 { margin-top: 0 } - .lg-mr0 { margin-right: 0 } - .lg-mb0 { margin-bottom: 0 } - .lg-ml0 { margin-left: 0 } - .lg-mx0 { margin-left: 0; margin-right: 0 } - .lg-my0 { margin-top: 0; margin-bottom: 0 } - - .lg-m1 { margin: .5rem } - .lg-mt1 { margin-top: .5rem } - .lg-mr1 { margin-right: .5rem } - .lg-mb1 { margin-bottom: .5rem } - .lg-ml1 { margin-left: .5rem } - .lg-mx1 { margin-left: .5rem; margin-right: .5rem } - .lg-my1 { margin-top: .5rem; margin-bottom: .5rem } - - .lg-m2 { margin: 1rem } - .lg-mt2 { margin-top: 1rem } - .lg-mr2 { margin-right: 1rem } - .lg-mb2 { margin-bottom: 1rem } - .lg-ml2 { margin-left: 1rem } - .lg-mx2 { margin-left: 1rem; margin-right: 1rem } - .lg-my2 { margin-top: 1rem; margin-bottom: 1rem } - - .lg-m3 { margin: 2rem } - .lg-mt3 { margin-top: 2rem } - .lg-mr3 { margin-right: 2rem } - .lg-mb3 { margin-bottom: 2rem } - .lg-ml3 { margin-left: 2rem } - .lg-mx3 { margin-left: 2rem; margin-right: 2rem } - .lg-my3 { margin-top: 2rem; margin-bottom: 2rem } - - .lg-m4 { margin: 4rem } - .lg-mt4 { margin-top: 4rem } - .lg-mr4 { margin-right: 4rem } - .lg-mb4 { margin-bottom: 4rem } - .lg-ml4 { margin-left: 4rem } - .lg-mx4 { margin-left: 4rem; margin-right: 4rem } - .lg-my4 { margin-top: 4rem; margin-bottom: 4rem } - - .lg-mxn1 { margin-left: -.5rem; margin-right: -.5rem; } - .lg-mxn2 { margin-left: -1rem; margin-right: -1rem; } - .lg-mxn3 { margin-left: -2rem; margin-right: -2rem; } - .lg-mxn4 { margin-left: -4rem; margin-right: -4rem; } - - .lg-ml-auto { margin-left: auto } - .lg-mr-auto { margin-right: auto } - .lg-mx-auto { margin-left: auto; margin-right: auto; } + .lg-mxn1 { + margin-left: -0.5rem; + margin-right: -0.5rem; + } + .lg-mxn2 { + margin-left: -1rem; + margin-right: -1rem; + } + .lg-mxn3 { + margin-left: -2rem; + margin-right: -2rem; + } + .lg-mxn4 { + margin-left: -4rem; + margin-right: -4rem; + } + .lg-ml-auto { + margin-left: auto; + } + .lg-mr-auto { + margin-right: auto; + } + .lg-mx-auto { + margin-left: auto; + margin-right: auto; + } } diff --git a/packages/react-docs/example/public/css/basscss_responsive_padding.css b/packages/react-docs/example/public/css/basscss_responsive_padding.css index e027c2d65..773a91743 100644 --- a/packages/react-docs/example/public/css/basscss_responsive_padding.css +++ b/packages/react-docs/example/public/css/basscss_responsive_padding.css @@ -1,134 +1,370 @@ /* Basscss Responsive Padding */ /* Modified by Fabio Berger to include xs prefix */ -@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */ - - .sm-p0 { padding: 0 } - .sm-pt0 { padding-top: 0 } - .sm-pr0 { padding-right: 0 } - .sm-pb0 { padding-bottom: 0 } - .sm-pl0 { padding-left: 0 } - .sm-px0 { padding-left: 0; padding-right: 0 } - .sm-py0 { padding-top: 0; padding-bottom: 0 } - - .sm-p1 { padding: .5rem } - .sm-pt1 { padding-top: .5rem } - .sm-pr1 { padding-right: .5rem } - .sm-pb1 { padding-bottom: .5rem } - .sm-pl1 { padding-left: .5rem } - .sm-px1 { padding-left: .5rem; padding-right: .5rem } - .sm-py1 { padding-top: .5rem; padding-bottom: .5rem } - - .sm-p2 { padding: 1rem } - .sm-pt2 { padding-top: 1rem } - .sm-pr2 { padding-right: 1rem } - .sm-pb2 { padding-bottom: 1rem } - .sm-pl2 { padding-left: 1rem } - .sm-px2 { padding-left: 1rem; padding-right: 1rem } - .sm-py2 { padding-top: 1rem; padding-bottom: 1rem } - - .sm-p3 { padding: 2rem } - .sm-pt3 { padding-top: 2rem } - .sm-pr3 { padding-right: 2rem } - .sm-pb3 { padding-bottom: 2rem } - .sm-pl3 { padding-left: 2rem } - .sm-px3 { padding-left: 2rem; padding-right: 2rem } - .sm-py3 { padding-top: 2rem; padding-bottom: 2rem } - - .sm-p4 { padding: 4rem } - .sm-pt4 { padding-top: 4rem } - .sm-pr4 { padding-right: 4rem } - .sm-pb4 { padding-bottom: 4rem } - .sm-pl4 { padding-left: 4rem } - .sm-px4 { padding-left: 4rem; padding-right: 4rem } - .sm-py4 { padding-top: 4rem; padding-bottom: 4rem } +@media (max-width: 52em) { + /* Modified by Fabio Berger to max-width from min-width */ + .sm-p0 { + padding: 0; + } + .sm-pt0 { + padding-top: 0; + } + .sm-pr0 { + padding-right: 0; + } + .sm-pb0 { + padding-bottom: 0; + } + .sm-pl0 { + padding-left: 0; + } + .sm-px0 { + padding-left: 0; + padding-right: 0; + } + .sm-py0 { + padding-top: 0; + padding-bottom: 0; + } + + .sm-p1 { + padding: 0.5rem; + } + .sm-pt1 { + padding-top: 0.5rem; + } + .sm-pr1 { + padding-right: 0.5rem; + } + .sm-pb1 { + padding-bottom: 0.5rem; + } + .sm-pl1 { + padding-left: 0.5rem; + } + .sm-px1 { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + .sm-py1 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + .sm-p2 { + padding: 1rem; + } + .sm-pt2 { + padding-top: 1rem; + } + .sm-pr2 { + padding-right: 1rem; + } + .sm-pb2 { + padding-bottom: 1rem; + } + .sm-pl2 { + padding-left: 1rem; + } + .sm-px2 { + padding-left: 1rem; + padding-right: 1rem; + } + .sm-py2 { + padding-top: 1rem; + padding-bottom: 1rem; + } + + .sm-p3 { + padding: 2rem; + } + .sm-pt3 { + padding-top: 2rem; + } + .sm-pr3 { + padding-right: 2rem; + } + .sm-pb3 { + padding-bottom: 2rem; + } + .sm-pl3 { + padding-left: 2rem; + } + .sm-px3 { + padding-left: 2rem; + padding-right: 2rem; + } + .sm-py3 { + padding-top: 2rem; + padding-bottom: 2rem; + } + + .sm-p4 { + padding: 4rem; + } + .sm-pt4 { + padding-top: 4rem; + } + .sm-pr4 { + padding-right: 4rem; + } + .sm-pb4 { + padding-bottom: 4rem; + } + .sm-pl4 { + padding-left: 4rem; + } + .sm-px4 { + padding-left: 4rem; + padding-right: 4rem; + } + .sm-py4 { + padding-top: 4rem; + padding-bottom: 4rem; + } } @media (min-width: 52em) { + .md-p0 { + padding: 0; + } + .md-pt0 { + padding-top: 0; + } + .md-pr0 { + padding-right: 0; + } + .md-pb0 { + padding-bottom: 0; + } + .md-pl0 { + padding-left: 0; + } + .md-px0 { + padding-left: 0; + padding-right: 0; + } + .md-py0 { + padding-top: 0; + padding-bottom: 0; + } - .md-p0 { padding: 0 } - .md-pt0 { padding-top: 0 } - .md-pr0 { padding-right: 0 } - .md-pb0 { padding-bottom: 0 } - .md-pl0 { padding-left: 0 } - .md-px0 { padding-left: 0; padding-right: 0 } - .md-py0 { padding-top: 0; padding-bottom: 0 } - - .md-p1 { padding: .5rem } - .md-pt1 { padding-top: .5rem } - .md-pr1 { padding-right: .5rem } - .md-pb1 { padding-bottom: .5rem } - .md-pl1 { padding-left: .5rem } - .md-px1 { padding-left: .5rem; padding-right: .5rem } - .md-py1 { padding-top: .5rem; padding-bottom: .5rem } - - .md-p2 { padding: 1rem } - .md-pt2 { padding-top: 1rem } - .md-pr2 { padding-right: 1rem } - .md-pb2 { padding-bottom: 1rem } - .md-pl2 { padding-left: 1rem } - .md-px2 { padding-left: 1rem; padding-right: 1rem } - .md-py2 { padding-top: 1rem; padding-bottom: 1rem } - - .md-p3 { padding: 2rem } - .md-pt3 { padding-top: 2rem } - .md-pr3 { padding-right: 2rem } - .md-pb3 { padding-bottom: 2rem } - .md-pl3 { padding-left: 2rem } - .md-px3 { padding-left: 2rem; padding-right: 2rem } - .md-py3 { padding-top: 2rem; padding-bottom: 2rem } - - .md-p4 { padding: 4rem } - .md-pt4 { padding-top: 4rem } - .md-pr4 { padding-right: 4rem } - .md-pb4 { padding-bottom: 4rem } - .md-pl4 { padding-left: 4rem } - .md-px4 { padding-left: 4rem; padding-right: 4rem } - .md-py4 { padding-top: 4rem; padding-bottom: 4rem } + .md-p1 { + padding: 0.5rem; + } + .md-pt1 { + padding-top: 0.5rem; + } + .md-pr1 { + padding-right: 0.5rem; + } + .md-pb1 { + padding-bottom: 0.5rem; + } + .md-pl1 { + padding-left: 0.5rem; + } + .md-px1 { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + .md-py1 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .md-p2 { + padding: 1rem; + } + .md-pt2 { + padding-top: 1rem; + } + .md-pr2 { + padding-right: 1rem; + } + .md-pb2 { + padding-bottom: 1rem; + } + .md-pl2 { + padding-left: 1rem; + } + .md-px2 { + padding-left: 1rem; + padding-right: 1rem; + } + .md-py2 { + padding-top: 1rem; + padding-bottom: 1rem; + } + + .md-p3 { + padding: 2rem; + } + .md-pt3 { + padding-top: 2rem; + } + .md-pr3 { + padding-right: 2rem; + } + .md-pb3 { + padding-bottom: 2rem; + } + .md-pl3 { + padding-left: 2rem; + } + .md-px3 { + padding-left: 2rem; + padding-right: 2rem; + } + .md-py3 { + padding-top: 2rem; + padding-bottom: 2rem; + } + + .md-p4 { + padding: 4rem; + } + .md-pt4 { + padding-top: 4rem; + } + .md-pr4 { + padding-right: 4rem; + } + .md-pb4 { + padding-bottom: 4rem; + } + .md-pl4 { + padding-left: 4rem; + } + .md-px4 { + padding-left: 4rem; + padding-right: 4rem; + } + .md-py4 { + padding-top: 4rem; + padding-bottom: 4rem; + } } @media (min-width: 64em) { + .lg-p0 { + padding: 0; + } + .lg-pt0 { + padding-top: 0; + } + .lg-pr0 { + padding-right: 0; + } + .lg-pb0 { + padding-bottom: 0; + } + .lg-pl0 { + padding-left: 0; + } + .lg-px0 { + padding-left: 0; + padding-right: 0; + } + .lg-py0 { + padding-top: 0; + padding-bottom: 0; + } + + .lg-p1 { + padding: 0.5rem; + } + .lg-pt1 { + padding-top: 0.5rem; + } + .lg-pr1 { + padding-right: 0.5rem; + } + .lg-pb1 { + padding-bottom: 0.5rem; + } + .lg-pl1 { + padding-left: 0.5rem; + } + .lg-px1 { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + .lg-py1 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + .lg-p2 { + padding: 1rem; + } + .lg-pt2 { + padding-top: 1rem; + } + .lg-pr2 { + padding-right: 1rem; + } + .lg-pb2 { + padding-bottom: 1rem; + } + .lg-pl2 { + padding-left: 1rem; + } + .lg-px2 { + padding-left: 1rem; + padding-right: 1rem; + } + .lg-py2 { + padding-top: 1rem; + padding-bottom: 1rem; + } - .lg-p0 { padding: 0 } - .lg-pt0 { padding-top: 0 } - .lg-pr0 { padding-right: 0 } - .lg-pb0 { padding-bottom: 0 } - .lg-pl0 { padding-left: 0 } - .lg-px0 { padding-left: 0; padding-right: 0 } - .lg-py0 { padding-top: 0; padding-bottom: 0 } - - .lg-p1 { padding: .5rem } - .lg-pt1 { padding-top: .5rem } - .lg-pr1 { padding-right: .5rem } - .lg-pb1 { padding-bottom: .5rem } - .lg-pl1 { padding-left: .5rem } - .lg-px1 { padding-left: .5rem; padding-right: .5rem } - .lg-py1 { padding-top: .5rem; padding-bottom: .5rem } - - .lg-p2 { padding: 1rem } - .lg-pt2 { padding-top: 1rem } - .lg-pr2 { padding-right: 1rem } - .lg-pb2 { padding-bottom: 1rem } - .lg-pl2 { padding-left: 1rem } - .lg-px2 { padding-left: 1rem; padding-right: 1rem } - .lg-py2 { padding-top: 1rem; padding-bottom: 1rem } - - .lg-p3 { padding: 2rem } - .lg-pt3 { padding-top: 2rem } - .lg-pr3 { padding-right: 2rem } - .lg-pb3 { padding-bottom: 2rem } - .lg-pl3 { padding-left: 2rem } - .lg-px3 { padding-left: 2rem; padding-right: 2rem } - .lg-py3 { padding-top: 2rem; padding-bottom: 2rem } - - .lg-p4 { padding: 4rem } - .lg-pt4 { padding-top: 4rem } - .lg-pr4 { padding-right: 4rem } - .lg-pb4 { padding-bottom: 4rem } - .lg-pl4 { padding-left: 4rem } - .lg-px4 { padding-left: 4rem; padding-right: 4rem } - .lg-py4 { padding-top: 4rem; padding-bottom: 4rem } + .lg-p3 { + padding: 2rem; + } + .lg-pt3 { + padding-top: 2rem; + } + .lg-pr3 { + padding-right: 2rem; + } + .lg-pb3 { + padding-bottom: 2rem; + } + .lg-pl3 { + padding-left: 2rem; + } + .lg-px3 { + padding-left: 2rem; + padding-right: 2rem; + } + .lg-py3 { + padding-top: 2rem; + padding-bottom: 2rem; + } + .lg-p4 { + padding: 4rem; + } + .lg-pt4 { + padding-top: 4rem; + } + .lg-pr4 { + padding-right: 4rem; + } + .lg-pb4 { + padding-bottom: 4rem; + } + .lg-pl4 { + padding-left: 4rem; + } + .lg-px4 { + padding-left: 4rem; + padding-right: 4rem; + } + .lg-py4 { + padding-top: 4rem; + padding-bottom: 4rem; + } } diff --git a/packages/react-docs/example/public/css/basscss_responsive_type_scale.css b/packages/react-docs/example/public/css/basscss_responsive_type_scale.css index cae23b4e7..27de3da94 100644 --- a/packages/react-docs/example/public/css/basscss_responsive_type_scale.css +++ b/packages/react-docs/example/public/css/basscss_responsive_type_scale.css @@ -1,35 +1,84 @@ /* Basscss Responsive Type Scale */ /* Modified by Fabio Berger to include xs prefix */ -@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */ - .sm-h00 { font-size: 4rem } - .sm-h0 { font-size: 3rem } - .sm-h1 { font-size: 2rem } - .sm-h2 { font-size: 1.5rem } - .sm-h3 { font-size: 1.25rem } - .sm-h4 { font-size: 1rem } - .sm-h5 { font-size: .875rem } - .sm-h6 { font-size: .75rem } +@media (max-width: 52em) { + /* Modified by Fabio Berger to max-width from min-width */ + .sm-h00 { + font-size: 4rem; + } + .sm-h0 { + font-size: 3rem; + } + .sm-h1 { + font-size: 2rem; + } + .sm-h2 { + font-size: 1.5rem; + } + .sm-h3 { + font-size: 1.25rem; + } + .sm-h4 { + font-size: 1rem; + } + .sm-h5 { + font-size: 0.875rem; + } + .sm-h6 { + font-size: 0.75rem; + } } @media (min-width: 52em) { - .md-h00 { font-size: 4rem } - .md-h0 { font-size: 3rem } - .md-h1 { font-size: 2rem } - .md-h2 { font-size: 1.5rem } - .md-h3 { font-size: 1.25rem } - .md-h4 { font-size: 1rem } - .md-h5 { font-size: .875rem } - .md-h6 { font-size: .75rem } + .md-h00 { + font-size: 4rem; + } + .md-h0 { + font-size: 3rem; + } + .md-h1 { + font-size: 2rem; + } + .md-h2 { + font-size: 1.5rem; + } + .md-h3 { + font-size: 1.25rem; + } + .md-h4 { + font-size: 1rem; + } + .md-h5 { + font-size: 0.875rem; + } + .md-h6 { + font-size: 0.75rem; + } } @media (min-width: 64em) { - .lg-h00 { font-size: 4rem } - .lg-h0 { font-size: 3rem } - .lg-h1 { font-size: 2rem } - .lg-h2 { font-size: 1.5rem } - .lg-h3 { font-size: 1.25rem } - .lg-h4 { font-size: 1rem } - .lg-h5 { font-size: .875rem } - .lg-h6 { font-size: .75rem } + .lg-h00 { + font-size: 4rem; + } + .lg-h0 { + font-size: 3rem; + } + .lg-h1 { + font-size: 2rem; + } + .lg-h2 { + font-size: 1.5rem; + } + .lg-h3 { + font-size: 1.25rem; + } + .lg-h4 { + font-size: 1rem; + } + .lg-h5 { + font-size: 0.875rem; + } + .lg-h6 { + font-size: 0.75rem; + } } diff --git a/packages/react-docs/example/public/css/roboto.css b/packages/react-docs/example/public/css/roboto.css index 7af568a74..7da89f924 100644 --- a/packages/react-docs/example/public/css/roboto.css +++ b/packages/react-docs/example/public/css/roboto.css @@ -1,8 +1,8 @@ @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Thin.ttf') format('truetype'); - font-weight: 100; - font-style: normal; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; } /*@font-face { @@ -13,10 +13,10 @@ }*/ @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; } /*@font-face { @@ -27,10 +27,10 @@ }*/ @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; } /*@font-face { diff --git a/packages/react-docs/example/public/css/roboto_mono.css b/packages/react-docs/example/public/css/roboto_mono.css index f8159d35f..392ea5224 100644 --- a/packages/react-docs/example/public/css/roboto_mono.css +++ b/packages/react-docs/example/public/css/roboto_mono.css @@ -1,8 +1,8 @@ @font-face { - font-family: 'Roboto Mono'; - src: url('../fonts/RobotoMono-Thin.ttf') format('truetype'); - font-weight: 100; - font-style: normal; + font-family: 'Roboto Mono'; + src: url('../fonts/RobotoMono-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; } /*@font-face { @@ -13,10 +13,10 @@ }*/ @font-face { - font-family: 'Roboto Mono'; - src: url('../fonts/RobotoMono-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; + font-family: 'Roboto Mono'; + src: url('../fonts/RobotoMono-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; } /*@font-face { @@ -27,10 +27,10 @@ }*/ @font-face { - font-family: 'Roboto Mono'; - src: url('../fonts/RobotoMono-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; + font-family: 'Roboto Mono'; + src: url('../fonts/RobotoMono-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; } /*@font-face { |