me
/
glitchier-soc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
th-downstream
Eugen Rochko 2 years ago 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
Show Stats Download Patch File Download Diff File

4
app/javascript/styles/mastodon/about.scss
Unescape View File

@ -28,14 +28,14 @@ $fluid-breakpoint: $maximum-width + 20px;
position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%);
padding: 1em 1.75em;
padding-left: 3em;
padding-inline-start: 3em;
font-weight: 500;
counter-increment: list-counter;
&::before {
content: counter(list-counter);
position: absolute;
left: 0;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
background: $highlight-text-color;

16
app/javascript/styles/mastodon/accounts.scss
Unescape View File

@ -73,8 +73,8 @@
}
.display-name {
margin-left: 15px;
text-align: left;
margin-inline-start: 15px;
text-align: start;
i[data-hidden] {
display: none;
@ -138,22 +138,22 @@
}
.older {
float: left;
padding-left: 0;
float: inline-start;
padding-inline-start: 0;
.fa {
display: inline-block;
margin-right: 5px;
margin-inline-end: 5px;
}
}
.newer {
float: right;
padding-right: 0;
float: inline-end;
padding-inline-end: 0;
.fa {
display: inline-block;
margin-left: 5px;
margin-inline-start: 5px;
}
}

83
app/javascript/styles/mastodon/admin.scss
Unescape View File

@ -117,7 +117,7 @@ $content-width: 840px;
text-overflow: ellipsis;
i.fa {
margin-right: 5px;
margin-inline-end: 5px;
}
&:hover {
@ -186,7 +186,10 @@ $content-width: 840px;
}
.content {
padding: 55px 15px 20px 25px;
padding-top: 55px;
padding-bottom: 20px;
padding-inline-start: 25px;
padding-inline-end: 15px;
@media screen and (max-width: $no-columns-breakpoint) {
max-width: none;
@ -202,11 +205,12 @@ $content-width: 840px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: -15px -15px 0 0;
margin-top: -15px;
margin-inline-end: -15px;
& > * {
margin-top: 15px;
margin-right: 15px;
margin-inline-end: 15px;
}
}
@ -385,7 +389,7 @@ $content-width: 840px;
z-index: 10;
width: 100%;
height: calc(100% - 56px);
left: 0;
inset-inline-start: 0;
bottom: 0;
overflow-y: auto;
background: $ui-base-color;
@ -470,10 +474,11 @@ body,
.filters {
display: flex;
flex-wrap: wrap;
gap: 40px;
.filter-subset {
flex: 0 0 auto;
margin: 0 40px 20px 0;
margin-bottom: 20px;
&:last-child {
margin-bottom: 30px;
@ -485,7 +490,7 @@ body,
li {
display: inline-block;
margin-right: 5px;
margin-inline-end: 5px;
}
}
@ -572,7 +577,7 @@ body,
.activity-stream {
flex: 2 0 0;
margin-right: 20px;
margin-inline-end: 20px;
max-width: calc(100% - 60px);
.entry {
@ -625,12 +630,12 @@ body,
}
.media-spoiler-toggle-buttons {
margin-left: auto;
margin-inline-start: auto;
.button {
overflow: visible;
margin: 0 0 5px 5px;
float: right;
float: inline-end;
}
}
}
@ -651,7 +656,7 @@ body,
.special-action-button,
.back-link {
text-align: right;
text-align: end;
flex: 1 1 auto;
}
@ -669,7 +674,7 @@ body,
display: block;
line-height: 20px;
padding: 15px;
padding-left: 15px * 2 + 40px;
padding-inline-start: 15px * 2 + 40px;
background: $ui-base-color;
border-bottom: 1px solid darken($ui-base-color, 8%);
position: relative;
@ -696,7 +701,7 @@ body,
&__avatar {
position: absolute;
left: 15px;
inset-inline-start: 15px;
top: 15px;
.avatar {
@ -764,7 +769,7 @@ a.name-tag,
.avatar {
display: block;
margin: 0;
margin-right: 5px;
margin-inline-end: 5px;
border-radius: 50%;
}
@ -778,7 +783,7 @@ a.name-tag,
.speech-bubble {
margin-bottom: 20px;
border-left: 4px solid $ui-highlight-color;
border-inset-inline-start: 4px solid $ui-highlight-color;
&.positive {
border-left-color: $success-green;
@ -794,7 +799,7 @@ a.name-tag,
&__bubble {
padding: 16px;
padding-left: 14px;
padding-inline-start: 14px;
font-size: 15px;
line-height: 20px;
border-radius: 4px 4px 4px 0;
@ -808,7 +813,7 @@ a.name-tag,
&__owner {
padding: 8px;
padding-left: 12px;
padding-inline-start: 12px;
}
time {
@ -832,7 +837,7 @@ a.name-tag,
border: 0;
&__avatar-wrapper {
margin-left: 0;
margin-inline-start: 0;
}
}
@ -841,7 +846,7 @@ a.name-tag,
font-weight: 500;
color: $darker-text-color;
text-transform: uppercase;
text-align: right;
text-align: end;
a {
color: inherit;
@ -892,7 +897,7 @@ a.name-tag,
&__icon {
color: $dark-text-color;
margin-right: 4px;
margin-inline-end: 4px;
font-weight: 500;
}
}
@ -1090,7 +1095,7 @@ a.name-tag,
> h4 {
position: sticky;
left: 0;
inset-inline-start: 0;
}
&__table {
@ -1102,7 +1107,7 @@ a.name-tag,
&__date {
white-space: nowrap;
padding: 10px 0;
text-align: left;
text-align: start;
min-width: 120px;
&.retention__table__average {
@ -1160,7 +1165,7 @@ a.name-tag,
&__total {
display: block;
margin-right: 10px;
margin-inline-end: 10px;
font-weight: 500;
font-size: 28px;
color: $primary-text-color;
@ -1262,7 +1267,7 @@ a.sparkline {
}
&__value {
text-align: right;
text-align: end;
color: $darker-text-color;
padding: 11px 10px;
}
@ -1273,7 +1278,7 @@ a.sparkline {
height: 8px;
border-radius: 50%;
background: $ui-highlight-color;
margin-right: 10px;
margin-inline-end: 10px;
@for $i from 0 through 10 {
&--#{10 * $i} {
@ -1309,7 +1314,7 @@ a.sparkline {
}
&__rules {
margin-left: 30px;
margin-inline-start: 30px;
}
}
@ -1431,7 +1436,7 @@ a.sparkline {
height: 21px;
position: absolute;
bottom: 0;
right: 15px;
inset-inline-end: 15px;
background: linear-gradient(to left, $ui-base-color, transparent);
pointer-events: none;
}
@ -1511,7 +1516,7 @@ a.sparkline {
background: $ui-base-color;
position: relative;
padding: 15px;
padding-left: 15px * 2 + 40px;
padding-inline-start: 15px * 2 + 40px;
border-bottom: 1px solid darken($ui-base-color, 8%);
&:first-child {
@ -1531,7 +1536,7 @@ a.sparkline {
&__avatar {
position: absolute;
left: 15px;
inset-inline-start: 15px;
top: 15px;
border-radius: 4px;
width: 40px;
@ -1547,7 +1552,7 @@ a.sparkline {
.username {
color: $primary-text-color;
font-weight: 500;
margin-right: 5px;
margin-inline-end: 5px;
a {
color: inherit;
@ -1562,7 +1567,7 @@ a.sparkline {
}
time {
margin-left: 5px;
margin-inline-start: 5px;
vertical-align: baseline;
}
}
@ -1597,8 +1602,8 @@ a.sparkline {
&__actions {
position: absolute;
top: 15px;
right: 15px;
text-align: right;
inset-inline-end: 15px;
text-align: end;
}
}
}
@ -1621,7 +1626,7 @@ a.sparkline {
flex: 0 0 auto;
width: 200px;
padding: 15px;
padding-right: 0;
padding-inline-end: 0;
.button {
display: block;
@ -1657,7 +1662,7 @@ a.sparkline {
}
.section-skip-link {
float: right;
float: inline-end;
a {
color: $ui-highlight-color;
@ -1707,7 +1712,7 @@ a.sparkline {
&__rules {
list-style: disc;
padding-left: 15px;
padding-inline-start: 15px;
margin-bottom: 20px;
color: $darker-text-color;
@ -1796,7 +1801,7 @@ a.sparkline {
li {
counter-increment: step 1;
padding-left: 2.5rem;
padding-inline-start: 2.5rem;
padding-bottom: 8px;
position: relative;
margin-bottom: 8px;
@ -1806,7 +1811,7 @@ a.sparkline {
content: counter(step);
font-size: 0.625rem;
font-weight: 500;
left: 0;
inset-inline-start: 0;
display: flex;
justify-content: center;
align-items: center;
@ -1825,7 +1830,7 @@ a.sparkline {
background: $highlight-text-color;
bottom: 0;
top: calc(1.875rem + 1px);
left: 0.6875rem;
inset-inline-start: 0.6875rem;
}
&:last-child {

2
app/javascript/styles/mastodon/basics.scss
Unescape View File

@ -267,7 +267,7 @@ button {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
z-index: -1000;
}

334
app/javascript/styles/mastodon/components.scss
View File

File diff suppressed because it is too large Load Diff

6
app/javascript/styles/mastodon/containers.scss
Unescape View File

@ -18,7 +18,7 @@
.logo {
height: 42px;
margin-right: 10px;
margin-inline-end: 10px;
}
a {
@ -73,7 +73,7 @@
.avatar {
width: 40px;
height: 40px;
margin-right: 10px;
margin-inline-end: 10px;
img {
width: 100%;
@ -101,6 +101,6 @@
display: block;
font-size: 32px;
line-height: 40px;
margin-left: 10px;
margin-inline-start: 10px;
}
}

10
app/javascript/styles/mastodon/emoji_picker.scss
Unescape View File

@ -71,7 +71,7 @@
.emoji-mart-anchor-bar {
position: absolute;
bottom: -5px;
left: 0;
inset-inline-start: 0;
width: 100%;
height: 4px;
background-color: $highlight-text-color;
@ -106,7 +106,7 @@
.emoji-mart-search {
padding: 10px;
padding-right: 45px;
padding-inline-end: 45px;
background: $simple-background-color;
position: relative;
@ -114,7 +114,7 @@
font-size: 16px;
font-weight: 400;
padding: 7px 9px;
padding-right: 25px;
padding-inline-end: 25px;
font-family: inherit;
display: block;
width: 100%;
@ -142,7 +142,7 @@
.emoji-mart-search-icon {
position: absolute;
top: 18px;
right: 45px + 5px;
inset-inline-end: 45px + 5px;
z-index: 2;
padding: 2px 5px 1px;
border: 0;
@ -177,7 +177,7 @@
content: '';
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
background-color: rgba($ui-secondary-color, 0.7);

34
app/javascript/styles/mastodon/forms.scss
Unescape View File

@ -54,12 +54,12 @@ code {
.radio > label {
position: relative;
padding-left: 28px;
padding-inline-start: 28px;
input {
position: absolute;
top: -2px;
left: 0;
inset-inline-start: 0;
}
}
}
@ -79,7 +79,7 @@ code {
.label_input,
.hint {
padding-left: 28px;
padding-inline-start: 28px;
}
.label_input__wrapper {
@ -89,7 +89,7 @@ code {
label.checkbox {
position: absolute;
top: 2px;
left: 0;
inset-inline-start: 0;
}
label a {
@ -159,7 +159,7 @@ code {
li {
list-style: disc;
margin-left: 18px;
margin-inline-start: 18px;
}
}
@ -225,7 +225,7 @@ code {
&.select .hint {
margin-top: 6px;
margin-left: 150px;
margin-inline-start: 150px;
}
}
@ -380,13 +380,13 @@ code {
width: auto;
position: relative;
padding-top: 5px;
padding-left: 25px;
padding-inline-start: 25px;
flex: 1 1 auto;
}
input[type='checkbox'] {
position: absolute;
left: 0;
inset-inline-start: 0;
top: 5px;
margin: 0;
}
@ -517,10 +517,10 @@ code {
font-weight: 500;
outline: 0;
margin-bottom: 10px;
margin-right: 10px;
margin-inline-end: 10px;
&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
&:active,
@ -572,8 +572,8 @@ code {
no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
padding-left: 10px;
padding-right: 30px;
padding-inline-start: 10px;
padding-inline-end: 30px;
height: 41px;
}
@ -588,7 +588,7 @@ code {
&__append {
position: absolute;
right: 3px;
inset-inline-end: 3px;
top: 1px;
padding: 10px;
padding-bottom: 9px;
@ -606,7 +606,7 @@ code {
display: block;
position: absolute;
top: 0;
right: 0;
inset-inline-end: 0;
bottom: 1px;
width: 5px;
background-image: linear-gradient(
@ -780,7 +780,7 @@ code {
li {
display: inline-block;
margin-right: 10px;
margin-inline-end: 10px;
}
a {
@ -939,7 +939,7 @@ code {
.actions {
padding: 30px 0;
padding-right: 20px;
padding-inline-end: 20px;
flex: 0 0 auto;
}
}
@ -992,7 +992,7 @@ code {
border-radius: 4px;
display: flex;
align-items: center;
padding-right: 4px;
padding-inline-end: 4px;
position: relative;
top: 1px;
transition: border-color 300ms linear;

2
app/javascript/styles/mastodon/modal.scss
Unescape View File

@ -25,7 +25,7 @@
height: 100%;
position: absolute;
bottom: 0;
left: 0;
inset-inline-start: 0;
}
}
}

2
app/javascript/styles/mastodon/polls.scss
Unescape View File

@ -269,7 +269,7 @@
border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px;
padding: 6px 10px;
padding-right: 30px;
padding-inline-end: 30px;
}
.icon-button.disabled {

6
app/javascript/styles/mastodon/rich_text.scss
Unescape View File

@ -13,8 +13,8 @@
}
blockquote {
padding-left: 10px;
border-left: 3px solid $darker-text-color;
padding-inline-start: 10px;
border-inset-inline-start: 3px solid $darker-text-color;
color: $darker-text-color;
white-space: normal;
@ -40,7 +40,7 @@
ul,
ol {
margin-left: 2em;
margin-inline-start: 2em;
p {
margin: 0;

305
app/javascript/styles/mastodon/rtl.scss
Unescape 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;
}
}

8
app/javascript/styles/mastodon/statuses.scss
Unescape View File

@ -97,7 +97,7 @@
width: 20px;
height: auto;
vertical-align: middle;
margin-right: 5px;
margin-inline-end: 5px;
fill: $primary-text-color;
}
@ -162,7 +162,7 @@ a.button.logo-button {
min-height: 48px + 2px;
&__avatar {
left: 15px;
inset-inline-start: 15px;
top: 17px;
.account__avatar {
@ -176,12 +176,12 @@ a.button.logo-button {
}
&__prepend {
margin-left: 48px + 15px * 2;
margin-inline-start: 48px + 15px * 2;
padding-top: 15px;
}
&__prepend-icon-wrapper {
left: -32px;
inset-inline-start: -32px;
}
.media-gallery,

22
app/javascript/styles/mastodon/tables.scss
Unescape View File

@ -10,7 +10,7 @@
line-height: 18px;
vertical-align: top;
border-top: 1px solid $ui-base-color;
text-align: left;
text-align: start;
background: darken($ui-base-color, 4%);
}
@ -91,12 +91,12 @@
&:first-child {
border-radius: 4px 0 0;
border-left: 1px solid darken($ui-base-color, 8%);
border-inset-inline-start: 1px solid darken($ui-base-color, 8%);
}
&:last-child {
border-radius: 0 4px 0 0;
border-right: 1px solid darken($ui-base-color, 8%);
border-inset-inline-end: 1px solid darken($ui-base-color, 8%);
}
}
}
@ -125,7 +125,7 @@ button.table-action-link,
a.table-action-link {
text-decoration: none;
display: inline-block;
margin-right: 5px;
margin-inline-end: 5px;
padding: 0 10px;
color: $darker-text-color;
font-weight: 500;
@ -136,11 +136,11 @@ a.table-action-link {
i.fa {
font-weight: 400;
margin-right: 5px;
margin-inline-end: 5px;
}
&:first-child {
padding-left: 0;
padding-inline-start: 0;
}
}
@ -172,7 +172,7 @@ a.table-action-link {
&__actions,
&__content {
padding: 8px 0;
padding-right: 16px;
padding-inline-end: 16px;
flex: 1 1 auto;
}
}
@ -188,8 +188,8 @@ a.table-action-link {
align-items: center;
&__actions {
text-align: right;
padding-right: 16px - 5px;
text-align: end;
padding-inline-end: 16px - 5px;
}
}
@ -296,7 +296,7 @@ a.table-action-link {
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
margin-inline-end: 10px;
.emojione {
width: 32px;
@ -315,7 +315,7 @@ a.table-action-link {
&__extra {
flex: 0 0 auto;
text-align: right;
text-align: end;
color: $darker-text-color;
font-weight: 500;
}

16
app/javascript/styles/mastodon/widgets.scss
Unescape View File

@ -39,8 +39,8 @@
width: 20px;
height: 20px;
margin: -3px 0 0;
margin-left: 0.075em;
margin-right: 0.075em;
margin-inline-start: 0.075em;
margin-inline-end: 0.075em;
}
p {
@ -171,7 +171,7 @@
margin-bottom: 15px;
.fa {
margin-right: 5px;
margin-inline-end: 5px;
color: $darker-text-color;
}
}
@ -284,7 +284,7 @@
}
.trends__item__current {
padding-right: 0;
padding-inline-end: 0;
}
}
}
@ -309,7 +309,7 @@
padding: 10px;
&:first-child {
text-align: left;
text-align: start;
}
}
@ -340,9 +340,9 @@
tbody td.accounts-table__extra {
width: 120px;
text-align: right;
text-align: end;
color: $darker-text-color;
padding-right: 16px;
padding-inline-end: 16px;
a {
text-decoration: none;
@ -363,7 +363,7 @@
tbody td.accounts-table__interrelationships {
width: 21px;
padding-right: 16px;
padding-inline-end: 16px;
}
.fa {

Write Preview
Loading…
Cancel
Save