LBRYCommunity/components
1
0
Fork 0
Code Issues1 Pull requests7 Projects Releases Packages Wiki Activity

support for RTL languages

Browse source
This commit is contained in:
Sana Ben_Hassouna 2020-06-30 19:54:20 +02:00 • committed by Sana Ben_Hassouna
parent 59b8a42319
commit 7afba6345d
5 changed files with 50 additions and 50 deletions

38
sass/form.scss
View file

@ -9,8 +9,8 @@ select {
color: var(--color-input); color: var(--color-input);
border-color: var(--color-input-border); border-color: var(--color-input-border);
background-color: var(--color-input-bg); background-color: var(--color-input-bg);
padding-right: var(--spacing-s); padding-inline-end: var(--spacing-s);
padding-left: var(--spacing-s); padding-inline-start: var(--spacing-s);
&:focus { &:focus {
@include focus; @include focus;
@ -109,14 +109,14 @@ input-submit {
} }
& > *:first-child { & > *:first-child {
border-top-right-radius: 0; border-start-end-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
border-right: none; border-inline-end: none;
} }
& > *:nth-child(2) { & > *:nth-child(2) {
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-end-start-radius: 0;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }
} }
@ -131,7 +131,7 @@ input-submit {
width: var(--height-checkbox); width: var(--height-checkbox);
position: absolute; position: absolute;
border: none; border: none;
left: 0; inset-inline-start: 0;
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
@ -146,7 +146,7 @@ input-submit {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
font-size: var(--font-base); font-size: var(--font-base);
padding-left: calc(var(--height-checkbox) + var(--spacing-s)); padding-inline-start: calc(var(--height-checkbox) + var(--spacing-s));
min-height: var(--height-checkbox); min-height: var(--height-checkbox);
&::before { &::before {
@ -191,8 +191,8 @@ input-submit {
width: var(--height-checkbox); width: var(--height-checkbox);
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
left: 0px; inset-inline-start: 0px;
top: -1px; inset-block-start: -1px;
} }
// Checkmark of the fake checkbox // Checkmark of the fake checkbox
@ -203,8 +203,8 @@ input-submit {
border-bottom: 2px solid; border-bottom: 2px solid;
border-color: var(--color-input-toggle); border-color: var(--color-input-toggle);
transform: rotate(-45deg); transform: rotate(-45deg);
left: 6px; inset-inline-start: 6px;
top: 6px; inset-block-start: 6px;
} }
} }
@ -219,8 +219,8 @@ input-submit {
width: var(--height-radio); width: var(--height-radio);
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
border-radius: calc(var(--height-radio) * 0.5); border-radius: calc(var(--height-radio) * 0.5);
left: 0px; inset-inline-start: 0px;
top: -1px; inset-block-start: -1px;
} }
// Checkmark of the fake radio // Checkmark of the fake radio
@ -229,8 +229,8 @@ input-submit {
width: 12px; width: 12px;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-secondary); background-color: var(--color-secondary);
left: 6px; inset-inline-start: 6px;
top: 5px; inset-block-start: 5px;
} }
} }
@ -244,10 +244,10 @@ input-submit {
text-align: center; text-align: center;
&:first-of-type { &:first-of-type {
text-align: left; text-align: inline-start;
} }
&:last-of-type { &:last-of-type {
text-align: right; text-align: inline-end;
} }
} }
} }

4
sass/init/_mixins.scss
View file

