Styleguide

Reveal

Default

Hello World
.reveal
  %input#reveal-example.reveal__checkbox{type: "checkbox"}/
  %label.reveal__label.reveal__label--show{for: "reveal-example"} +
  %label.reveal__label.reveal__label--hide{for: "reveal-example"} -
  .reveal__content
    Hello World
<div class='reveal'>
  <input class='reveal__checkbox' id='reveal-example' type='checkbox'>
  <label class='reveal__label reveal__label--show' for='reveal-example'>+</label>
  <label class='reveal__label reveal__label--hide' for='reveal-example'>-</label>
  <div class='reveal__content'>
    Hello World
  </div>
</div>

Visible

.reveal
  %input#visible-reveal-example.reveal__checkbox.reveal__checkbox--visible{type: "checkbox"}/
  %label.reveal__label.reveal__label--show{for: "visible-reveal-example"}
    I need to update some things.
  %label.reveal__label.reveal__label--hide{for: "visible-reveal-example"}
    I need to update some things.
  .reveal__content.xs-mth0
    %input.text-input.input--full{placeholder: "Go ahead and update your stuff.", type: "text"}/
<div class='reveal'>
  <input class='reveal__checkbox reveal__checkbox--visible' id='visible-reveal-example' type='checkbox'>
  <label class='reveal__label reveal__label--show' for='visible-reveal-example'>
    I need to update some things.
  </label>
  <label class='reveal__label reveal__label--hide' for='visible-reveal-example'>
    I need to update some things.
  </label>
  <div class='reveal__content xs-mth0'>
    <input class='text-input input--full' placeholder='Go ahead and update your stuff.' type='text'>
  </div>
</div>