diff --git a/src/addon/messages/pages/discussion/discussion.scss b/src/addon/messages/pages/discussion/discussion.scss
index ab9a66c03..8b94e0a1a 100644
--- a/src/addon/messages/pages/discussion/discussion.scss
+++ b/src/addon/messages/pages/discussion/discussion.scss
@@ -58,12 +58,12 @@ page-addon-messages-discussion {
             align-self: flex-end;
             color: $item-message-note-text;
             font-size: $item-message-note-font-size;
-            margin-left: 10px;
+            @include margin(null, null, null, 10px);
         }
         .addon-messages-delete-button {
             min-height: initial;
             line-height: initial;
-            margin: 0 0 0 10px;
+            @include margin(0, 0, 0, 10px);
             height: auto;
             -webkit-align-self: flex-end;
             -ms-flex-item-align: end;
@@ -88,11 +88,8 @@ page-addon-messages-discussion {
         }
 
         .spinner {
-            float: right;
-            margin-left: 5px;
-            margin-right: -3px;
-            margin-top: 2px;
-            margin-bottom: -2px;
+            @include float(end);
+            @include margin(2px, -3px, -2px, 5px);
 
             svg {
               width: 16px;
diff --git a/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html b/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html
index 6d3dca6f0..ed35905b6 100644
--- a/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html
+++ b/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html
@@ -1,5 +1,5 @@
 <ion-list>
     <a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" detail-none>
-        <p [attr.padding-left]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
+        <p [attr.padding-start]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
     </a>
 </ion-list>
diff --git a/src/addon/mod/chat/pages/chat/chat.html b/src/addon/mod/chat/pages/chat/chat.html
index 1a44afca3..fbdf3bce1 100644
--- a/src/addon/mod/chat/pages/chat/chat.html
+++ b/src/addon/mod/chat/pages/chat/chat.html
@@ -42,7 +42,7 @@
                         <img [src]="message.userprofileimageurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: message.userfullname}" role="presentation">
                     </ion-avatar>
                     <h2>
-                        <p float-right>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}</p>
+                        <p float-end>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}</p>
                         <core-format-text [text]="message.userfullname"></core-format-text>
                     </h2>
                     <core-format-text [text]="message.message" (afterRender)="last && scrollToBottom()"></core-format-text>
diff --git a/src/addon/mod/data/data.scss b/src/addon/mod/data/data.scss
index d8cb84608..6c646f411 100644
--- a/src/addon/mod/data/data.scss
+++ b/src/addon/mod/data/data.scss
@@ -50,11 +50,11 @@ page-addon-mod-data-edit {
         }
 
         .core-mark-required {
-          float: right;
+          @include float(end);
 
           + ion-input,
           + ion-select {
-            padding-right: 20px;
+            @include padding(null, 20px, null, null);
           }
         }
 
@@ -91,12 +91,12 @@ page-addon-mod-data-edit {
 
         ion-select {
             width: 100%;
-            left: 0;
+            @include position(null, null, null, 0);
             max-width: none;
         }
 
         .core-item-has-rich-text-editor {
-            margin-right: 1px;
+            @include margin(null, 1px, null, null);
         }
     }
 }
\ No newline at end of file
diff --git a/src/addon/mod/forum/components/index/addon-mod-forum-index.html b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
index c4b5ad909..ddbebcadf 100644
--- a/src/addon/mod/forum/components/index/addon-mod-forum-index.html
+++ b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
@@ -32,7 +32,7 @@
                         </ion-avatar>
                         <h2><core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p *ngIf="discussion.userfullname">
-                            <ion-note float-right padding-left><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
+                            <ion-note float-end padding-start><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
                             {{discussion.userfullname}}
                         </p>
                     </ion-item>
@@ -50,7 +50,7 @@
                         </ion-avatar>
                         <h2><ion-icon name="pin" *ngIf="discussion.pinned"></ion-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p>
-                            <ion-note float-right padding-left>
+                            <ion-note float-end padding-start>
                                 {{discussion.created | coreDateDayOrTime}}
                                 <div *ngIf="discussion.numunread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div>
                             </ion-note>