@ -104,7 +104,7 @@
&::after { &::after {
width: 50%; width: 50%;
height: calc(#{$element-height} / #{$row-count}); height: calc(#{$element-height} / #{$row-count});
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
background-image: linear-gradient( background-image: linear-gradient(
@ -186,7 +186,7 @@
} }
&::before { &::before {
float: left; float: inline-start;
padding-top: var(--aspect-ratio-standard); padding-top: var(--aspect-ratio-standard);
} }

4
sass/init/_reset.scss
View file

@ -93,7 +93,7 @@ table {
dd { dd {
width: 80%; width: 80%;
float: left; float: inline-start;
} }
dl { dl {
@ -104,7 +104,7 @@ dl {
dt { dt {
width: 20%; width: 20%;
float: left; float: inline-start;
} }
img { img {

38
sass/navigation/_index.scss
View file

@ -14,18 +14,18 @@ drawer-navigation-helper {
// This is to make mouse movement forgiving // This is to make mouse movement forgiving
width: 0; width: 0;
height: 0; height: 0;
top: 3rem; inset-block-start: 3rem;
left: -5rem; inset-inline-start: -5rem;
border-right: 8rem solid transparent; border-inline-end: 8rem solid transparent;
border-bottom: 5rem solid transparent; border-block-end: 5rem solid transparent;
border-left: 8rem solid transparent; border-inline-start: 8rem solid transparent;
position: absolute; position: absolute;
} }
drawer-section { drawer-section {
padding-right: 1rem; padding-inline-end: 1rem;
padding-left: 1rem; padding-inline-start: 1rem;
&:not(:hover):not(.active) { &:not(:hover):not(.active) {
drawer-title::after { drawer-title::after {
@ -60,8 +60,8 @@ drawer-title {
&::after { &::after {
width: 100%; width: 100%;
height: 1px; height: 1px;
bottom: -1px; inset-block-end: -1px;
left: 0; inset-inline-start: 0;
content: ""; content: "";
position: absolute; position: absolute;
@ -71,20 +71,20 @@ drawer-title {
drawer-wrap { drawer-wrap {
width: 100%; width: 100%;
top: 5rem; inset-block-start: 5rem;
left: 0; inset-inline-start: 0;
background-color: var(--color-white); background-color: var(--color-white);
border-top: 1px solid var(--color-gray-1); border-block-start: 1px solid var(--color-gray-1);
padding-top: 2rem; padding-block-start: 2rem;
padding-bottom: 2rem; padding-block-end: 2rem;
position: absolute; position: absolute;
&::after { &::after {
width: 100vw; width: 100vw;
height: calc(100vh - 5rem); height: calc(100vh - 5rem);
top: 5rem; inset-block-start: 5rem;
left: 0; inset-inline-start: 0;
background-color: var(--color-black); background-color: var(--color-black);
content: ""; content: "";
@ -112,7 +112,7 @@ drawer-child {
&:hover { &:hover {
border-color: var(--color-gray-1); border-color: var(--color-gray-1);
padding-left: var(--spacing-m); padding-inline-start: var(--spacing-m);
> a { > a {
color: var(--lbry-primary); color: var(--lbry-primary);
@ -129,7 +129,7 @@ drawer-child {
span { span {
display: flex; display: flex;
padding-top: 0.25rem; padding-block-start: 0.25rem;
padding-bottom: 0.25rem; padding-block-end: 0.25rem;
} }
} }

16
sass/table.scss
View file

@ -7,11 +7,11 @@
overflow: hidden; overflow: hidden;
&:first-of-type { &:first-of-type {
padding-left: var(--spacing-l); padding-inline-start: var(--spacing-l);
} }
&:last-of-type { &:last-of-type {
padding-right: var(--spacing-l); padding-inline-end: var(--spacing-l);
} }
} }
@ -20,14 +20,14 @@
position: relative; position: relative;
th { th {
border-bottom: 1px solid var(--color-border); border-block-end: 1px solid var(--color-border);
} }
} }
tr { tr {
&:not(:last-of-type) { &:not(:last-of-type) {
td { td {
border-bottom: 1px solid var(--color-border); border-block-end: 1px solid var(--color-border);
} }
} }
@ -43,7 +43,7 @@
} }
th { th {
text-align: left; text-align: inline-start;
} }
td { td {
@ -60,11 +60,11 @@ td {
padding: 0.5rem; padding: 0.5rem;
&:first-of-type { &:first-of-type {
padding-left: 0; padding-inline-start: 0;
} }
&:last-of-type { &:last-of-type {
padding-right: 0; padding-inline-end: 0;
} }
} }
@ -82,5 +82,5 @@ td {
} }
.table__item--align-right { .table__item--align-right {
text-align: right; text-align: inline-end;
} }