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
| &.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
| 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; | ||
| } | ||
|
|
| &:first-child { | ||
| border-bottom-left-radius: $border-radius; | ||
| border-top-left-radius: $border-radius; | ||
|
|
| top: 0; | ||
| right: 0; | ||
| transform: translate(50%, -50%); | ||
|
|
| & .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
2 participants
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.