feat(rtl): optimize the new mixins for smaller bundle, ltr separation (…

…#11635)

* refactor(item): replaced item-left with item-start
replaced item-right with item-end

* style(item): fix spacing

* fix(item): add backwards support for left/right in ng-content

* fix(item): deprecated old variables, not breaking change

* feat(rtl): padding mixin

* feat(rtl): change all padding variables to start/end
add support for old variable names

* feat(rtl): replace all padding-side with start/end

* revert(functions): remove mixins

* feat(scss): add padding-horizontal and rtl functions (thanks brandy)

* feat(padding): use padding horizontal mixin everywhere

* feat(padding): use padding horizontal mixin everywhere

* fix(lint): change properties order. tests passing

* fix(sass-functions): reorder functions to avoid warning

* fix(scss): fix variable name

* perf(rtl): add check if need rtl selector

* feat(scss): add full padding function

* feat(scss): add border-radius mixin

* fix(rtl): change border-radius to use mixin

* perf(scss): only override if has something to override

* feat(scss): add margin scss variables for sides

* feat(scss): add margin mixin

* fix(scss): fix wrong support for 2/3 args

* feat(rtl): spread margins/paddings

* feat(rtl): spread margins/paddings

* feat(position): add rtl support for absolute

* fix(rtl): add missing calls

* fix(item): old attributes deprecated support

* revert(changelog): not intended to be changed

* fix(sass-functions): and not &&

* fix(padding): merge + missing padding

* style(): remove newline

* refactor(mixins): move mixins to mixins file

* style(): fix alignment

* fix(item): right padding should not be set

* fix(): incorrect defaults

* feat(scss-lint): disable some side variables

* fix(scss): lint passes

* feat(lint): disabled text-align

* fix(): correct variable name

* fix(fab): missed a comma

* fix(rtl): rtl method incorrect for multiple selectors

* fix(rtl): toolbar bad merge

* fix(rtl): icon-only is in px not em

* fix(rtl): toggle padding

* feat(rtl): correct notation for rtl custom

* Merge branch 'breaking-item' into start-end

# Conflicts:
#	src/components/checkbox/checkbox.ios.scss
#	src/components/checkbox/checkbox.md.scss
#	src/components/checkbox/checkbox.wp.scss
#	src/components/item/item.ios.scss
#	src/components/item/item.md.scss
#	src/components/item/item.wp.scss
#	src/components/radio/radio.ios.scss
#	src/components/radio/radio.md.scss
#	src/components/radio/radio.wp.scss
#	src/components/toggle/toggle.ios.scss
#	src/components/toggle/toggle.md.scss
#	src/components/toggle/toggle.wp.scss

* feat(rtl): optimize bundle result

* feat(float): use new standard

* feat(platform): gotta have direction on html

* fix(scss): add import + change code order

* fix(lint): passes

* fix(scss): fix for deprecated usages

* fix(scss): property use #{}

* fix(rtl): change css specificity, increase bundle size for multidirectional

* fix(scss): mixin manages priority

* fix(scss): select icon

* fix(scss): correct range variable

* fix(lint): unused import

* fix(multi-dir): things that ignore PropertySpelling must be under multi-dir

* fix(multi-dir): things that ignore PropertySpelling must be under multi-dir

* fix(include-rtl): change to app-direction, to be able to set rtl only apps

* fix(rtl): remove incorrect split-pane rtl behavior

* fix(menu): start needs position on rtl

* fix(float): renamed test file, add float mixin

* fix(scss-lint): lint excluded files

* fix(scss): add missing unit

* refactor(scss): change dir to direction, as the correct property name

* fix(app-direction): replace last usage of include-rtl

Closes: #11805 #11914

.scss-lint.yml

@@ -5,11 +5,6 @@
 plugin_directories: ['.scss-linters']
 
 exclude:
-  - 'src/components/item/item.ios.scss'
-  - 'src/components/item/item.md.scss'
-  - 'src/components/list/list.ios.scss'
-  - 'src/components/show-hide-when/**'
-  - 'src/components/slides/**'
   - 'src/themes/ionic.mixins.scss'
   - 'src/themes/license.scss'
   - 'src/themes/util.scss'
@@ -61,11 +56,6 @@ linters:
       - justify-content
       - order
       -
-      - margin-top
-      - margin-bottom
-      - padding-top
-      - padding-bottom
-      -
       - width
       - min-width
       - max-width
@@ -193,27 +183,31 @@ linters:
     enabled: true
     style: double_quotes
 
+  SelectorDepth:
+    enabled: true
+    max_depth: 5
+
   PropertySpelling:
     extra_properties:
       - contain
     disabled_properties:
+      - direction
       - right
       - left
-
       - float
-
       - padding
       - padding-left
       - padding-right
-
+      - padding-top
+      - padding-bottom
       - margin
       - margin-left
       - margin-right
-
+      - margin-top
+      - margin-bottom
       - border-radius
       - border-top-left-radius
       - border-top-right-radius
       - border-bottom-right-radius
       - border-bottom-left-radius
-
       - text-align

src/components/action-sheet/action-sheet.ios.scss

@@ -97,16 +97,15 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 
 .action-sheet-ios .action-sheet-group {
   @include border-radius($action-sheet-ios-border-radius);
+  @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
 
   overflow: hidden;
 
-  margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
-
   background: $action-sheet-ios-background;
 }
 
 .action-sheet-ios .action-sheet-group:last-child {
-  margin-bottom: $action-sheet-ios-group-margin-bottom;
+  @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
 }
 
 .action-sheet-ios .action-sheet-title {
@@ -137,7 +136,7 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-button.activated {
-  margin-top: -$action-sheet-ios-button-border-width;
+  @include margin(-$action-sheet-ios-button-border-width, null, null, null);
 
   border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
   border-bottom-color: $action-sheet-ios-button-background-activated;

src/components/alert/alert.ios.scss

@@ -328,7 +328,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 }
 
 .alert-ios .alert-title {
-  margin-top: $alert-ios-title-margin-top;
+  @include margin($alert-ios-title-margin-top, null, null, null);
 
   font-size: $alert-ios-title-font-size;
   font-weight: $alert-ios-title-font-weight;

src/components/alert/alert.md.scss

@@ -414,7 +414,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }
 
 .alert-md .alert-input:focus {
-  margin-bottom: $alert-md-input-margin-bottom - 1;
+  @include margin(null, null, $alert-md-input-margin-bottom - 1, null);
 
   border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
 }

src/components/alert/alert.scss

@@ -35,9 +35,9 @@ ion-alert {
 }
 
 ion-alert.alert-top {
-  align-items: flex-start;
+  @include padding(50px, null, null, null);
 
-  padding-top: 50px;
+  align-items: flex-start;
 }
 
 ion-alert input {

src/components/alert/alert.wp.scss

@@ -608,7 +608,7 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 }
 
 .alert-wp .alert-button-group-vertical .alert-button {
-  margin-top: $alert-wp-button-group-vertical-margin-top;
+  @include margin($alert-wp-button-group-vertical-margin-top, null, null, null);
 
   width: $alert-wp-button-group-vertical-width;
 }

src/components/app/app.scss

@@ -145,8 +145,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1.6rem;
-  margin-bottom: 1rem;
+  @include margin(1.6rem, null, 1rem, null);
 
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
@@ -160,25 +159,25 @@ h6 {
   h5,
   h6 {
     &:first-child {
-      margin-top: -.3rem;
+      @include margin(-.3rem, null, null, null);
     }
   }
 }
 
 h1 + h2,
 h1 + h3,
 h2 + h3 {
-  margin-top: -.3rem;
+  @include margin(-.3rem, null, null, null);
 }
 
 h1 {
-  margin-top: 2rem;
+  @include margin(2rem, null, null, null);
 
   font-size: $h1-font-size;
 }
 
 h2 {
-  margin-top: 1.8rem;
+  @include margin(1.8rem, null, null, null);
 
   font-size: $h2-font-size;
 }
@@ -412,31 +411,19 @@ ion-footer {
       // Provide `[float-{bp}]` attributes for floating the element based
       // on the breakpoint
       [float#{$infix}-left] {
-        // scss-lint:disable ImportantRule, PropertySpelling
-        float: left !important;
+        @include float(left, !important);
       }
 
       [float#{$infix}-right] {
-        // scss-lint:disable ImportantRule, PropertySpelling
-        float: right !important;
+        @include float(right, !important);
       }
 
       [float#{$infix}-start] {
-        // scss-lint:disable ImportantRule, PropertySpelling
-        float: left !important;
-
-        @include rtl() {
-          float: right !important;
-        }
+        @include float(start, !important);
       }
 
       [float#{$infix}-end] {
-        // scss-lint:disable ImportantRule, PropertySpelling
-        float: right !important;
-
-        @include rtl() {
-          float: left !important;
-        }
+        @include float(end, !important);
       }
     }
   }

src/components/app/test/utilities/pages/root-page/root-page.html

@@ -60,51 +60,51 @@
   </ion-row>
 
   <div class="float-elements-row">
-    <div pull-left>pull-left</div>
-    <div pull-sm-left>pull-sm-left</div>
-    <div pull-md-left>pull-md-left</div>
-    <div pull-lg-left>pull-lg-left</div>
-    <div pull-xl-left>pull-xl-left</div>
+    <div float-left>float-left</div>
+    <div float-sm-left>float-sm-left</div>
+    <div float-md-left>float-md-left</div>
+    <div float-lg-left>float-lg-left</div>
+    <div float-xl-left>float-xl-left</div>
   </div>
 
   <div class="float-elements-row">
-    <div pull-right>pull-right</div>
-    <div pull-sm-right>pull-sm-right</div>
-    <div pull-md-right>pull-md-right</div>
-    <div pull-lg-right>pull-lg-right</div>
-    <div pull-xl-right>pull-xl-right</div>
+    <div float-right>float-right</div>
+    <div float-sm-right>float-sm-right</div>
+    <div float-md-right>float-md-right</div>
+    <div float-lg-right>float-lg-right</div>
+    <div float-xl-right>float-xl-right</div>
   </div>
 
   <div class="float-elements-row">
-    <div pull-start>pull-start</div>
-    <div pull-sm-start>pull-sm-start</div>
-    <div pull-md-start>pull-md-start</div>
-    <div pull-lg-start>pull-lg-start</div>
-    <div pull-xl-start>pull-xl-start</div>
+    <div float-start>float-start</div>
+    <div float-sm-start>float-sm-start</div>
+    <div float-md-start>float-md-start</div>
+    <div float-lg-start>float-lg-start</div>
+    <div float-xl-start>float-xl-start</div>
   </div>
 
   <div class="float-elements-row">
-    <div pull-end>pull-end</div>
-    <div pull-sm-end>pull-sm-end</div>
-    <div pull-md-end>pull-md-end</div>
-    <div pull-lg-end>pull-lg-end</div>
-    <div pull-xl-end>pull-xl-end</div>
+    <div float-end>float-end</div>
+    <div float-sm-end>float-sm-end</div>
+    <div float-md-end>float-md-end</div>
+    <div float-lg-end>float-lg-end</div>
+    <div float-xl-end>float-xl-end</div>
   </div>
 
   <div class="float-elements-row" dir="rtl">
-    <div pull-start>pull-start</div>
-    <div pull-sm-start>pull-sm-start</div>
-    <div pull-md-start>pull-md-start</div>
-    <div pull-lg-start>pull-lg-start</div>
-    <div pull-xl-start>pull-xl-start</div>
+    <div float-start>float-start</div>
+    <div float-sm-start>float-sm-start</div>
+    <div float-md-start>float-md-start</div>
+    <div float-lg-start>float-lg-start</div>
+    <div float-xl-start>float-xl-start</div>
   </div>
 
   <div class="float-elements-row" dir="rtl">
-    <div pull-end>pull-end</div>
-    <div pull-sm-end>pull-sm-end</div>
-    <div pull-md-end>pull-md-end</div>
-    <div pull-lg-end>pull-lg-end</div>
-    <div pull-xl-end>pull-xl-end</div>
+    <div float-end>float-end</div>
+    <div float-sm-end>float-sm-end</div>
+    <div float-md-end>float-md-end</div>
+    <div float-lg-end>float-lg-end</div>
+    <div float-xl-end>float-xl-end</div>
   </div>
 </ion-content>
 

src/components/card/card.ios.scss

@@ -133,7 +133,7 @@ $card-ios-header-color:                #333 !default;
 }
 
 .card-ios ion-list {
-  margin-bottom: 0;
+  @include margin(null, null, 0, null);
 }
 
 .card-ios > .item:last-child,
