PolicyGenius - Style Guide

Sidebar Filter

Et, pretium vestibulum

Libero
$100
Phasellus id nulla
10%
Convallis, faucibus magna sit

Amet tempus
3

Nunc ornare ornare nunc nec efficitur

Tortor

Phasellus nisi est

Donec lobortis dui

Mauris tristique efficitur enim, eu

Sed iaculis ante quis commodo

Nullam mollis turpis
.mod-sidebar-filter
  .section
    a.button.action.lowlight.i-write href='#' Nam metus massa
    a.button.action.lowlight.i-floppydisk href='#' Tempor vel tortor
  .section
    h2 Et, pretium vestibulum
    .slider
      .header
        .title Libero
        .value $100
      .bar
        .range style='width: 50%;'
        .handler style='left: 50%;'
    .slider
      .header
        .title Phasellus id nulla
        .value 10%
      .bar
        .range style='width: 80%;'
        .handler style='left: 80%;'
    a.action.i-calculator href='#' Convallis, faucibus magna sit
  .section
    h2
      | Amet tempus
      .badge 3
    p Nunc ornare ornare nunc nec efficitur
  .section
    h2.icon-checkheart Tortor
    label.checkbox
      input type='checkbox'
      span Sed non diam id purus placerat convallis
  .section
    h2 Phasellus nisi est
    label.checkbox
      input type='checkbox' checked='checked'
      span
          | Posuere ut elit
          div Lobortis molestie
    label.checkbox
      input type='checkbox' checked='checked'
      span
          | Sed lobortis et quam
          div Lobortis molestie
    label.checkbox
      input type='checkbox'
      span
          | Vestibulum ante
          div Lobortis molestie
  .section
    h2.section-toggler.expanded Donec lobortis dui
    .inner
      h3 Mauris tristique efficitur enim, eu
      label.checkbox
        input type='checkbox' checked='checked'
        span Ante dignissim sit
      label.checkbox
        input type='checkbox' checked='checked'
        span  Ultrices posuere
      h3
        ' Sed iaculis
        strong
          em
            ' ante quis
        | commodo
      label.checkbox
        input type='checkbox' checked='checked'
        span Pellentesque habitant morbi
      label.checkbox
        input type='checkbox' checked='checked'
        span Tristique senectus et
      label.checkbox
        input type='checkbox'
        span Netus et malesuada
      label.checkbox
        input type='checkbox'
        span Fames ac turpis
      a.button Nullam mollis turpis
$('.section-toggler').click(function(event) {
  if ($(this).hasClass('expanded')) {
    $(this).removeClass('expanded').addClass('collapsed');
    $(this).parent().find('.inner').slideUp(500);
  } else {
    $(this).addClass('expanded').removeClass('collapsed');
    $(this).parent().find('.inner').slideDown(500);
  }
});