hkk Frontend 2017

Label 

<!-- Standard -->
<label class="label" for="dummy-id">Das ist ein Label</label>


<!-- Deaktivert -->
<label class="label label--disabled" for="dummy-id">Das ist ein deaktiviertes Label</label>


<!-- Invalide -->
<label class="label label--invalid" for="dummy-id">Das ist ein invalides Label</label>


-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  // Add for information
  if (!legend) attr.for = labelFor || attr.labelFor || `labelFor-${randomString()}`;

  //- Tag
  tag = legend ? 'legend' : 'label';

  //- Process options
  if (disabled) attr.class.push('label--disabled');
  if (required) attr.class.push('label--required');
  if (invalid) attr.class.push('label--invalid');
  if (hint) attr.class.push('label--hint');
  if (hidden) attr.class.push('u-hidden-visually');
  if (modifier) attr.class.push(`label--${modifier}`);

//- Render atom
#{tag}.label&attributes(attr) #{label}
 
/* Standard */
{
  "labelFor": "dummy-id",
  "label": "Das ist ein Label",
  "hidden": null
}


/* Deaktivert */
{
  "labelFor": "dummy-id",
  "label": "Das ist ein deaktiviertes Label",
  "hidden": null,
  "disabled": true
}


/* Invalide */
{
  "labelFor": "dummy-id",
  "label": "Das ist ein invalides Label",
  "hidden": null,
  "invalid": true
}
  • Content: 
    .label {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.label--disabled {
  color: $color-steelgrey-xdark;
}

.label--invalid {
  color: $color-red;
  font-weight: bold;
}

.label--large {
  color: $color-steelgrey-dark;
  font-size: 1.8rem;
  font-weight: bold;
}

.label--hint {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.label--required {
  &::after {
    content: '*';
  }
}
  • URL: /components/raw/label/label.scss
  • Filesystem Path: src/components/atoms/label/label.scss
  • Size: 401 Bytes

There are no notes for this item.