diff --git a/src/addon/mod/forum/components/post/addon-mod-forum-post.html b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
index a7b3ebaf2..b5d7c22eb 100644
--- a/src/addon/mod/forum/components/post/addon-mod-forum-post.html
+++ b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
@@ -4,8 +4,8 @@
     </ion-avatar>
     <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2>
     <p>
-        <ion-note float-right padding-left *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
-        <ion-note float-right padding-left *ngIf="post.modified">
+        <ion-note float-end padding-start *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
+        <ion-note float-end padding-start *ngIf="post.modified">
             {{post.modified | coreDateDayOrTime}}
             <div *ngIf="unread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unread' | translate }}</div>
         </ion-note>
diff --git a/src/addon/mod/forum/pages/discussion/discussion.html b/src/addon/mod/forum/pages/discussion/discussion.html
index 03fd64c3d..dd59860cf 100644
--- a/src/addon/mod/forum/pages/discussion/discussion.html
+++ b/src/addon/mod/forum/pages/discussion/discussion.html
@@ -51,7 +51,7 @@
             <ion-card>
                 <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
             </ion-card>
-            <div padding-left *ngIf="post.children.length && post.children[0].subject">
+            <div padding-start *ngIf="post.children.length && post.children[0].subject">
                 <ng-container *ngFor="let child of post.children">
                     <ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}"></ng-container>
                 </ng-container>
diff --git a/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html b/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html
index 6bda8d594..4c1c9b21b 100644
--- a/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html
+++ b/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html
@@ -1,5 +1,5 @@
 <ion-list>
     <a ion-item *ngFor="let item of items" (click)="loadItem(item.href)" detail-none [class.core-bold]="!item.href">
-        <span padding-left *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}}
+        <span padding-start *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}}
     </a>
 </ion-list>
diff --git a/src/addon/mod/lesson/pages/player/player.html b/src/addon/mod/lesson/pages/player/player.html
index a6a2c73c6..6bb4f6a75 100644
--- a/src/addon/mod/lesson/pages/player/player.html
+++ b/src/addon/mod/lesson/pages/player/player.html
@@ -50,7 +50,7 @@
 
                         <!-- Short answer. -->
                         <ng-container *ngSwitchCase="'shortanswer'">
-                            <ion-input padding-left [type]="question.input.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}" [id]="question.input.id" [formControlName]="question.input.name" autocorrect="off" [maxlength]="question.input.maxlength">
+                            <ion-input padding-start [type]="question.input.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}" [id]="question.input.id" [formControlName]="question.input.name" autocorrect="off" [maxlength]="question.input.maxlength">
                             </ion-input>
                         </ng-container>
 
diff --git a/src/addon/mod/lesson/pages/player/player.scss b/src/addon/mod/lesson/pages/player/player.scss
index 540e14ac8..2c06d1a8b 100644
--- a/src/addon/mod/lesson/pages/player/player.scss
+++ b/src/addon/mod/lesson/pages/player/player.scss
@@ -10,6 +10,11 @@ page-addon-mod-lesson-player {
         padding-left: 0;
     }
 
