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

TNL-813

openassessment/xblock/static/sass/oa/elements/_navigation.scss

@@ -27,7 +27,7 @@
     }
 
     .ui-toggle-visibility__control__copy {
-      margin-left: ($baseline-h/4);
+      @include margin-left(($baseline-h/4));
     }
 
     &:hover, &:focus {
@@ -45,8 +45,8 @@
     @extend %trans-opacity;
     max-height: ($baseline-v*2000);
     opacity: 1.0;
-    padding-left: ($baseline-h/20);
-    padding-right: ($baseline-h/20);
+    @include padding-left(($baseline-h/20));
+    @include padding-right(($baseline-h/20));
   }
 
   // STATE: is collapsed
@@ -79,7 +79,7 @@
   @extend %fake-link;
 
   .ico {
-    margin-left: ($baseline-h/8);
+    @include margin-left(($baseline-h/8));
   }
 
   // STATE: hover
@@ -89,7 +89,7 @@
 
 //   actual tooltip rendered
   &:after {
-    left: 0;
+    @include left(0);
     display: block;
     white-space: normal;
     width: ($baseline-h*5);
@@ -97,7 +97,7 @@
   }
 
   &.hint--top:after {
-    left: 0;
-    margin-left: -($baseline-v);
+    @include left(0);
+    @include margin-left(-($baseline-v));
   }
 }

openassessment/xblock/static/sass/oa/elements/_staff.scss

