DIA Frontend

Checkbox / Radio 

<div class="form-group">
    <label class="d-block">Name:</label>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="group" value="" id="radio1-623">
        <label class="form-check-label" for="radio1-623">
            Option One
        </label>
    </div>
    <br>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="group" value="" id="radio2-623">
        <label class="form-check-label" for="radio2-623">
            Option Two
        </label>
    </div>
    <br>
</div>
 
{% set uid = random(999) %}
{% set CType = 'select' %}

{% block main %}
    <div class="form-group">
        {% if name %}<label class="d-block">{{ name }}</label>{% endif %}
        {% if description %}
            <div class="form-check--wrap">
                <span class="description">{{ description }}</span>
        {% endif %}
        {% for item in list %}
            <div class="form-check">
                <input class="form-check-input" type="{{ type }}" {% if groupName %} name="{{ groupName }}"{% endif %} value="{{ value }}" id="{{ type }}{{ loop.index }}-{{ uid }}">
                <label class="form-check-label" for="{{ type }}{{ loop.index }}-{{ uid }}">
                    {{ item }}
                </label>
            </div>
            {% if layout == 'vertical' %}<br>{% endif %}
        {% endfor %}
        {% if description %}
        </div>
        {% endif %}
    </div>
{% endblock %}
 
{
  "name": "Name:",
  "description": null,
  "layout": "vertical",
  "type": "radio",
  "groupName": "group",
  "list": [
    "Option One",
    "Option Two"
  ]
}
  • Content: 
    .frame-type-select.frame-layout-horizontal {
  .form-check {
    margin-right: map-get($margin, "small");
  }
}

/* Customize the label (the container) */
.form-check {
  display: inline-block;
  padding-left: 35px;
  margin-right: $grid-gutter-width / 2;
  margin-bottom: $grid-gutter-width / 2;
  cursor: pointer;
  user-select: none;

  &::after {
    clear: both;
    content: "";
  }

  &--wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .description {
      margin-right: $grid-gutter-width / 2;
      font-size: $font-size-sm;
    }
  }

  /* Hide the browser's default checkbox */
  input {
    position: absolute;
    width: 0;
    height: 0;
    cursor: pointer;
    opacity: 0;
  }

  label {
    line-height: 25px;
    cursor: pointer;

    /* Create a custom checkbox */
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 25px;
      height: 25px;
      content: "";
      background-color: $gray-200;
    }
  }

  /* On mouse-over & focus, add a grey background color */
  input:focus ~ label::before,
  &:hover input ~ label::before {
    background-color: $gray-300;
  }

  /* When the checkbox is checked, add a blue background */
  input:checked ~ label::before {
    background-color: $primary;
  }

  /* Style the checkmark/indicator */
  label::after {
    /* Create the checkmark/indicator (hidden when not checked) */
    display: none;
    content: "";
  }

  input[type="checkbox"] ~ label::after {
    @include position(absolute, 7px null null 10px);
    width: 5px;
    height: 10px;
    border: solid $white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }

  /* Show the checkmark when checked */
  input:checked ~ label::after {
    display: block;
  }

  input[type="radio"] ~ label {
    &::before {
      border-radius: 50%;
    }

    &::after {
      @include position(absolute, 8px null null 8px);
      width: 9px;
      height: 9px;
      background: $white;
      border-radius: 50%;
    }
  }
}
  • URL: /components/raw/atom-checkbox/_style.scss
  • Filesystem Path: ../template/components/01-atoms/checkbox/_style.scss
  • Size: 2 KB

No notes defined.