Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Choice 

<!-- Checkbox -->
<label class=" choice ">
    <input type="checkbox">
    <span>Label</span>
</label>


<!-- Radio -->
<label class=" choice ">
    <input type="radio">
    <span>Label</span>
</label>


<!-- Disabled Checkbox -->
<label class=" choice ">
    <input type="checkbox" disabled="">
    <span>Label</span>
</label>


<!-- Disabled Radio -->
<label class=" choice ">
    <input type="radio" disabled="">
    <span>Label</span>
</label>


<!-- Box variant choice -->
<div class=" box ">
    <input class="box__trigger" id="box1" type="checkbox">
    <label class="box__wrapper" for="box1">
        <span class="box__title ">Label</span>
        <span class="box__image">
            <div class=" media ">
                <div class="media__item">
                    <div class="dummy"></div>
                </div>
            </div>
        </span>
        <span class="box__text">Lorem ipsum dol isor</span>

    </label>
</div>


<!-- Checkbox -->
<label class="{{mixes}} choice {{modifiers}}">
  <input type="{{type}}" {{#name}} name="{{.}}" {{/name}} {{#checked}} checked=""{{/checked}} {{#disabled}} disabled=""{{/disabled}}>
    <span>{{label}}</span>
</label>

<!-- Radio -->
<label class="{{mixes}} choice {{modifiers}}">
  <input type="{{type}}" {{#name}} name="{{.}}" {{/name}} {{#checked}} checked=""{{/checked}} {{#disabled}} disabled=""{{/disabled}}>
    <span>{{label}}</span>
</label>

<!-- Disabled Checkbox -->
<label class="{{mixes}} choice {{modifiers}}">
  <input type="{{type}}" {{#name}} name="{{.}}" {{/name}} {{#checked}} checked=""{{/checked}} {{#disabled}} disabled=""{{/disabled}}>
    <span>{{label}}</span>
</label>

<!-- Disabled Radio -->
<label class="{{mixes}} choice {{modifiers}}">
  <input type="{{type}}" {{#name}} name="{{.}}" {{/name}} {{#checked}} checked=""{{/checked}} {{#disabled}} disabled=""{{/disabled}}>
    <span>{{label}}</span>
</label>

<!-- Box variant choice -->
<div class="{{mixes}} box {{modifiers}}">
  <input class="box__trigger" id="{{id}}" type="{{type}}" {{#name}} name="{{.}}" {{/name}} {{#checked}} checked=""
    {{/checked}} {{#disabled}} disabled="" {{/disabled}}>
  <label class="box__wrapper" for="{{id}}">
    <span class="box__title {{size}}">{{label}}</span>
    {{#if image}}<span class="box__image">{{render '@atoms-media--custom'}}</span>{{/if}}
    {{#if text}}<span class="box__text">{{{text}}}</span>{{/if}}
    {{#if info}}<span class="box__info">{{{info}}}</span>{{/if}}
  </label>
</div>
 
/* Checkbox */
{
  "type": "checkbox",
  "label": "Label"
}


/* Radio */
{
  "type": "radio",
  "label": "Label"
}


/* Disabled Checkbox */
{
  "type": "checkbox",
  "label": "Label",
  "disabled": true
}


/* Disabled Radio */
{
  "type": "radio",
  "label": "Label",
  "disabled": true
}


/* Box variant choice */
{
  "id": "box1",
  "type": "checkbox",
  "label": "Label",
  "image": {
    "src": "/demo/teaser/teaser6.jpg"
  },
  "text": "Lorem ipsum dol isor"
}
  • Content: 
    $symbol: map-get($icons, 'tick');
$size: 2.4rem;

.choice {
  display: inline-block;
  padding-left: 3.2 * $base-padding;
  cursor: pointer;

  &-group {
    display: flex;
    flex-flow: column wrap;

    &.-horizontally {
      flex-direction: row;
    }

    > label {
      margin: 1.6 * $base-margin 3.2 * $base-margin 1.6 * $base-margin 0;
    }
  }

  [type='checkbox'],
  [type='radio'] {
    display: none;

    + span {
      @include clearfix();

      display: inline-block;

      &::before {
        content: '';
        display: block;
        float: left;
        width: $size;
        height: $size;
        margin-left: -3.2 * $base-margin;
        padding: 2px;
        border: 1px solid var(--form-choice-border, #{$black});
        color: var(--form-choice-color);
      }
    }

    &:disabled + span {
      color: $gray-dark;

      &::before {
        border: 1px solid $gray-dark;
      }
    }
  }

  [type='checkbox'] {
    + span {
      &::before {
        @include icon-base();

        text-align: center;
      }
    }

    &:checked + span::before {
      content: unquote("'#{$symbol}'");
    }
  }

  [type='radio'] {
    + span {
      &::before {
        border-radius: 50%;
      }
    }

    &:checked + span::before {
      background-color: var(--form-choice-color, #{$black});
    }

    &:disabled + span::before {
      border-color: $gray-dark;
    }
  }
}

.box {
  $root: &;
  height: 100%;

  &__trigger {
    display: none;
  }

  &__wrapper {
    display: block;
    min-height: 100%;
    margin: 0;
    border: 3px solid transparent;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        padding: rem-calc($gutter / 2) rem-calc($gutter) rem-calc($gutter);
      }
    }
  }

  &__trigger:not(:disabled) + &__wrapper:hover {
    border: 3px solid $success;
    box-shadow: 0 0 10px 0 $sucess-50;
    cursor: pointer;
  }

  &__trigger:checked + &__wrapper {
    border: 3px solid $success;
    box-shadow: 0 0 10px 0 $sucess-50;
    cursor: pointer;
  }

  &__trigger:disabled + &__wrapper {
    opacity: 0.25;

    &.-opaque {
      opacity: 1;
    }
  }

  &__title,
  &__text,
  &__image {
    display: block;
    text-align: center;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        margin: rem-calc($gutter / 2) 0;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__image {
    img {
      float: left;
      width: auto;
      height: 100%;
    }
  }

  //Edge
  @supports (-ms-ime-align: auto) {
    & &__wrapper {
      border: 3px solid $gray-lighter;
      box-shadow: none;

      &:hover {
        box-shadow: none;
      }
    }

    & &__trigger:not(:disabled) + &__wrapper:hover,
    & &__trigger:checked + &__wrapper {
      box-shadow: none;
    }
  }
}
  • URL: /components/raw/atoms-choice/_choice.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/08-form/05-choice/_choice.scss
  • Size: 2.9 KB

There are no notes for this item.