Spacing

import colors from "/src/shared/spacing";

spacing.none
0
spacing.tiny
2px
spacing.xsmall
4px
spacing.small
8px
spacing.medium
16px
spacing.large
20px
spacing.xlarge
24px
spacing.xxlarge
32px
spacing.xxxlarge
48px
spacing.huge
96px
spacing.padding
16px
spacing.margin
16px
spacing.paddingButton
8px
spacing.paddingDialog
36px 48px 48px 48px
spacing.paddingForm
32px 48px 96px 32px
spacing.paddingSection
0
spacing.paddingPanel
0
spacing.paddingSubsection
20px 24px
spacing.marginSection
8px 0 24px 0
spacing.marginPanel
8px 0 24px 0
spacing.marginSubsection
8px 0 0 0
spacing.marginPanelSubsection
20px 0 0 0
spacing.marginFormField
0 12px 12px 0
spacing.marginActionButtons
8px 0 0 0
spacing.marginFormLabel
0 0 4px 0
spacing.marginFormMessage
8px 0 0 0
spacing.paddingFormInput
8px
spacing.icon
4px


    <ul className={rootCss}>
      {
        Object.entries(spacing).map(entry => (
          <li>
            <div style={{ backgroundColor: entry[1] }}></div>
            <div>spacing.{entry[0]}</div>
            <div>{entry[1]}</div>
          </li>
        ))
      }
    </ul>


    <ul className={rootCss}>
      {
        Object.entries(spacing).map(entry => (
          <li>
            <div style={{ backgroundColor: entry[1] }}></div>
            <div>spacing.{entry[0]}</div>
            <div>{entry[1]}</div>
          </li>
        ))
      }
    </ul>

Form Layout

Section Header

Sub-Section Header

Section Header

Sub-Section Header


    <div className={formCss}>
      {
      <div className="form">
        <div className="section-header">
          Section Header
        </div>
        <div className="form-section" >
          <div className="form-subsection" >
            <div className="subsection-header">
              Sub-Section Header
            </div>
          </div>
          <div className="form-subsection" >
            <div className="subsection-header">
              Sub-Section Header
            </div>
          </div>
        </div>
        <div className="section-header">
          Section Header
        </div>
        <div className="form-section" >
          <div className="form-subsection" >
            <div className="subsection-header">
              Sub-Section Header
            </div>
          </div>
          <div className="form-subsection" >
            <div className="subsection-header">
              Sub-Section Header
            </div>
          </div>
        </div>
        <div className="form-action-buttons" >
          <Button>Button</Button>
        </div>
      </div>
      }
    </div>


    <div className={formCss}>
      {
      <div className="form">
        <div className="section-header">
          Section Header
        </div>
        <div className="form-section" >
          <div className="form-subsection" >
            <div className="subsection-header">
              Sub-Section Header
            </div>
          </div>
          <div className="form-subsection" >
            <div className="subsection-header">
              Sub-Section Header
            </div>
          </div>
        </div>
        <div className="section-header">
          Section Header
        </div>
        <div className="form-section" >
          <div className="form-subsection" >
            <div className="subsection-header">
              Sub-Section Header
            </div>
          </div>
          <div className="form-subsection" >
            <div className="subsection-header">
              Sub-Section Header
            </div>
          </div>
        </div>
        <div className="form-action-buttons" >
          <Button>Button</Button>
        </div>
      </div>
      }
    </div>