Added single-box-shadow sass mixin with rtl support.

TNL-813

openassessment/xblock/static/sass/_openassessment.scss

@@ -73,6 +73,7 @@
 // specific UI for this application
 // --------------------
 @import 'vendor/hint';                         // vendor - hint/tooltip UI
+@import 'oa/utilities/mixins';                 // open assessment mixins
 @import 'oa/utilities/variables';              // specific variables and overrides
 @import 'oa/utilities/extends';                // open assessment extends
 @import 'oa/elements/header';                  // view/app headers

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

@@ -11,7 +11,7 @@
   // general: staff UI
   // --------------------
   .wrapper--ui-staff {
-    box-shadow: inset 0 1px -2px 1px $shadow-d1;
+    @include single-box-shadow(0, 1px, -2px, 1px, $shadow-d1, inset);
     margin-top: ($baseline-v*2);
     @include border-radius(($baseline-v/10));
     border: 1px solid shade($color-decorative-staff, 25%);

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

@@ -760,7 +760,7 @@
       background-image: -webkit-linear-gradient(#F2F2F2,#FFF);
       background-image: -moz-linear-gradient(#F2F2F2,#FFF);
       background-image: linear-gradient(#F2F2F2,#FFF);
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+      @include single-box-shadow(0, 1px, 2px, 0, rgba(0, 0, 0, 0.1), inset);
       font-family: 'Open Sans', sans-serif;
       font-size: 11px;
       color: #4c4c4c;
@@ -956,7 +956,7 @@
           border-radius: 2px;
           @include padding(6px, 8px, 8px, 8px);
           background-color: white;
-          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+          @include single-box-shadow(0, 1px, 2px, 0, rgba(0, 0, 0, 0.1), inset);
           font-family: 'Open Sans', sans-serif;
           font-size: 11px;
           color: #4c4c4c;
@@ -1165,7 +1165,7 @@
 
       .leaderboard__answer{
         border-top: 2px solid $edx-gray-d2;
-        box-shadow: inset 0 0 3px 1px rgba(10, 10, 10, 0.1);
+        @include single-box-shadow(0, 0, 3px, 1px, rgba(10, 10, 10, 0.1), inset);
         padding: 10px;
         max-height: 200px;
         overflow-y: scroll;

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

@@ -38,7 +38,7 @@
   @include transition(all $tmg-f1 ease-in-out);
   @include transform(scale(1.0));
   @include border-radius(($baseline-v/10));
-  box-shadow: 0 1px 1px $shadow-l1;
+  @include single-box-shadow(0, 1px, 1px, 0, $shadow-l1);
   margin-bottom: $baseline-v;
   border: 1px solid $color-decorative-tertiary;
   border-top: ($baseline-v/4) solid $color-decorative-tertiary;
@@ -53,13 +53,13 @@
   &:hover, &:focus {
     @include transform(scale(1.0));
     border-color: $color-decorative-tertiary;
-    box-shadow: 0 1px 1px $shadow-l2;
+    @include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
   }
 
   // STATE: is collapsed
   &.is--collapsed {
     @include transform(scale(0.99));
-    box-shadow: 0 1px 1px $shadow-l2;
+    @include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
 
     &:hover, &:focus {
       @include transform(scale(1.0));
@@ -69,7 +69,7 @@
   // STATE: is loading
   &.is--loading {
     @include transform(scale(0.99));
-    box-shadow: 0 1px 1px $shadow-l2;
+    @include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
   }
 
   // STATE: is empty
@@ -139,7 +139,7 @@
 // UI: well
 // --------------------
 %ui-well {
-  box-shadow: inset 0 1px 2px 1px $shadow-l1;
+  @include single-box-shadow(0, 1px, 2px, 1px, $shadow-l1, inset);
   padding: $baseline-v ($baseline-h/2);
   background: $color-decorative-quinternary;
 }

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

+// openassessment: utilities - mixins
+// ====================
+
+@mixin single-box-shadow($offset-x, $offset-y, $blur-radius: 0, $spread-radius: 0, $color: grey, $inset: null) {
+  $shadow : "";
+  @if $bi-app-direction == ltr {
+    $shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
+  } @else {
+    $shadow: -($offset-x) $offset-y $blur-radius $spread-radius $color;
+  }
+
+  @if $inset == inset {
+    $shadow: inset $shadow;
+  }
+  box-shadow: $shadow;
+}