Polls

By Harry Manchanda

F6
#
How do I use This?

Polls with header question and options to choose (radio and checkboxes)

HTML
<!-- Radio Buttons -->
<div class="polls">
  <h5 class="polls-question">
    <span class="polls-question-label">Q:</span>
    Choose your favourite programming language?
  </h5>
  <div class="polls-options">
    <div>
      <input type="radio" name="programming" value="Javascript" id="programmingJavascript" required>
      <label for="programmingJavascript">Javascript</label>
    </div>
    <div>
      <input type="radio" name="programming" value="Ruby" id="programmingRuby" required>
      <label for="programmingRuby">Ruby</label>
    </div>
    <div>
      <input type="radio" name="programming" value="Php" id="programmingPhp" required>
      <label for="programmingPhp">Php</label>
    </div>
    <div>
      <input type="radio" name="programming" value="Python" id="programmingPython" required>
      <label for="programmingPython">Python</label>
    </div>
  </div>
  <div class="polls-submit">
    <input type="submit" class="button" value="Submit Vote">
  </div>
</div>

<!-- Checkboxes -->
<div class="polls">
  <h5 class="polls-question">
    <span class="polls-question-label">Q:</span>
    Choose Javascript frameworks that you use?
  </h5>
  <div class="polls-options">
    <div>
      <input id="checkbox1" type="checkbox">
      <label for="checkbox1">Angular.js</label>
    </div>
    <div>
      <input id="checkbox2" type="checkbox">
      <label for="checkbox2">React.js</label>
    </div>
    <div>
      <input id="checkbox3" type="checkbox">
      <label for="checkbox3">Vue.js</label>
    </div>
    <div>
      <input id="checkbox4" type="checkbox">
      <label for="checkbox4">Knockout.js</label>
    </div>
  </div>
  <div class="polls-submit">
    <input type="submit" class="button" value="Submit Vote">
  </div>
</div>

$polls-question-label-color: $primary-color;
$polls-submit-button-transform: uppercase;

.polls {
  margin-bottom: 1rem;
  .polls-question {
    margin-bottom: .5rem;
    .polls-question-label {
      color: $polls-question-label-color;
      font-weight: 500;
      margin-right: .25rem;
    }
  }

  .polls-submit {
    margin-top: .3rem;
    .button {
      margin-right: .5rem;
      text-transform: $polls-submit-button-transform;
    }
  }
}


.polls {
  margin-bottom: 1rem;
}

.polls .polls-question {
  margin-bottom: .5rem;
}

.polls .polls-question .polls-question-label {
  color: #1779ba;
  font-weight: 500;
  margin-right: .25rem;
}

.polls .polls-submit {
  margin-top: .3rem;
}

.polls .polls-submit .button {
  margin-right: .5rem;
  text-transform: uppercase;
}

JS