Skip to content

E
edx-platform
Commit 77e57448 by marco
Options

cleaned up sass document format and added baseline variable throughout capa and… 

cleaned up sass document format and added baseline variable throughout capa and combined open ended problems. no style rule changes, simply whitespace, ordering of properties, and the addition of baseline over direct pixels for padding and margins.
parent 12a2c06f
Showing with 368 additions and 350 deletions
common/lib/xmodule/xmodule/css/capa/display.scss
...@@ -19,10 +19,10 @@ h2 { ...@@ -19,10 +19,10 @@ h2 {
iframe[seamless]{ iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden; overflow: hidden;
padding: 0px;
border: 0px none transparent;
background-color: transparent;
} }
.inline-error { .inline-error {
...@@ -31,17 +31,17 @@ iframe[seamless]{ ...@@ -31,17 +31,17 @@ iframe[seamless]{
section.problem-progress { section.problem-progress {
display: inline-block; display: inline-block;
padding-left: 5px;
color: #999; color: #999;
font-size: em(16);
font-weight: 100; font-weight: 100;
padding-left: 5px; font-size: em(16);
} }
section.problem { section.problem {
@media print { @media print {
display: block; display: block;
width: auto;
padding: 0; padding: 0;
width: auto;
canvas, img { canvas, img {
page-break-inside: avoid; page-break-inside: avoid;
...@@ -54,25 +54,24 @@ section.problem { ...@@ -54,25 +54,24 @@ section.problem {
.choicegroup { .choicegroup {
@include clearfix; @include clearfix;
min-width: 100px;
width: auto !important;
width: 100px;
label.choicegroup_correct{ label.choicegroup_correct {
&:after{ &:after {
margin-left: 15px;
content: url('../images/correct-icon.png'); content: url('../images/correct-icon.png');
margin-left:15px
} }
} }
label.choicegroup_incorrect{ label.choicegroup_incorrect {
&:after{ &:after {
margin-left: 15px;
content: url('../images/incorrect-icon.png'); content: url('../images/incorrect-icon.png');
margin-left:15px;
} }
} }
min-width:100px;
width: auto !important;
width: 100px;
.indicator_container { .indicator_container {
float: left; float: left;
width: 25px; width: 25px;
...@@ -82,9 +81,9 @@ section.problem { ...@@ -82,9 +81,9 @@ section.problem {
fieldset { fieldset {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0px 0px $baseline;
padding-left: $baseline;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
padding-left: 20px;
margin: 0px 0px 20px;
} }
input[type="radio"], input[type="radio"],
...@@ -102,21 +101,21 @@ section.problem { ...@@ -102,21 +101,21 @@ section.problem {
ol.enumerate { ol.enumerate {
li { li {
&:before { &:before {
content: " ";
display: block; display: block;
height: 0;
visibility: hidden; visibility: hidden;
height: 0;
content: " ";
} }
} }
} }
.solution-span { .solution-span {
> span { > span {
margin: 20px 0; margin: $baseline 0;
display: block; display: block;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 9px 15px 20px; padding: 9px 15px $baseline;
background: #FFF; background: #fff;
position: relative; position: relative;
box-shadow: inset 0 0 0 1px #eee; box-shadow: inset 0 0 0 1px #eee;
border-radius: 3px; border-radius: 3px;
...@@ -133,26 +132,26 @@ section.problem { ...@@ -133,26 +132,26 @@ section.problem {
margin-top: -2px; margin-top: -2px;
} }
&.status { &.status {
margin: 8px 0 0 $baseline/2;
text-indent: -9999px; text-indent: -9999px;
margin: 8px 0 0 10px;
} }
} }
&.unanswered { &.unanswered {
p.status { p.status {
@include inline-block(); @include inline-block();
background: url('../images/unanswered-icon.png') center center no-repeat;
height: 14px;
width: 14px; width: 14px;
height: 14px;
background: url('../images/unanswered-icon.png') center center no-repeat;
} }
} }
&.correct, &.ui-icon-check { &.correct, &.ui-icon-check {
p.status { p.status {
@include inline-block(); @include inline-block();
background: url('../images/correct-icon.png') center center no-repeat;
height: 20px;
width: 25px; width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
} }
input { input {
...@@ -163,9 +162,9 @@ section.problem { ...@@ -163,9 +162,9 @@ section.problem {
&.processing { &.processing {
p.status { p.status {
@include inline-block(); @include inline-block();
background: url('../images/spinner.gif') center center no-repeat;
height: 20px;
width: 20px; width: 20px;
height: 20px;
background: url('../images/spinner.gif') center center no-repeat;
} }
input { input {
...@@ -176,9 +175,9 @@ section.problem { ...@@ -176,9 +175,9 @@ section.problem {
&.incorrect, &.ui-icon-close { &.incorrect, &.ui-icon-close {
p.status { p.status {
@include inline-block(); @include inline-block();
background: url('../images/incorrect-icon.png') center center no-repeat;
height: 20px;
width: 20px; width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
text-indent: -9999px; text-indent: -9999px;
} }
...@@ -195,12 +194,12 @@ section.problem { ...@@ -195,12 +194,12 @@ section.problem {
p.answer { p.answer {
@include inline-block(); @include inline-block();
margin-bottom: 0; margin-bottom: 0;
margin-left: 10px; margin-left: $baseline/2;
&:before { &:before {
display: inline;
content: "Answer: "; content: "Answer: ";
font-weight: bold; font-weight: bold;
display: inline;
} }
&:empty { &:empty {
...@@ -218,12 +217,12 @@ section.problem { ...@@ -218,12 +217,12 @@ section.problem {
margin-bottom: 0; margin-bottom: 0;
&.math { &.math {
@include inline-block;
padding: 6px; padding: 6px;
background: #f1f1f1; min-width: 30px;
border: 1px solid #e3e3e3; border: 1px solid #e3e3e3;
@include inline-block;
border-radius: 4px; border-radius: 4px;
min-width: 30px; background: #f1f1f1;
} }
} }
} }
...@@ -231,98 +230,92 @@ section.problem { ...@@ -231,98 +230,92 @@ section.problem {
span { span {
&.unanswered, &.ui-icon-bullet { &.unanswered, &.ui-icon-bullet {
@include inline-block(); @include inline-block();
background: url('../images/unanswered-icon.png') center center no-repeat;
height: 14px;
position: relative; position: relative;
top: 4px; top: 4px;
width: 14px; width: 14px;
height: 14px;
background: url('../images/unanswered-icon.png') center center no-repeat;
} }
&.processing, &.ui-icon-processing { &.processing, &.ui-icon-processing {
@include inline-block(); @include inline-block();
background: url('../images/spinner.gif') center center no-repeat;
height: 20px;
position: relative; position: relative;
top: 6px; top: 6px;
width: 25px; width: 25px;
height: 20px;
background: url('../images/spinner.gif') center center no-repeat;
} }
&.correct, &.ui-icon-check { &.correct, &.ui-icon-check {
@include inline-block(); @include inline-block();
background: url('../images/correct-icon.png') center center no-repeat;
height: 20px;
position: relative; position: relative;
top: 3px; top: 3px;
width: 25px; width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
} }
&.partially-correct { &.partially-correct {
@include inline-block(); @include inline-block();
background: url('../images/partially-correct-icon.png') center center no-repeat;
height: 20px;
position: relative; position: relative;
top: 6px; top: 6px;
width: 25px; width: 25px;
height: 20px;
background: url('../images/partially-correct-icon.png') center center no-repeat;
} }
&.incorrect, &.ui-icon-close { &.incorrect, &.ui-icon-close {
@include inline-block(); @include inline-block();
background: url('../images/incorrect-icon.png') center center no-repeat;
height: 20px;
width: 20px;
position: relative; position: relative;
top: 3px; top: 3px;
width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
} }
} }
.reload .reload {
{
float:right; float:right;
margin: 10px; margin: $baseline/2;
} }
.grader-status { .grader-status {
@include clearfix;
margin-bottom: $baseline;
padding: 9px; padding: 9px;
background: #F6F6F6;
border: 1px solid #ddd; border: 1px solid #ddd;
border-top: 0; border-top: 0;
margin-bottom: 20px; background: #F6F6F6;
@include clearfix;
span { span {
text-indent: -9999px;
overflow: hidden;
display: block; display: block;
float: left; float: left;
overflow: hidden;
margin: -7px 7px 0 0; margin: -7px 7px 0 0;
text-indent: -9999px;
} }
.grading { .grading {
background: url('../images/info-icon.png') left center no-repeat; margin: 0px 7px 0 0;
padding-left: 25px; padding-left: 25px;
background: url('../images/info-icon.png') left center no-repeat;
text-indent: 0px; text-indent: 0px;
margin: 0px 7px 0 0;
} }
p { p {
line-height: 20px;
text-transform: capitalize;
margin-bottom: 0;
float: left; float: left;
margin-bottom: 0;
text-transform: capitalize;
line-height: 20px;
} }
&.file { &.file {
background: #FFF; background: #fff;
margin-top: 20px; margin-top: $baseline;
padding: 20px 0 0 0; padding: $baseline 0 0 0;
border: 0;
border: { border-top: 1px solid #eee;
top: 1px solid #eee;
right: 0;
bottom: 0;
left: 0;
}
p.debug { p.debug {
display: none; display: none;
...@@ -343,7 +336,7 @@ section.problem { ...@@ -343,7 +336,7 @@ section.problem {
.feedback-on-feedback { .feedback-on-feedback {
height: 100px; height: 100px;
margin-right: 20px; margin-right: $baseline;
} }
.evaluation-response { .evaluation-response {
...@@ -357,32 +350,32 @@ section.problem { ...@@ -357,32 +350,32 @@ section.problem {
.evaluation-scoring { .evaluation-scoring {
.scoring-list { .scoring-list {
list-style-type: none;
margin-left: 3px; margin-left: 3px;
list-style-type: none;
li { li {
display:inline;
margin-left: 50px;
&:first-child { &:first-child {
margin-left: 0px; margin-left: 0px;
} }
display:inline;
margin-left: 50px;
label { label {
font-size: .9em; font-size: .9em;
} }
} }
} }
} }
.submit-message-container { .submit-message-container {
margin: 10px 0px ; margin: $baseline 0px ;
} }
} }
form.option-input { form.option-input {
margin: -10px 0 20px; margin: -$baseline/2 0 $baseline;
padding-bottom: 20px; padding-bottom: $baseline;
select { select {
margin-right: flex-gutter(); margin-right: flex-gutter();
...@@ -390,17 +383,17 @@ section.problem { ...@@ -390,17 +383,17 @@ section.problem {
} }
ul { ul {
list-style: disc outside none;
margin-bottom: lh(); margin-bottom: lh();
margin-left: .75em; margin-left: .75em;
margin-left: .75rem; margin-left: .75rem;
list-style: disc outside none;
} }
ol { ol {
list-style: decimal outside none;
margin-bottom: lh(); margin-bottom: lh();
margin-left: .75em; margin-left: .75em;
margin-left: .75rem; margin-left: .75rem;
list-style: decimal outside none;
} }
dl { dl {
...@@ -421,8 +414,8 @@ section.problem { ...@@ -421,8 +414,8 @@ section.problem {
} }
li { li {
line-height: 1.4em;
margin-bottom: lh(.5); margin-bottom: lh(.5);
line-height: 1.4em;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
...@@ -439,8 +432,8 @@ section.problem { ...@@ -439,8 +432,8 @@ section.problem {
table-layout: auto; table-layout: auto;
th { th {
font-weight: bold;
text-align: left; text-align: left;
font-weight: bold;
} }
td { td {
...@@ -453,44 +446,43 @@ section.problem { ...@@ -453,44 +446,43 @@ section.problem {
} }
caption { caption {
background: #f1f1f1;
margin-bottom: .75em; margin-bottom: .75em;
margin-bottom: .75rem; margin-bottom: .75rem;
padding: .75em 0; padding: .75em 0;
padding: .75rem 0; padding: .75rem 0;
background: #f1f1f1;
} }
tr, td, th { tr, td, th {
vertical-align: middle; vertical-align: middle;
} }
} }
code { code {
margin: 0 2px; margin: 0 2px;
padding: 0px 5px; padding: 0px 5px;
white-space: nowrap; border: 1px solid #eaeaea;
border: 1px solid #EAEAEA;
background-color: #F8F8F8;
border-radius: 3px; border-radius: 3px;
background-color: #f8f8f8;
white-space: nowrap;
font-size: .9em; font-size: .9em;
} }
pre { pre {
background-color: #F8F8F8;
border: 1px solid #CCC;
font-size: .9em;
line-height: 1.4;
overflow: auto; overflow: auto;
padding: 6px 10px; padding: 6px $baseline/2;
border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
background-color: #f8f8f8;
font-size: .9em;
line-height: 1.4;
> code { > code {
margin: 0; margin: 0;
padding: 0; padding: 0;
white-space: pre;
border: none; border: none;
background: transparent; background: transparent;
white-space: pre;
} }
} }
...@@ -507,26 +499,25 @@ section.problem { ...@@ -507,26 +499,25 @@ section.problem {
} }
pre { pre {
border-radius: 0; overflow: hidden;
border-radius: 0;
border-width: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-width: 0;
border-radius: 0;
background: transparent; background: transparent;
font-family: inherit;
font-size: inherit;
white-space: pre; white-space: pre;
word-wrap: normal; word-wrap: normal;
overflow: hidden; font-size: inherit;
font-family: inherit;
resize: none; resize: none;
&.CodeMirror-cursor { &.CodeMirror-cursor {
z-index: 10;
position: absolute; position: absolute;
z-index: 10;
visibility: hidden; visibility: hidden;
border-left: 1px solid black;
border-right: none;
width: 0; width: 0;
border-right: none;
border-left: 1px solid black;
} }
} }
} }
...@@ -536,14 +527,14 @@ section.problem { ...@@ -536,14 +527,14 @@ section.problem {
} }
hr { hr {
background: #ddd;
border: none;
clear: both;
color: #ddd;
float: none; float: none;
height: 1px; clear: both;
margin: 0 0 .75rem; margin: 0 0 .75rem;
width: 100%; width: 100%;
height: 1px;
border: none;
background: #ddd;
color: #ddd;
} }
.hidden { .hidden {
...@@ -560,17 +551,17 @@ section.problem { ...@@ -560,17 +551,17 @@ section.problem {
center { center {
display: block; display: block;
margin: lh() 0; margin: lh() 0;
border: 1px solid #ccc;
padding: lh(); padding: lh();
border: 1px solid #ccc;
} }
section.action { section.action {
margin-top: 20px; margin-top: $baseline;
.save, .check, .show { .save, .check, .show {
height: ($baseline*2); height: ($baseline*2);
font-weight: 600;
vertical-align: middle; vertical-align: middle;
font-weight: 600;
} }
.save { .save {
...@@ -580,8 +571,8 @@ section.problem { ...@@ -580,8 +571,8 @@ section.problem {
.show { .show {
.show-label { .show-label {
font-size: 1.0em;
font-weight: 600; font-weight: 600;
font-size: 1.0em;
} }
} }
...@@ -592,20 +583,20 @@ section.problem { ...@@ -592,20 +583,20 @@ section.problem {
// padding: 8px 12px; // padding: 8px 12px;
// margin-top: 10px; // margin-top: 10px;
@include inline-block; @include inline-block;
font-style: italic; margin: 8px 0 0 $baseline/2;
margin: 8px 0 0 10px;
color: #777; color: #777;
font-style: italic;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
} }
.detailed-solution { .detailed-solution {
> p:first-child { > p:first-child {
font-size: 0.9em; color: #aaa;
text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
text-transform: uppercase; font-size: 0.9em;
color: #AAA;
} }
p:last-child { p:last-child {
...@@ -614,12 +605,12 @@ section.problem { ...@@ -614,12 +605,12 @@ section.problem {
} }
div.capa_alert { div.capa_alert {
margin-top: $baseline;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #EBE8BF; border: 1px solid #ebe8bf;
border-radius: 3px; border-radius: 3px;
background: #FFFCDD; background: #fffcdd;
font-size: 0.9em; font-size: 0.9em;
margin-top: 10px;
} }
div.capa_reset { div.capa_reset {
...@@ -628,12 +619,14 @@ section.problem { ...@@ -628,12 +619,14 @@ section.problem {
background-color: lighten($error-red, 25%); background-color: lighten($error-red, 25%);
border-radius: 3px; border-radius: 3px;
font-size: 1em; font-size: 1em;
margin-top: 10px; margin-top: $baseline/2;
margin-bottom: 10px; margin-bottom: $baseline/2;
} }
.capa_reset>h2 { .capa_reset>h2 {
color: #AA0000; color: #aa0000;
} }
.capa_reset li { .capa_reset li {
font-size: 0.9em; font-size: 0.9em;
} }
...@@ -642,10 +635,10 @@ section.problem { ...@@ -642,10 +635,10 @@ section.problem {
border: 1px solid #ccc; border: 1px solid #ccc;
h3 { h3 {
border-bottom: 1px solid #e3e3e3;
text-shadow: 0 1px 0 #fff;
padding: 9px; padding: 9px;
border-bottom: 1px solid #e3e3e3;
background: #eee; background: #eee;
text-shadow: 0 1px 0 #fff;
font-weight: bold; font-weight: bold;
font-size: em(16); font-size: em(16);
} }
...@@ -665,7 +658,7 @@ section.problem { ...@@ -665,7 +658,7 @@ section.problem {
a { a {
display: block; display: block;
padding: 9px; padding: 9px;
background: #F6F6F6; background: #f6f6f6;
box-shadow: inset 0 0 0 1px #fff; box-shadow: inset 0 0 0 1px #fff;
} }
} }
...@@ -683,22 +676,22 @@ section.problem { ...@@ -683,22 +676,22 @@ section.problem {
margin-bottom: 12px; margin-bottom: 12px;
h3 { h3 {
font-size: 0.9em; color: #aaa;
text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
text-transform: uppercase; font-size: 0.9em;
color: #AAA;
} }
} }
> section { > section {
border: 1px solid #ddd;
padding: 9px 9px 20px;
margin-bottom: 10px;
background: #FFF;
position: relative; position: relative;
box-shadow: inset 0 0 0 1px #eee; margin-bottom: $baseline/2;
padding: 9px 9px $baseline;
border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
background: #fff;
box-shadow: inset 0 0 0 1px #eee;
p:last-of-type { p:last-of-type {
margin-bottom: 0; margin-bottom: 0;
...@@ -709,26 +702,27 @@ section.problem { ...@@ -709,26 +702,27 @@ section.problem {
} }
a.full { a.full {
@include position(absolute, 0 0 1px 0px); @include position(absolute, 0 0 1px 0);
font-size: .8em; @include box-sizing(border-box);
display: block;
padding: 4px; padding: 4px;
text-align: right;
width: 100%; width: 100%;
display: block; background: #f3f3f3;
background: #F3F3F3; text-align: right;
@include box-sizing(border-box); font-size: .8em;
} }
} }
} }
.external-grader-message { .external-grader-message {
section { section {
padding-left: 20px; padding-top: $baseline/2;
background-color: #FAFAFA; padding-left: $baseline;
color: #2C2C2C; background-color: #fafafa;
font-family: monospace; color: #2c2c2c;
font-size: 1em; font-size: 1em;
padding-top: 10px; font-family: monospace;
header { header {
font-size: 1.4em; font-size: 1.4em;
} }
...@@ -738,35 +732,36 @@ section.problem { ...@@ -738,35 +732,36 @@ section.problem {
} }
.longform { .longform {
padding: 0px; margin: 0;
margin: 0px; padding: 0;
.result-errors { .result-errors {
margin: 5px; margin: $baseline/4;
padding: 10px 10px 10px 40px; padding: $baseline/2 $baseline/2 $baseline/2 $baseline*2;
background: url('../images/incorrect-icon.png') center left no-repeat; background: url('../images/incorrect-icon.png') center left no-repeat;
li { li {
color: #B00; color: #b00;
} }
} }
.result-output { .result-output {
margin: 5px; margin: $baseline/4;
padding: 20px 0px 15px 50px; padding: $baseline 0 15px 50px;
border-top: 1px solid #DDD; border-top: 1px solid #ddd;
border-left: 20px solid #FAFAFA; border-left: $baseline solid #fafafa;
h4 { h4 {
font-family: monospace;
font-size: 1em; font-size: 1em;
font-family: monospace;
} }
dl { dl {
margin: 0px; margin: 0;
} }
dt { dt {
margin-top: 20px; margin-top: $baseline;
} }
dd { dd {
...@@ -776,6 +771,7 @@ section.problem { ...@@ -776,6 +771,7 @@ section.problem {
.result-correct { .result-correct {
background: url('../images/correct-icon.png') left 20px no-repeat; background: url('../images/correct-icon.png') left 20px no-repeat;
.result-actual-output { .result-actual-output {
color: #090; color: #090;
} }
...@@ -783,6 +779,7 @@ section.problem { ...@@ -783,6 +779,7 @@ section.problem {
.result-incorrect { .result-incorrect {
background: url('../images/incorrect-icon.png') left 20px no-repeat; background: url('../images/incorrect-icon.png') left 20px no-repeat;
.result-actual-output { .result-actual-output {
color: #B00; color: #B00;
} }
...@@ -790,16 +787,16 @@ section.problem { ...@@ -790,16 +787,16 @@ section.problem {
.markup-text{ .markup-text{
margin: 5px; margin: 5px;
padding: 20px 0px 15px 50px; padding: $baseline 0 15px 50px;
border-top: 1px solid #DDD; border-top: 1px solid #ddd;
border-left: 20px solid #FAFAFA; border-left: 20px solid #fafafa;
bs { bs {
color: #BB0000; color: #bb0000;
} }
bg { bg {
color: #BDA046; color: #bda046;
} }
} }
} }
...@@ -808,44 +805,52 @@ section.problem { ...@@ -808,44 +805,52 @@ section.problem {
.rubric { .rubric {
tr { tr {
margin:10px 0px; margin: $baseline/2 0;
height: 100%; height: 100%;
} }
td { td {
padding: 20px 0px; margin: $baseline/2 0;
margin: 10px 0px; padding: $baseline 0;
height: 100%; height: 100%;
} }
th { th {
padding: 5px; margin: $baseline/4;
margin: 5px; padding: $baseline/4;
} }
label, label,
.view-only { .view-only {
margin:3px;
position: relative; position: relative;
padding: 15px;
width: 150px;
height:100%;
display: inline-block; display: inline-block;
min-height: 50px; margin: 3px;
padding: 15px;
min-width: 50px; min-width: 50px;
background-color: #CCC; min-height: 50px;
width: 150px;
height: 100%;
background-color: #ccc;
font-size: .9em; font-size: .9em;
} }
.grade { .grade {
position: absolute; position: absolute;
bottom:0px; right: 0;
right:0px; bottom: 0;
margin:10px; margin: $baseline/2;
} }
.selected-grade { .selected-grade {
background: #666; background: #666;
color: white; color: white;
} }
input[type=radio]:checked + label { input[type=radio]:checked + label {
background: #666; background: #666;
color: white; } color: white;
}
input[class='score-selection'] { input[class='score-selection'] {
display: none; display: none;
} }
...@@ -853,50 +858,57 @@ section.problem { ...@@ -853,50 +858,57 @@ section.problem {
.annotation-input { .annotation-input {
$yellow: rgba(255,255,10,0.3); $yellow: rgba(255,255,10,0.3);
margin: 0 0 1em 0;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 1em; border-radius: 1em;
margin: 0 0 1em 0;
.annotation-header { .annotation-header {
font-weight: bold;
border-bottom: 1px solid #ccc;
padding: .5em 1em; padding: .5em 1em;
border-bottom: 1px solid #ccc;
font-weight: bold;
} }
.annotation-body { padding: .5em 1em; } .annotation-body { padding: .5em 1em; }
a.annotation-return { a.annotation-return {
float: right; float: right;
font: inherit; font: inherit;
font-weight: normal; font-weight: normal;
} }
a.annotation-return:after { content: " \2191" } a.annotation-return:after { content: " \2191" }
.block, ul.tags { .block, ul.tags {
margin: .5em 0; margin: .5em 0;
padding: 0; padding: 0;
} }
.block-highlight { .block-highlight {
padding: .5em; padding: .5em;
border: 1px solid darken($yellow, 10%);
background-color: $yellow;
color: #333; color: #333;
font-style: normal; font-style: normal;
background-color: $yellow;
border: 1px solid darken($yellow, 10%);
} }
.block-comment { font-style: italic; } .block-comment { font-style: italic; }
ul.tags { ul.tags {
display: block; display: block;
list-style-type: none;
margin-left: 1em; margin-left: 1em;
list-style-type: none;
li { li {
position: relative;
display: block; display: block;
margin: 1em 0 0 0; margin: 1em 0 0 0;
position: relative;
.tag { .tag {
display: inline-block; display: inline-block;
cursor: pointer; margin-left: $baseline;
border: 1px solid rgb(102,102,102); border: 1px solid rgb(102,102,102);
margin-left: 40px; cursor: pointer;
&.selected { &.selected {
background-color: $yellow; background-color: $yellow;
} }
...@@ -908,26 +920,31 @@ section.problem { ...@@ -908,26 +920,31 @@ section.problem {
.tag-status, .tag { padding: .25em .5em; } .tag-status, .tag { padding: .25em .5em; }
} }
} }
textarea.comment { textarea.comment {
$num-lines-to-show: 5; $num-lines-to-show: 5;
$line-height: 1.4em; $line-height: 1.4em;
$padding: .2em; $padding: .2em;
width: 100%;
padding: $padding (2 * $padding); padding: $padding (2 * $padding);
line-height: $line-height; width: 100%;
height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2); height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2);
line-height: $line-height;
} }
.answer-annotation { display: block; margin: 0; } .answer-annotation { display: block; margin: 0; }
/* for debugging the input value field. enable the debug flag on the inputtype */ /* for debugging the input value field. enable the debug flag on the inputtype */
.debug-value { .debug-value {
color: #fff;
padding: 1em;
margin: 1em 0; margin: 1em 0;
background-color: #999; padding: 1em;
border: 1px solid #000; border: 1px solid #000;
background-color: #999;
color: #fff;
input[type="text"] { width: 100%; } input[type="text"] { width: 100%; }
pre { background-color: #CCC; color: #000; } pre { background-color: #CCC; color: #000; }
&:before { &:before {
display: block; display: block;
content: "debug input value"; content: "debug input value";
...@@ -937,13 +954,15 @@ section.problem { ...@@ -937,13 +954,15 @@ section.problem {
} }
} }
} }
.choicetextgroup{ .choicetextgroup{
@extend .choicegroup;
input[type="text"]{ input[type="text"]{
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@extend .choicegroup;
label.choicetextgroup_correct, section.choicetextgroup_correct{ label.choicetextgroup_correct, section.choicetextgroup_correct {
@extend label.choicegroup_correct; @extend label.choicegroup_correct;
input[type="text"] { input[type="text"] {
...@@ -951,17 +970,18 @@ section.problem { ...@@ -951,17 +970,18 @@ section.problem {
} }
} }
label.choicetextgroup_incorrect, section.choicetextgroup_incorrect{ label.choicetextgroup_incorrect, section.choicetextgroup_incorrect {
@extend label.choicegroup_incorrect; @extend label.choicegroup_incorrect;
} }
label.choicetextgroup_show_correct, section.choicetextgroup_show_correct{ label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
&:after{ &:after {
content: url('../images/correct-icon.png');
margin-left:15px; margin-left:15px;
content: url('../images/correct-icon.png');
} }
} }
span.mock_label{
span.mock_label {
cursor : default; cursor : default;
} }
} }
......
common/lib/xmodule/xmodule/css/combinedopenended/display.scss
...@@ -18,17 +18,16 @@ h2 { ...@@ -18,17 +18,16 @@ h2 {
div.name{ div.name{
padding-bottom: 15px; padding-bottom: 15px;
h2{ h2{
display: inline; display: inline;
} }
.progress-container .progress-container {
{
display: inline; display: inline;
float: right; float: right;
padding-top: 3px; padding-top: 3px;
} }
} }
.inline-error { .inline-error {
...@@ -40,64 +39,60 @@ section.combined-open-ended { ...@@ -40,64 +39,60 @@ section.combined-open-ended {
} }
div.problemwrapper { div.problemwrapper {
padding: $baseline/4;
border: 1px solid; border: 1px solid;
border-color: lightgray; border-color: lightgray;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
padding: 5px;
.status-bar .status-bar {
{
float: right;
display: inline-block; display: inline-block;
float: right;
padding: 5px; padding: 5px;
.problemtype{ .problemtype{
display: inline; display: inline;
float: left; float: left;
background-color: #d4d4d4; padding: $baseline/2;
padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: #d4d4d4;
} }
.statustable{ .statustable {
width: 750px; width: 750px;
} }
.status-container .status-container {
{
padding-bottom: 5px;
display: inline-block; display: inline-block;
padding-bottom: $baseline/4;
} }
.problemtype-container{ .problemtype-container {
width: 40%; width: 40%;
padding-top: 12px; padding-top: 12px;
} }
.assessments-container{ .assessments-container {
width: 30%; width: 30%;
.assessment-text{
.assessment-text {
display: inline-block; display: inline-block;
} }
} }
} }
.item-container .item-container {
{
@clearfix @clearfix
padding-bottom: 10px; padding-bottom: 10px;
display: inline-block; display: inline-block;
margin: 0px 15px 0px 15px; margin: 0px 15px 0px 15px;
h4 { h4 {
padding-top: 10px; padding-top: $baseline/2;
border-top: 1px solid; border-top: 1px solid;
border-color: lightgray; border-color: lightgray;
} }
} }
.result-container .result-container {
{
float:left; float:left;
width: 100%; width: 100%;
position:relative; position:relative;
...@@ -105,36 +100,41 @@ div.problemwrapper { ...@@ -105,36 +100,41 @@ div.problemwrapper {
} }
section.legend-container { section.legend-container {
margin: 15px;
.legenditem { .legenditem {
background-color : #d4d4d4;
font-size: .9em;
padding: 2px;
display: inline; display: inline;
padding: 2px;
width: 20%; width: 20%;
background-color : #d4d4d4;
font-size: .9em;
} }
margin: 15px;
} }
section.combined-open-ended-status { section.combined-open-ended-status {
padding: $baseline $baseline $baseline 0;
padding: 20px 20px 20px 0px;
.statusitem { .statusitem {
&:first-child{ display: inline;
padding: $baseline/2;
width: 20%;
background-color : #d4d4d4;
color: #2c2c2c;
font-size: .9em;
&:first-child {
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
} }
&:last-child{
&:last-child {
border-top-right-radius: 10px; border-top-right-radius: 10px;
} }
color: #2C2C2C;
background-color : #d4d4d4;
font-size: .9em;
padding: 10px;
display: inline;
width: 20%;
.show-results { .show-results {
margin-top: .3em; margin-top: .3em;
text-align:right; text-align:right;
} }
.show-results-button { .show-results-button {
font: 1em monospace; font: 1em monospace;
} }
...@@ -148,29 +148,29 @@ section.combined-open-ended-status { ...@@ -148,29 +148,29 @@ section.combined-open-ended-status {
span { span {
&.unanswered { &.unanswered {
@include inline-block(); @include inline-block();
background: url('../images/unanswered-icon.png') center center no-repeat;
height: 14px;
position: relative; position: relative;
width: 14px;
float: right; float: right;
width: 14px;
height: 14px;
background: url('../images/unanswered-icon.png') center center no-repeat;
} }
&.correct { &.correct {
@include inline-block(); @include inline-block();
background: url('../images/correct-icon.png') center center no-repeat;
height: 20px;
position: relative; position: relative;
width: 25px;
float: right; float: right;
width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
} }
&.incorrect { &.incorrect {
@include inline-block(); @include inline-block();
background: url('../images/incorrect-icon.png') center center no-repeat;
height: 20px;
width: 20px;
position: relative; position: relative;
float: right; float: right;
width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
} }
} }
...@@ -182,20 +182,22 @@ section.combined-open-ended-status { ...@@ -182,20 +182,22 @@ section.combined-open-ended-status {
} }
div.combined-rubric-container { div.combined-rubric-container {
margin:15px; margin: 15px;
ul.rubric-list{ padding-bottom: 5px;
padding-top: 10px;
ul.rubric-list {
margin: 4px;
padding: 0;
list-style-type: none; list-style-type: none;
padding:0;
margin:4px;
li { li {
&.rubric-list-item{ &.rubric-list-item {
margin-bottom: 2px; margin-bottom: 2px;
padding: 0px; padding: 0px;
} }
} }
} }
h4 {
h4{
padding-top: 10px; padding-top: 10px;
border-top: 1px solid; border-top: 1px solid;
border-color: lightgray; border-color: lightgray;
...@@ -205,8 +207,6 @@ div.combined-rubric-container { ...@@ -205,8 +207,6 @@ div.combined-rubric-container {
font-size: .9em; font-size: .9em;
font-weight: bold; font-weight: bold;
} }
padding-bottom: 5px;
padding-top: 10px;
} }
div.result-container { div.result-container {
...@@ -342,8 +342,8 @@ div.result-container { ...@@ -342,8 +342,8 @@ div.result-container {
section.open-ended-child { section.open-ended-child {
@media print { @media print {
display: block; display: block;
width: auto;
padding: 0; padding: 0;
width: auto;
canvas, img { canvas, img {
page-break-inside: avoid; page-break-inside: avoid;
...@@ -357,24 +357,24 @@ section.open-ended-child { ...@@ -357,24 +357,24 @@ section.open-ended-child {
ol.enumerate { ol.enumerate {
li { li {
&:before { &:before {
content: " ";
display: block; display: block;
height: 0;
visibility: hidden; visibility: hidden;
height: 0;
content: " ";
} }
} }
} }
.solution-span { .solution-span {
> span { > span {
margin: 20px 0; position: relative;
display: block; display: block;
margin: $baseline 0;
padding: 9px 15px $baseline;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 9px 15px 20px;
background: #FFF;
position: relative;
box-shadow: inset 0 0 0 1px #eee;
border-radius: 3px; border-radius: 3px;
background: #fff;
box-shadow: inset 0 0 0 1px #eee;
&:empty { &:empty {
display: none; display: none;
...@@ -387,8 +387,8 @@ section.open-ended-child { ...@@ -387,8 +387,8 @@ section.open-ended-child {
margin-top: -2px; margin-top: -2px;
} }
&.status { &.status {
margin: 8px 0 0 $baseline/2;
text-indent: -9999px; text-indent: -9999px;
margin: 8px 0 0 10px;
} }
} }
...@@ -404,9 +404,9 @@ section.open-ended-child { ...@@ -404,9 +404,9 @@ section.open-ended-child {
div.correct, div.ui-icon-check { div.correct, div.ui-icon-check {
p.status { p.status {
@include inline-block(); @include inline-block();
background: url('../images/correct-icon.png') center center no-repeat;
height: 20px;
width: 25px; width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
} }
input { input {
...@@ -417,9 +417,9 @@ section.open-ended-child { ...@@ -417,9 +417,9 @@ section.open-ended-child {
div.processing { div.processing {
p.status { p.status {
@include inline-block(); @include inline-block();
background: url('../images/spinner.gif') center center no-repeat;
height: 20px;
width: 20px; width: 20px;
height: 20px;
background: url('../images/spinner.gif') center center no-repeat;
} }
input { input {
...@@ -430,9 +430,9 @@ section.open-ended-child { ...@@ -430,9 +430,9 @@ section.open-ended-child {
div.incorrect, div.ui-icon-close { div.incorrect, div.ui-icon-close {
p.status { p.status {
@include inline-block(); @include inline-block();
background: url('../images/incorrect-icon.png') center center no-repeat;
height: 20px;
width: 20px; width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
text-indent: -9999px; text-indent: -9999px;
} }
...@@ -467,96 +467,90 @@ section.open-ended-child { ...@@ -467,96 +467,90 @@ section.open-ended-child {
span { span {
&.unanswered, &.ui-icon-bullet { &.unanswered, &.ui-icon-bullet {
@include inline-block(); @include inline-block();
background: url('../images/unanswered-icon.png') center center no-repeat;
height: 14px;
position: relative; position: relative;
top: 4px; top: 4px;
width: 14px; width: 14px;
height: 14px;
background: url('../images/unanswered-icon.png') center center no-repeat;
} }
&.processing, &.ui-icon-processing { &.processing, &.ui-icon-processing {
@include inline-block(); @include inline-block();
background: url('../images/spinner.gif') center center no-repeat;
height: 20px;
position: relative; position: relative;
top: 6px; top: 6px;
width: 25px; width: 25px;
height: 20px;
background: url('../images/spinner.gif') center center no-repeat;
} }
&.correct, &.ui-icon-check { &.correct, &.ui-icon-check {
@include inline-block(); @include inline-block();
background: url('../images/correct-icon.png') center center no-repeat;
height: 20px;
position: relative; position: relative;
top: 6px; top: 6px;
width: 25px; width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
} }
&.incorrect, &.ui-icon-close { &.incorrect, &.ui-icon-close {
@include inline-block(); @include inline-block();
background: url('../images/incorrect-icon.png') center center no-repeat;
height: 20px;
width: 20px;
position: relative; position: relative;
top: 6px; top: 6px;
width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
} }
} }
.reload .reload {
{
float:right; float:right;
margin: 10px; margin: 10px;
} }
div.short-form-response { div.short-form-response {
background: #F6F6F6; @include clearfix;
border: 1px solid #ddd;
margin-bottom: 0px;
overflow-y: auto; overflow-y: auto;
margin-bottom: 0;
height: 200px; height: 200px;
@include clearfix; border: 1px solid #ddd;
background: #f6f6f6;
} }
.grader-status { .grader-status {
@include clearfix;
margin-bottom: $baseline;
padding: 9px; padding: 9px;
background: #F6F6F6;
border: 1px solid #ddd; border: 1px solid #ddd;
border-top: 0; border-top: 0px;
margin-bottom: 20px; background: #F6F6F6;
@include clearfix;
span { span {
text-indent: -9999px;
overflow: hidden;
display: block; display: block;
float: left; float: left;
overflow: hidden;
margin: -7px 7px 0 0; margin: -7px 7px 0 0;
text-indent: -9999px;
} }
.grading { .grading {
background: url('../images/info-icon.png') left center no-repeat; margin: 0 7px 0 0;
padding-left: 25px; padding-left: 25px;
text-indent: 0px; background: url('../images/info-icon.png') left center no-repeat;
margin: 0px 7px 0 0; text-indent: 0;
} }
p { p {
line-height: 20px;
margin-bottom: 0;
float: left; float: left;
margin-bottom: 0;
line-height: 20px;
} }
&.file { &.file {
background: #FFF; margin-top: $baseline;
margin-top: 20px; padding: $baseline 0 0 0;
padding: 20px 0 0 0; border: 0;
border-top: 1px solid #eee;
border: { background: #fff;
top: 1px solid #eee;
right: 0;
bottom: 0;
left: 0;
}
p.debug { p.debug {
display: none; display: none;
...@@ -570,8 +564,8 @@ section.open-ended-child { ...@@ -570,8 +564,8 @@ section.open-ended-child {
} }
form.option-input { form.option-input {
margin: -10px 0 20px; margin: -$baseline/2 0 $baseline;
padding-bottom: 20px; padding-bottom: $baseline;
select { select {
margin-right: flex-gutter(); margin-right: flex-gutter();
...@@ -579,29 +573,30 @@ section.open-ended-child { ...@@ -579,29 +573,30 @@ section.open-ended-child {
} }
ul { ul {
list-style: disc outside none;
margin-bottom: lh(); margin-bottom: lh();
margin-left: .75em; margin-left: .75em;
margin-left: .75rem; margin-left: .75rem;
list-style: disc outside none;
} }
ul.rubric-list{ ul.rubric-list{
margin: 0;
padding: 0;
list-style-type: none; list-style-type: none;
padding:0;
margin:0;
li { li {
&.rubric-list-item{ &.rubric-list-item {
margin-bottom: 0px; margin-bottom: 0;
padding: 0px; padding: 0;
} }
} }
} }
ol { ol {
list-style: decimal outside none;
margin-bottom: lh(); margin-bottom: lh();
margin-left: .75em; margin-left: .75em;
margin-left: .75rem; margin-left: .75rem;
list-style: decimal outside none;
} }
dl { dl {
...@@ -622,8 +617,9 @@ section.open-ended-child { ...@@ -622,8 +617,9 @@ section.open-ended-child {
} }
li { li {
margin-bottom: 0px; margin-bottom: 0;
padding: 0px; padding: 0;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -634,14 +630,14 @@ section.open-ended-child { ...@@ -634,14 +630,14 @@ section.open-ended-child {
} }
hr { hr {
background: #ddd;
border: none;
clear: both;
color: #ddd;
float: none; float: none;
height: 1px; clear: both;
margin: 0 0 .75rem; margin: 0 0 .75rem;
width: 100%; width: 100%;
height: 1px;
border: none;
background: #ddd;
color: #ddd;
} }
.hidden { .hidden {
...@@ -655,7 +651,7 @@ section.open-ended-child { ...@@ -655,7 +651,7 @@ section.open-ended-child {
} }
section.action { section.action {
margin-top: 20px; margin-top: $baseline;
input.save { input.save {
@extend .blue-button !optional; @extend .blue-button !optional;
...@@ -663,20 +659,20 @@ section.open-ended-child { ...@@ -663,20 +659,20 @@ section.open-ended-child {
.submission_feedback { .submission_feedback {
@include inline-block; @include inline-block;
font-style: italic; margin: 8px 0 0 $baseline/2;
margin: 8px 0 0 10px;
color: #777; color: #777;
font-style: italic;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
} }
.detailed-solution { .detailed-solution {
> p:first-child { > p:first-child {
font-size: 0.9em; color: #aaa;
text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
text-transform: uppercase; font-size: 0.9em;
color: #AAA;
} }
p:last-child { p:last-child {
...@@ -686,45 +682,47 @@ section.open-ended-child { ...@@ -686,45 +682,47 @@ section.open-ended-child {
div.open-ended-alert, div.open-ended-alert,
.save_message { .save_message {
margin-top: $baseline/2;
margin-bottom: $baseline/4;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #EBE8BF; border: 1px solid #ebe8bf;
border-radius: 3px; border-radius: 3px;
background: #FFFCDD; background: #fffcdd;
font-size: 0.9em; font-size: 0.9em;
margin-top: 10px;
margin-bottom:5px;
} }
div.capa_reset { div.capa_reset {
margin-top: $baseline/2;
margin-bottom: $baseline/2;
padding: 25px; padding: 25px;
border: 1px solid $error-red; border: 1px solid $error-red;
background-color: lighten($error-red, 25%);
border-radius: 3px; border-radius: 3px;
background-color: lighten($error-red, 25%);
font-size: 1em; font-size: 1em;
margin-top: 10px;
margin-bottom: 10px;
} }
.capa_reset>h2 {
color: #AA0000; .capa_reset > h2 {
color: #aa0000;
} }
.capa_reset li { .capa_reset li {
font-size: 0.9em; font-size: 0.9em;
} }
.assessment-container { .assessment-container {
margin: 40px 0px 30px 0px; margin: $baseline*2 0px 30px 0px;
.scoring-container
{ .scoring-container {
p p {
{
margin-bottom: 1em; margin-bottom: 1em;
} }
label { label {
margin: 10px;
padding: 5px;
display: inline-block; display: inline-block;
margin: $baseline/2;
padding: $baseline/4;
min-width: 50px; min-width: 50px;
background-color: #CCC; background-color: #ccc;
text-size: 1.5em; text-size: 1.5em;
} }
...@@ -732,20 +730,20 @@ section.open-ended-child { ...@@ -732,20 +730,20 @@ section.open-ended-child {
background: #666; background: #666;
color: white; color: white;
} }
input[class='grade-selection'] { input[class='grade-selection'] {
display: none; display: none;
} }
} }
} }
div.prompt{ div.prompt {
background-color:white; background-color: white;
} }
h4{ h4 {
padding-top: 10px; padding-top: $baseline/2;
border-top: 1px solid;
border-color: lightgray; border-color: lightgray;
border-top: 1px solid;
} }
} }
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