turretcss

Control Sizes

Example

Checkbox

Radio

Switch

HTML

<label class="control control-xxl">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control control-xl">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control control-l">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control control-s">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control control-xs">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control control-xxs">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

CSS

--control-xxl-font-size: var(--font-size-xxl);
--control-xxl-indicator-size: 1.75rem;

--control-xl-font-size: var(--font-size-xl);
--control-xl-indicator-size: 1.625rem;

--control-l-font-size: var(--font-size-l);
--control-l-indicator-size: 1.5rem;

--control-s-font-size: var(--font-size-s);
--control-s-indicator-size: 1.25rem;

--control-xs-font-size: var(--font-size-xs);
--control-xs-indicator-size: 1.125rem;

--control-xxs-font-size: var(--font-size-xxs);
--control-xxs-indicator-size: 1rem;

Related