Skip to content

E
edx-platform
Commit 32f154d7 by Kyle Fiedler
Options

Added new styles for amplifier

parent 74613b1f
Showing with 251 additions and 86 deletions
static/css/application.css
...@@ -117,7 +117,7 @@ input, select { ...@@ -117,7 +117,7 @@ input, select {
font-weight: 800; font-weight: 800;
font-style: italic; } font-style: italic; }
.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after { .clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, section.tool-wrapper:after, section.tool-wrapper div#controlls-container:after, section.tool-wrapper div#controlls-container div.graph-controls:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
content: "."; content: ".";
display: block; display: block;
height: 0; height: 0;
...@@ -2848,6 +2848,26 @@ div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle { ...@@ -2848,6 +2848,26 @@ div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle {
div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle:hover, div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle:focus { div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle:hover, div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle:focus {
background-color: #bf4040; background-color: #bf4040;
outline: none; } outline: none; }
div.course-wrapper section.course-content div.ui-tabs {
border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
margin: 0;
padding: 0; }
div.course-wrapper section.course-content div.ui-tabs .ui-tabs-nav {
background: none;
border: 0;
margin-bottom: 11.326px; }
div.course-wrapper section.course-content div.ui-tabs .ui-tabs-panel {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
padding: 0; }
div.course-wrapper.closed section.course-index { div.course-wrapper.closed section.course-index {
width: 3.077%; } width: 3.077%; }
div.course-wrapper.closed section.course-index header#open_close_accordion { div.course-wrapper.closed section.course-index header#open_close_accordion {
...@@ -3770,64 +3790,150 @@ section.course-content nav.sequence-bottom ul li.next a { ...@@ -3770,64 +3790,150 @@ section.course-content nav.sequence-bottom ul li.next a {
section.course-content nav.sequence-bottom ul li.next a:hover { section.course-content nav.sequence-bottom ul li.next a:hover {
background-color: none; } background-color: none; }
div#graph-container { section.tool-wrapper {
border-top: 1px solid #ddd; background: #073642;
padding-top: 22.652px; } border-top: 1px solid #00171c;
div#graph-container canvas#graph { border-bottom: 1px solid #00171c;
width: 48.641%; -webkit-box-shadow: inset 0 0 0 4px #084150;
float: left; -moz-box-shadow: inset 0 0 0 4px #084150;
margin-right: 2.717%; } box-shadow: inset 0 0 0 4px #084150;
div#graph-container div.graph-controls { margin: 22.652px -22.652px;
padding: 22.652px;
color: #839496; }
section.tool-wrapper div#graph-container {
width: 48.641%; width: 48.641%;
margin-right: 2.717%;
float: left; } float: left; }
div#graph-container div.graph-controls select#musicTypeSelect { section.tool-wrapper div#graph-container canvas {
display: block; width: 100%; }
section.tool-wrapper div#controlls-container {
width: 48.641%;
float: left;
padding-bottom: 22.652px; }
section.tool-wrapper div#controlls-container div.graph-controls {
padding: 45.304px 0 33.978px;
border-bottom: 1px solid #05232b;
margin-bottom: 22.652px; } margin-bottom: 22.652px; }
div#graph-container div.graph-controls div#graph-output { section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper {
float: left;
width: 47.207%; }
section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper {
margin-right: 5.587%; }
section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper {
padding-top: 11.326px; }
section.tool-wrapper div#controlls-container div.graph-controls select#musicTypeSelect {
display: block; display: block;
margin-bottom: 22.652px; } margin-bottom: 22.652px; }
div#graph-container div.graph-controls div#graph-listen { section.tool-wrapper div#controlls-container div.graph-controls div#graph-output, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen {
display: block; display: block;
margin-bottom: 22.652px; }
div#graph-container div.graph-controls p {
margin-bottom: 11.326px; }
div#graph-container div.graph-controls div#label {
display: inline-block; }
div#graph-container div.graph-controls input#playButton {
display: block; }
div#schematic-container canvas {
width: 48.641%;
float: left;
margin-right: 2.717%; }
div#schematic-container div.schematic-sliders {
width: 48.641%;
float: left; }
div#schematic-container div.schematic-sliders div.slider-label#vs {
margin-top: 45.304px; }
div#schematic-container div.schematic-sliders div.slider-label {
margin-bottom: 11.326px; } margin-bottom: 11.326px; }
div#schematic-container div.schematic-sliders div.slider { section.tool-wrapper div#controlls-container div.graph-controls div#graph-output p, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen p {
margin-bottom: 22.652px; } display: -moz-inline-box;
-moz-box-orient: vertical;
div.graph-controls label, div#graph-listen label { display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 0; }
section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-bottom: 0; }
section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-bottom: 0; }
section.tool-wrapper div#controlls-container div.graph-controls input#playButton {
display: block;
border: 1px solid #13649d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #69acdb;
-moz-box-shadow: inset 0 1px 0 0 #69acdb;
box-shadow: inset 0 1px 0 0 #69acdb;
color: white;
display: inline;
font-size: 11px;
font-weight: bold;
background-color: #268bd2;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #268bd2), color-stop(100%, #156dab));
background-image: -webkit-linear-gradient(top, #268bd2, #156dab);
background-image: -moz-linear-gradient(top, #268bd2, #156dab);
background-image: -ms-linear-gradient(top, #268bd2, #156dab);
background-image: -o-linear-gradient(top, #268bd2, #156dab);
background-image: linear-gradient(top, #268bd2, #156dab);
padding: 6px 18px 7px;
text-shadow: 0 1px 0 #0c5a90;
-webkit-background-clip: padding-box;
font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }
section.tool-wrapper div#controlls-container div.graph-controls input#playButton:hover {
-webkit-box-shadow: inset 0 1px 0 0 #3f96d2;
-moz-box-shadow: inset 0 1px 0 0 #3f96d2;
box-shadow: inset 0 1px 0 0 #3f96d2;
cursor: pointer;
background-color: #277cb8;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #277cb8), color-stop(100%, #14649d));
background-image: -webkit-linear-gradient(top, #277cb8, #14649d);
background-image: -moz-linear-gradient(top, #277cb8, #14649d);
background-image: -ms-linear-gradient(top, #277cb8, #14649d);
background-image: -o-linear-gradient(top, #277cb8, #14649d);
background-image: linear-gradient(top, #277cb8, #14649d); }
section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active {
border: 1px solid #13649d;
-webkit-box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee;
-moz-box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #135b8e, inset 0 0 8px 4px #135b8e, 0 1px 1px 0 #eeeeee; }
section.tool-wrapper div#controlls-container label {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-ms-border-radius: 2px; -ms-border-radius: 2px;
-o-border-radius: 2px; -o-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
font-weight: bold; font-weight: bold;
padding: 3px; } padding: 3px;
div.graph-controls label[for="vinCheckbox"], div.graph-controls label[for="vinRadioButton"], div#graph-listen label[for="vinCheckbox"], div#graph-listen label[for="vinRadioButton"] { color: #fff; }
section.tool-wrapper div#controlls-container label[for="vinCheckbox"], section.tool-wrapper div#controlls-container label[for="vinRadioButton"] {
color: #409fbf; } color: #409fbf; }
div.graph-controls label[for="voutCheckbox"], div.graph-controls label[for="voutRadioButton"], div#graph-listen label[for="voutCheckbox"], div#graph-listen label[for="voutRadioButton"] { section.tool-wrapper div#controlls-container label[for="voutCheckbox"], section.tool-wrapper div#controlls-container label[for="voutRadioButton"] {
color: #e1a600; } color: #e1a600; }
div.graph-controls label[for="vrCheckbox"], div.graph-controls label[for="vrRadioButton"], div#graph-listen label[for="vrCheckbox"], div#graph-listen label[for="vrRadioButton"] { section.tool-wrapper div#controlls-container label[for="vrCheckbox"], section.tool-wrapper div#controlls-container label[for="vrRadioButton"] {
color: #49c944; } color: #49c944; }
div.graph-controls label[for="vcCheckbox"], div.graph-controls label[for="vcRadioButton"], div#graph-listen label[for="vcCheckbox"], div#graph-listen label[for="vcRadioButton"] { section.tool-wrapper div#controlls-container label[for="vcCheckbox"], section.tool-wrapper div#controlls-container label[for="vcRadioButton"] {
color: #e1a600; } color: #e1a600; }
div.graph-controls label[for="vlCheckbox"], div.graph-controls label[for="vlRadioButton"], div#graph-listen label[for="vlCheckbox"], div#graph-listen label[for="vlRadioButton"] { section.tool-wrapper div#controlls-container label[for="vlCheckbox"], section.tool-wrapper div#controlls-container label[for="vlRadioButton"] {
color: #a26784; } color: #a26784; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label#vs {
margin-top: 45.304px; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label {
margin-bottom: 11.326px; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.slider {
margin-bottom: 22.652px; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.slider.ui-slider-horizontal {
height: 0.4em;
background: #002b36;
border: 1px solid #00171c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle {
background-color: #dc322f;
margin-top: -0.3em; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle:hover, section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle:active {
background-color: #e04845; }
div.book-wrapper section.book-sidebar { div.book-wrapper section.book-sidebar {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
......
templates/sass/courseware/_amplifier.scss
// JM MOSFET AMPLIFIER // JM MOSFET AMPLIFIER
div#graph-container { section.tool-wrapper {
background: #073642;
border-top: 1px solid darken(#002b36, 5%);
border-bottom: 1px solid darken(#002b36, 5%);
@include box-shadow(inset 0 0 0 4px darken(#094959, 2%));
margin: lh() (-(lh()));
padding: lh();
color: #839496;
@extend .clearfix; @extend .clearfix;
border-top: 1px solid #ddd;
padding-top: lh(1.0);
canvas#graph { div#graph-container {
width: flex-grid(4.5, 9); width: flex-grid(4.5, 9);
float: left;
margin-right: flex-gutter(9); margin-right: flex-gutter(9);
float: left;
canvas {
width: 100%;
}
} }
div.graph-controls { div#controlls-container {
@extend .clearfix;
width: flex-grid(4.5, 9); width: flex-grid(4.5, 9);
float: left; float: left;
padding-bottom: lh();
select#musicTypeSelect { div.graph-controls {
display: block; padding: lh(2) 0 lh(1.5);
border-bottom: 1px solid darken(#073642, 5%);
margin-bottom: lh(); margin-bottom: lh();
} @extend .clearfix;
div#graph-output { div.music-wrapper, div.inputs-wrapper {
display: block; float: left;
margin-bottom: lh(); width: flex-grid(2.25, 4.5);
} }
div#graph-listen { div.music-wrapper {
display: block; margin-right: flex-gutter(4.5);
margin-bottom: lh();
} }
p { div.inputs-wrapper {
margin-bottom: lh(.5); padding-top: lh(.5);
} }
div#label { select#musicTypeSelect {
display: inline-block;
}
input#playButton {
display: block; display: block;
margin-bottom: lh();
} }
}
}
div#schematic-container { div#graph-output, div#graph-listen {
@extend .clearfix; display: block;
margin-bottom: lh(.5);
canvas { p {
width: flex-grid(4.5, 9); @include inline-block();
float: left; margin: 0;
margin-right: flex-gutter(9);
} }
div.schematic-sliders { ul {
width: flex-grid(4.5, 9); @include inline-block();
float: left; margin-bottom: 0;
div.slider-label#vs { li {
margin-top: lh(2.0); @include inline-block();
margin-bottom: 0;
}
} }
div.slider-label {
margin-bottom: lh(0.5);
} }
div.slider { input#playButton {
margin-bottom: lh(1); display: block;
@include button(simple, #268bd2);
font: bold 14px $body-font-family;
} }
} }
}
//End JM MOSFET AMPLIFIER
// Labels
div.graph-controls, div#graph-listen {
label { label {
@include border-radius(2px); @include border-radius(2px);
font-weight: bold; font-weight: bold;
padding: 3px; padding: 3px;
color: #fff;
} }
//MOSFET AMPLIFIER //MOSFET AMPLIFIER
label[for="vinCheckbox"], label[for="vinRadioButton"]{ label[for="vinCheckbox"], label[for="vinRadioButton"]{
color: desaturate(#00bfff, 50%); color: desaturate(#00bfff, 50%);
} }
label[for="voutCheckbox"], label[for="voutRadioButton"]{ label[for="voutCheckbox"], label[for="voutRadioButton"]{
color: darken(#ffcf48, 20%); color: darken(#ffcf48, 20%);
} }
label[for="vrCheckbox"], label[for="vrRadioButton"]{ label[for="vrCheckbox"], label[for="vrRadioButton"]{
color: desaturate(#1df914, 40%); color: desaturate(#1df914, 40%);
} }
//RC Filters //RC Filters
label[for="vcCheckbox"], label[for="vcRadioButton"]{ label[for="vcCheckbox"], label[for="vcRadioButton"]{
color: darken(#ffcf48, 20%); color: darken(#ffcf48, 20%);
} }
//RLC Series //RLC Series
label[for="vlCheckbox"], label[for="vlRadioButton"]{ label[for="vlCheckbox"], label[for="vlRadioButton"]{
color: desaturate(#d33682, 40%); color: desaturate(#d33682, 40%);
} }
div.schematic-sliders {
div.slider-label#vs {
margin-top: lh(2.0);
}
div.slider-label {
margin-bottom: lh(0.5);
}
div.slider {
margin-bottom: lh(1);
&.ui-slider-horizontal {
height: 0.4em;
background: #002b36;
border: 1px solid darken(#002b36, 5%);
@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 { ...@@ -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 { &.closed {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment