Fixed all issues related to RTL direction of Spectre #505
Conversation
| background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat left .35rem center/.4rem .5rem; | ||
| padding-left: $control-icon-size + $control-padding-x; | ||
| } @else { | ||
| background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem; |
There was a problem hiding this comment.
Color literals like #fff should only be used in variable declarations; they should be referred to via variable everywhere else.center/.4rem should be written with a single space on each side of the operator: center / .4rem
| padding-right: $control-icon-size + $control-padding-x; | ||
|
|
||
| @if $rtl == true { | ||
| background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat left .35rem center/.4rem .5rem; |
There was a problem hiding this comment.
Color literals like #fff should only be used in variable declarations; they should be referred to via variable everywhere else.center/.4rem should be written with a single space on each side of the operator: center / .4rem
| margin-left: -$unit-2; | ||
| margin-right: $unit-1; | ||
| @if $rtl == true { | ||
| margin-right: -$unit-2; |
There was a problem hiding this comment.
Properties should be ordered margin-left, margin-right
| } | ||
| } | ||
| &.range-end { | ||
| &::before { | ||
| right: 19px; | ||
| &::before { |
There was a problem hiding this comment.
Line contains trailing whitespace
Nesting should be no greater than 4, but was 5
| @@ -189,14 +197,24 @@ | |||
| top: 19px; | |||
| } | |||
| &.range-start { | |||
| &::before { | |||
| left: auto; | |||
| &::before { | |||
There was a problem hiding this comment.
Line contains trailing whitespace
Nesting should be no greater than 4, but was 5
| opacity: 1; | ||
| padding: 0; | ||
| text-decoration: none; | ||
| width: $unit-4; | ||
|
|
||
| @if $rtl == true { | ||
| margin-right: $unit-1; |
There was a problem hiding this comment.
Properties should be ordered margin-left, margin-right
| border-bottom-left-radius: $border-radius; | ||
| border-top-left-radius: $border-radius; | ||
| } | ||
|
|
| @@ -25,13 +25,27 @@ | |||
| width: 0; | |||
|
|
|||
| &:first-child { | |||
| border-bottom-left-radius: $border-radius; | |||
| border-top-left-radius: $border-radius; | |||
|
|
|||
| @@ -42,8 +42,14 @@ | |||
| &::after { | |||
| position: absolute; | |||
| top: 0; | |||
| right: 0; | |||
| transform: translate(50%, -50%); | |||
|
|
|||
| @@ -3,8 +3,12 @@ | |||
| input:checked ~, | |||
| &[open] { | |||
| & .accordion-header { | |||
| .icon { | |||
| transform: rotate(90deg); | |||
| .icon { | |||
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
Line contains trailing whitespace
Since the language i design my websites with is Persian and it's an RTL language, i checked all the components, layout, elements, utilities and even experimentals in RTL mode and fixed all issues i found based on examples in documents.