Merge branch 'kf-amplifier'

templates/sass/courseware/_amplifier.scss

 // JM MOSFET AMPLIFIER
-div#graph-container {
+section.tool-wrapper {
+  background: #073642;
+  border-top: 1px solid darken(#002b36, 10%);
+  border-bottom: 1px solid darken(#002b36, 10%);
+  @include box-shadow(inset 0 0 0 4px darken(#094959, 2%));
+  margin: lh() (-(lh())) 0;
+  color: #839496;
   @extend .clearfix;
-  border-top: 1px solid #ddd;
-  padding-top: lh(1.0);
+  display: table;
 
-  canvas#graph {
-    width: flex-grid(4.5, 9);
-    float: left;
-    margin-right: flex-gutter(9); 
-  }
-
-  div.graph-controls {
-    width: flex-grid(4.5, 9);
-    float: left;
+  div#graph-container {
+    background: none;
+    @include box-sizing(border-box);
+    display: table-cell;
+    padding: lh();
+    vertical-align: top;
+    width: flex-grid(4.5, 9) + flex-gutter(9);
 
-    select#musicTypeSelect {
-      display: block;
-      margin-bottom: lh();
+    .ui-widget-content {
+      background: none;
+      border: none;
+      @include border-radius(0);
     }
 
-    div#graph-output {
-      display: block;
-      margin-bottom: lh();
+    canvas {
+      width: 100%;
     }
 
-    div#graph-listen {
-      display: block;
-      margin-bottom: lh();
-    }
+    ul.ui-tabs-nav {
+      background: darken(#073642, 2%);
+      margin: (-(lh())) (-(lh())) 0;
+      padding: 0;
+      position: relative;
+      width: 110%;
+      @include border-radius(0);
+      border-bottom: 1px solid darken(#073642, 8%);
 
-    p {
-      margin-bottom: lh(.5);
+      li {
+        margin-bottom: 0;
+        background: none;
+        color: #fff;
+        border: none;
+        @include border-radius(0);
+
+        &.ui-tabs-selected {
+          border-right: 1px solid darken(#073642, 8%);
+          border-left: 1px solid darken(#073642, 8%);
+          background-color: #073642;
+
+          &:first-child {
+            border-left: none;
           }
 
-    div#label {
-      display: inline-block;
+          a {
+            color: #eee8d5;
+          }
         }
 
-    input#playButton {
-      display: block;
+        a {
+          border: none;
+          font: bold 12px $body-font-family;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          color: #839496;
+
+          &:hover {
+            color: #eee8d5;
+          }
+        }
+      }
     }
   }
-}
 
-div#schematic-container {
+  div#controlls-container {
     @extend .clearfix;
-
-  canvas {
+    background: darken(#073642, 2%);
+    border-right: 1px solid darken(#002b36, 6%);
+    @include box-shadow(1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%));
+    @include box-sizing(border-box);
+    display: table-cell;
+    padding: lh();
+    vertical-align: top;
     width: flex-grid(4.5, 9);
+
+    div.graph-controls {
+      padding: 0 0 lh();
+      margin-bottom: lh();
+      border-bottom: 1px solid darken(#073642, 5%);
+      @include box-shadow(0 1px 0 lighten(#073642, 2%));
+      @extend .clearfix;
+
+      div.music-wrapper {
+        margin-right: flex-gutter(4.5);
+        width: flex-grid(1.5, 4.5);
         float: left;
-    margin-right: flex-gutter(9); 
       }
 
-  div.schematic-sliders {
-    width: flex-grid(4.5, 9);
+      div.inputs-wrapper {
+        padding-top: lh(.5);
+        width: flex-grid(3, 4.5);
         float: left;
+      }
 
-    div.slider-label#vs {
-      margin-top: lh(2.0);
+      select#musicTypeSelect {
+        display: block;
+        margin-bottom: lh(.5);
+        font: 16px $body-font-family;
+        width: 100%;
       }
 
-    div.slider-label {
-      margin-bottom: lh(0.5);
+      div#graph-output, div#graph-listen {
+        display: block;
+        margin-bottom: lh(.5);
+        text-align: right;
+
+        p {
+          @include inline-block();
+          margin: 0;
         }
 
-    div.slider {
-      margin-bottom: lh(1);
+        ul {
+          @include inline-block();
+          margin-bottom: 0;
+
+          li {
+            @include inline-block();
+            margin-bottom: 0;
+
+            input {
+              margin-right: 5px;
             }
           }
-}
-//End JM MOSFET AMPLIFIER
+        }
+      }
+
+      input#playButton {
+        display: block;
+        @include button(simple, #dc322f);
+        font: bold 14px $body-font-family;
+        color: #47221a;
+        text-shadow: 0 1px 0 lighten(#dc322f, 5%);
+        @include box-shadow(inset 0 1px 0 lighten(#dc322f, 10%));
+
+        &:active {
+          @include box-shadow(none);
+        }
 
-// Labels
-div.graph-controls, div#graph-listen {
+        &[value="Stop"] {
+          @include button(simple, darken(#268bd2, 30%));
+          font: bold 14px $body-font-family;
+
+          &:active {
+            @include box-shadow(none);
+          }
+        }
+      }
+    }
 
     label {
       @include border-radius(2px);
       font-weight: bold;
       padding: 3px;
+      color: #fff;
+      -webkit-font-smoothing: antialiased;
     }
+
     //MOSFET AMPLIFIER
     label[for="vinCheckbox"], label[for="vinRadioButton"]{
       color: desaturate(#00bfff, 50%);
     }
+
     label[for="voutCheckbox"], label[for="voutRadioButton"]{
       color: darken(#ffcf48, 20%);
     }
+
     label[for="vrCheckbox"], label[for="vrRadioButton"]{
       color: desaturate(#1df914, 40%);
     }
+
     //RC Filters
     label[for="vcCheckbox"], label[for="vcRadioButton"]{
       color: darken(#ffcf48, 20%);
     }
+
     //RLC Series
     label[for="vlCheckbox"], label[for="vlRadioButton"]{
       color: desaturate(#d33682, 40%);
     }
+
+    div.schematic-sliders {
+
+      div.slider-label {
+        margin-bottom: lh(0.5);
+        font-weight: bold;
+        text-shadow: 0 -1px 0 darken(#073642, 10%);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      div.slider {
+        margin-bottom: lh(1);
+
+        &.ui-slider-horizontal {
+          height: 0.4em;
+          background: darken(#002b36, 2%);
+          border: 1px solid darken(#002b36, 8%);
+          @include box-shadow(none);
+        }
+
+        .ui-slider-handle {
+          background-color: #dc322f;
+          margin-top: -.3em;
+
+          &:hover, &:active {
+            background-color: lighten(#dc322f, 5%);
+          }
+        }
+      }
+    }
+  }
 }
 
+

templates/sass/courseware/_courseware.scss

@@ -258,6 +258,24 @@ div.course-wrapper {
         }
       }
     }
+
+    div.ui-tabs {
+      border: 0;
+      @include border-radius(0);
+      margin: 0;
+      padding: 0;
+
+      .ui-tabs-nav {
+        background: none;
+        border: 0;
+        margin-bottom: lh(.5);
+      }
+
+      .ui-tabs-panel {
+        @include border-radius(0);
+        padding: 0;
+      }
+    }
   }
 
   &.closed {