sassy

dist/ratchet.css

@@ -346,50 +346,36 @@ a {
   height: 32px;
   margin: 0; }
 
-/* Table views
--------------------------------------------------- */
 .table-view {
   list-style: none;
   background-color: #fff; }
-
-.table-view li {
+  .table-view li {
     position: relative;
     padding: 11px 60px 11px 0;
     margin-left: 15px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
-
-.table-view li:first-child {
+  .table-view li:first-child {
     border-top: 1px solid rgba(0, 0, 0, 0.1); }
-
-.table-view li:last-child {
+  .table-view li:last-child {
     border-bottom: 0; }
-
-.table-view li > a:not([class*="button"]) {
+  .table-view li > a:not([class*="button"]) {
     position: relative;
     display: block;
     padding: inherit;
     margin: -11px -60px -11px 0;
     color: inherit; }
-
-/* Inset table view
--------------------------------------------------- */
-.table-view.inset {
+  .table-view.inset {
     width: auto;
     margin-right: 10px;
     margin-left: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 6px;
     box-sizing: border-box; }
-
-.table-view.inset li:first-child {
+    .table-view.inset li:first-child {
       border-top-width: 0; }
-
-.table-view.inset li:last-child {
+    .table-view.inset li:last-child {
       border-bottom-width: 0; }
-
-/* table view dividers
--------------------------------------------------- */
-.table-view .table-view-divider {
+  .table-view .table-view-divider {
     position: relative;
     top: -1px;
     padding-top: 6px;
@@ -401,47 +387,31 @@ a {
     background-color: #f8f8f8;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); }
-
-/* Rounding first divider on inset lists and remove border on the top */
-.table-view.inset .table-view-divider:first-child {
+    /* Rounding first divider on inset lists and remove border on the top */
+    /* Rounding last divider on inset table views */ }
+    .table-view .table-view-divider :first-child {
       top: 0;
       border-top-width: 0;
       border-radius: 6px 6px 0 0; }
-
-/* Rounding last divider on inset table views */
-.table-view.inset .table-view-divider:last-child {
+    .table-view .table-view-divider :last-child {
       border-radius: 0 0 6px 6px; }
-
-/* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
--------------------------------------------------- */
-.table-view .chevron,
-.table-view [class*="button"],
-.table-view [class*="count"],
-.table-view .toggle {
+  .table-view .chevron,
+  .table-view [class*="button"],
+  .table-view [class*="count"],
+  .table-view .toggle {
     position: absolute;
     top: 50%;
     right: 10px; }
-
-/* Position chevrons/counts vertically centered on the right in table view items */
-.table-view .chevron,
-.table-view [class*="count"] {
-  margin-top: -10px;
-  /* Half height of chevron */ }
-
-/* Push count over if there's a sibling chevron */
-.table-view .chevron + [class*="count"] {
+  .table-view .chevron,
+  .table-view [class*="count"] {
+    margin-top: -10px; }
+  .table-view .chevron + [class*="count"] {
     right: 30px; }
-
-/* Position buttons vertically centered on the right in table view items */
-.table-view [class*="button"] {
+  .table-view [class*="button"] {
     left: auto;
-  margin-top: -14px;
-  /* Half height of button */ }
-
-.table-view .toggle {
-  margin-top: -15px;
-  /* Half height of toggle */ }
+    margin-top: -14px; }
+  .table-view .toggle {
+    margin-top: -15px; }
 
 /* Forms
 -------------------------------------------------- */
@@ -875,8 +845,6 @@ button.button-block {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-/* Slider styles (to be used with sliders.js)
--------------------------------------------------- */
 .slider,
 .slider > li {
   width: 100%;
@@ -885,25 +853,20 @@ button.button-block {
 .slider {
   overflow: hidden;
   background-color: #000; }
-
-.slider > ul {
+  .slider > ul {
     position: relative;
     font-size: 0;
     white-space: nowrap;
     -webkit-transition: all 0 linear;
     transition: all 0 linear; }
-
-.slider > ul > li {
+    .slider > ul > li {
       display: inline-block;
       vertical-align: top;
       width: 100%;
       height: 100%; }
-
-.slider > ul > li > * {
+      .slider > ul > li > * {
         font-size: 14px; }
 
-/* Toggle styles (to be used with toggles.js)
--------------------------------------------------- */
 .toggle {
   position: relative;
   width: 45px;
@@ -911,8 +874,7 @@ button.button-block {
   background-color: #fff;
   border: 2px solid #e6e6e6;
   border-radius: 20px; }
-
-.toggle-handle {
+  .toggle .toggle-handle {
     position: absolute;
     top: -1px;
     left: -1px;
@@ -925,12 +887,10 @@ button.button-block {
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
     -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
     transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; }
-
-.toggle.active {
+  .toggle.active {
     background-color: #4cd964;
     border: 2px solid #4cd964; }
-
-.toggle.active .toggle-handle {
+  .toggle.active .toggle-handle {
     border-color: #4cd964;
     -webkit-transform: translate3d(17px, 0, 0);
     transform: translate3d(17px, 0, 0); }

lib/sass/sliders.scss

@@ -1,5 +1,6 @@
-/* Slider styles (to be used with sliders.js)
--------------------------------------------------- */
+//
+// Slider styles (to be used with sliders.js)
+// --------------------------------------------------
 
 // Width/height of slider
 .slider,
@@ -12,26 +13,26 @@
 .slider {
   overflow: hidden;
   background-color: #000;
-}
 
-// Inner wrapper for slider (width of all slides together)
-.slider > ul {
+  // Inner wrapper for slider (width of all slides together)
+  > ul {
     position: relative;
     font-size: 0; // Remove spaces from inline-block children
     white-space: nowrap;
     -webkit-transition: all 0 linear;
             transition: all 0 linear;
-}
     
-// Individual slide */
-.slider > ul > li {
+    // Individual slide
+    > li {
       display: inline-block;
       vertical-align: top; // Ensure that li always aligns to top
       width: 100%; 
       height: 100%;
-}
 
-// Required reset of font-size to same as standard body
-.slider > ul > li > * {
+      // Required reset of font-size to same as standard body
+      > * {
         font-size: 14px;
+      }
+    }
+  }
 }

lib/sass/table-views.scss

@@ -1,64 +1,64 @@
-/* Table views
--------------------------------------------------- */
+//
+// Table views
+// --------------------------------------------------
 
-// Remove usual bullet styles from table view
 .table-view {
-  list-style: none;
+  list-style: none; // Remove usual bullet styles from table view
   background-color: #fff;
-}
 
-// Pad each table view item and add dividers
-.table-view li {
+  // Pad each table view item and add dividers
+  li {
     position: relative;
     padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons
     margin-left: 15px;
     border-bottom: 1px solid rgba(0, 0, 0, .1);
-}
+  }
 
-// Give top border to first list items
-.table-view li:first-child {
+  // Give top border to first list items
+  li:first-child {
     border-top: 1px solid rgba(0, 0, 0, .1);
-}
+  }
 
-// Remove the border from the last list item
-.table-view li:last-child {
+  // Remove the border from the last list item
+  li:last-child {
     border-bottom: 0;
-}
+  }
 
-// If a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
-.table-view li > a:not([class*="button"]) {
+  // If a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
+  li > a:not([class*="button"]) {
     position: relative;
     display: block;
     padding: inherit;
     margin: -11px -60px -11px 0;
     color: inherit;
-}
+  }
 
-/* Inset table view
--------------------------------------------------- */
 
-.table-view.inset {
+  // Inset table views
+  // --------------------------------------------------
+
+  &.inset {
     width: auto;
     margin-right: 10px;
     margin-left: 10px;
-  border: 1px solid rgba(0, 0, 0, .1);
+    border: 1px solid rgba(0, 0, 0, .15);
     border-radius: 6px;
     box-sizing: border-box;
-}
 
-// Remove border from first/last standard list items to avoid double border at top/bottom of table views
-.table-view.inset li:first-child {
+    // Remove border from first/last standard list items to avoid double border at top/bottom of table views
+    li:first-child {
       border-top-width: 0;
-}
-.table-view.inset li:last-child {
+    }
+    li:last-child {
       border-bottom-width: 0;
-}
+    }
+  }
 
 
-/* table view dividers
--------------------------------------------------- */
+  // Table view dividers
+  // --------------------------------------------------
 
-.table-view .table-view-divider {
+  .table-view-divider {
     position: relative;
     top: -1px;
     padding-top: 6px;
@@ -70,49 +70,51 @@
     background-color: #f8f8f8;
     border-top: 1px solid rgba(0, 0, 0, .1);
     border-bottom: 1px solid rgba(0, 0, 0, .1);
-  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
-}
 
-/* Rounding first divider on inset lists and remove border on the top */
-.table-view.inset .table-view-divider:first-child {
+    /* Rounding first divider on inset lists and remove border on the top */
+    :first-child {
       top: 0;
       border-top-width: 0;
       border-radius: 6px 6px 0 0;
-}
+    }
 
-/* Rounding last divider on inset table views */
-.table-view.inset .table-view-divider:last-child {
+    /* Rounding last divider on inset table views */
+    :last-child {
       border-radius: 0 0 6px 6px;
-}
+    }
+  }
+
+
+  // Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
+  // -------------------------------------------------------------------------------
 
-/* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
--------------------------------------------------- */
-.table-view .chevron,
-.table-view [class*="button"],
-.table-view [class*="count"],
-.table-view .toggle {
+  .chevron,
+  [class*="button"],
+  [class*="count"],
+  .toggle {
     position: absolute;
     top: 50%;
     right: 10px;
-}
+  }
 
- /* Position chevrons/counts vertically centered on the right in table view items */
-.table-view .chevron,
-.table-view [class*="count"] {
-  margin-top: -10px; /* Half height of chevron */
-}
+  // Position chevrons/counts vertically centered on the right in table view items
+  .chevron,
+  [class*="count"] {
+    margin-top: -10px; // Half height of chevron
+  }
 
-/* Push count over if there's a sibling chevron */
-.table-view .chevron + [class*="count"] {
+  // Push count over if there's a sibling chevron
+  .chevron + [class*="count"] {
   right: 30px;
-}
+  }
 
-/* Position buttons vertically centered on the right in table view items */
-.table-view [class*="button"] {
+  // Position buttons vertically centered on the right in table view items
+  [class*="button"] {
     left: auto;
-  margin-top: -14px; /* Half height of button */
-}
+    margin-top: -14px; // Half height of button
+  }
 
-.table-view .toggle {
-  margin-top: -15px; /* Half height of toggle */
+  .toggle {
+    margin-top: -15px; // Half height of toggle
+  }
 }

lib/sass/toggles.scss

@@ -1,5 +1,6 @@
-/* Toggle styles (to be used with toggles.js)
--------------------------------------------------- */
+//
+// Toggle styles (to be used with toggles.js)
+// --------------------------------------------------
 
 .toggle {
   position: relative;
@@ -8,10 +9,9 @@
   background-color: #fff;
   border: 2px solid #e6e6e6;
   border-radius: 20px;
-}
 
-// Sliding handle
-.toggle-handle {
+  // Sliding handle
+  .toggle-handle {
     position: absolute;
     top: -1px;
     left: -1px;
@@ -24,17 +24,18 @@
     box-shadow: 0 3px 3px rgba(0,0,0,.08);
     -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
                     transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
-}
+  }
 
-// Active state for toggle
-.toggle.active {
+  // Active state for toggle
+  &.active {
     background-color: #4cd964;
     border: 2px solid #4cd964;
-}
+  }
 
-// Active state for toggle handle
-.toggle.active .toggle-handle {
+  // Active state for toggle handle
+  &.active .toggle-handle {
     border-color: #4cd964;
     -webkit-transform: translate3d(17px,0,0);
             transform: translate3d(17px,0,0);
+  }
 }