bookwyrm

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Bourbon (v4.2.3)
// Scut (v1.1.3)
// ----

@import "scut";
@import "bourbon/bourbon";

bookwyrm

// ----
// libsass (v3.2.4)
// ----

// https://github.com/ericam/true
@import "true";

$color-stack:
  (group: orange, shade: normal, color: #e67835),
  (group: orange, shade: pale,   color: #f8a878),

bookwyrm

// ----
// libsass (v3.2.4)
// ----

// https://github.com/ericam/true
@import "true";

$color-stack:
  (group: orange, shade: normal, color: #e67835),
  (group: orange, shade: pale,   color: #f8a878),

bookwyrm

$color-stack:
	(group: orange, id: normal, color: #e67835),
	(group: orange, id: pale, color: #f8a878),
	(group: orange, id: dark, color: #ad490c),
	(group: blue, id: normal, color: #426682);

bookwyrm

%ul.rating
  - (1..5).each do |i|
    %li(class="star-#{i}")
      %input(type="radio" id="rating-star-#{i}" name="rating" value="#{i}")
      %label(for="rating-star-#{i}") #{i} stars      

%ul.rating2
  - (1..8).each do |i|
    %li(class="star-#{i}")
      %input(type="radio" id="rating2-star-#{i}" name="rating-2" value="#{i}")

bookwyrm

<ul class="rating">
  <li class="star-1"><a href="#1">1 star</a></li>
  <li class="star-2"><a href="#2">2 stars</a></li>
  <li class="star-3"><a href="#3">3 stars</a></li>
  <li class="star-4"><a href="#4">4 stars</a></li>
  <li class="star-5"><a href="#5">5 stars</a></li>
</ul>

<ul class="rating2">
  <li class="star-1"><a href="#1">1 star</a></li>

bookwyrm

%ul.rating
  - (1..5).each do |i|
    %li(class="star-#{i}")
      %input(type="radio" id="rating-star-#{i}" name="rating" value="#{i}")
      %label(for="rating-star-#{i}") #{i} stars      
%ul.rating2
  - (1..8).each do |i|
    %li(class="star-#{i}")
      %input(type="radio" id="rating2-star-#{i}" name="rating-2" value="#{i}")
      %label(for="rating2-star-#{i}") #{i} stars

bookwyrm

.container
  %span.content Lorem Ipsum

.container
  %span.content-2 Dolor Sit Amet

bookwyrm

<div class="form__container">
  <form class="form form--profile form--profile-horizontal" action="#">
    <h3 class="form__title">Account Profile</h3>
    <fieldset class="form__fields form__fields--horizontal">
      <div class="form__field-cell">
        <label for="name--profile-horizontal" class="form__label-text form__label-text--required">Name</label>
        <input type="text" name="name" id="name--profile-horizontal" required aria-required>
      </div>

      <div class="form__field-cell">

bookwyrm

.item
  %span Here is an item!