Form layout

Use SCSSLeon form and form layout components to build things like settings screens in your application. These form components are designed and built by the SCSSLeon team, and include a variety of different styles and layouts.

Form example

<div class="form">
  <div class="grid">
    <div class="section">
      <div class="field">
        <label for="input1" class="label">Name:</label>
        <input type="name" id="input1" value="John Doe" class="input"/>
      </div>
    </div>
    <div class="section">
      <div class="field">
        <label for="input2" class="label">Email:</label>
        <input type="email" id="input2" value="john.doe@cirrus.io" class="input"/>
      </div>
    </div>
    <div class="section">
      <div class="field">
        <label for="input3" class="label">URL:</label>
        <input type="url" id="input3" value="https://spiderpig86.github.io/Cirrus" class="input"/>
      </div>
    </div>
    <div class="section">
      <div class="field">
        <label for="input4" class="label">Phone:</label>
        <input type="tel" id="input4" value="1-(800)-777-7777" class="input"/>
      </div>
    </div>
    <div class="section">
      <div class="field">
        <label for="input5" class="label">Phone:</label>
        <input type="tel" id="input5" value="1-(800)-777-7777" class="input"/>
      </div>
    </div>
    <div class="section">
      <div class="field">
        <label for="input6" class="label">Phone:</label>
        <input type="tel" id="input6" value="1-(800)-777-7777" class="input"/>
      </div>
    </div>
  </div>
</div>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use '~/styles/app.scss' as app;

@include app.generate-component(
  app.get-theme(app.$theme, 'components.form'),
  'form',
  app.$config,
  app.$theme
);

$grid : (
  display: grid,
  row-gap : 1rem,
  column-gap : 1rem,
  grid-template-columns: repeat(1,minmax(0,1fr)),

  _responsive : (
    md: (
      grid-template-columns: repeat(6,minmax(0,1fr)),
    )
  ),
  _subclasses : (
    '.section' : (
      _subclasses : (
        '&:nth-child(1)' : (
          _responsive : (
            md: (
              grid-column: span 3/span 3,
            ),
          ),
        ),
        '&:nth-child(2)' : (
          _responsive : (
            md: (
              grid-column: span 3/span 3,
            ),
          ),
        ),
        '&:nth-child(3)' : (
          _responsive : (
            md: (
              grid-column: span 4/span 4,
            ),
          ),
        ),
        '&:nth-child(4)' : (
          _responsive : (
            md: (
              grid-column: span 2/span 2,
              grid-column-start : 1,
            )
          )
        ),
        '&:nth-child(5)' : (
          _responsive : (
            md: (
              grid-column: span 2/span 2,
            ),
          ),
        ),
        '&:nth-child(6)' : (
          _responsive : (
            md: (
              grid-column: span 2/span 2,
            )
          )
        )
      )
    )
  )
);

@include app.generate-component(
  $grid,
  'grid',
  app.$config,
  app.$theme
);