fix: Logical properties improve rtl support

[drmason13]

This is similar to #560 by shuuji3 but it edits the scss files, runs the build to generate css and isn't limited to only left/right properties. It modifies top/bottom properties too.

I haven't tested I'm afraid, but I believe this will fix #591 (albeit, the button will still be on the "wrong" side, the order of HTML elements being reversed is intended behavior.)

First time contributing, so let me know if I can clean up the commits (probably wants squashing) to improve this.

And finally, thank you for this framework, it is very beautiful with good semantics.

FYI: this is a find/replace job if you want to do this yourself:

• s/border-top-left-/border-start-start-/
• s/border-top-right-/border-end-start-/
• s/border-bottom-left-/border-start-end-/
• s/border-bottom-right-/border-end-end-/
• s/-left:/-inline-start:/
• s/-right:/-inline-end:/
• s/-top:/-block-start:/
• s/-bottom:/-block-end:/
• s/text-align: left/text-align: start/
• s/text-align: right/text-align: end/

There's probably a postcss plugin for this now that I think about it. And yeah, the border-radius logical properties do look backwards but they're correct: https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius