Merge pull request #13026 from OmarIthawi/edraak/goup-config-rtl

Major RTL refactor for the group configuration in Studio

cms/static/sass/views/_group-configuration.scss

@@ -4,12 +4,12 @@
 
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
+    @include float(left);
   }
 
   .content-primary {
+    @include margin-right(flex-gutter());
     width: flex-grid(9, 12);
-    margin-right: flex-gutter();
 
     .notice-moduledisabled {
       @extend %ui-well;
@@ -59,12 +59,12 @@
           @extend %cont-truncated;
           @extend %t-title5;
           @extend %t-strong;
-          margin-right: ($baseline*14);
+          @include margin-right($baseline*14);
           color: $black;
 
           .toggle {
+            @include padding-left($baseline);
             display: inline-block;
-            padding-left: $baseline;
             color: $black;
 
             &:hover, &:focus {
@@ -74,10 +74,17 @@
             .ui-toggle-expansion {
               @include transition(rotate .15s ease-in-out .25s);
               @extend %t-action1;
+              @include margin-left(-$baseline);
               display: inline-block;
               width: ($baseline*0.75);
               vertical-align: baseline;
-              margin-left: -$baseline;
+
+              &.fa-caret-right:before {
+                @include rtl {
+                  // Flip to fa-caret-left on RTL
+                  content: "\f0d9";
+                }
+              }
             }
 
             &.is-selectable {
@@ -97,18 +104,18 @@
 
       .collection-info {
         @extend %t-copy-sub1;
+        @include margin-left($baseline);
         color: $gray-l1;
-        margin-left: $baseline;
 
         &.group-configuration-info-inline {
+          @include margin($baseline/4, 0, $baseline/2, $baseline);
           display: table;
           width: 70%;
-          margin: ($baseline/4) 0 ($baseline/2) $baseline;
 
           li {
             @include box-sizing(border-box);
+            @include margin-right(1%);
             display: table-cell;
-            margin-right: 1%;
 
             &.group-configuration-usage-count {
               font-style: italic;
@@ -123,14 +130,14 @@
         }
 
         &.collection-info-inline {
+          @include margin($baseline/4, 0, $baseline/2, $baseline);
           display: table;
           width: 70%;
-          margin: ($baseline/4) 0 ($baseline/2) $baseline;
 
           li {
             @include box-sizing(border-box);
+            @include margin-right(1%);
             display: table-cell;
-            margin-right: 1%;
             padding: ($baseline/4) 0;
 
             &.collection-usage-count {
@@ -150,7 +157,7 @@
       }
 
       .collection-items {
-        margin-left: $baseline;
+        @include margin-left($baseline);
         margin-bottom: ($baseline*0.75);
 
         .item {
@@ -164,12 +171,12 @@
           }
 
           .name {
+            @include margin-right(5%);
             overflow: hidden;
             text-overflow: ellipsis;
             display: inline-block;
             vertical-align: middle;
             width: 75%;
-            margin-right: 5%;
           }
         }
       }
@@ -178,15 +185,15 @@
 
         .actions {
           @include transition(opacity .15s .25s ease-in-out);
+          @include right($baseline);
           position: absolute;
           top: $baseline;
-          right: $baseline;
           opacity: 0.0;
 
           .action {
+            @include margin-right($baseline/4);
             display: inline-block;
             vertical-align: middle;
-            margin-right: ($baseline/4);
 
             .edit {
               @extend %ui-btn-non-blue;
@@ -206,8 +213,8 @@
 
       .collection-references {
         @extend %t-copy-sub1;
+        @include padding($baseline, $baseline*1.5, $baseline, $baseline*2.5);
         box-shadow: 0 2px 2px 0 $shadow inset;
-        padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5);
         color: $gray-l1;
 
         .usage {
@@ -221,12 +228,12 @@
             }
 
             .fa-warning {
-              margin: ($baseline/4) ($baseline/2) 0 ($baseline*1.5);
+              @include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
               color: $orange;
             }
 
             .fa-times-circle {
-              margin: ($baseline/4) ($baseline/2) 0 ($baseline*1.5);
+              @include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
               color: $red-l2;
             }
           }
@@ -235,14 +242,14 @@
 
       .usage-validation {
         @extend %t-copy-sub1;
+        @include padding($baseline, $baseline*1.5, $baseline, $baseline*1.5);
         background-color: $gray-l6;
         margin-top: $baseline;
-        padding: $baseline ($baseline*1.5) $baseline ($baseline*1.5);
 
         .fa-warning {
-          margin: ($baseline/2) $baseline 0 0;
+          @include margin($baseline/2, $baseline, 0, 0);
+          @include float(left);
           color: $orange;
-          float: left;
         }
 
         .collection-validation-text {
@@ -283,7 +290,7 @@
         }
 
         .field {
-          margin: 0 0 ($baseline*0.75) 0;
+          @include margin(0, 0, $baseline*0.75, 0);
 
           &:last-child {
             @extend %wipe-last-child;
@@ -296,7 +303,7 @@
             }
 
             label:after {
-              margin-left: ($baseline/4);
+              @include margin-left($baseline/4);
               content: "*";
             }
           }
@@ -312,7 +319,7 @@
           label {
             @extend %t-copy-sub1;
             @include transition(color, 0.15s, ease-in-out);
-            margin: 0 0 ($baseline/4) 0;
+            @include margin(0, 0, $baseline/4, 0);
 
             &.is-focused {
               color: $blue;
@@ -372,7 +379,7 @@
           @extend %t-strong;
 
           &:after {
-            margin-left: ($baseline/4);
+            @include margin-left($baseline/4);
             content: "*";
           }
         }
@@ -387,16 +394,16 @@
           }
 
           .group-configuration-id {
+            @include text-align(right);
             display: inline-block;
             width: 45%;
-            text-align: right;
             vertical-align: top;
             color: $gray-l1;
 
             .group-configuration-value {
               @extend %t-strong;
+              @include margin-left($baseline*0.5);
               white-space: nowrap;
-              margin-left: ($baseline*0.5);
             }
           }
         }
@@ -409,10 +416,10 @@
           background: $gray-l6;
 
           .action {
-            margin-right: ($baseline/4);
+            @include margin-right($baseline/4);
 
             &:last-child {
-              margin-right: 0;
+              @include margin-right(0);
             }
           }
 
@@ -428,7 +435,7 @@
           }
 
           .wrapper-delete-button {
-            float: right;
+            @include float(right);
             padding: ($baseline/4) ($baseline/2);
 
             .is-disabled {
@@ -439,7 +446,7 @@
 
         .copy {
           @extend %t-copy-sub2;
-          margin: ($baseline) 0 ($baseline/2) 0;
+          @include margin($baseline, 0, $baseline/2, 0);
           color: $gray;
 
           strong {
@@ -452,9 +459,9 @@
         @extend %ui-btn-flat-outline;
         @extend %t-action2;
         @extend %t-strong;
+        @include margin($baseline*1.5, 0, 0, 0);
         display: block;
         width: 100%;
-        margin: ($baseline*1.5) 0 0 0;
         padding: ($baseline/2);
       }
     }
@@ -472,9 +479,9 @@
       }
 
       .icon {
+        @include margin-right($baseline/2);
         display: inline-block;
         vertical-align: middle;
-        @include margin-right($baseline/2);
       }
     }
 
@@ -495,8 +502,8 @@
 
         .group-configuration-info {
           @extend %t-copy-sub1;
+          @include margin-left($baseline);
           color: $gray-l1;
-          margin-left: $baseline;
 
           .group-configuration-label {
             text-transform: uppercase;
@@ -509,7 +516,7 @@
         }
 
         .groups {
-          margin-left: $baseline;
+          @include margin-left($baseline);
           margin-bottom: ($baseline*0.75);
 
           .group {
@@ -523,20 +530,20 @@
             }
 
             .group-name {
+              @include margin-right(5%);
               overflow: hidden;
               text-overflow: ellipsis;
               display: inline-block;
               vertical-align: middle;
               width: 75%;
-              margin-right: 5%;
             }
 
             .group-allocation {
+              @include text-align(right);
               display: inline-block;
               vertical-align: middle;
               width: 20%;
               color: $gray-l1;
-              text-align: right;
             }
           }
         }
@@ -545,7 +552,7 @@
       .group-configuration-edit {
 
         .add-collection-name label {
-          padding-right: 5%;
+          @include padding-right(5%);
           overflow: hidden;
           text-overflow: ellipsis;
           vertical-align: bottom;
@@ -553,14 +560,14 @@
 
         .field-group {
           @include clearfix();
-          margin: 0 0 ($baseline/2) 0;
-          padding: ($baseline/4) 0 0 0;
+          @include margin(0, 0, $baseline/2, 0);
+          @include padding($baseline/4, 0, 0, 0);
 
           .group-allocation,
           .field {
+            @include margin(0, 3%, 0, 0);
             display: inline-block;
             vertical-align: middle;
-            margin: 0 3% 0 0;
           }
 
           .group-allocation {