Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

[WIP] Make layout compatible with RTL languages #8217

Closed
wants to merge 1 commit into from
Closed

[WIP] Make layout compatible with RTL languages #8217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions res/css/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ h2 {
color: $primary-content;
font-weight: 400;
font-size: $font-18px;
margin-top: 16px;
margin-bottom: 16px;
margin-block-start: 16px;
margin-block-end: 16px;
}

a:hover,
Expand All @@ -124,7 +124,7 @@ input[type=password] {

input[type=text].mx_textinput_icon,
input[type=search].mx_textinput_icon {
padding-left: 36px;
padding-inline-start: 36px;
background-repeat: no-repeat;
background-position: 10px center;
}
Expand Down Expand Up @@ -282,7 +282,7 @@ legend {
position: fixed;
z-index: 4000;
top: 0;
left: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;

Expand Down Expand Up @@ -358,15 +358,15 @@ legend {
.mx_Dialog .markdown-body h1,
.mx_Dialog .markdown-body h2 {
font-size: 1.5em;
border-bottom: none !important; // override GFM
border-block-end: none !important; // override GFM
}

.mx_Dialog .markdown-body a {
color: $accent-alt;
}

.mx_Dialog .markdown-body blockquote {
border-left: 2px solid $blockquote-bar-color;
border-inline-start: 2px solid $blockquote-bar-color;
border-radius: 2px;
padding: 0 10px;
}
Expand All @@ -384,7 +384,7 @@ legend {
.mx_Dialog_background {
position: fixed;
top: 0;
left: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
background-color: $dialog-backdrop-color;
Expand Down Expand Up @@ -423,16 +423,16 @@ legend {
.mx_Dialog_header {
position: relative;
padding: 3px 0;
margin-bottom: 10px;
margin-block-end: 10px;
}

.mx_Dialog_titleImage {
vertical-align: sub;
width: 25px;
height: 25px;
margin-left: -2px;
margin-right: 4px;
margin-bottom: 2px;
margin-inline-start: -2px;
margin-inline-end: 4px;
margin-block-end: 2px;
}

.mx_Dialog_title {
Expand All @@ -446,7 +446,7 @@ legend {
text-align: center;
}
.mx_Dialog_header.mx_Dialog_headerWithCancel {
padding-right: 20px; // leave space for the 'X' cancel button
padding-inline-end: 20px; // leave space for the 'X' cancel button
}

.mx_Dialog_title.danger {
Expand All @@ -471,7 +471,7 @@ legend {
height: 14px;
position: absolute;
top: 10px;
right: 0;
inset-inline-end: 0;
}

.mx_Dialog_content {
Expand All @@ -482,13 +482,13 @@ legend {
}

.mx_Dialog_buttons {
margin-top: $spacing-20;
margin-block-start: $spacing-20;
margin-inline-start: auto;
text-align: right;
text-alignt: end;

.mx_Dialog_buttons_additive {
// The consumer is responsible for positioning their elements.
float: left;
float: inline-start;
}
}

Expand All @@ -500,8 +500,8 @@ legend {
margin-inline-start: auto;

// default gap among elements
column-gap: $spacing-8; // See margin-right below inside the button style
row-gap: 5px; // See margin-bottom below inside the button style
column-gap: $spacing-8; // See margin-inline-end below inside the button style
row-gap: 5px; // See margin-block-end below inside the button style

button {
margin: 0 !important; // override the margin settings
Expand All @@ -522,9 +522,9 @@ legend {
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
@mixin mx_DialogButton;
margin-left: 0px;
margin-right: 8px;
margin-bottom: 5px;
margin-inline-start: 0px;
margin-inline-end: 8px;
margin-block-end: 5px;

// flip colours for the secondary ones
font-weight: 600;
Expand All @@ -535,7 +535,7 @@ legend {
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):last-child {
margin-right: 0px;
margin-inline-end: 0px;
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):hover,
Expand Down Expand Up @@ -626,7 +626,7 @@ legend {
}

.mx_TextInputDialog_label {
text-align: left;
text-align: start;
padding-bottom: 12px;
}

Expand All @@ -648,7 +648,7 @@ legend {
}

.mx_button_row {
margin-top: 69px;
margin-block-start: 69px;
}

// username colors
Expand Down Expand Up @@ -697,12 +697,12 @@ legend {
// This is a workaround for our mixins not supporting child selectors
.mx_Tooltip_dark {
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
border-inline-end-color: $tooltip-timeline-bg-color;
}
}

@define-mixin mx_Settings_fullWidthField {
margin-right: 100px;
margin-inline-end: 100px;
}

@define-mixin mx_Settings_tooltip {
Expand Down Expand Up @@ -767,7 +767,7 @@ legend {
font-weight: 600;
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
margin-inline-end: 0;

span {
display: flex;
Expand All @@ -779,7 +779,7 @@ legend {
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
margin-inline-end: 8px;
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions res/css/components/views/beacon/_BeaconListItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ limitations under the License.
align-items: flex-start;
padding: $spacing-12 0;

border-bottom: 1px solid $system;
border-block-end: 1px solid $system;
}

.mx_BeaconListItem_avatarIcon {
Expand All @@ -34,7 +34,7 @@ limitations under the License.
flex: 0 0;
box-sizing: border-box;

margin-right: $spacing-8;
margin-inline-end: $spacing-8;
border: 2px solid $location-live-color;
border-radius: 50%;
}
Expand All @@ -50,7 +50,7 @@ limitations under the License.
.mx_BeaconListItem_status {
// override beacon status padding
padding: 0 !important;
margin-bottom: $spacing-8;
margin-block-end: $spacing-8;

.mx_BeaconStatus_label {
font-weight: $font-semi-bold;
Expand Down
6 changes: 3 additions & 3 deletions res/css/components/views/beacon/_BeaconStatus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ limitations under the License.
width: 32px;

flex: 0 0 32px;
margin-right: $spacing-8;
margin-inline-end: $spacing-8;
}

.mx_BeaconStatus_description {
Expand All @@ -51,7 +51,7 @@ limitations under the License.
flex-direction: column;
line-height: $font-14px;

padding-right: $spacing-8;
padding-inline-end: $spacing-8;

white-space: nowrap;
overflow: hidden;
Expand All @@ -67,7 +67,7 @@ limitations under the License.
}

.mx_BeaconStatus_label {
margin-bottom: 2px;
margin-block-end: 2px;
overflow: hidden;
text-overflow: ellipsis;
}
6 changes: 3 additions & 3 deletions res/css/components/views/beacon/_BeaconViewDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ limitations under the License.
.mx_Dialog_cancelButton {
z-index: 4010;
position: fixed;
right: 5vw;
inset-inline-end: 5vw;
top: 5vh;
width: 20px;
height: 20px;
Expand All @@ -61,11 +61,11 @@ limitations under the License.

.mx_BeaconViewDialog_mapFallbackMessage {
color: $secondary-content;
margin-bottom: $spacing-16;
margin-block-end: $spacing-16;
}

.mx_BeaconViewDialog_viewListButton {
position: absolute;
top: $spacing-24;
left: $spacing-24;
inset-inline-start: $spacing-24;
}
6 changes: 3 additions & 3 deletions res/css/components/views/beacon/_DialogOwnBeaconStatus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ limitations under the License.
position: absolute;
bottom: $spacing-32;
width: 300px;
margin-left: -150px;
left: 50%;
margin-inline-start: -150px;
inset-inline-start: 50%;

box-sizing: border-box;
display: flex;
Expand Down Expand Up @@ -52,5 +52,5 @@ limitations under the License.

.mx_DialogOwnBeaconStatus_status {
flex: 1 1;
padding-right: 0;
padding-inline-end: 0;
}
4 changes: 2 additions & 2 deletions res/css/components/views/beacon/_DialogSidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ limitations under the License.
.mx_DialogSidebar {
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
height: 100%;
width: 265px;

Expand All @@ -36,7 +36,7 @@ limitations under the License.
justify-content: space-between;

flex: 0 0;
margin-bottom: $spacing-16;
margin-block-end: $spacing-16;

color: $primary-content;

Expand Down
8 changes: 4 additions & 4 deletions res/css/components/views/beacon/_RoomLiveShareWarning.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ limitations under the License.
.mx_RoomLiveShareWarning_icon {
height: 32px;
width: 32px;
margin-right: $spacing-8;
margin-inline-end: $spacing-8;
}

.mx_RoomLiveShareWarning_label {
Expand All @@ -41,16 +41,16 @@ limitations under the License.
}

.mx_RoomLiveShareWarning_spinner {
margin-right: $spacing-16;
margin-inline-end: $spacing-16;
}

.mx_RoomLiveShareWarning_closeButton {
@mixin ButtonResetDefault;
margin-left: $spacing-16;
margin-inline-start: $spacing-16;
}

.mx_RoomLiveShareWarning_stopButton {
margin-left: $spacing-16;
margin-inline-start: $spacing-16;
}

.mx_RoomLiveShareWarning_closeButtonIcon {
Expand Down
2 changes: 1 addition & 1 deletion res/css/components/views/beacon/_ShareLatestLocation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@ limitations under the License.
.mx_ShareLatestLocation_copy {
// override copyable text style to make compact
.mx_CopyableText_copyButton {
margin-left: $spacing-8 !important;
margin-inline-start: $spacing-8 !important;
}
}
4 changes: 2 additions & 2 deletions res/css/components/views/location/_EnableLiveShare.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ limitations under the License.

.mx_EnableLiveShare_description {
padding: 0 $spacing-24;
margin-bottom: $spacing-32;
margin-block-end: $spacing-32;
line-height: $font-20px;
}

.mx_EnableLiveShare_button {
margin-top: $spacing-32;
margin-block-start: $spacing-32;
height: 48px;
width: 100%;
}
2 changes: 1 addition & 1 deletion res/css/components/views/location/_LiveDurationDropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ limitations under the License.
*/

.mx_LiveDurationDropdown {
margin-bottom: $spacing-16;
margin-block-end: $spacing-16;
}
4 changes: 2 additions & 2 deletions res/css/components/views/location/_MapFallback.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ limitations under the License.
.mx_MapFallback_bg {
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
min-height: 100%;
min-width: 100%;
color: $quinary-content;
Expand All @@ -40,6 +40,6 @@ limitations under the License.

.mx_MapFallback_icon {
width: 65px;
margin-bottom: $spacing-16;
margin-block-end: $spacing-16;
color: $quaternary-content;
}
6 changes: 3 additions & 3 deletions res/css/components/views/location/_Marker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ limitations under the License.
// caret down
&::before {
content: '';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
border-inline-start: 5px solid transparent;
border-inline-end: 5px solid transparent;
border-block-start: 5px solid currentColor;
position: absolute;
bottom: -4px;
}
Expand Down
Loading