checkers

default theme

<input type="checkbox" class="checkbox" />

<input type="radio" class="radio" />

<input type="checkbox" class="switch" />

main theme

<input class="checkbox primary" type="checkbox" />
<input class="checkbox secondary" type="checkbox" />
<input class="checkbox success" type="checkbox" />
<input class="checkbox info" type="checkbox" />
<input class="checkbox orange" type="checkbox" />
<input class="checkbox error" type="checkbox" />
<input class="checkbox gray" type="checkbox" />
<input class="checkbox black" type="checkbox" />
<input class="checkbox white" type="checkbox" />

flat theme

<input class="checkbox primary-flat" type="checkbox" />
<input class="checkbox secondary-flat" type="checkbox" />
<input class="checkbox success-flat" type="checkbox" />
<input class="checkbox info-flat" type="checkbox" />
<input class="checkbox orange-flat" type="checkbox" />
<input class="checkbox error-flat" type="checkbox" />
<input class="checkbox gray-flat" type="checkbox" />
<input class="checkbox black-flat" type="checkbox" />
<input class="checkbox white-flat" type="checkbox" />

main theme

<input class="radio primary" type="radio" />
<input class="radio secondary" type="radio" />
<input class="radio success" type="radio" />
<input class="radio info" type="radio" />
<input class="radio orange" type="radio" />
<input class="radio error" type="radio" />
<input class="radio gray" type="radio" />
<input class="radio black" type="radio" />
<input class="radio white" type="radio" />

flat theme

<input class="radio primary-flat" type="radio" />
<input class="radio secondary-flat" type="radio" />
<input class="radio success-flat" type="radio" />
<input class="radio info-flat" type="radio" />
<input class="radio orange-flat" type="radio" />
<input class="radio error-flat" type="radio" />
<input class="radio gray-flat" type="radio" />
<input class="radio black-flat" type="radio" />
<input class="radio white-flat" type="radio" />

main theme

<input class="switch primary" type="checkbox" />
<input class="switch secondary" type="checkbox" />
<input class="switch success" type="checkbox" />
<input class="switch info" type="checkbox" />
<input class="switch orange" type="checkbox" />
<input class="switch error" type="checkbox" />
<input class="switch gray" type="checkbox" />
<input class="switch black" type="checkbox" />
<input class="switch white" type="checkbox" />

flat theme

<input class="switch primary-flat" type="checkbox" />
<input class="switch secondary-flat" type="checkbox" />
<input class="switch success-flat" type="checkbox" />
<input class="switch info-flat" type="checkbox" />
<input class="switch orange-flat" type="checkbox" />
<input class="switch error-flat" type="checkbox" />
<input class="switch gray-flat" type="checkbox" />
<input class="switch black-flat" type="checkbox" />
<input class="switch white-flat" type="checkbox" />

usage

section import

@use "~"as * with (
  $base-components: true
);

Individual Import

@use "~"as * with (
  $components: (
    base: (
      checkers: ture,
    ),
  )
);

mixin

@use "~"as * with (
  $a-var: ""
);

@include checkers();