Style and improve slide-toggle checkbox

Author: jordanmccullough

_layouts/curriculum.html

@@ -8,18 +8,14 @@
     <div class="timer-toggle">
       <span class="octicon octicon-clock"></span>
     </div>
-
     <div class="timer-amount">
       <input type="number" id="minutes" name="minutes" min="1" max="20" value="5" placeholder="min" class="form-control">
       <!-- <input type="number" id="seconds" name="seconds" min="1" max="60" value="0" placeholder="sec" class="form-control"> -->
       <button id="start-stop" type="submit" class="btn btn-default">Start</button>
     </div>
-
     <div class="timer-content">
       <span class="time-left" id="time-left"></span>
     </div>
-
-
   </div>
 </div>
 
@@ -76,8 +72,14 @@
         <div id="toc" data-spy="affix" data-offset-top="145">
           <ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist">
             <li>
-              <label for="slide-only-toggle">Show Slides Only</label>
-              <input type="checkbox" name="slide-only" id="slide-only-toggle" value="true">
+
+
+            </li>
+          </ul>
+          <ul class="nav display-controls">
+            <li>
+              <input type="checkbox" name="slide-only" id="slide-only-toggle" class="slide-only-check" value="true">
+              <label id="slides-only" for="slide-only-toggle" class="slides-only-label">Slides Only</label>
             </li>
           </ul>
         </div>

_stylesheets/curriculum.css

@@ -19,6 +19,38 @@
   .fade-out .timer-amount {
     visibility: hidden; }
 
+.display-controls {
+  border-top: solid 2px #f3f3f3;
+  margin-top: 5px;
+  padding-top: 10px; }
+
+.slide-only-check {
+  visibility: hidden;
+  height: 0;
+  width: 0; }
+  .slide-only-check:checked + label {
+    color: #454545; }
+    .slide-only-check:checked + label:before {
+      content: '\f03a';
+      color: white;
+      background-color: #5a5a5a;
+      box-shadow: 0 0 0 2px #5a5a5a; }
+
+.slides-only-label {
+  color: rgba(69, 69, 69, 0.5); }
+  .slides-only-label:before {
+    content: '\f03a';
+    font: normal normal normal 16px/1 octicons;
+    text-align: center;
+    display: inline-block;
+    border-radius: 50%;
+    color: rgba(69, 69, 69, 0);
+    -webkit-transition: all 180ms;
+    margin-right: 5px;
+    width: 1em;
+    height: 1em;
+    box-shadow: 0 0 0 2px #f3f3f3; }
+
 .timer-wrapper {
   background: rgba(255, 255, 255, 0.93);
   height: 100%;

_stylesheets/curriculum.scss

@@ -42,7 +42,47 @@ $mono-dark: #454545;
   .timer-amount{
     visibility: hidden;
   }
+}
+
+.display-controls{
+  border-top: solid 2px $mono-light;
+  margin-top: 5px;
+  padding-top: 10px;
+}
+
+.slide-only-check{
+  visibility: hidden;
+  height: 0;
+  width: 0;
+
+  &:checked + label{
+    color: $mono-dark;
+
+    &:before{
+      content: '\f03a';
+      color: rgba($mono-bright, 1);
+      background-color: $mono-medium;
+      box-shadow: 0 0 0 2px $mono-medium;
+    }
+  }
+}
 
+.slides-only-label{
+  color: rgba($mono-dark, .5);
+
+  &:before{
+    content: '\f03a';
+    font: normal normal normal 16px/1 octicons;
+    text-align: center;
+    display: inline-block;
+    border-radius: 50%;
+    color: rgba($mono-dark, 0);
+    -webkit-transition: all 180ms;
+    margin-right: 5px;
+    width: 1em;
+    height: 1em;
+    box-shadow: 0 0 0 2px $mono-light;
+  }
 }
 
 .timer-wrapper{