Skip to content

E
edx-ora2
Commit 1b52ae8f by Usman Khalid
Options

Replaced direction related css properties with mixins from bi-app-sass. 

TNL-813
parent 0b2b61e8
Showing with 173 additions and 170 deletions
openassessment/xblock/static/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/sass/oa/elements/_navigation.scss
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
} }
.ui-toggle-visibility__control__copy { .ui-toggle-visibility__control__copy {
margin-left: ($baseline-h/4); @include margin-left(($baseline-h/4));
} }
&:hover, &:focus { &:hover, &:focus {
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
@extend %trans-opacity; @extend %trans-opacity;
max-height: ($baseline-v*2000); max-height: ($baseline-v*2000);
opacity: 1.0; opacity: 1.0;
padding-left: ($baseline-h/20); @include padding-left(($baseline-h/20));
padding-right: ($baseline-h/20); @include padding-right(($baseline-h/20));
} }
// STATE: is collapsed // STATE: is collapsed
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
@extend %fake-link; @extend %fake-link;
.ico { .ico {
margin-left: ($baseline-h/8); @include margin-left(($baseline-h/8));
} }
// STATE: hover // STATE: hover
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
// actual tooltip rendered // actual tooltip rendered
&:after { &:after {
left: 0; @include left(0);
display: block; display: block;
white-space: normal; white-space: normal;
width: ($baseline-h*5); width: ($baseline-h*5);
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
} }
&.hint--top:after { &.hint--top:after {
left: 0; @include left(0);
margin-left: -($baseline-v); @include margin-left(-($baseline-v));
} }
} }
openassessment/xblock/static/sass/oa/elements/_staff.scss
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
.wrapper--ui-staff { .wrapper--ui-staff {
box-shadow: inset 0 1px -2px 1px $shadow-d1; box-shadow: inset 0 1px -2px 1px $shadow-d1;
margin-top: ($baseline-v*2); margin-top: ($baseline-v*2);
border-radius: ($baseline-v/10); @include border-radius(($baseline-v/10));
border: 1px solid shade($color-decorative-staff, 25%); border: 1px solid shade($color-decorative-staff, 25%);
border-top: ($baseline-v/4) solid $color-decorative-staff; border-top: ($baseline-v/4) solid $color-decorative-staff;
padding: $baseline-v ($baseline-h/2); padding: $baseline-v ($baseline-h/2);
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
&.ui-toggle-visibility { &.ui-toggle-visibility {
.staff-info__title__copy { .staff-info__title__copy {
margin-left: ($baseline-h/4); @include margin-left(($baseline-h/4));
} }
// STATE: is collapsed // STATE: is collapsed
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
} }
.label { .label {
margin-right: ($baseline-h/4); @include margin-right(($baseline-h/4));
} }
.value { .value {
...@@ -90,12 +90,12 @@ ...@@ -90,12 +90,12 @@
.staff-info__status__table, .staff-info__classifierset__table { .staff-info__status__table, .staff-info__classifierset__table {
@extend %copy-3; @extend %copy-3;
border-radius: ($baseline-v/10); @include border-radius(($baseline-v/10));
color: $copy-staff-color; color: $copy-staff-color;
.title { .title {
@extend %hd-2; @extend %hd-2;
text-align: left; @include text-align(left);
color: $heading-staff-color; color: $heading-staff-color;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
} }
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
} }
th, td[scope] { th, td[scope] {
text-align: left; @include text-align(left);
} }
......
openassessment/xblock/static/sass/oa/utilities/_developer.scss
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
.action--submit { .action--submit {
@extend %btn--secondary; @extend %btn--secondary;
@extend %action-2; @extend %action-2;
margin: ($baseline-v/2) ($baseline-v/2) ($baseline-v/2) ($baseline-v/2); @include margin(($baseline-v/2), ($baseline-v/2), ($baseline-v/2), ($baseline-v/2));
} }
} }
.staff-info__student { .staff-info__student {
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
.action--submit { .action--submit {
@extend %btn--secondary; @extend %btn--secondary;
@extend %action-2; @extend %action-2;
margin: ($baseline-v/2) ($baseline-v/2) ($baseline-v/2) ($baseline-v/2); @include margin(($baseline-v/2), ($baseline-v/2), ($baseline-v/2), ($baseline-v/2));
} }
.title { .title {
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
.student__answer__display__content { .student__answer__display__content {
border: 1px solid rgba($color-decorative-staff, 0.25); border: 1px solid rgba($color-decorative-staff, 0.25);
padding: ($baseline-v/2) ($baseline-h/2) ($baseline-v/2) ($baseline-h/2); @include padding(($baseline-v/2), ($baseline-h/2), ($baseline-v/2), ($baseline-h/2));
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
} }
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
} }
#oa_editor_window_title{ #oa_editor_window_title{
float: left; @include float(left);
} }
input[type="number"]{ input[type="number"]{
...@@ -209,21 +209,21 @@ ...@@ -209,21 +209,21 @@
width: 35%; width: 35%;
min-width: 190px; min-width: 190px;
max-width: 360px; max-width: 360px;
float: right; @include float(right);
.oa_editor_tab { .oa_editor_tab {
float: right; @include float(right);
padding: 0; padding: 0;
width: 29%; width: 29%;
margin: 0px 2%; margin: 0px 2%;
height: 35px; height: 35px;
border-radius: 5px; @include border-radius(5px);
box-shadow: none; box-shadow: none;
border: 0; border: 0;
text-align: center; @include text-align(center);
a { a {
padding: 8px 0 0 0; @include padding(8px, 0, 0, 0);
width: 100%; width: 100%;
text-transform: uppercase; text-transform: uppercase;
outline-color: transparent; outline-color: transparent;
...@@ -253,8 +253,8 @@ ...@@ -253,8 +253,8 @@
#openassessment_validation_alert{ #openassessment_validation_alert{
width: 100%; width: 100%;
border-top-left-radius: 2px; @include border-top-left-radius(2px);
border-top-right-radius: 2px; @include border-top-right-radius(2px);
background-color: #323232; background-color: #323232;
border-bottom: 3px solid rgb(192, 172, 0); border-bottom: 3px solid rgb(192, 172, 0);
padding: 10px; padding: 10px;
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
position: absolute; position: absolute;
top: 35%; top: 35%;
font-size: 200%; font-size: 200%;
left: 3%; @include left(3%);
} }
.openassessment_alert_icon:before{ .openassessment_alert_icon:before{
...@@ -274,13 +274,13 @@ ...@@ -274,13 +274,13 @@
content: "\f071"; content: "\f071";
display: inline-block; display: inline-block;
color: rgb(192, 172, 0); color: rgb(192, 172, 0);
float: left; @include float(left);
height: 0; height: 0;
width: 0; width: 0;
} }
.openassessment_alert_header { .openassessment_alert_header {
width: 85%; width: 85%;
margin: 0 5% 0 10%; @include margin(0, 5%, 0, 10%);
.openassessment_alert_title { .openassessment_alert_title {
width: auto; width: auto;
...@@ -298,9 +298,9 @@ ...@@ -298,9 +298,9 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; @include right(0px);
color: #e9e9e9; color: #e9e9e9;
text-align: center; @include text-align(center);
margin: 5px 10px; margin: 5px 10px;
[class^="icon"] { [class^="icon"] {
...@@ -318,7 +318,7 @@ ...@@ -318,7 +318,7 @@
.oa_editor_content_wrapper { .oa_editor_content_wrapper {
height: Calc(100% - 42px); height: Calc(100% - 42px);
width: 100%; width: 100%;
border-radius: 3px; @include border-radius(3px);
border: 1px solid $edx-gray-d1; border: 1px solid $edx-gray-d1;
background-color: white; background-color: white;
overflow-y: scroll; overflow-y: scroll;
...@@ -336,7 +336,7 @@ ...@@ -336,7 +336,7 @@
height: 100%; height: 100%;
resize: none; resize: none;
border: none; border: none;
border-radius: 4px; @include border-radius(4px);
padding: 10px; padding: 10px;
font-family: $f-sans-serif; font-family: $f-sans-serif;
...@@ -360,7 +360,7 @@ ...@@ -360,7 +360,7 @@
#openassessment_title_editor_wrapper{ #openassessment_title_editor_wrapper{
label{ label{
width: 25%; width: 25%;
text-align: left; @include text-align(left);
} }
input{ input{
width: 45%; width: 45%;
...@@ -370,7 +370,7 @@ ...@@ -370,7 +370,7 @@
} }
#openassessment_step_select_description{ #openassessment_step_select_description{
padding: 10px 10px 0 10px; @include padding(10px, 10px, 0, 10px);
font-size: 80%; font-size: 80%;
border-top: 1px solid $edx-gray-d1; border-top: 1px solid $edx-gray-d1;
margin: 7.5px; margin: 7.5px;
...@@ -381,7 +381,7 @@ ...@@ -381,7 +381,7 @@
} }
#ai_training_examples{ #ai_training_examples{
margin: 5px 20px 10px 10px; @include margin(5px, 20px, 10px, 10px);
height: 300px; height: 300px;
width: Calc(100% - 20px); width: Calc(100% - 20px);
resize: none; resize: none;
...@@ -392,10 +392,10 @@ ...@@ -392,10 +392,10 @@
} }
.openassessment_assessment_module_settings_editor{ .openassessment_assessment_module_settings_editor{
padding: 0 15px 0 0; @include padding(0, 15px, 0, 0);
margin: 10px; margin: 10px;
border: 1px solid $edx-gray-l3; border: 1px solid $edx-gray-l3;
border-radius: 3px; @include border-radius(3px);
position: relative; position: relative;
background-color: white; background-color: white;
...@@ -404,22 +404,22 @@ ...@@ -404,22 +404,22 @@
background: center $edx-gray-t1; background: center $edx-gray-t1;
display: block; display: block;
top: 0px; top: 0px;
right: 0px; @include right(0px);
z-index: 10; z-index: 10;
width: 15px; width: 15px;
height: 100%; height: 100%;
border-left: 1px solid $edx-gray-l3; @include border-left(1px solid $edx-gray-l3);
cursor: move; cursor: move;
@include transition(none); @include transition(none);
} }
.openassessment_description_closed{ .openassessment_description_closed{
padding: 5px 15px 5px 15px; @include padding(5px, 15px, 5px, 15px);
font-size: 75%; font-size: 75%;
margin: 0; margin: 0;
} }
.openassessment_description{ .openassessment_description{
padding: 5px 15px 0 15px; @include padding(5px, 15px, 0, 15px);
font-size: 75%; font-size: 75%;
margin: 0; margin: 0;
} }
...@@ -448,9 +448,9 @@ ...@@ -448,9 +448,9 @@
.openassessment_inclusion_wrapper{ .openassessment_inclusion_wrapper{
background-color: $edx-gray-t1; background-color: $edx-gray-t1;
margin: 0; margin: 0;
padding: 7px 5px 7px 13px; @include padding(7px, 5px, 7px, 13px);
border-top-left-radius: 2px; @include border-top-left-radius(2px);
border-top-right-radius: 2px; @include border-top-right-radius(2px);
label{ label{
cursor: pointer; cursor: pointer;
...@@ -463,7 +463,7 @@ ...@@ -463,7 +463,7 @@
input[type="checkbox"] + label:before { input[type="checkbox"] + label:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
display: inline-block; display: inline-block;
margin-right: ($baseline-h/4); @include margin-right(($baseline-h/4));
width: auto; width: auto;
height: auto; height: auto;
content: "\f096"; content: "\f096";
...@@ -483,7 +483,7 @@ ...@@ -483,7 +483,7 @@
} }
label{ label{
padding-right: 10px; @include padding-right(10px);
} }
.xblock_actions { .xblock_actions {
...@@ -519,7 +519,7 @@ ...@@ -519,7 +519,7 @@
color: $edx-gray-d2; color: $edx-gray-d2;
.action.expand-collapse { .action.expand-collapse {
float: left; @include float(left);
.ui-toggle-expansion { .ui-toggle-expansion {
color: $edx-gray-d2; color: $edx-gray-d2;
cursor: pointer; cursor: pointer;
...@@ -531,13 +531,16 @@ ...@@ -531,13 +531,16 @@
} }
.openassessment_criterion_header_title_box { .openassessment_criterion_header_title_box {
float: left; @include float(left);
width: 80%; width: 80%;
display: inline-block; display: inline-block;
} }
.openassessment_criterion_header_title { .openassessment_criterion_header_title {
@include float(left);
text-transform: uppercase; text-transform: uppercase;
width: 50%;
display: inline-block;
cursor: default; cursor: default;
padding-top: 2px; padding-top: 2px;
} }
...@@ -558,13 +561,13 @@ ...@@ -558,13 +561,13 @@
display: inline-block; display: inline-block;
margin: 0 5px; margin: 0 5px;
} }
text-align: center; @include text-align(center);
border: 1px solid; border: 1px solid;
color: #009fe6; color: #009fe6;
background-color: white; background-color: white;
padding: 7.5px; padding: 7.5px;
margin: 10px 10px 10px 20px; @include margin(10px, 10px, 10px, 20px);
border-radius: 3px; @include border-radius(3px);
cursor: pointer; cursor: pointer;
} }
...@@ -575,8 +578,8 @@ ...@@ -575,8 +578,8 @@
.openassessment_criterion_basic_editor{ .openassessment_criterion_basic_editor{
.comp-setting-entry{ .comp-setting-entry{
padding-right: 0; @include padding-right(0);
margin-right: 10px; @include margin-right(10px);
overflow: auto; overflow: auto;
.wrapper-comp-settings{ .wrapper-comp-settings{
...@@ -587,7 +590,7 @@ ...@@ -587,7 +590,7 @@
input{ input{
font-size: 11px; font-size: 11px;
float: right; @include float(right);
width: 70%; width: 70%;
} }
} }
...@@ -595,7 +598,7 @@ ...@@ -595,7 +598,7 @@
padding: 10px; padding: 10px;
@extend .openassessment_large_text_input; @extend .openassessment_large_text_input;
width: 70%; width: 70%;
float: right; @include float(right);
} }
.openassessment_criterion_prompt.openassessment_highlighted_field{ .openassessment_criterion_prompt.openassessment_highlighted_field{
border: 2px solid red; border: 2px solid red;
...@@ -610,21 +613,21 @@ ...@@ -610,21 +613,21 @@
background-color: $edx-gray-l2; background-color: $edx-gray-l2;
padding: 5px; padding: 5px;
margin: 10px; margin: 10px;
border-radius: 3px; @include border-radius(3px);
} }
label{ label{
width: 100%; width: 100%;
select{ select{
float: right; @include float(right);
margin-right: 24%; @include margin-right(24%);
} }
} }
.openassessment_criterion_feedback_direction{ .openassessment_criterion_feedback_direction{
label{ label{
margin-left: 15px; @include margin-left(15px);
} }
} }
} }
...@@ -636,7 +639,7 @@ ...@@ -636,7 +639,7 @@
} }
.openassessment_criterion_header{ .openassessment_criterion_header{
.action.expand-collapse { .action.expand-collapse {
float: left; @include float(left);
.ui-toggle-expansion { .ui-toggle-expansion {
@include transform(rotate(-90deg)); @include transform(rotate(-90deg));
@include transform-origin(50% 50%); @include transform-origin(50% 50%);
...@@ -647,7 +650,7 @@ ...@@ -647,7 +650,7 @@
} }
.openassessment_criterion_option{ .openassessment_criterion_option{
padding: 5px 5px 5px 15px; @include padding(5px, 5px, 5px, 15px);
.openassessment_criterion_option_remove_button{ .openassessment_criterion_option_remove_button{
@extend .openassessment_rubric_remove_button; @extend .openassessment_rubric_remove_button;
...@@ -655,15 +658,15 @@ ...@@ -655,15 +658,15 @@
.openassessment_option_header{ .openassessment_option_header{
background-color: $edx-gray-t1; background-color: $edx-gray-t1;
padding: 5px 5px 5px 10px; @include padding(5px, 5px, 5px, 10px);
margin: 5px 5px 8px 5px; @include margin(5px, 5px, 8px, 5px);
border-radius: 3px; @include border-radius(3px);
overflow: auto; overflow: auto;
.openassessment_option_header_title{ .openassessment_option_header_title{
cursor: default; cursor: default;
float: left; @include float(left);
padding: 2.5px 0 0 5px; @include padding(2.5px, 0, 0, 5px);
} }
.openassessment_option_header_remove{ .openassessment_option_header_remove{
...@@ -674,8 +677,8 @@ ...@@ -674,8 +677,8 @@
.openassessment_criterion_option_point_wrapper{ .openassessment_criterion_option_point_wrapper{
width: 30%; width: 30%;
border-top: none; border-top: none;
padding: 10px 5px 10px 0px; @include padding(10px, 5px, 10px, 0px);
float: left; @include float(left);
margin: 0; margin: 0;
.wrapper-comp-setting{ .wrapper-comp-setting{
...@@ -684,14 +687,14 @@ ...@@ -684,14 +687,14 @@
label{ label{
width: 100%; width: 100%;
padding-left: Calc((100% - 150px)/2); @include padding-left(Calc((100% - 150px)/2));
margin: 0; margin: 0;
float: right; @include float(right);
input{ input{
min-width: 50px; min-width: 50px;
padding: 10px; padding: 10px;
float: right; @include float(right);
width: 30%; width: 30%;
font-size: 11px; font-size: 11px;
} }
...@@ -699,9 +702,9 @@ ...@@ -699,9 +702,9 @@
} }
.openassessment_criterion_option_name_wrapper{ .openassessment_criterion_option_name_wrapper{
float: left; @include float(left);
width: 70%; width: 70%;
padding: 10px 10px 10px 20px; @include padding(10px, 10px, 10px, 20px);
border-top: 0; border-top: 0;
margin: 0; margin: 0;
...@@ -715,20 +718,20 @@ ...@@ -715,20 +718,20 @@
padding: 10px; padding: 10px;
font-size: 11px; font-size: 11px;
width: 56%; width: 56%;
float: right; @include float(right);
} }
} }
} }
.openassessment_criterion_option_explanation_wrapper{ .openassessment_criterion_option_explanation_wrapper{
padding: 15px 5px 0px 20px; @include padding(15px, 5px, 0px, 20px);
width: 100%; width: 100%;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
label { label {
width: 100%; width: 100%;
text-align: left; @include text-align(left);
margin: 0; margin: 0;
textarea { textarea {
...@@ -736,7 +739,7 @@ ...@@ -736,7 +739,7 @@
@extend .openassessment_input_styling; @extend .openassessment_input_styling;
height: 70px; height: 70px;
width: 69.5%; width: 69.5%;
float: right; @include float(right);
} }
} }
} }
...@@ -753,7 +756,7 @@ ...@@ -753,7 +756,7 @@
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
border-radius: 2px; border-radius: 2px;
padding: 6px 8px 8px; @include padding(6px, 8px, 8px, 0px);
background-image: -webkit-linear-gradient(#F2F2F2,#FFF); background-image: -webkit-linear-gradient(#F2F2F2,#FFF);
background-image: -moz-linear-gradient(#F2F2F2,#FFF); background-image: -moz-linear-gradient(#F2F2F2,#FFF);
background-image: linear-gradient(#F2F2F2,#FFF); background-image: linear-gradient(#F2F2F2,#FFF);
...@@ -776,11 +779,11 @@ ...@@ -776,11 +779,11 @@
h2{ h2{
text-transform: uppercase; text-transform: uppercase;
font-size: 80%; font-size: 80%;
float: right; @include float(right);
display: inline-block; display: inline-block;
padding: 3px 8px 3px 13px; @include padding(3px, 8px, 3px, 13px);
} }
float: right; @include float(right);
} }
.openassessment_rubric_remove_button:hover{ .openassessment_rubric_remove_button:hover{
background-color: $edx-gray-d2; background-color: $edx-gray-d2;
...@@ -794,8 +797,8 @@ ...@@ -794,8 +797,8 @@
#openassessment_rubric_feedback_header{ #openassessment_rubric_feedback_header{
background-color: $edx-gray-t1; background-color: $edx-gray-t1;
padding: 7.5px 7.5px 7.5px 15px; @include padding(7.5px, 7.5px, 7.5px, 15px);
margin: 10px 10px 0 10px; @include margin(10px, 10px, 0, 10px);
border-radius: 3px; border-radius: 3px;
} }
...@@ -807,7 +810,7 @@ ...@@ -807,7 +810,7 @@
padding: 10px; padding: 10px;
@extend .openassessment_large_text_input; @extend .openassessment_large_text_input;
width: 70%; width: 70%;
float: right; @include float(right);
} }
} }
...@@ -816,8 +819,8 @@ ...@@ -816,8 +819,8 @@
h6:before{ h6:before{
font-family: "FontAwesome"; font-family: "FontAwesome";
display: inline-block; display: inline-block;
margin-left: 5px; @include margin-left(5px);
margin-right: 10px; @include margin-right(10px);
width: auto; width: auto;
height: auto; height: auto;
content: "\f067"; content: "\f067";
...@@ -826,7 +829,7 @@ ...@@ -826,7 +829,7 @@
background-color: white; background-color: white;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
text-align: center; @include text-align(center);
color: #009fe6; color: #009fe6;
padding: 10px; padding: 10px;
...@@ -890,7 +893,7 @@ ...@@ -890,7 +893,7 @@
overflow: auto; overflow: auto;
color: $edx-gray-d2; color: $edx-gray-d2;
.action.expand-collapse { .action.expand-collapse {
float: left; @include float(left);
.ui-toggle-expansion { .ui-toggle-expansion {
cursor: pointer; cursor: pointer;
color: $edx-gray-d2; color: $edx-gray-d2;
...@@ -903,12 +906,12 @@ ...@@ -903,12 +906,12 @@
text-transform: uppercase; text-transform: uppercase;
width: 50%; width: 50%;
display: inline-block; display: inline-block;
float: left; @include float(left);
padding-top: 2px; padding-top: 2px;
} }
.openassessment_training_example_remove { .openassessment_training_example_remove {
padding: 3px 5px 3px 7px; @include padding(3px, 5px, 3px, 7px);
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
...@@ -922,10 +925,10 @@ ...@@ -922,10 +925,10 @@
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
font-size: 80%; font-size: 80%;
float: right; @include float(right);
display: inline-block; display: inline-block;
} }
float: right; @include float(right);
} }
.openassessment_training_example_remove:hover { .openassessment_training_example_remove:hover {
...@@ -935,14 +938,14 @@ ...@@ -935,14 +938,14 @@
} }
.openassessment_training_example_body { .openassessment_training_example_body {
padding: 0 15px 15px 15px; @include padding(0, 15px, 15px, 15px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.openassessment_training_example_essay_wrapper { .openassessment_training_example_essay_wrapper {
width: 58%; width: 58%;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 15px; @include left(15px);
height: 100%; height: 100%;
textarea { textarea {
min-height: 90px; min-height: 90px;
...@@ -951,14 +954,14 @@ ...@@ -951,14 +954,14 @@
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
border-radius: 2px; border-radius: 2px;
padding: 6px 8px 8px; @include padding(6px, 8px, 8px, 8px);
background-color: white; background-color: white;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 11px; font-size: 11px;
color: #4c4c4c; color: #4c4c4c;
outline: 0; outline: 0;
margin: 5px 15px 0 10px; @include margin(5px, 15px, 0, 10px);
width: Calc(100% - 25px); width: Calc(100% - 25px);
} }
} }
...@@ -966,7 +969,7 @@ ...@@ -966,7 +969,7 @@
.openassessment_training_example_scored_rubric { .openassessment_training_example_scored_rubric {
width: 40%; width: 40%;
display: inline-block; display: inline-block;
float: right; @include float(right);
min-height: 150px; min-height: 150px;
.openassessment_training_example_criteria_selections { .openassessment_training_example_criteria_selections {
.comp-setting-entry { .comp-setting-entry {
...@@ -977,10 +980,10 @@ ...@@ -977,10 +980,10 @@
padding: 10px; padding: 10px;
label{ label{
width: 100%; width: 100%;
margin-left: 0; @include margin-left(0);
select { select {
width: 60%; width: 60%;
float: right; @include float(right);
} }
} }
} }
...@@ -991,7 +994,7 @@ ...@@ -991,7 +994,7 @@
.openassessment_add_training_example { .openassessment_add_training_example {
color: #009fe6; color: #009fe6;
text-align: center; @include text-align(center);
padding: 5px; padding: 5px;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
...@@ -1019,7 +1022,7 @@ ...@@ -1019,7 +1022,7 @@
} }
.openassessment_training_example_header { .openassessment_training_example_header {
.action.expand-collapse { .action.expand-collapse {
float: left; @include float(left);
.ui-toggle-expansion { .ui-toggle-expansion {
@include transform(rotate(-90deg)); @include transform(rotate(-90deg));
@include transform-origin(50% 50%); @include transform-origin(50% 50%);
...@@ -1049,8 +1052,8 @@ ...@@ -1049,8 +1052,8 @@
.action--upload { .action--upload {
@extend %btn--secondary; @extend %btn--secondary;
@extend %action-2; @extend %action-2;
text-align: center; @include text-align(center);
float: right; @include float(right);
display: inline-block; display: inline-block;
margin: ($baseline-v/2) 0; margin: ($baseline-v/2) 0;
box-shadow: none; box-shadow: none;
...@@ -1075,7 +1078,7 @@ ...@@ -1075,7 +1078,7 @@
.submission__answer__display__image{ .submission__answer__display__image{
@extend .submission__answer__display__content; @extend .submission__answer__display__content;
max-height: 400px; max-height: 400px;
text-align: left; @include text-align(left);
overflow: auto; overflow: auto;
img{ img{
max-height: 100%; max-height: 100%;
...@@ -1105,9 +1108,9 @@ ...@@ -1105,9 +1108,9 @@
.step__title { .step__title {
.wrapper--copy{ .wrapper--copy{
margin-left: 0; @include margin-left(0);
padding-left: 0; @include padding-left(0);
border-left: 0; @include border-left(0);
width: 100%; width: 100%;
} }
} }
...@@ -1136,20 +1139,20 @@ ...@@ -1136,20 +1139,20 @@
display: inline-block; display: inline-block;
background: $edx-gray-d2; background: $edx-gray-d2;
color: white; color: white;
padding: 5px 5px 3px 5px; @include padding(5px, 5px, 3px, 5px);
font-size: 16px; font-size: 16px;
min-width: 35px; min-width: 35px;
text-align: center; @include text-align(center);
border-top-right-radius: 2px; @include border-top-right-radius(2px);
border-top-left-radius: 2px; @include border-top-left-radius(2px);
} }
.leaderboard__score__image{ .leaderboard__score__image{
max-height:150px; max-height:150px;
max-width:100%; max-width:100%;
margin-right:20px; @include margin-right(20px);
margin-bottom:20px; margin-bottom: 20px;
float:left; @include float(left);
} }
.leaderboard__score__title{ .leaderboard__score__title{
...@@ -1157,7 +1160,7 @@ ...@@ -1157,7 +1160,7 @@
color: $edx-gray-l1; color: $edx-gray-l1;
text-transform: uppercase; text-transform: uppercase;
display: inline-block; display: inline-block;
padding-left: 15px; @include padding-left(15px);
} }
.leaderboard__answer{ .leaderboard__answer{
......
openassessment/xblock/static/sass/oa/utilities/_extends.scss
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
%ui-section { %ui-section {
@include transition(all $tmg-f1 ease-in-out); @include transition(all $tmg-f1 ease-in-out);
@include transform(scale(1.0)); @include transform(scale(1.0));
border-radius: ($baseline-v/10); @include border-radius(($baseline-v/10));
box-shadow: 0 1px 1px $shadow-l1; box-shadow: 0 1px 1px $shadow-l1;
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
border: 1px solid $color-decorative-tertiary; border: 1px solid $color-decorative-tertiary;
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
.question__title__copy { .question__title__copy {
@extend %t-heading; @extend %t-heading;
margin-left: ($baseline-h/4); @include margin-left(($baseline-h/4));
white-space: pre-wrap; white-space: pre-wrap;
color: $heading-color; color: $heading-color;
} }
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
%ui-rubric-answers { %ui-rubric-answers {
margin-top: $baseline-v; margin-top: $baseline-v;
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
margin-left: ($baseline-h/2); @include margin-left(($baseline-h/2));
.answer, .answer--feedback { .answer, .answer--feedback {
@include row(); @include row();
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
} }
.answer__value { .answer__value {
margin-right: ($baseline-v/2); @include margin-right(($baseline-v/2));
// STATE: checked // STATE: checked
&:checked { &:checked {
...@@ -250,24 +250,24 @@ ...@@ -250,24 +250,24 @@
white-space: pre-wrap; white-space: pre-wrap;
@extend %copy-3; @extend %copy-3;
margin-right: $baseline-v; @include margin-right($baseline-v);
color: $copy-secondary-color; color: $copy-secondary-color;
@include media($bp-dm) { @include media($bp-dm) {
@include span-columns(6 of 8); @include span-columns(6 of 8);
float: left; @include float(left);
margin-bottom: 0; margin-bottom: 0;
} }
@include media($bp-dl) { @include media($bp-dl) {
@include span-columns(6 of 8); @include span-columns(6 of 8);
float: left; @include float(left);
margin-bottom: 0; margin-bottom: 0;
} }
@include media($bp-dx) { @include media($bp-dx) {
@include span-columns(6 of 8); @include span-columns(6 of 8);
float: left; @include float(left);
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -281,24 +281,24 @@ ...@@ -281,24 +281,24 @@
color: $copy-secondary-color; color: $copy-secondary-color;
@include media($bp-dm) { @include media($bp-dm) {
float: right; @include float(right);
text-align: right; @include text-align(right);
} }
@include media($bp-dl) { @include media($bp-dl) {
float: right; @include float(right);
text-align: right; @include text-align(right);
} }
@include media($bp-dx) { @include media($bp-dx) {
float: right; @include float(right);
text-align: right; @include text-align(right);
} }
} }
.answer__points__label { .answer__points__label {
display: inline-block; // FIX: need to reset base label style display: inline-block; // FIX: need to reset base label style
margin-left: ($baseline-v/4); @include margin-left(($baseline-v/4));
color: $copy-secondary-color; color: $copy-secondary-color;
} }
...@@ -337,7 +337,7 @@ ...@@ -337,7 +337,7 @@
.answer__value { .answer__value {
@extend %ui-content-longanswer; @extend %ui-content-longanswer;
min-height: ($baseline-v*5); min-height: ($baseline-v*5);
margin-right: 0; @include margin-right(0);
} }
} }
} }
openassessment/xblock/static/sass/oa/utilities/_shame.scss
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
// step title/name // step title/name
h2.step__title { h2.step__title {
margin-top: 0 !important; margin-top: 0 !important;
text-align: left !important; @include text-align(left);
@include media($bp-m) { @include media($bp-m) {
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
.list--actions { .list--actions {
list-style: none !important; list-style: none !important;
padding-left: 0 !important; @include padding-left(0);
text-indent: 0 !important; text-indent: 0 !important;
li { li {
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
// peer assessment // peer assessment
.step--peer-assessment .list--peer-assessments { .step--peer-assessment .list--peer-assessments {
list-style: none outside none !important; list-style: none outside none !important;
padding-left: 0 !important;; @include padding-left(0);
} }
// self assessment // self assessment
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
// shown submission/results // shown submission/results
.question__answers { .question__answers {
padding-left: 0 !important; @include padding-left(0);
} }
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -75,14 +75,14 @@ ...@@ -75,14 +75,14 @@
} }
.wrapper--copy { .wrapper--copy {
margin-left: ($baseline-h/2); @include margin-left(($baseline-h/2));
border-left: 1px solid $color-decorative-tertiary; @include border-left(1px solid $color-decorative-tertiary);
padding-left: ($baseline-h/2); @include padding-left(($baseline-h/2));
@include media($bp-m) { @include media($bp-m) {
margin-left: 0; @include margin-left(0);
border-left: none; @include border-left(none);
padding-left: 0; @include padding-left(0);
} }
} }
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
@extend %icon-3; @extend %icon-3;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
margin-right: ($baseline-h/4); @include margin-right(($baseline-h/4));
} }
.copy { .copy {
...@@ -234,22 +234,22 @@ ...@@ -234,22 +234,22 @@
// step actions // step actions
.step__actions { .step__actions {
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
text-align: center; @include text-align(center);
@include media($bp-ds) { @include media($bp-ds) {
text-align: right; @include text-align(right);
} }
@include media($bp-dm) { @include media($bp-dm) {
text-align: right; @include text-align(right);
} }
@include media($bp-dl) { @include media($bp-dl) {
text-align: right; @include text-align(right);
} }
@include media($bp-dx) { @include media($bp-dx) {
text-align: right; @include text-align(right);
} }
.action--submit { .action--submit {
...@@ -270,7 +270,7 @@ ...@@ -270,7 +270,7 @@
.message { .message {
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
text-align: left; @include text-align(left);
} }
} }
} }
...@@ -464,8 +464,8 @@ ...@@ -464,8 +464,8 @@
position: relative; position: relative;
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
border: 1px solid $color-decorative-tertiary; border: 1px solid $color-decorative-tertiary;
border-left: ($baseline-h/4) solid $color-decorative-secondary; @include border-left(($baseline-h/4) solid $color-decorative-secondary);
padding-left: ($baseline-h*0.75); @include padding-left(($baseline-h*0.75));
} }
.openassessment__prompt__title { .openassessment__prompt__title {
...@@ -525,7 +525,7 @@ ...@@ -525,7 +525,7 @@
.response__submission__status { .response__submission__status {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: ($baseline-h/4); @include margin-left(($baseline-h/4));
} }
.response__submission__status__title { .response__submission__status__title {
...@@ -539,31 +539,31 @@ ...@@ -539,31 +539,31 @@
@extend %btn--secondary; @extend %btn--secondary;
@extend %action-2; @extend %action-2;
display: block; display: block;
text-align: center; @include text-align(center);
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
min-width: 215px; min-width: 215px;
@include media($bp-ds) { @include media($bp-ds) {
display: inline-block; display: inline-block;
margin-right: ($baseline-v/2); @include margin-right(($baseline-v/2));
margin-bottom: 0; margin-bottom: 0;
} }
@include media($bp-dm) { @include media($bp-dm) {
display: inline-block; display: inline-block;
margin-right: ($baseline-v/2); @include margin-right(($baseline-v/2));
margin-bottom: 0; margin-bottom: 0;
} }
@include media($bp-dl) { @include media($bp-dl) {
display: inline-block; display: inline-block;
margin-right: ($baseline-v/2); @include margin-right(($baseline-v/2));
margin-bottom: 0; margin-bottom: 0;
} }
@include media($bp-dx) { @include media($bp-dx) {
display: inline-block; display: inline-block;
margin-right: ($baseline-v/2); @include margin-right(($baseline-v/2));
margin-bottom: 0; margin-bottom: 0;
} }
} }
...@@ -633,7 +633,7 @@ ...@@ -633,7 +633,7 @@
} }
.question__title__copy { .question__title__copy {
margin-left: 0; @include margin-left(0);
white-space: pre-wrap; white-space: pre-wrap;
} }
...@@ -716,9 +716,9 @@ ...@@ -716,9 +716,9 @@
} }
.wrapper--copy { .wrapper--copy {
margin-left: 0; @include margin-left(0);
border-left: none; @include border-left(none);
padding-left: 0; @include padding-left(0);
} }
} }
...@@ -751,7 +751,7 @@ ...@@ -751,7 +751,7 @@
} }
.step__label { .step__label {
margin-right: ($baseline-h/4); @include margin-right(($baseline-h/4));
} }
.grade__value__title { .grade__value__title {
...@@ -858,15 +858,15 @@ ...@@ -858,15 +858,15 @@
.question__title__copy { .question__title__copy {
@extend %t-heading; @extend %t-heading;
margin-left: ($baseline-h/4); @include margin-left(($baseline-h/4));
white-space: pre-wrap; white-space: pre-wrap;
color: $heading-color; color: $heading-color;
} }
.question__score { .question__score {
@extend %t-score; @extend %t-score;
float: right; @include float(right);
margin-left: $baseline-v; @include margin-left($baseline-v);
} }
.question__score__value { .question__score__value {
...@@ -875,7 +875,7 @@ ...@@ -875,7 +875,7 @@
&:after { &:after {
content: "/"; content: "/";
margin-left: ($baseline-v/4); @include margin-left(($baseline-v/4));
color: $heading-secondary-color; color: $heading-secondary-color;
} }
} }
...@@ -886,7 +886,7 @@ ...@@ -886,7 +886,7 @@
.unit { .unit {
@extend %t-strong; @extend %t-strong;
margin-left: ($baseline-v/4); @include margin-left(($baseline-v/4));
} }
} }
...@@ -923,8 +923,8 @@ ...@@ -923,8 +923,8 @@
// CASE: self assessment // CASE: self assessment
&.self-assessment { &.self-assessment {
border-left: ($baseline-h/8) solid $color-decorative-quaternary; @include border-left(($baseline-h/8) solid $color-decorative-quaternary);
padding-left: ($baseline-h/2); @include padding-left(($baseline-h/2));
.answer__source { .answer__source {
color: $color-decorative-tertiary; color: $color-decorative-tertiary;
...@@ -997,7 +997,7 @@ ...@@ -997,7 +997,7 @@
} }
.answer--feedback__title__copy { .answer--feedback__title__copy {
margin-left: ($baseline-h/4); @include margin-left(($baseline-h/4));
} }
.answer--feedback__content { .answer--feedback__content {
...@@ -1050,7 +1050,7 @@ ...@@ -1050,7 +1050,7 @@
.submission__feedback__title__copy { .submission__feedback__title__copy {
@extend %t-heading; @extend %t-heading;
margin-left: ($baseline-h/4); @include margin-left(($baseline-h/4));
} }
.submission__feeedback__content { .submission__feeedback__content {
...@@ -1102,7 +1102,7 @@ ...@@ -1102,7 +1102,7 @@
.action--submit { .action--submit {
@extend %btn--secondary; @extend %btn--secondary;
@extend %action-2; @extend %action-2;
margin-right: ($baseline-v/2); @include margin-right(($baseline-v/2));
} }
} }
......
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