Updated styles to use logical properties/values

- Intended to improve RTL support in the interface.
- Also adds hebrew to language dropdown since that was missing.

Related to #1794
This commit is contained in:
Dan Brown
2020-04-05 13:07:19 +01:00
parent f84bf8e883
commit f94fd44ff6
21 changed files with 228 additions and 184 deletions

View File

@ -4,10 +4,10 @@
*/
.container {
max-width: $xxl;
margin-left: auto;
margin-right: auto;
padding-left: $-m;
padding-right: $-m;
margin-inline-start: auto;
margin-inline-end: auto;
padding-inline-start: $-m;
padding-inline-end: $-m;
&.small {
max-width: 840px;
}
@ -198,8 +198,8 @@ body.flexbox {
*/
.tri-layout-container {
display: grid;
margin-left: $-xl;
margin-right: $-xl;
margin-inline-start: $-xl;
margin-inline-end: $-xl;
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c";
grid-column-gap: $-xxl;
@ -223,7 +223,7 @@ body.flexbox {
". b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: min-content min-content 1fr;
padding-right: $-l;
padding-inline-end: $-l;
}
}
@include between($l, $xxl) {
@ -258,11 +258,11 @@ body.flexbox {
grid-template-areas: none;
grid-template-columns: 1fr;
grid-column-gap: 0;
padding-right: $-xs;
padding-left: $-xs;
padding-inline-end: $-xs;
padding-inline-start: $-xs;
.tri-layout-left-contents, .tri-layout-right-contents {
padding-left: $-m;
padding-right: $-m;
padding-inline-start: $-m;
padding-inline-end: $-m;
}
.tri-layout-left > *, .tri-layout-right > * {
display: none;
@ -316,7 +316,7 @@ body.flexbox {
@include smaller-than($m) {
.tri-layout-container {
margin-left: 0;
margin-right: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
}