@@ -13,7 +13,7 @@
   .wrapper--ui-staff {
     box-shadow: inset 0 1px -2px 1px $shadow-d1;
     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-top: ($baseline-v/4) solid $color-decorative-staff;
     padding: $baseline-v ($baseline-h/2);
@@ -26,7 +26,7 @@
     &.ui-toggle-visibility {
 
       .staff-info__title__copy {
-        margin-left: ($baseline-h/4);
+        @include margin-left(($baseline-h/4));
       }
 
       // STATE: is collapsed
@@ -75,7 +75,7 @@
     }
 
     .label {
-      margin-right: ($baseline-h/4);
+      @include margin-right(($baseline-h/4));
     }
 
     .value {
@@ -90,12 +90,12 @@
 
   .staff-info__status__table, .staff-info__classifierset__table {
     @extend %copy-3;
-    border-radius: ($baseline-v/10);
+    @include border-radius(($baseline-v/10));
     color: $copy-staff-color;
 
     .title {
       @extend %hd-2;
-      text-align: left;
+      @include text-align(left);
       color: $heading-staff-color;
       margin-bottom: ($baseline-v/2);
     }
@@ -115,7 +115,7 @@
     }
 
     th, td[scope] {
-      text-align: left;
+      @include text-align(left);
 
     }
 

openassessment/xblock/static/sass/oa/utilities/_extends.scss

@@ -37,7 +37,7 @@
 %ui-section {
   @include transition(all $tmg-f1 ease-in-out);
   @include transform(scale(1.0));
-  border-radius: ($baseline-v/10);
+  @include border-radius(($baseline-v/10));
   box-shadow: 0 1px 1px $shadow-l1;
   margin-bottom: $baseline-v;
   border: 1px solid $color-decorative-tertiary;
@@ -174,7 +174,7 @@
 
   .question__title__copy {
     @extend %t-heading;
-    margin-left: ($baseline-h/4);
+    @include margin-left(($baseline-h/4));
     white-space: pre-wrap;
     color: $heading-color;
   }
@@ -184,7 +184,7 @@
 %ui-rubric-answers {
   margin-top: $baseline-v;
   margin-bottom: $baseline-v;
-  margin-left: ($baseline-h/2);
+  @include margin-left(($baseline-h/2));
 
   .answer, .answer--feedback {
     @include row();
@@ -210,7 +210,7 @@
     }
 
     .answer__value {
-      margin-right: ($baseline-v/2);
+      @include margin-right(($baseline-v/2));
 
       // STATE: checked
       &:checked {
@@ -250,24 +250,24 @@
     white-space: pre-wrap;
 
     @extend %copy-3;
-    margin-right: $baseline-v;
+    @include margin-right($baseline-v);
     color: $copy-secondary-color;
 
     @include media($bp-dm) {
       @include span-columns(6 of 8);
-      float: left;
+      @include float(left);
       margin-bottom: 0;
     }
 
     @include media($bp-dl) {
       @include span-columns(6 of 8);
-      float: left;
+      @include float(left);
       margin-bottom: 0;
     }
 
     @include media($bp-dx) {
       @include span-columns(6 of 8);
-      float: left;
+      @include float(left);
       margin-bottom: 0;
     }
 
@@ -281,24 +281,24 @@
     color: $copy-secondary-color;
 
     @include media($bp-dm) {
-      float: right;
-      text-align: right;
+      @include float(right);
+      @include text-align(right);
     }
 
     @include media($bp-dl) {
-      float: right;
-      text-align: right;
+      @include float(right);
+      @include text-align(right);
     }
 
     @include media($bp-dx) {
-      float: right;
-      text-align: right;
+      @include float(right);
+      @include text-align(right);
     }
   }
 
   .answer__points__label {
     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;
   }
 
@@ -337,7 +337,7 @@
     .answer__value {
       @extend %ui-content-longanswer;
       min-height: ($baseline-v*5);
-      margin-right: 0;
+      @include margin-right(0);
     }
   }
 }

openassessment/xblock/static/sass/oa/utilities/_shame.scss

@@ -38,7 +38,7 @@
     // step title/name
     h2.step__title {
       margin-top: 0 !important;
-      text-align: left !important;
+      @include text-align(left);
 
       @include media($bp-m) {
         margin-bottom: ($baseline-v/2);
@@ -97,7 +97,7 @@
 
   .list--actions {
     list-style: none !important;
-    padding-left: 0 !important;
+    @include padding-left(0);
     text-indent: 0 !important;
 
     li {
@@ -132,7 +132,7 @@
   // peer assessment
   .step--peer-assessment .list--peer-assessments {
     list-style: none outside none !important;
-    padding-left: 0 !important;;
+    @include padding-left(0);
   }
 
   // self assessment
@@ -144,7 +144,7 @@
 
   // shown submission/results
   .question__answers {
-    padding-left: 0 !important;
+    @include padding-left(0);
   }
 
 

openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -75,14 +75,14 @@
       }
 
       .wrapper--copy {
-        margin-left: ($baseline-h/2);
-        border-left: 1px solid $color-decorative-tertiary;
-        padding-left: ($baseline-h/2);
+        @include margin-left(($baseline-h/2));
+        @include border-left(1px solid $color-decorative-tertiary);
+        @include padding-left(($baseline-h/2));
 
         @include media($bp-m) {
-          margin-left: 0;
-          border-left: none;
-          padding-left: 0;
+          @include margin-left(0);
+          @include border-left(none);
+          @include padding-left(0);
         }
       }
 
@@ -153,7 +153,7 @@
         @extend %icon-3;
         display: inline-block;
         vertical-align: baseline;
-        margin-right: ($baseline-h/4);
+        @include margin-right(($baseline-h/4));
       }
 
       .copy {
@@ -234,22 +234,22 @@
     // step actions
     .step__actions {
       margin-bottom: ($baseline-v/2);
-      text-align: center;
+      @include text-align(center);
 
       @include media($bp-ds) {
-        text-align: right;
+        @include text-align(right);
       }
 
       @include media($bp-dm) {
-       text-align: right;
+       @include text-align(right);
       }
 
       @include media($bp-dl) {
-        text-align: right;
+        @include text-align(right);
       }
 
       @include media($bp-dx) {
-        text-align: right;
+        @include text-align(right);
       }
 
       .action--submit {
@@ -270,7 +270,7 @@
 
         .message {
           margin-bottom: $baseline-v;
-          text-align: left;
+          @include text-align(left);
         }
       }
     }
@@ -464,8 +464,8 @@
     position: relative;
     margin-bottom: $baseline-v;
     border: 1px solid $color-decorative-tertiary;
-    border-left: ($baseline-h/4) solid $color-decorative-secondary;
-    padding-left: ($baseline-h*0.75);
+    @include border-left(($baseline-h/4) solid $color-decorative-secondary);
+    @include padding-left(($baseline-h*0.75));
   }
 
   .openassessment__prompt__title {
@@ -525,7 +525,7 @@
     .response__submission__status {
       display: inline-block;
       vertical-align: middle;
-      margin-left: ($baseline-h/4);
+      @include margin-left(($baseline-h/4));
     }
 
     .response__submission__status__title {
@@ -539,31 +539,31 @@
         @extend %btn--secondary;
         @extend %action-2;
         display: block;
-        text-align: center;
+        @include text-align(center);
         margin-bottom: ($baseline-v/2);
         min-width: 215px;
 
         @include media($bp-ds) {
           display: inline-block;
-          margin-right: ($baseline-v/2);
+          @include margin-right(($baseline-v/2));
           margin-bottom: 0;
         }
 
         @include media($bp-dm) {
           display: inline-block;
-          margin-right: ($baseline-v/2);
+          @include margin-right(($baseline-v/2));
           margin-bottom: 0;
         }
 
         @include media($bp-dl) {
           display: inline-block;
-          margin-right: ($baseline-v/2);
+          @include margin-right(($baseline-v/2));
           margin-bottom: 0;
         }
 
         @include media($bp-dx) {
           display: inline-block;
-          margin-right: ($baseline-v/2);
+          @include margin-right(($baseline-v/2));
           margin-bottom: 0;
         }
       }
@@ -633,7 +633,7 @@
         }
 
         .question__title__copy {
-          margin-left: 0;
+          @include margin-left(0);
           white-space: pre-wrap;
         }
 
@@ -716,9 +716,9 @@
     }
 
     .wrapper--copy {
-      margin-left: 0;
-      border-left: none;
-      padding-left: 0;
+      @include margin-left(0);
+      @include border-left(none);
+      @include padding-left(0);
     }
   }
 
@@ -751,7 +751,7 @@
       }
 
       .step__label {
-        margin-right: ($baseline-h/4);
+        @include margin-right(($baseline-h/4));
       }
 
       .grade__value__title {
@@ -858,15 +858,15 @@
 
     .question__title__copy {
       @extend %t-heading;
-      margin-left: ($baseline-h/4);
+      @include margin-left(($baseline-h/4));
       white-space: pre-wrap;
       color: $heading-color;
     }
 
     .question__score {
       @extend %t-score;
-      float: right;
-      margin-left: $baseline-v;
+      @include float(right);
+      @include margin-left($baseline-v);
     }
 
     .question__score__value {
@@ -875,7 +875,7 @@
 
       &:after {
         content: "/";
-        margin-left: ($baseline-v/4);
+        @include margin-left(($baseline-v/4));
         color: $heading-secondary-color;
       }
     }
@@ -886,7 +886,7 @@
 
       .unit {
         @extend %t-strong;
-        margin-left: ($baseline-v/4);
+        @include margin-left(($baseline-v/4));
       }
     }
 
@@ -923,8 +923,8 @@
 
       // CASE: self assessment
       &.self-assessment {
-        border-left: ($baseline-h/8) solid $color-decorative-quaternary;
-        padding-left: ($baseline-h/2);
+        @include border-left(($baseline-h/8) solid $color-decorative-quaternary);
+        @include padding-left(($baseline-h/2));
 
         .answer__source {
           color: $color-decorative-tertiary;
@@ -997,7 +997,7 @@
     }
 
     .answer--feedback__title__copy {
-      margin-left: ($baseline-h/4);
+      @include margin-left(($baseline-h/4));
     }
 
     .answer--feedback__content {
@@ -1050,7 +1050,7 @@
 
   .submission__feedback__title__copy {
     @extend %t-heading;
-    margin-left: ($baseline-h/4);
+    @include margin-left(($baseline-h/4));
   }
 
   .submission__feeedback__content {
@@ -1102,7 +1102,7 @@
     .action--submit {
       @extend %btn--secondary;
       @extend %action-2;
-      margin-right: ($baseline-v/2);
+      @include margin-right(($baseline-v/2));
     }
   }