+    ion-input[padding-start] input[padding-start] {
+        // Applying padding-start to the ion-input applies it twice since it's replicated in the inner input.
+        @include padding(null, null, null, 0);
+    }
+
     .addon-mod_lesson-pagebuttons .button-block {
         contain: content;
         height: 100%;
diff --git a/src/addon/mod/quiz/components/index/index.scss b/src/addon/mod/quiz/components/index/index.scss
index 279d948b5..08f6226a8 100644
--- a/src/addon/mod/quiz/components/index/index.scss
+++ b/src/addon/mod/quiz/components/index/index.scss
@@ -7,11 +7,11 @@ addon-mod-quiz-index {
         }
 
         .item-inner ion-label {
-            margin-right: 0;
+            @include margin(null, 0, null, null);
         }
 
         .item {
-            padding-left: 0;
+            @include padding(null, null, null, 0);
         }
 
         .label {
diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
index 38bf67187..b608f4438 100644
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
+++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
@@ -1,16 +1,16 @@
 page-addon-mod-quiz-navigation-modal {
     .addon-mod_quiz-selected, .item.addon-mod_quiz-selected {
-        border-left: 5px solid $core-splitview-selected;
+        @include border-start(5px, solid, $core-splitview-selected);
         font-weight: bold;
 
         &.item-md {
-            padding-left: $item-md-padding-start - 5px;
+            @include padding(null, null, null, $item-md-padding-start - 5px);
         }
         &.item-ios {
-            padding-left: $item-ios-padding-start - 5px;
+            @include padding(null, null, null, $item-ios-padding-start - 5px);
         }
         &.item-wp {
-            padding-left: $item-wp-padding-start - 5px;
+            @include padding(null, null, null, $item-wp-padding-start - 5px);
         }
     }
 
diff --git a/src/addon/mod/wiki/components/index/index.scss b/src/addon/mod/wiki/components/index/index.scss
index e3404377f..538f326da 100644
--- a/src/addon/mod/wiki/components/index/index.scss
+++ b/src/addon/mod/wiki/components/index/index.scss
@@ -32,11 +32,11 @@ addon-mod-wiki-index {
     }
 
     .wiki-toc-section-2 {
-        padding-left: $addon-mod-wiki-toc-level-padding;
+        @include padding(null, null, null, $addon-mod-wiki-toc-level-padding);
     }
 
     .wiki-toc-section-3 {
-        padding-left: $addon-mod-wiki-toc-level-padding * 2;
+        @include padding(null, null, null, $addon-mod-wiki-toc-level-padding * 2);
     }
 
     .wiki_newentry {
diff --git a/src/addon/mod/workshop/pages/phase/phase.scss b/src/addon/mod/workshop/pages/phase/phase.scss
index b454614ef..39b922678 100644
--- a/src/addon/mod/workshop/pages/phase/phase.scss
+++ b/src/addon/mod/workshop/pages/phase/phase.scss
@@ -1,14 +1,7 @@
 page-addon-mod-workshop-phase-info {
     .core-workshop-phase-selected {
         background-color: $white;
-        @include ltr() {
-            border-left: 5px solid $core-splitview-selected;
-        }
-
-        @include rtl() {
-            border-right: 5px solid $core-splitview-selected;
-        }
-
+        @include border-start(5px, solid, $core-splitview-selected);
         &.item-md {
             @include padding(null, null, null, $item-md-padding-start - 5px);
         }
diff --git a/src/addon/qtype/calculated/component/addon-qtype-calculated.html b/src/addon/qtype/calculated/component/addon-qtype-calculated.html
index db25e4f4b..ab11e293c 100644
--- a/src/addon/qtype/calculated/component/addon-qtype-calculated.html
+++ b/src/addon/qtype/calculated/component/addon-qtype-calculated.html
@@ -18,7 +18,7 @@
 
                 <!-- Input to enter the answer. -->
                 <ion-col>
-                    <ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]" autocorrect="off">
+                    <ion-input padding-start type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]" autocorrect="off">
                     </ion-input>
                 </ion-col>
 
diff --git a/src/addon/qtype/multianswer/component/multianswer.scss b/src/addon/qtype/multianswer/component/multianswer.scss
index d449e8a26..5d116515e 100644
--- a/src/addon/qtype/multianswer/component/multianswer.scss
+++ b/src/addon/qtype/multianswer/component/multianswer.scss
@@ -37,7 +37,6 @@ addon-qtype-multianswer {
     }
 
     input[type="radio"], input[type="checkbox"] {
-        margin-top: -4px;
-        margin-right: 7px;
+        @include margin(-4px, 7px, null, null);
     }
 }
diff --git a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html
index 550e65863..bdf6f49ab 100644
--- a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html
+++ b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html
@@ -2,6 +2,6 @@
     <ion-item text-wrap>
         <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
     </ion-item>
-    <ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]">
+    <ion-input padding-start type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]">
     </ion-input>
 </section>
diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss
index 2c8c9ef57..4d135f461 100644
--- a/src/app/app.ios.scss
+++ b/src/app/app.ios.scss
@@ -27,10 +27,10 @@
     @extend .card-content-ios;
 
     &[icon-start] {
-      padding-left: $card-ios-padding-left * 2 + 20;
+      @include padding(null, null, null, $card-ios-padding-left * 2 + 20);
 
       ion-icon {
-        left: $card-ios-padding-left;
+        @include position(null, null, null, $card-ios-padding-left);
       }
     }
   }
