Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Refactor styles to use logical properties for positioning (#23944)

Browse source
This commit is contained in:
Eugen Rochko 2023-03-27 10:56:25 +02:00 • committed by GitHub
parent 88fc04d3d7
commit babd86e594
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 279 additions and 571 deletions
Download patch file Download diff file Expand all files Collapse all files

305
app/javascript/styles/mastodon/rtl.scss
View file

@ -1,273 +1,30 @@
body.rtl {
direction: rtl;
.column-header > button {
text-align: right;
padding-left: 0;
padding-right: 15px;
}
.radio-button__input {
margin-right: 0;
margin-left: 10px;
}
.display-name,
.announcements__item {
text-align: right;
}
.announcements__item__range {
padding-right: 0;
padding-left: 18px;
}
.reactions-bar {
margin-left: auto;
margin-right: -2px;
direction: rtl;
}
.reactions-bar__item__count {
margin-left: 0;
margin-right: 6px;
}
.announcements__pagination {
right: auto;
left: 0;
}
.notification__message {
margin-left: 0;
margin-right: 68px;
}
.announcements__mastodon,
.drawer__inner__mastodon > img {
transform: scaleX(-1);
}
.notification__favourite-icon-wrapper {
left: auto;
right: -26px;
}
.column-link__icon,
.column-header__icon {
margin-right: 0;
margin-left: 5px;
}
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
margin-right: 0;
margin-left: 4px;
}
.navigation-bar__profile {
margin-left: 0;
margin-right: 8px;
}
.search__input {
.compose-form .autosuggest-textarea__textarea {
padding-right: 10px;
padding-left: 30px;
}
.search__icon .fa {
right: auto;
left: 10px;
padding-left: 10px + 22px;
}
.columns-area {
direction: rtl;
}
.column-header__buttons {
left: 0;
right: auto;
margin-left: 0;
margin-right: -15px;
}
.column-inline-form .icon-button {
margin-left: 0;
margin-right: 5px;
}
.column-header__links .text-btn {
margin-left: 10px;
margin-right: 0;
}
.account__avatar-wrapper {
float: right;
}
.column-header__back-button {
padding-left: 5px;
padding-right: 0;
}
.column-header__setting-arrows {
float: left;
.column-header__setting-btn {
&:first-child {
padding-left: 7px;
padding-right: 5px;
}
&:last-child {
padding-right: 7px;
padding-left: 5px;
margin-right: 5px;
margin-left: 0;
}
}
}
.setting-toggle__label {
margin-left: 0;
margin-right: 8px;
}
.account__header__tabs__buttons > .icon-button {
margin-right: 0;
margin-left: 8px;
}
.account__avatar-overlay-overlay {
right: auto;
left: 0;
}
.column-back-button--slim-button {
right: auto;
left: 0;
}
.status__action-bar {
&__counter {
margin-right: 0;
margin-left: 11px;
.status__action-bar-button {
margin-right: 0;
margin-left: 4px;
}
}
}
.privacy-dropdown__dropdown {
margin-left: 0;
margin-right: 40px;
}
.privacy-dropdown__option__icon {
margin-left: 10px;
margin-right: 0;
}
.picture-in-picture__header__account .display-name,
.detailed-status__display-name .display-name {
text-align: right;
}
.detailed-status__display-avatar {
margin-right: 0;
margin-left: 10px;
}
.picture-in-picture__header__account .account__avatar {
margin-right: 0;
margin-left: 10px;
}
.icon-button__counter {
margin-left: 0;
margin-right: 4px;
}
.notifications-permission-banner__close {
right: auto;
left: 10px;
}
.detailed-status__favorites,
.detailed-status__reblogs {
margin-left: 0;
margin-right: 6px;
}
.fa-ul {
margin-left: 2.14285714em;
}
.fa-li {
left: auto;
right: -2.14285714em;
}
.admin-wrapper {
direction: rtl;
}
.admin-wrapper .sidebar ul a i.fa,
a.table-action-link i.fa {
margin-right: 0;
margin-left: 5px;
}
.simple_form .check_boxes .checkbox label {
padding-left: 0;
padding-right: 25px;
}
.simple_form .input.with_label.boolean label.checkbox {
padding-left: 25px;
padding-right: 0;
}
.simple_form .check_boxes .checkbox input[type='checkbox'],
.simple_form .input.boolean input[type='checkbox'] {
left: auto;
right: 0;
}
.simple_form .input.radio_buttons .radio {
left: auto;
right: 0;
}
.simple_form .input.radio_buttons .radio > label {
padding-right: 28px;
padding-left: 0;
}
.simple_form .input-with-append .input input {
padding-left: 142px;
padding-right: 0;
}
.simple_form .input.boolean label.checkbox {
left: auto;
right: 0;
}
.simple_form .input.boolean .label_input,
.simple_form .input.boolean .hint {
padding-left: 0;
padding-right: 28px;
}
.simple_form .label_input__append {
right: auto;
left: 3px;
&::after {
right: auto;
left: 0;
background-image: linear-gradient(
to left,
rgba(darken($ui-base-color, 10%), 0),
@ -282,49 +39,6 @@ body.rtl {
no-repeat left 8px center / auto 16px;
}
.table th,
.table td {
text-align: right;
}
.filters .filter-subset {
margin-right: 0;
margin-left: 45px;
}
@media screen and (min-width: 631px) {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
&:first-child {
padding-left: 5px;
padding-right: 10px;
}
}
.columns-area > div {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
}
}
}
.columns-area--mobile .column,
.columns-area--mobile .drawer {
padding-left: 0;
padding-right: 0;
}
.card__bar .display-name {
margin-left: 0;
margin-right: 15px;
text-align: right;
}
.fa-chevron-left::before {
content: '\F054';
}
@ -332,19 +46,4 @@ body.rtl {
.fa-chevron-right::before {
content: '\F053';
}
.column-back-button__icon {
margin-right: 0;
margin-left: 5px;
}
.simple_form .input.radio_buttons .radio > label input {
left: auto;
right: 0;
}
.picture-in-picture {
right: auto;
left: 20px;
}
}