Merge pull request #11636 from eduNEXT/Bound3R/rtl_support_static-pages

rtl support static pages

lms/static/sass/multicourse/_about_pages.scss

@@ -44,11 +44,11 @@
       padding-bottom: 40px;
 
       .logo {
-        border-right: 1px solid rgb(200,200,200);
+        @include border-right(1px solid rgb(200,200,200));
         @include box-sizing(border-box);
-        float: left;
+        @include float(left);
         height: 115px;
-        margin-right: flex-gutter();
+        @include margin-right(flex-gutter());
         text-align: center;
         width: flex-grid(3);
 
@@ -61,11 +61,11 @@
 
       h2.mission-quote {
         @include box-sizing(border-box);
-        float: right;
+        @include float(right);
         font-style: italic;
         line-height: 1.4;
         margin: 0;
-        padding: 5px 0px 5px 20px;
+        @include padding(5px, 0px, 5px, 20px);
         text-transform: none;
         width: flex-grid(9);
       }
@@ -108,22 +108,22 @@
 
       > article {
         @include box-sizing(border-box);
-        float: left;
-        padding-left: $baseline;
+        @include float(left);
+        @include padding-left($baseline);
         width: flex-grid(9);
       }
 
       &.left {
         .photo {
-          float: left;
-          margin-right: flex-gutter();
+          @include float(left);
+          @include margin-right(flex-gutter());
         }
       }
 
       &.right {
         .photo {
-          float: right;
-          margin-left: flex-gutter();
+          @include float(right);
+          @include margin-left(flex-gutter());
         }
       }
 
@@ -136,11 +136,11 @@
       @include clearfix();
 
       > article {
-        float: left;
+        @include float(left);
         width: flex-grid(6);
 
         &:first-child {
-          margin-right: flex-gutter();
+          @include margin-right(flex-gutter());
         }
       }
     }
@@ -153,8 +153,8 @@
     nav.categories {
       border: 1px solid rgb(220,220,220);
       @include box-sizing(border-box);
-      float: left;
-      margin-left: flex-gutter();
+      @include float(left);
+      @include margin-left(flex-gutter());
       padding: 20px;
       width: flex-grid(3);
 
@@ -162,7 +162,7 @@
         display: block;
         letter-spacing: 1px;
         margin: 0px -20px;
-        padding: 12px 0px 12px 20px;
+        @include padding(12px, 0px, 12px, 20px);
         text-align: left;
 
         &:hover, &:focus {
@@ -173,7 +173,7 @@
     }
 
     .responses {
-      float: left;
+      @include float(left);
       width: flex-grid(9);
 
       .category {
@@ -219,9 +219,9 @@
         background: rgb(255,255,255);
         border: 1px solid rgb(120,120,120);
         @include box-sizing(border-box);
-        float: left;
+        @include float(left);
         height: 140px;
-        margin-right: flex-gutter();
+        @include margin-right(flex-gutter());
         overflow: hidden;
         width: flex-grid(2);
 
@@ -233,7 +233,7 @@
       }
 
       .press-info {
-        float: left;
+        @include float(left);
         width: flex-grid(10);
 
         header {
@@ -247,7 +247,7 @@
 
           span.post-date {
             color: $lighter-base-font-color;
-            margin-right: ($baseline/2);
+            @include margin-right($baseline/2);
           }
         }
       }
@@ -263,7 +263,7 @@
       background: rgb(255,255,255);
       border: 1px solid rgb(210,210,210);
       padding: 1px;
-      float: left;
+      @include float(left);
       width: flex-grid(3);
 
       img {
@@ -273,8 +273,8 @@
 
     .contacts {
       @include box-sizing(border-box);
-      float: left;
-      padding-left: 40px;
+      @include float(left);
+      @include padding-left(40px);
       width: flex-grid(9);
 
       ul {

lms/static/sass/multicourse/_account.scss

@@ -241,7 +241,7 @@
       .cta-login-action {
         @extend %btn-secondary-grey-outline;
         padding: ($baseline/10) ($baseline*0.75);
-        margin-left: ($baseline/4);
+        @include margin-left($baseline/4);
       }
     }
   }
@@ -393,7 +393,7 @@
           cursor: text;
 
           &:after {
-            margin-left: ($baseline/4);
+            @include margin-left($baseline/4);
           }
         }
 
@@ -445,7 +445,7 @@
         }
 
         label:after {
-          margin-left: ($baseline/4);
+          @include margin-left($baseline/4);
           content: "*";
         }
       }
