fix(spinner): RTL fix for Spinner

[sijav]

Short description of what this resolves:

This will fix bubbles and circles spinner on RTL

Changes proposed in this pull request:

• as spinners are only clockwise we should not use position mixin and instead use multi-dir mixin

Ionic Version: 3.x

Fixes: #11211

[sijav]

@AmitMY @brandyscarney
any update for this?
we still have this bug for 3.7.1 on RTL

[AmitMY]

@kensodemann It shouldn't be hard to merge this both in master and in core. Can you please see if this can be done for the next version?

[kensodemann]

LGTM, I am fine merging it if @brandyscarney is.

Question: would this be more maintainable?

@include multi-dir() {
  @include position(0, null, null, 0);
}

I wasn't completely sure if that would work once I started following the chain of mixins down.

[sijav]

@kensodemann but putting position mixin inside multi-dir mixin is not make any sense. let me explain the problem here.
The whole problem with bubbles and circles is that on spinner.ts we use left style (regardless of site's direction RTL or LTR) for placing the dots SVGs on the correct position, now when we use position mixin it would result in placing right: 0; in the css instead of left style on RTL so the left style on SVG element won't replace the inheritance hence they always position at right: 0; on RTL regardless of different left style on SVG element itself.

Bottom line is we have two options:

1. modify spinner.ts file and change that it checks for direction (RTL and LTR) before putting left style on SVG elements and use right style in case of RTL.
2. modify spinner.scss file and hard-codedly put left: 0; regardless of site's direction the same as .ts.
   As sass modifications is always preferred, I think changing sass and putting hard-coded left value is not a total bad idea.

[AmitMY]

@kensodemann It was a bit before your time, so just to let you know, I am the one who wrote the SCSS Mixins for directional support, signed off by brandy.
This looks good to me.

I made this entire process semi automatic, so issues like this happen, and they are my bad.
This is the best fix for this situation

[kensodemann]

@sijav - thank you for the explanation, that was helpful

[Ionitron]

Hello and thank you for contributing to Ionic! We have been working on porting all of the Ionic components to web components and have recently updated master to reflect this. This significant change has caused this pull request to break. While we really appreciate the time and effort you put into creating this, we are not able to merge it because of the newly introduced conflicts. We are extremely sorry about this. We will not be merging any more features in to v3. If this is a feature and you have the time, please resubmit this PR against the master branch. If this is a critical security issue in v3, we would greatly appreciate it if you would resubmit the PR against the new v3 branch. Thanks so much for your time!