@@ -121,7 +121,7 @@
 // Different levels of padding.
 @for $i from 0 through 15 {
   .ios .core-padding-#{$i} {
-    padding-left: 15px * $i + $item-ios-padding-start;
+    @include padding(null, null, null, 15px * $i + $item-ios-padding-start);
   }
 }
 
diff --git a/src/app/app.md.scss b/src/app/app.md.scss
index e39f28792..3a9d43320 100644
--- a/src/app/app.md.scss
+++ b/src/app/app.md.scss
@@ -27,10 +27,10 @@
     @extend .card-content-md;
 
     &[icon-start] {
-      padding-left: $card-md-padding-left * 2 + 20;
+      @include padding(null, null, null, $card-md-padding-left * 2 + 20);
 
       ion-icon {
-        left: $card-md-padding-left;
+        @include position(null, null, null, $card-md-padding-left);
       }
     }
   }
@@ -109,7 +109,7 @@
 // Different levels of padding.
 @for $i from 0 through 15 {
   .md .core-padding-#{$i} {
-    padding-left: 15px * $i + $item-md-padding-start;
+    @include padding(null, null, null, 15px * $i + $item-md-padding-start);
   }
 }
 
diff --git a/src/app/app.scss b/src/app/app.scss
index 9eb4390d6..79ae83fe0 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -122,7 +122,7 @@
     max-width: 32px;
   }
   .label {
-    margin-left: 5px;
+    @include margin(null, null, null, 5px);
     color: $gray-darker;
   }
 }
@@ -153,7 +153,7 @@
 
     &.item-complex .item-content {
         text-align: center;
-        padding-left: 49px;
+        @include padding(null, null, null, 49px);
     }
 
     > img:first-child,