@@ -472,11 +472,11 @@
 
     .action-secondary {
       display: block;
-      float: right;
+      @include float(right);
       width: flex-grid(3,8);
       margin: $baseline $baseline 0 0;
       font-size: em(14);
-      text-align: right;
+      @include text-align(right);
     }
 
     &.error {
@@ -498,7 +498,7 @@
       @extend %t-weight4;
       position: absolute;
       top: -($baseline);
-      left: 43%;
+      @include left(43%);
       padding: ($baseline/4) ($baseline*1.5);
       background: white;
       text-align: center;
@@ -521,7 +521,7 @@
     button[type="submit"] {
       @extend %btn-secondary-blue-outline;
       width: flex-grid(4,8);
-      margin-right: ($baseline/2);
+      @include margin-right($baseline/2);
 
       .icon {
         @extend %sso-icon;

lms/static/sass/multicourse/_course_about.scss

@@ -56,14 +56,14 @@
             display: inline-block;
             margin: 0;
             letter-spacing: 0px;
-            text-align: left;
+            @include text-align(left);
             text-shadow: 0 1px rgba(255,255,255, 0.6);
 
             a {
               color: $lighter-base-font-color;
               font: italic 700 0.6em/1em $sans-serif;
               letter-spacing: 0px;
-              margin-left: ($baseline*0.75);
+              @include margin-left($baseline*0.75);
               text-shadow: 0 1px rgba(255,255,255, 0.6);
               text-transform: none;
 
@@ -93,8 +93,8 @@
 
         .main-cta {
           @include clearfix();
-          float: left;
-          margin-right: flex-gutter();
+          @include float(left);
+          @include margin-right(flex-gutter());
           @include transition(all 0.15s linear 0s);
           width: flex-grid(12);
 
@@ -129,7 +129,7 @@
             @include box-sizing(border-box);
             border-radius: 3px;
             display: block;
-            float: left;
+            @include float(left);
             font: normal 1.2rem/1.6rem $sans-serif;
             letter-spacing: 1px;
             padding: ($baseline/2) 0;
@@ -152,8 +152,8 @@
             padding: 10px 0px 8px;
             text-transform: uppercase;
             text-align: center;
-            float: left;
-            margin: 1px flex-gutter(8) 0 0;
+            @include float(left);
+            @include margin(1px, flex-gutter(8), 0, 0);
             @include transition(none);
             width: flex-grid(5, 8);
           }
@@ -190,9 +190,9 @@
             box-shadow: 0 1px 12px 0 $shadow-d1;
             border: 2px solid rgba(255,255,255, 0.8);
             height: 80px;
-            left: 50%;
+            @include left(50%);
             margin-top: -40px;
-            margin-left: -40px;
+            @include margin-left(-40px);
             position: absolute;
             top: 50%;
             width: 80px;
@@ -202,8 +202,8 @@
               content: "\25B6";
               display: block;
               font: normal 2em/1em $sans-serif;
-              left: 50%;
-              margin-left: -11px;
+              @include left(50%);
+              @include margin-left(-11px);
               margin-top: -16px;
               position: absolute;
               text-shadow: 0 -1px rgba(0,0,0, 0.8);
@@ -246,11 +246,11 @@
 
       .instructor-info-action {
         @extend %t-copy-sub2;
-        float: right;
+        @include float(right);
         padding: ($baseline/4) ($baseline/2);
         border-radius: ($baseline/4);
         background-color: $shadow-l2;
-        text-align: right;
+        @include text-align(right);
         text-transform: uppercase;
         color: $staff-color;
 
@@ -264,7 +264,7 @@
 
   .details {
     @include float(left);
-    margin-right: flex-gutter();
+    @include margin-right(flex-gutter());
     width: flex-grid(8);
     font: normal 1em/1.6em $serif;
 
@@ -304,7 +304,7 @@
             background: rgb(255,255,255);
             border: 1px solid $border-color-2;
             height: 115px;
-            float: left;
+            @include float(left);
             margin: 0 15px 0px 0;
             overflow: hidden;
             padding: 1px;
@@ -334,7 +334,7 @@
         @include clearfix();
 
         .responses {
-          float: left;
+          @include float(left);
         }
 
         .response {
@@ -377,13 +377,13 @@
         }
 
         ul {
-          padding-left: 0;
+          @include padding-left(0);
           margin-bottom: 0;
         }
 
         li {
           list-style: none;
-          padding-left: 29px;
+          @include padding-left(29px);
           background: url('#{$static-path}/images/link-icon.png') left center no-repeat;
         }
       }
@@ -412,15 +412,15 @@
       }
 
       a.university-name {
-        border-right: 1px solid $border-color-2;
+        @include border-right(1px solid $border-color-2);
         color: $base-font-color;
         font-family: $sans-serif;
         font-style: italic;
         font-weight: 700;
         display: inline-block;
         letter-spacing: 0px;
-        margin-right: ($baseline*0.75);
-        padding-right: 15px;
+        @include margin-right($baseline*0.75);
+        @include padding-right(15px);
 
         &:hover, &:focus {
           color: $lighter-base-font-color;
@@ -429,7 +429,7 @@
 
       .social-sharing {
         @include box-sizing(border-box);
-        float: left;
+        @include float(left);
         height: 44px;
         position: relative;
         text-align: center;
@@ -453,12 +453,12 @@
           box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
           @include box-sizing(border-box);
           color: rgb(255,255,255);
-          float: right;
+          @include float(right);
           font-family: $serif;
           font-size: 0.9em;
           font-style: italic;
-          left: 50%;
-          margin-left: -110px;
+          @include left(50%);
+          @include margin-left(-110px);
           opacity: 0;
           padding: 6px 10px;
           position: absolute;
@@ -476,7 +476,7 @@
           display: inline-block;
           height: 35px;
           width: 35px;
-          margin-right: ($baseline);
+          @include margin-right($baseline);
           margin-top: ($baseline/4);
           font-size: 1.75em;
           text-decoration: none;
@@ -521,19 +521,19 @@
 
         .important-dates-item-title {
           color: $lighter-base-font-color;
-          float: left;
+          @include float(left);
           font-family: $sans-serif;
         }
 
         .icon {
-            float: left;
+            @include float(left);
             padding: 1px;
-            margin: ($baseline/5) ($baseline/2) 0 0;
+            @include margin(($baseline/5), ($baseline/2), 0, 0);
             opacity: .6;
         }
 
         .important-dates-item-text {
-          float: right;
+          @include float(right);
           font-weight: 700;
         }
       }
@@ -544,7 +544,7 @@
           @extend %text-truncated;
         }
         .tip {
-          float: left;
+          @include float(left);
           margin: $baseline 0 ($baseline/2);
           font-size: 0.8em;
           color: $lighter-base-font-color;

lms/static/sass/multicourse/_dashboard.scss

@@ -255,7 +255,7 @@
         font-family: $sans-serif;
         display: inline-block;
         letter-spacing: 1px;
-        margin-left: ($baseline/4);
+        @include margin-left($baseline/4);
         padding: 5px 10px;
         text-shadow: 0 1px rgba(255,255,255, 0.6);
 
@@ -490,7 +490,7 @@
             display: none;
             position: absolute;
             top: ($baseline*2);
-            right: 19px;
+            @include right(19px);
             pointer-events: none;
             min-width: ($baseline*7);
 
@@ -516,7 +516,7 @@
               &:after,
               &:before {
                 bottom: 100%;
-                right: 6px;
+                @include right(6px);
                 border: solid transparent;
                 content: " ";
                 height: 0;
@@ -565,7 +565,7 @@
         border: 1px solid $border-color-2;
         box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
         margin-top: 17px;
-        margin-right: flex-gutter();
+        @include margin-right(flex-gutter());
         padding: ($baseline/4);
         width: flex-grid(8);
         @include float(left);
@@ -728,7 +728,7 @@
               @include font-size(18);
               display: inline-block;
               vertical-align: middle;
-              margin-right: ($baseline/4);
+              @include margin-right($baseline/4);
             }
 
             .message-copy {
@@ -758,8 +758,8 @@
             @extend %btn-primary-green;
             @include clearfix();
             position: relative;
-            left: ($baseline/2);
-            padding: ($baseline * 0.4) 0 ($baseline * 0.4) ($baseline * 0.75);
+            @include left($baseline/2);
+            @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
 
             .action-upgrade-icon{
               @include float(left);
@@ -777,7 +777,7 @@
             .deco-graphic {
               position: absolute;
               top: -($baseline/4);
-              left: -($baseline*0.75);
+              @include left(-($baseline*0.75));
               width: ($baseline*2);
             }
 
@@ -793,7 +793,7 @@
             .copy {
               @extend %t-action3;
               @extend %t-weight4;
-              margin-right: $baseline;
+              @include margin-right($baseline);
             }
 
             .copy-sub {
@@ -825,7 +825,7 @@
             .credit-btn {
               @extend %btn-pl-yellow-base;
               @include float(right);
-              margin-right: 5px;
+              @include margin-right(5px);
               background-image: none ;
               text-shadow: none;
               box-shadow: none;
@@ -852,7 +852,7 @@
               @extend %btn-pl-black-border;
               @include float(right);
               position: relative;
-              left: 10px;
+              @include left(10px);
               padding: ($baseline*0.4) ($baseline*0.6);
               background-image: none ;
               text-shadow: none;
@@ -891,7 +891,7 @@
               @extend %btn-pl-black-base;
               @include float(right);
               position: relative;
-              left: 10px;
+              @include left(10px);
               padding: ($baseline*0.4) ($baseline*0.6);
               background-image: none ;
               text-shadow: none;
@@ -931,7 +931,7 @@
 
             .action {
               @include float(left);
-              margin: 0 15px 0 0;
+              @include margin(0, 15px, 0, 0);
 
               .btn, .cta {
                 display: inline-block;
@@ -1261,7 +1261,7 @@
     .deco-arrow {
       @include triangle(($baseline/2), $m-gray-d3, up);
       position: absolute;
-      left: 45%;
+      @include left(45%);
       top: -6px;
     }
   }
@@ -1334,7 +1334,7 @@
   }
 
   .list--nav {
-    margin-left: 26px;
+    @include margin-left(26px);
   }
 
   // STATE: is denied
@@ -1348,7 +1348,7 @@
 
 // message
 .msg {
-  margin: ($baseline/2) 0 ($baseline/2) 26px;
+  @include margin(($baseline/2), 0, ($baseline/2), 26px);
 }
 
 .msg__title {

lms/static/sass/multicourse/_help.scss

@@ -6,8 +6,8 @@
     nav.categories {
       border: 1px solid rgb(220,220,220);
       @include box-sizing(border-box);
-      float: left;
-      margin-left: flex-gutter();
+      @include float(left);
+      @include margin-left(flex-gutter());
       padding: 20px;
       width: flex-grid(3);
 
@@ -15,8 +15,8 @@
         display: block;
         letter-spacing: 1px;
         margin: 0px -20px;
-        padding: 12px 0px 12px 20px;
-        text-align: left;
+        @include padding(12px, 0px, 12px, 20px);
+        @include text-align(left);
 
         &:hover, &:focus {
           background: rgb(245,245,245);
@@ -26,7 +26,7 @@
     }
 
     .responses {
-      float: left;
+      @include float(left);
       width: flex-grid(9);
 
       .category {
@@ -58,7 +58,7 @@
         .answer {
           display: none;
           color: #3c3c3c;
-          padding-left: 16px;
+          @include padding-left(16px);
           font-family: $serif;
           li {
             line-height: 1.6em;

lms/static/sass/multicourse/_home.scss

@@ -154,11 +154,11 @@ $course-search-input-height: ($button-size);
       background: $white;
       background: $course-header-bg;
       border: 1px solid $border-color-3;
-      border-left: 0;
+      @include border-left(0);
       @include box-sizing(border-box);
       // box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
       height: 120px;
-      float: left;
+      @include float(left);
       padding: 4px;
       position: relative;
       vertical-align: top;
@@ -183,9 +183,9 @@ $course-search-input-height: ($button-size);
           @include box-sizing(border-box);
           border: 2px solid rgba(255,255,255, 0.8);
           height: 60px;
-          left: 50%;
+          @include left(50%);
           margin-top: -30px;
-          margin-left: -($baseline*1.5);
+          @include margin-left(-($baseline*1.5));
           position: absolute;
           top: 50%;
           @include transition(all 0.15s linear 0s);
@@ -197,8 +197,8 @@ $course-search-input-height: ($button-size);
             content: "\25B6";
             display: block;
             font: normal 2em/1em $sans-serif;
-            left: 50%;
-            margin-left: -11px;
+            @include left(50%);
+            @include margin-left(-11px);
             margin-top: -16px;
             position: absolute;
             text-shadow: 0 -1px rgba(0,0,0, 0.8);
@@ -305,7 +305,7 @@ $course-search-input-height: ($button-size);
           content: "";
           display: block;
           height: 80px;
-          right: 0px;
+          @include right(0);
           position: absolute;
           top: -5px;
           width: 1px;
@@ -316,7 +316,7 @@ $course-search-input-height: ($button-size);
           content: "";
           display: block;
           height: 80px;
-          right: 1px;
+          @include right(1px);
           position: absolute;
           top: -5px;
           width: 1px;
@@ -341,8 +341,8 @@ $course-search-input-height: ($button-size);
           content: "";
           display: block;
           height: 200px;
-          left: 50%;
-          margin-left: -100px;
+          @include left(50%);
+          @include margin-left(-100px);
           margin-top: -100px;
           opacity: 0;
           width: 200px;
@@ -354,7 +354,7 @@ $course-search-input-height: ($button-size);
 
         .name {
           bottom: -60px;
-          left: 0px;
+          @include left(0);
           position: absolute;
           text-align: center;
           @include transition(all $tmg-f2 ease-in-out 0s);
@@ -405,14 +405,14 @@ $course-search-input-height: ($button-size);
       .partners {
         @include box-sizing(border-box);
         @include clearfix();
-        margin-left: 60px;
+        @include margin-left(60px);
         padding: 12px 0;
 
         .partner {
           @include box-sizing(border-box);
           width: flex-grid(2, 12);
           display: block;
-          float: left;
+          @include float(left);
           padding: 0 12px;
 
           a {
@@ -450,13 +450,13 @@ $course-search-input-height: ($button-size);
       position: relative;
 
       h2 {
-        float: left;
+        @include float(left);
         margin: 0;
         text-shadow: 0 1px rgba(255,255,255, 0.6);
       }
 
       .action.action-mediakit {
-        float: right;
+        @include float(right);
         position: relative;
         top: 1px;
         font-family: $sans-serif;
@@ -467,7 +467,7 @@ $course-search-input-height: ($button-size);
           position: relative;
           top: -1px;
           display: inline-block;
-          margin: 0 0 0 5px;
+          @include margin(0, 0, 0, 5px);
           content: "➤";
           font-size: 11px;
         }
@@ -497,8 +497,8 @@ $course-search-input-height: ($button-size);
           border-color: $border-color-2;
           @include box-sizing(border-box);
           @include clearfix();
-          float: left;
-          margin-right: flex-gutter();
+          @include float(left);
+          @include margin-right(flex-gutter());
           padding: 10px;
           @include transition(all 0.15s linear 0s);
           width: flex-grid(4);
@@ -510,16 +510,16 @@ $course-search-input-height: ($button-size);
           }
 
           &:last-child {
-            margin-right: 0;
+            @include margin-right(0);
           }
 
           .post-graphics {
             border: 1px solid $border-color-1;
             @include box-sizing(border-box);
             display: block;
-            float: left;
+            @include float(left);
             height: 84px;
-            margin-right: flex-gutter();
+            @include margin-right(flex-gutter());
             overflow: hidden;
             width: flex-grid(4);
             vertical-align: top;
@@ -531,7 +531,7 @@ $course-search-input-height: ($button-size);
           }
 
           .post-name {
-            float: left;
+            @include float(left);
             width: flex-grid(8);
             vertical-align: top;
 
@@ -566,10 +566,10 @@ $course-search-input-height: ($button-size);
           line-height: 1.6em;
           font-family: $serif;
           font-style: italic;
-          margin-left: ($baseline/2);
+          @include margin-left($baseline/2);
 
           &.read-more {
-            float: right;
+            @include float(right);
             color: lighten($base-font-color, 50%);
 
             &:hover, &:focus {

lms/static/sass/multicourse/_jobs.scss

@@ -9,7 +9,7 @@
   }
 
   small.author {
-    text-align: right;
+    @include text-align(right);
     display: block;
     color: rgb(100, 100, 100);
   }
@@ -26,8 +26,8 @@
     .photo {
       background: rgb(255,255,255);
       border: 1px solid rgb(210,210,210);
-      float: left;
-      margin-right: flex-gutter();
+      @include float(left);
+      @include margin-right(flex-gutter());
       padding: 1px;
       width: flex-grid(4);
 
@@ -39,11 +39,11 @@
     }
 
     header {
-      float: left;
+      @include float(left);
       width: flex-grid(7);
 
       blockquote {
-        margin-left: 0;
+        @include margin-left(0);
         margin-bottom: ($baseline*2);
 
         &:last-child {
@@ -51,7 +51,7 @@
         }
 
         p {
-          margin-left: 0;
+          @include margin-left(0);
           font-style: italic;
           line-height: 1.6;
           font-size: 1.1em;
@@ -70,7 +70,7 @@
 
   .jobs-wrapper {
     @include clearfix();
-    float: left;
+    @include float(left);
     padding-top: 80px;
     width: flex-grid(12);
 
@@ -83,7 +83,7 @@
     .jobs-sidebar {
       @include box-sizing(border-box);
       border: 1px solid rgb(220,220,220);
-      float: left;
+      @include float(left);
       padding: 20px;
       width: flex-grid(3);
 
@@ -94,8 +94,8 @@
           display: block;
           letter-spacing: 1px;
           margin: 0px -20px;
-          padding: 12px 0px 12px 20px;
-          text-align: left;
+          @include padding(12px, 0px, 12px, 20px);
+          @include text-align(left);
 
           &:hover, &:focus {
             background: rgb(245,245,245);
@@ -110,8 +110,8 @@
     }
 
     .jobs-listing {
-      float: left;
-      margin-right: flex-gutter();
+      @include float(left);
+      @include margin-right(flex-gutter());
       width: flex-grid(9);
 
       .job {
@@ -145,7 +145,7 @@
         }
 
         ul {
-          padding-left: 50px;
+          @include padding-left(50px);
         }
 
         li {

lms/static/sass/multicourse/_media-kit.scss

@@ -71,7 +71,7 @@ $white: rgb(255,255,255);
       &:before {
         position: relative;
         top: -1px;
-        margin: 0 5px 0 0;
+        @include margin(0, 5px, 0, 0);
         content: "➤";
         font-size: 11px;
       }
@@ -90,7 +90,7 @@ $white: rgb(255,255,255);
     @include clearfix();
 
     header {
-      margin: 0 0 ($baseline*1.5) 0;
+      @include margin(0, 0, ($baseline*1.5), 0);
 
       h2 {
         margin: 0;
@@ -108,8 +108,8 @@ $white: rgb(255,255,255);
     article {
       @include box-sizing(border-box);
       width: 500px;
-      margin-right: $baseline;
-      float: left;
+      @include margin-right($baseline);
+      @include float(left);
     }
 
     aside {
@@ -117,7 +117,7 @@ $white: rgb(255,255,255);
       @include box-sizing(border-box);
       box-shadow: 0 1px 4px 0 $shadow;
       width: 330px;
-      float: left;
+      @include float(left);
       border: 3px solid tint(rgb(96, 155, 216), 35%);
       background: tint(rgb(96, 155, 216), 35%);
 
@@ -208,12 +208,12 @@ $white: rgb(255,255,255);
       li {
         @include box-sizing(border-box);
         overflow-y: auto;
-        float: left;
+        @include float(left);
         width: 350px;
-        margin: 0 0 $baseline 0;
+        @include margin(0, 0, $baseline, 0);
 
         &:nth-child(odd) {
-          margin-right: ($baseline*3.5);
+          @include margin-right($baseline*3.5);
         }
       }
 
@@ -236,7 +236,7 @@ $white: rgb(255,255,255);
         img {
           display: block;
           border: 2px solid tint($light-gray,80%);
-          margin: 0 auto ($baseline*0.75) auto;
+          margin: 0 auto ($baseline*0.75);
         }
 
         figcaption {

lms/static/sass/multicourse/_press_release.scss

@@ -39,7 +39,7 @@
       @include box-sizing(border-box);
       box-shadow: 0 2px 16px 0 $shadow-l1;
       margin: 0 auto;
-      padding: 80px 80px 40px 80px;
+      padding: 80px 80px 40px;
       width: flex-grid(10);
 
       .footer {
@@ -51,8 +51,8 @@
 
     figure {
       display: block;
-      float: right;
-      margin: 20px 0px 60px 20px;
+      @include float(right);
+      @include margin(20px, 0px, 60px, 20px);
       width: 300px;
 
       img {
@@ -98,19 +98,19 @@
 
       .fb-like {
         margin-top: 8px;
-        margin-left: ($baseline/2);
-        float: left;
+        @include margin-left($baseline/2);
+        @include float(left);
       }
 
       p {
-        float: left;
+        @include float(left);
         margin-top: 8px;
-        margin-right: ($baseline/2);
+        @include margin-right($baseline/2);
       }
 
       a {
         display: block;
-        float: left;
+        @include float(left);
       }
     }
   }