@@ -165,7 +165,7 @@ $card-ios-header-color:                #333 !default;
 
 .card-header-ios + .card-content-ios,
 .card-ios .item + .card-content-ios {
-  padding-top: 0;
+  @include padding(0, null, null, null);
 }
 
 .card .note-ios {
@@ -220,7 +220,7 @@ $card-ios-header-color:                #333 !default;
 }
 
 .card-ios + ion-card {
-  margin-top: 0;
+  @include margin(0, null, null, null);
 }
 
 

src/components/card/card.md.scss

@@ -138,7 +138,7 @@ $card-md-header-color:                #222 !default;
 }
 
 .card-md ion-list {
-  margin-bottom: 0;
+  @include margin(null, null, 0, null);
 }
 
 .card-md > .item:last-child,
@@ -169,7 +169,7 @@ $card-md-header-color:                #222 !default;
 
 .card-header-md + .card-content-md,
 .card-md .item + .card-content-md {
-  padding-top: 0;
+  @include padding(0, null, null, null);
 }
 
 .card .note-md {
@@ -229,7 +229,7 @@ $card-md-header-color:                #222 !default;
 }
 
 .card-md + ion-card {
-  margin-top: 0;
+  @include margin(0, null, null, null);
 }
 
 

src/components/card/card.wp.scss

@@ -139,7 +139,7 @@ $card-wp-header-color:                #222 !default;
 }
 
 .card-wp ion-list {
-  margin-bottom: 0;
+  @include margin(null, null, 0, null);
 }
 
 .card-wp > .item:last-child,
@@ -171,7 +171,7 @@ $card-wp-header-color:                #222 !default;
 
 .card-header-wp + .card-content-wp,
 .card-wp .item + .card-content-wp {
-  padding-top: 0;
+  @include padding(0, null, null, null);
 }
 
 .card .note-wp {
@@ -231,7 +231,7 @@ $card-wp-header-color:                #222 !default;
 }
 
 .card-wp + ion-card {
-  margin-top: 0;
+  @include margin(0, null, null, null);
 }