@@ -256,9 +256,7 @@ core-format-text[ng-reflect-max-height] {
         content: '';
         height: 100%;
         position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        @include position(null, 0, 0, 0);
         background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
         background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
         background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
@@ -405,7 +403,7 @@ ion-select {
 }
 
 ion-col ion-select {
-    float: right;
+    @include float(end);
     max-width: none;
     width: 100%;
     .select-text {
@@ -587,8 +585,7 @@ ion-col ion-select {
 }
 
 .atto_image_size input[type=checkbox] {
-    margin-left: 1em;
-    margin-right: 1em;
+    @include margin(null, 1em, null, 1em);
 }
 
 .atto_image_size input[type=text] {
@@ -624,13 +621,13 @@ ion-col ion-select {
 
 /*rtl:begin:ignore*/
 .atto_image_button_left {
-    float: left;
+    @include float(start);
     @include margin(0, 0.5em, 0, 0);
     max-width: calc(100% - 1em);
 }
 
 .atto_image_button_right {
-    float: right;
+    @include float(end);
     @include margin(0, 0, 0, 0.5em);
     max-width: calc(100% - 1em);
 }
@@ -692,7 +689,7 @@ textarea {
     border-bottom: 3px solid $color-base;
 
     &[icon-start] {
-      padding-left: 52px;
+      @include padding(null, null, null, 52px);
       position: relative;
 
       ion-icon {
@@ -730,7 +727,7 @@ textarea {
 
 .accesshide {
   position: absolute;
-  left: -10000px;
+  @include position(null, null, null, -10000px);
   font-weight: normal;
   font-size: 1em;
 }
@@ -883,8 +880,6 @@ ion-alert.core-inapp-notification {
     height: auto;
     margin: 0;
     position: absolute;
-    top: -18px;
-    right: -8px;
     @include position(-18px, -8px, null, null);
     color: red;
     font-size: 16px;
diff --git a/src/app/app.wp.scss b/src/app/app.wp.scss
index eda1dc65c..040a4560c 100644
--- a/src/app/app.wp.scss
+++ b/src/app/app.wp.scss
@@ -27,10 +27,10 @@
     @extend .card-content-wp;
 
     &[icon-start] {
-      padding-left: $card-wp-padding-left * 2 + 20;
+      @include padding(null, null, null, $card-wp-padding-left * 2 + 20);
 
       ion-icon {
-        left: $card-wp-padding-left;
+        @include position(null, null, null, $card-wp-padding-left);
       }
     }
   }
@@ -44,7 +44,7 @@
 // Different levels of padding.
 @for $i from 0 through 15 {
   .wp .core-padding-#{$i} {
-    padding-left: 15px * $i + $item-wp-padding-start;
+    @include padding(null, null, null, 15px * $i + $item-wp-padding-start);
   }
 }
 
diff --git a/src/components/empty-box/empty-box.scss b/src/components/empty-box/empty-box.scss
index 643d81917..4d493c020 100644
--- a/src/components/empty-box/empty-box.scss
+++ b/src/components/empty-box/empty-box.scss
@@ -1,10 +1,7 @@
 core-empty-box {
   .core-empty-box {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    @include position(0, 0, 0, 0);
     display: table;
     height: 100%;
     width: 100%;
@@ -25,10 +22,8 @@ core-empty-box {
 
     &.core-empty-box-inline {
       position: relative;
-      top: initial;
-      left: initial;
-      right: initial;
       z-index: initial;
+      @include position(initial, initial, null, initial);
       height: auto;
     }
 
diff --git a/src/components/iframe/iframe.scss b/src/components/iframe/iframe.scss
index abc26dfee..5f1a11cc2 100644
--- a/src/components/iframe/iframe.scss
+++ b/src/components/iframe/iframe.scss
@@ -9,10 +9,7 @@ core-iframe {
 
     .core-loading-container {
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        @include position(0, 0, 0, 0);
         display: table;
         height: 100%;
         width: 100%;
diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss
index 3b05c5fdf..a6e506ba3 100644
--- a/src/components/loading/loading.scss
+++ b/src/components/loading/loading.scss
@@ -32,10 +32,7 @@ core-loading.core-loading-loaded {
 
     > .core-loading-container {
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        @include position(0, 0, 0, 0);
         display: table;
         height: 100%;
         width: 100%;
diff --git a/src/components/mark-required/mark-required.scss b/src/components/mark-required/mark-required.scss
index 1e6bebc83..09873c055 100644
--- a/src/components/mark-required/mark-required.scss
+++ b/src/components/mark-required/mark-required.scss
@@ -1,7 +1,7 @@
 .core-input-required-asterisk, .icon.core-input-required-asterisk {
     color: $red !important;
     font-size: 8px;
-    padding-left: 4px;
+    @include padding(null, null, null, 4px);
     line-height: 100%;
     vertical-align: top;
 }
diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss
index 64c6ecbdf..3634f0946 100644
--- a/src/components/progress-bar/progress-bar.scss
+++ b/src/components/progress-bar/progress-bar.scss
@@ -1,18 +1,17 @@
 $core-progress-bar-height: 5px !default;
 
 core-progress-bar {
-    padding-right: 55px;
+    @include padding(null, 55px, null, null);
     position: relative;
     display: block;
     @extend .clearfix;
 
     .core-progress-text {
-        margin-left: 10px;
+        @include margin(null, null, null, 10px);
         line-height: normal;
         font-size: 1.4rem;
         color: $gray-darker;
-        right: 0;
-        top: -6px;
+        @include position(-6px, 0, null, null);
         position: absolute;
     }
 
diff --git a/src/components/rich-text-editor/rich-text-editor.scss b/src/components/rich-text-editor/rich-text-editor.scss
index 2ca2e51b4..f6bd913d1 100644
--- a/src/components/rich-text-editor/rich-text-editor.scss
+++ b/src/components/rich-text-editor/rich-text-editor.scss
@@ -33,7 +33,7 @@ core-rich-text-editor {
         overflow-y: auto;
         cursor: text;
         img {
-            padding-left: 2px;
+            @include padding(null, null, null, 2px);
             max-width: 95%;
         }
         &:empty:before {
@@ -66,7 +66,7 @@ core-rich-text-editor {
             }
             ul, ol {
                 list-style-position: inside;
-                margin-left: 15px;
+                @include margin(null, null, null, 15px);
             }
         }
     }
@@ -89,7 +89,7 @@ core-rich-text-editor {
 
     div.core-rte-toolbar {
         background: $gray-darker;
-        margin: 0px 1px 15px 1px;
+        @include margin(0px, 1px, 15px, 1px);
         text-align: center;
         flex-grow: 0;
         width: 100%;
@@ -108,10 +108,10 @@ core-rich-text-editor {
                 font-size: 1.1em;
                 height: 35px;
                 min-width: 30px;
-                padding-left: 3px;
-                padding-right: 3px;
-                border-right: 1px solid $gray-dark;
+                @include padding(null, 3px, null, 3px);
+                @include border-end(qpx, solid, $gray-dark);
                 border-bottom: 1px solid $gray-dark;
+                @include position(-6px, 0, null, null);
                 flex-grow: 1;
                 margin: 0;
             }
diff --git a/src/components/show-password/show-password.scss b/src/components/show-password/show-password.scss
index ef9238aaa..fd66ae745 100644
--- a/src/components/show-password/show-password.scss
+++ b/src/components/show-password/show-password.scss
@@ -4,7 +4,7 @@ core-show-password {
     position: relative;
 
     ion-input input.text-input {
-        padding-right: 47px;
+        @include padding(null, 47px, null, null);
     }
 
     .button[icon-only] {
diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss
index 5472d55e2..f38027603 100644
--- a/src/components/split-view/split-view.scss
+++ b/src/components/split-view/split-view.scss
@@ -3,10 +3,7 @@ core-split-view {
         display: block;
 
         .menu-inner {
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
+            @include position(0, 0, 0, 0);
             -webkit-transform: initial;
             transform: initial;
             width: 100%;
@@ -24,15 +21,15 @@ core-split-view {
 
         .split-pane-side .core-split-item-selected {
             background-color: $gray-lighter;
-            border-left: 5px solid $core-splitview-selected;
+            @include border-start(5px, solid, $core-splitview-selected);
             &.item-md {
-                padding-left: $item-md-padding-start - 5px;
+                @include padding(null, null, null, $item-md-padding-start - 5px);
             }
             &.item-ios {
-                padding-left: $item-ios-padding-start - 5px;
+                @include padding(null, null, null, $item-ios-padding-start - 5px);
             }
             &.item-wp {
-                padding-left: $item-wp-padding-start - 5px;
+                @include padding(null, null, null, $item-wp-padding-start - 5px);
             }
         }
     }
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index fdac70174..ff246ed5d 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -1,5 +1,5 @@
 .core-tabs-bar {
-    left: 0;
+    @include position(null, null, null, 0);
     position: relative;
     z-index: $z-index-toolbar;
     display: flex;
diff --git a/src/core/course/components/format/format.scss b/src/core/course/components/format/format.scss
index 5596893e1..169018837 100644
--- a/src/core/course/components/format/format.scss
+++ b/src/core/course/components/format/format.scss
@@ -1,8 +1,7 @@
 ion-badge.core-course-download-section-progress {
     display: block;
-    float: left;
-    margin-top: 12px;
-    margin-right: 12px;
+    @include float(start);
+    @include margin(12px, 12px, null, null);
 }
 
 core-course-format {
diff --git a/src/core/course/components/module/module.scss b/src/core/course/components/module/module.scss
index e71fa5721..b77077df8 100644
--- a/src/core/course/components/module/module.scss
+++ b/src/core/course/components/module/module.scss
@@ -7,12 +7,10 @@ core-course-module {
         min-height: 52px;
 
         &.item .item-inner {
-            padding-right: 0;
+            @include padding(null, 0, null, null);
         }
         .label {
-            margin-top: 0;
-            margin-right: 0;
-            margin-bottom: 0;
+            @include margin(0, 0, 0, null);
         }
         .core-module-icon {
             align-items: flex-start;
@@ -55,11 +53,11 @@ core-course-module {
 
 .md core-course-module {
     .core-module-description {
-        padding-right: $label-md-margin-end;
+        @include padding(null, $label-md-margin-end, null, null);
         margin-bottom: $label-md-margin-bottom;
 
         .core-show-more {
-            padding-right: $label-md-margin-end;
+            @include padding(null, $label-md-margin-end, null, null);
         }
     }
 
@@ -85,11 +83,11 @@ core-course-module {
 
 .ios core-course-module {
     .core-module-description {
-        padding-right: $label-ios-margin-end;
+        @include padding(null, $label-ios-margin-end, null, null);
         margin-bottom: $label-md-margin-bottom;
 
         .core-show-more {
-            padding-right: $label-ios-margin-end;
+            @include padding(null, $label-ios-margin-end, null, null);
         }
     }
 
@@ -110,11 +108,11 @@ core-course-module {
 
 .wp core-course-module {
     .core-module-description {
-        padding-right: ($item-wp-padding-end / 2);
+        @include padding(null, $item-wp-padding-end / 2, null, null);
         margin-bottom: $label-md-margin-bottom;
 
         .core-show-more {
-            padding-right: ($item-wp-padding-end / 2);
+            @include padding(null, $item-wp-padding-end / 2, null, null);
         }
     }
 
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 242ed5c3b..1ad60e95b 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -33,7 +33,7 @@ core-courses-course-progress {
             padding-top: 8px;
             padding-bottom: 8px;
             .item-inner {
-                padding-right: 0;
+                @include padding(null, 0, null, null);
             }
             .label {
                 display: flex;
@@ -46,9 +46,7 @@ core-courses-course-progress {
             }
         }
         .label {
-            margin-top: 0;
-            margin-right: 0;
-            margin-bottom: 0;
+            @include margin(0, 0, 0, null);
         }
     }
 
diff --git a/src/core/courses/components/overview-events/core-courses-overview-events.html b/src/core/courses/components/overview-events/core-courses-overview-events.html
index 04764c65b..ff5aed5ec 100644
--- a/src/core/courses/components/overview-events/core-courses-overview-events.html
+++ b/src/core/courses/components/overview-events/core-courses-overview-events.html
@@ -5,7 +5,7 @@
         <p>{{event.timesort * 1000 | coreFormatDate:"dfmediumdate" }} <core-format-text *ngIf="showCourse" [text]="event.course.fullnamedisplay"></core-format-text></p>
         <button ion-button clear item-end class="hidden-phone" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
             {{event.action.name}}
-            <ion-badge item-end margin-left *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
+            <ion-badge item-end margin-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
         </button>
         <ion-badge class="hidden-tablet" item-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
     </a>
diff --git a/src/core/emulator/pages/capture-media/capture-media.scss b/src/core/emulator/pages/capture-media/capture-media.scss
index 58bb5d1a2..2b605ada2 100644
--- a/src/core/emulator/pages/capture-media/capture-media.scss
+++ b/src/core/emulator/pages/capture-media/capture-media.scss
@@ -2,10 +2,7 @@ page-core-emulator-capture-media {
     ion-content {
         .core-av-wrapper {
             position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
+            @include position(0, 0, 0, 0);
             margin: 0;
             padding: 0;
             clear: both;
diff --git a/src/core/grades/components/course/course.scss b/src/core/grades/components/course/course.scss
index 2559d03e2..73db3bf79 100644
--- a/src/core/grades/components/course/course.scss
+++ b/src/core/grades/components/course/course.scss
@@ -10,9 +10,7 @@ core-grades-course {
       border-bottom: 1px solid $list-border-color;
     }
     th, td {
-      padding-top: 10px;
-      padding-bottom: 10px;
-      padding-right: 10px;
+      @include padding(10px, 10px, 10px, null);
       vertical-align: top;
       white-space: normal;
       text-align: left;
@@ -26,15 +24,15 @@ core-grades-course {
       font-weight: normal;
     }
     #gradeitem {
-      padding-left: 5px;
+      @include padding(null, null, null, 5px);
     }
 
     .core-grades-table-gradeitem {
-      padding-left: 5px;
+      @include padding(null, null, null, 5px);
       font-weight: bold;
 
       &.column-itemname {
-        padding-left: 0;
+        @include padding(null, null, null, 0);
       }
 
       img {
@@ -46,7 +44,7 @@ core-grades-course {
       }
     }
     .core-grades-table-feedback {
-      padding-left: 5px;
+      @include padding(null, null, null, 5px);
       .no-overflow {
         overflow: auto;
       }
diff --git a/src/core/login/pages/init/init.scss b/src/core/login/pages/init/init.scss
index 3b164ea59..bdce290f9 100644
--- a/src/core/login/pages/init/init.scss
+++ b/src/core/login/pages/init/init.scss
@@ -8,10 +8,7 @@ page-core-login-init {
     }
     .core-bglogo {
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        @include position(0, 0, 0, 0);
         height: 100%;
         width: 100%;
         display: table;
diff --git a/src/core/login/pages/reconnect/reconnect.scss b/src/core/login/pages/reconnect/reconnect.scss
index b51923a7f..8ae1f4565 100644
--- a/src/core/login/pages/reconnect/reconnect.scss
+++ b/src/core/login/pages/reconnect/reconnect.scss
@@ -42,17 +42,17 @@ page-core-login-reconnect {
 
     .list .core-username {
         &.item-md {
-            @include padding-horizontal($item-md-padding-left, $content-padding);
+            @include padding-horizontal($item-md-padding-start, $content-padding);
         }
         &.item-ios {
-            @include padding-horizontal($item-ios-padding-left, $content-padding);
+            @include padding-horizontal($item-ios-padding-start, $content-padding);
         }
         &.item-wp {
-            @include padding-horizontal($item-wp-padding-left, $content-padding);
+            @include padding-horizontal($item-wp-padding-start, $content-padding);
         }
 
         .item-inner {
-            padding-left: 8px;
+            @include padding(null, null, null, 8px);
         }
     }
 
diff --git a/src/core/user/pages/profile/profile.scss b/src/core/user/pages/profile/profile.scss
index cb0594deb..f51ba5364 100644
--- a/src/core/user/pages/profile/profile.scss
+++ b/src/core/user/pages/profile/profile.scss
@@ -1,8 +1,7 @@
 page-core-user-profile {
     .core-icon-foreground {
         position: relative;
-        left: 60px;
-        bottom: 30px;
+        @include position(null, null, 30px, 60px);
         font-size: 24px;
     }
     .core-user-communication-handlers {
@@ -34,7 +33,7 @@ page-core-user-profile {
 
     .core-user-profile-handler {
         ion-spinner {
-            margin-left: 0.3em;
+            @include margin(null, null, null, 0.3em);
         }
     }
 }
\ No newline at end of file
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index c5019ea2c..710a17c5f 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -254,6 +254,27 @@ $core-question-state-incorrect-color: $red-light !default;
   background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$color}'/></svg>") !important;
 }
 
+@mixin border-start($px, $type, $color) {
+  @include ltr() {
+      border-left: $px $type $color;
+  }
+
+  @include rtl() {
+      border-right: $px $type $color;
+  }
+}
+
+
+@mixin border-end($px, $type, $color) {
+  @include ltr() {
+      border-right: $px $type $color;
+  }
+
+  @include rtl() {
+      border-left: $px $type $color;
+  }
+}
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";