Skip to content

E
edx-platform
Commit 00ae503a by Kyle Fiedler Committed by Calen Pennington
Options

added more layout to amplifier

parent 96fd5a12
Showing with 76 additions and 38 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, section.tool-wrapper:after, section.tool-wrapper div#controlls-container:after, section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper:after, section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders: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 div.music-wrapper:after, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after, section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders: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;
...@@ -3940,8 +3940,8 @@ section.tool-wrapper div#controlls-container div.graph-controls div.music-wrappe ...@@ -3940,8 +3940,8 @@ section.tool-wrapper div#controlls-container div.graph-controls div.music-wrappe
padding: 6px 18px 7px; padding: 6px 18px 7px;
text-shadow: 0 1px 0 #31505a; text-shadow: 0 1px 0 #31505a;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; font: bold 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
float: left; } float: right; }
section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton:hover { section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton:hover {
-webkit-box-shadow: inset 0 1px 0 0 #778589; -webkit-box-shadow: inset 0 1px 0 0 #778589;
-moz-box-shadow: inset 0 1px 0 0 #778589; -moz-box-shadow: inset 0 1px 0 0 #778589;
...@@ -4011,23 +4011,19 @@ section.tool-wrapper div#controlls-container div.graph-controls div.music-wrappe ...@@ -4011,23 +4011,19 @@ section.tool-wrapper div#controlls-container div.graph-controls div.music-wrappe
box-shadow: none; } box-shadow: none; }
section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper { section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper {
zoom: 1; zoom: 1;
margin-bottom: 22.652px; } margin-bottom: 22.652px;
padding: 0 0 22.652px;
margin-bottom: 22.652px;
border-bottom: 1px solid #021014;
-webkit-box-shadow: 0 1px 0 #083e4b;
-moz-box-shadow: 0 1px 0 #083e4b;
box-shadow: 0 1px 0 #083e4b; }
section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:before, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after { section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:before, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after {
content: ""; content: "";
display: table; } display: table; }
section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after { section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after {
clear: both; } clear: both; }
section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper select#musicTypeSelect { section.tool-wrapper div#controlls-container div.graph-controls p {
display: block;
font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
float: right;
margin-bottom: 0; }
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;
text-align: right;
float: left;
margin-bottom: 0; }
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 {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -4035,8 +4031,11 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ...@@ -4035,8 +4031,11 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin: 0; } 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 { -webkit-font-smoothing: antialiased;
font-weight: bold;
text-shadow: 0 -1px 0 #021014; }
section.tool-wrapper div#controlls-container div.graph-controls ul {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -4045,7 +4044,7 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ...@@ -4045,7 +4044,7 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin-bottom: 0; } 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 { section.tool-wrapper div#controlls-container div.graph-controls ul li {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -4054,11 +4053,15 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ...@@ -4054,11 +4053,15 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin-bottom: 0; } margin-bottom: 0; }
section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li input, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li input { section.tool-wrapper div#controlls-container div.graph-controls ul li input {
margin-right: 5px; } margin-right: 5px; }
section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen { section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen {
margin-top: 8px; margin-top: 8px;
margin-right: 20px; } margin-right: 20px;
display: block;
text-align: right;
float: left;
margin-bottom: 0; }
section.tool-wrapper div#controlls-container label { section.tool-wrapper div#controlls-container label {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
...@@ -4066,8 +4069,8 @@ section.tool-wrapper div#controlls-container label { ...@@ -4066,8 +4069,8 @@ section.tool-wrapper div#controlls-container label {
-o-border-radius: 2px; -o-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
font-weight: bold; font-weight: bold;
padding: 3px;
color: #fff; color: #fff;
padding: 3px;
-webkit-font-smoothing: antialiased; } -webkit-font-smoothing: antialiased; }
section.tool-wrapper div#controlls-container label[for="vinCheckbox"], section.tool-wrapper div#controlls-container label[for="vinRadioButton"] { section.tool-wrapper div#controlls-container label[for="vinCheckbox"], section.tool-wrapper div#controlls-container label[for="vinRadioButton"] {
color: #409fbf; } color: #409fbf; }
...@@ -4086,6 +4089,28 @@ section.tool-wrapper div#controlls-container div.schematic-sliders div.top-slide ...@@ -4086,6 +4089,28 @@ section.tool-wrapper div#controlls-container div.schematic-sliders div.top-slide
-webkit-box-shadow: 0 1px 0 #083e4b; -webkit-box-shadow: 0 1px 0 #083e4b;
-moz-box-shadow: 0 1px 0 #083e4b; -moz-box-shadow: 0 1px 0 #083e4b;
box-shadow: 0 1px 0 #083e4b; } box-shadow: 0 1px 0 #083e4b; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders select#musicTypeSelect {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
margin-bottom: 0; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders p {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
-webkit-font-smoothing: antialiased;
text-shadow: 0 -1px 0 #021014;
margin: 0 11.326px 22.652px 0;
font-weight: bold; }
section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label { section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label {
margin-bottom: 11.326px; margin-bottom: 11.326px;
font-weight: bold; font-weight: bold;
......
templates/sass/courseware/_amplifier.scss
...@@ -95,8 +95,8 @@ section.tool-wrapper { ...@@ -95,8 +95,8 @@ section.tool-wrapper {
input#playButton { input#playButton {
display: block; display: block;
@include button(simple, lighten( #586e75, 5% )); @include button(simple, lighten( #586e75, 5% ));
font: bold 14px $body-font-family; font: bold 16px $body-font-family;
float: left; float: right;
&:active { &:active {
@include box-shadow(none); @include box-shadow(none);
...@@ -116,24 +116,19 @@ section.tool-wrapper { ...@@ -116,24 +116,19 @@ section.tool-wrapper {
div.inputs-wrapper { div.inputs-wrapper {
@include clearfix; @include clearfix;
margin-bottom: lh(); margin-bottom: lh();
padding: 0 0 lh();
select#musicTypeSelect { margin-bottom: lh();
display: block; border-bottom: 1px solid darken(#073642, 10%);
font: 16px $body-font-family; @include box-shadow(0 1px 0 lighten(#073642, 2%));
float: right; @extend .clearfix;
margin-bottom: 0;
}
} }
div#graph-output, div#graph-listen {
display: block;
text-align: right;
float: left;
margin-bottom: 0;
p { p {
@include inline-block(); @include inline-block();
margin: 0; margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-shadow: 0 -1px 0 darken(#073642, 10%);
} }
ul { ul {
...@@ -149,19 +144,22 @@ section.tool-wrapper { ...@@ -149,19 +144,22 @@ section.tool-wrapper {
} }
} }
} }
}
div#graph-listen { div#graph-listen {
margin-top: 8px; margin-top: 8px;
margin-right: 20px; margin-right: 20px;
display: block;
text-align: right;
float: left;
margin-bottom: 0;
} }
} }
label { label {
@include border-radius(2px); @include border-radius(2px);
font-weight: bold; font-weight: bold;
padding: 3px;
color: #fff; color: #fff;
padding: 3px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
...@@ -196,6 +194,21 @@ section.tool-wrapper { ...@@ -196,6 +194,21 @@ section.tool-wrapper {
border-bottom: 1px solid darken(#073642, 10%); border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%)); @include box-shadow(0 1px 0 lighten(#073642, 2%));
@extend .clearfix; @extend .clearfix;
select#musicTypeSelect {
@include inline-block();
font: 16px $body-font-family;
margin-bottom: 0;
}
p {
@include inline-block();
-webkit-font-smoothing: antialiased;
text-shadow: 0 -1px 0 darken(#073642, 10%);
margin: 0 lh(.5) lh() 0;
font-weight: bold;
}
} }
div.slider-label { div.slider-label {
......
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