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

4
sass/init/_mixins.scss
View file

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

4
sass/init/_reset.scss
View file

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

38
sass/navigation/_index.scss
View file

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

16
sass/table.scss
View file

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