OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Disabled

When things are “OFF”. Some elemnts have a disabled attribute, on others you can add a .disabled class.

div.box.disabled
a.box.disabled
.box.disabled + .color:disabled
a.button.disabled a.button.prime.disabled
<div class="flex gap-no read_l">
  <div class="box disabled">div.box.disabled</div>
  <a href="#" class="box disabled">a.box.disabled</a>
</div>
<div class="gap-no read_l ma-t_s">
  <textarea class="textarea" disabled>textarea.textarea:disabled</textarea>
  <input class="input" type="text" disabled value="disabled input">
  <div class="range-box disabled">
    <input type="range" class="range" disabled>
  </div>
  <div class="color-box disabled">
    <div>.box.disabled + .color:disabled</div>
    <input type="color" class="color" disabled>
  </div>
  <input class="input" type="text" disabled value="input.input:disabled">
  <select class="select" disabled>
    <option value="disabled">select.select:disabled</option>
  </select>
  <label class="box disabled">
    <input class="radio m-r-s" type="radio" disabled>
    radio:disabled + label.box.disabled 
  </label>
  <label class="box disabled">
    <input class="checkbox m-r-s" type="checkbox" disabled>
    checkbox:disabled + label.box.disabled
  </label>
  <label class="form-box disabled">
    <div class="mini-label">.form-box.disabled</div>
    <input class="input" type="email" disabled>
    <div class="mini-info shown">mini-info</div>
  </label>
</div>
<div class="grid gap_xs read_l ma-t_s">
  <a href="#" class="span-6 button disabled">a.button.disabled</a>
  <button class="span-6 button disabled">button.button:disabled</button>
  <a href="#" class="span-6 button prime disabled">a.button.prime.disabled</a>
  <button class="span-6 button prime disabled">button.button.prime:disabled</button>
</div>