Skip to content

E
edx-platform
Commit 7666ace7 by Kyle Fiedler
Options

Styles for new layout to the amplifier

parent 7a144ffa
Showing with 43 additions and 33 deletions
templates/sass/courseware/_amplifier.scss
...@@ -84,35 +84,52 @@ section.tool-wrapper { ...@@ -84,35 +84,52 @@ section.tool-wrapper {
width: flex-grid(4.5, 9); width: flex-grid(4.5, 9);
div.graph-controls { div.graph-controls {
div.music-wrapper {
padding: 0 0 lh(); padding: 0 0 lh();
margin-bottom: lh(); margin-bottom: lh();
border-bottom: 1px solid darken(#073642, 5%); 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;
div.music-wrapper { input#playButton {
margin-right: flex-gutter(4.5); display: block;
width: flex-grid(1.5, 4.5); @include button(simple, lighten( #586e75, 5% ));
font: bold 14px $body-font-family;
float: left; float: left;
&:active {
@include box-shadow(none);
} }
div.inputs-wrapper { &[value="Stop"] {
padding-top: lh(.5); @include button(simple, darken(#268bd2, 30%));
width: flex-grid(3, 4.5); font: bold 14px $body-font-family;
float: left;
&:active {
@include box-shadow(none);
}
}
}
} }
div.inputs-wrapper {
@include clearfix;
margin-bottom: lh();
select#musicTypeSelect { select#musicTypeSelect {
display: block; display: block;
margin-bottom: lh(.5);
font: 16px $body-font-family; font: 16px $body-font-family;
width: 100%; float: right;
margin-bottom: 0;
}
} }
div#graph-output, div#graph-listen { div#graph-output, div#graph-listen {
display: block; display: block;
margin-bottom: lh(.5);
text-align: right; text-align: right;
float: left;
margin-bottom: 0;
p { p {
@include inline-block(); @include inline-block();
...@@ -134,26 +151,9 @@ section.tool-wrapper { ...@@ -134,26 +151,9 @@ section.tool-wrapper {
} }
} }
input#playButton { div#graph-listen {
display: block; margin-top: 8px;
@include button(simple, #dc322f); margin-right: 20px;
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);
}
&[value="Stop"] {
@include button(simple, darken(#268bd2, 30%));
font: bold 14px $body-font-family;
&:active {
@include box-shadow(none);
}
}
} }
} }
...@@ -190,6 +190,14 @@ section.tool-wrapper { ...@@ -190,6 +190,14 @@ section.tool-wrapper {
div.schematic-sliders { div.schematic-sliders {
div.top-sliders {
padding: 0 0 lh();
margin-bottom: lh();
border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%));
@extend .clearfix;
}
div.slider-label { div.slider-label {
margin-bottom: lh(0.5); margin-bottom: lh(0.5);
font-weight: bold; font-weight: bold;
...@@ -208,11 +216,13 @@ section.tool-wrapper { ...@@ -208,11 +216,13 @@ section.tool-wrapper {
} }
.ui-slider-handle { .ui-slider-handle {
background-color: #dc322f; background: lighten( #586e75, 5% ) url('/static/images/amplifier-slider-handle.png') center no-repeat;
border: 1px solid darken(#002b36, 8%);
@include box-shadow(inset 0 1px 0 lighten( #586e75, 20% ));
margin-top: -.3em; margin-top: -.3em;
&:hover, &:active { &:hover, &:active {
background-color: lighten(#dc322f, 5%); background-color: lighten( #586e75, 10% );
} }
} }
} }
......
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