From b3fd9377d632abbd9650f1d914f752d848e2add1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 9 May 2023 10:02:12 +0000 Subject: [PATCH] Use shorthand "inset" property (#10825) --- res/css/structures/_CompatibilityPage.pcss | 5 +---- res/css/structures/_TabbedView.pcss | 5 +---- res/css/views/dialogs/_PollCreateDialog.pcss | 5 +---- res/css/views/elements/_AccessibleButton.pcss | 5 +---- res/css/views/elements/_InviteReason.pcss | 5 +---- res/css/views/messages/_MImageBody.pcss | 5 +---- res/css/views/rooms/_E2EIcon.pcss | 5 +---- res/css/views/rooms/_EventTile.pcss | 5 +---- res/css/views/rooms/_JumpToBottomButton.pcss | 5 +---- res/css/views/settings/_AvatarSetting.pcss | 15 +++------------ 10 files changed, 12 insertions(+), 48 deletions(-) diff --git a/res/css/structures/_CompatibilityPage.pcss b/res/css/structures/_CompatibilityPage.pcss index 26354ed124..f2bed5630d 100644 --- a/res/css/structures/_CompatibilityPage.pcss +++ b/res/css/structures/_CompatibilityPage.pcss @@ -6,10 +6,7 @@ .mx_CompatibilityPage_box { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; margin: auto; width: 500px; height: 300px; diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index 50baf3a869..c38291c226 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/res/css/structures/_TabbedView.pcss @@ -21,10 +21,7 @@ limitations under the License. padding: 0 0 0 16px; display: flex; flex-direction: column; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; margin-top: 8px; } diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 476ac964b7..0f9ba92cf1 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -17,10 +17,7 @@ limitations under the License. .mx_PollCreateDialog { .mx_PollCreateDialog_busy { position: absolute; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; + inset: 0; background-color: rgba($background, 0.6); z-index: 1; } diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index 5d2d765c66..fbab8bef1b 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -186,10 +186,7 @@ limitations under the License. content: ""; display: block; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; background-color: #ffffff; mask-repeat: no-repeat; mask-position: center; diff --git a/res/css/views/elements/_InviteReason.pcss b/res/css/views/elements/_InviteReason.pcss index b635ee07e7..ad85ccb646 100644 --- a/res/css/views/elements/_InviteReason.pcss +++ b/res/css/views/elements/_InviteReason.pcss @@ -25,10 +25,7 @@ limitations under the License. .mx_InviteReason_view { display: none; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; justify-content: center; align-items: center; cursor: pointer; diff --git a/res/css/views/messages/_MImageBody.pcss b/res/css/views/messages/_MImageBody.pcss index ea5996faab..75f9028375 100644 --- a/res/css/views/messages/_MImageBody.pcss +++ b/res/css/views/messages/_MImageBody.pcss @@ -92,10 +92,7 @@ $timeline-image-border-radius: 8px; .mx_HiddenImagePlaceholder { position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; + inset: 0; /* To center the text in the middle of the frame */ display: flex; diff --git a/res/css/views/rooms/_E2EIcon.pcss b/res/css/views/rooms/_E2EIcon.pcss index 2d23585f54..a0782351fb 100644 --- a/res/css/views/rooms/_E2EIcon.pcss +++ b/res/css/views/rooms/_E2EIcon.pcss @@ -30,10 +30,7 @@ limitations under the License. content: ""; display: block; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; mask-repeat: no-repeat; mask-position: center; mask-size: contain; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 0c42a99f76..7b22a116cb 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -836,10 +836,7 @@ $left-gutter: 64px; content: ""; display: block; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; mask-repeat: no-repeat; mask-position: center; mask-size: contain; diff --git a/res/css/views/rooms/_JumpToBottomButton.pcss b/res/css/views/rooms/_JumpToBottomButton.pcss index 6465cc5015..08e3ad9031 100644 --- a/res/css/views/rooms/_JumpToBottomButton.pcss +++ b/res/css/views/rooms/_JumpToBottomButton.pcss @@ -64,10 +64,7 @@ limitations under the License. .mx_JumpToBottomButton_scrollDown::before { content: ""; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; mask-image: url("$(res)/img/element-icons/message/chevron-up.svg"); mask-repeat: no-repeat; mask-size: 20px; diff --git a/res/css/views/settings/_AvatarSetting.pcss b/res/css/views/settings/_AvatarSetting.pcss index 04312fdb8d..1a5e9c5e30 100644 --- a/res/css/views/settings/_AvatarSetting.pcss +++ b/res/css/views/settings/_AvatarSetting.pcss @@ -26,10 +26,7 @@ limitations under the License. /* position to place the hover bg over the entire thing */ position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; pointer-events: none; /* let the pointer fall through the underlying thing */ @@ -45,10 +42,7 @@ limitations under the License. .mx_AvatarSetting_hoverBg { /* absolute position to lazily fill the entire container */ position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; opacity: 0.5; background-color: $quinary-content; @@ -98,10 +92,7 @@ limitations under the License. mask-position: center; content: ""; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; } .mx_AvatarSetting_uploadButton {