College of Business Style Guide

Forms: Default 

<div class="form-item">
    <legend class="legend">Which are Creed Songs?</legend>
    <ul class="checkbox-list">
        <li class="form-item--checkbox__item">
            <label for="checkbox1">
                <input id="checkbox1" name="checkbox" type="checkbox"> Radioactive
            </label>
        </li>
        <li class="form-item--checkbox__item">
            <label for="checkbox2">
                <input id="checkbox2" name="checkbox" type="checkbox" checked="checked"> With Arms Wide Open
            </label>
        </li>
        <li class="form-item--checkbox__item">
            <label for="checkbox3">
                <input id="checkbox3" name="checkbox" type="checkbox"> Ice, Ice, Baby
            </label>
        </li>
        <li class="form-item--checkbox__item">
            <label for="checkbox4">
                <input id="checkbox4" name="checkbox" type="checkbox" checked="checked"> Weathered
            </label>
        </li>
    </ul>
</div>
 
<div class="form-item">
    {% if legend %}
        <legend class="legend">{{ legend }}</legend>
    {% endif %}
    <ul class="checkbox-list">
        {% for list_item in list_items %}
            <li class="form-item--checkbox__item">
                <label for="checkbox{{ list_item.key }}">
                    <input id="checkbox{{ list_item.key }}" name="checkbox" type="checkbox"  {% if list_item.checked %}checked="checked"{% endif %}> {{ list_item.item }}
                </label>
            </li>
        {% endfor %}
    </ul>
</div>
 
{
  "legend": "Which are Creed Songs?",
  "list_items": {
    "1": {
      "key": 1,
      "item": "Radioactive"
    },
    "2": {
      "key": 2,
      "checked": "checked",
      "item": "With Arms Wide Open"
    },
    "3": {
      "key": 3,
      "item": "Ice, Ice, Baby"
    },
    "4": {
      "key": 4,
      "checked": "checked",
      "item": "Weathered"
    }
  }
}
  • Content: 
    .checkbox-list,
.radiobutton-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-item {
  margin: $space 0;

  &:first-of-type {
    margin: 0 0 $space 0;
  }

  &:last-of-type {
    margin: $space 0 0 0;
  }
}

.form-item__select,
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=number],
textarea {
  font-size: 1rem;
}

.search-name {
  position: relative;

  .search-name-box {
    min-width: 300px;
    background: transparent url(../images/search-icon.jpg) no-repeat 98% center;
    background-size: 25px auto;
    height: 30px;
  }

  #search-name-submit {
    -webkit-appearance: none;
    box-sizing: inherit;
    padding: 0;
    border-width: 0;
    border-style: none;
    border-color: inherit;
    border-image: none;
    color: transparent;
    position: absolute;
    left: 250px;
    top: 1px;
    width: 55px;
    height: 30px;
    background-color: transparent;
  }
}

form {
  .hidden {
    visibility: hidden;
  }
}
  • URL: /components/raw/forms/forms.scss
  • Filesystem Path: components/01-elements/03-forms/forms.scss
  • Size: 984 Bytes

No notes defined.