sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Replace Sass variables with CSS custom properties - $container-gap-width and $container-border-width (#10776)

Browse Source 
* Replace a Sass variable with a CSS custom property - $container-gap-width

* Replace a Sass variable with a CSS custom property - $container-border-width
This commit is contained in:
Suguru Hirahara
2023-05-03 09:24:41 +00:00
committed by GitHub
parent 5a73d8e1b0
commit 5162cefa78
10 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/right_panel/_TimelineCard.pcss
+2 -2
View File
@@ -134,7 +134,7 @@ limitations under the License.
&.mx_EventTile_info .mx_MessageActionBar {
/* 1px: border width */
inset-inline-end: calc($container-gap-width + var(--BaseCard_padding-inline) + 1px);
inset-inline-end: calc(var(--container-gap-width) + var(--BaseCard_padding-inline) + 1px);
}
.mx_ReactionsRow {
@@ -178,7 +178,7 @@ limitations under the License.
/* 6px: scroll bar width (magic number) */
/* stylelint-disable-next-line declaration-colon-space-after */
inset-inline-end: calc(
-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px
-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + var(--container-gap-width) + 6px
);
}
res/css/views/rooms/_AppsDrawer.pcss
+8 -8
View File
@@ -20,9 +20,9 @@ $MiniAppTileHeight: 220px;
$MinWidth: 240px;
.mx_AppsDrawer {
margin: $container-gap-width;
margin: var(--container-gap-width);
/* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */
margin-right: calc($container-gap-width / 2);
margin-right: calc(var(--container-gap-width) / 2);
margin-bottom: 0; /* No bottom margin for the correct gap to the CallView below. */
position: relative;
display: flex;
@@ -31,7 +31,7 @@ $MinWidth: 240px;
flex-grow: 1;
&.mx_AppsDrawer_maximise {
margin-bottom: $container-gap-width;
margin-bottom: var(--container-gap-width);
}
.mx_AppsContainer_resizerHandleContainer {
@@ -118,7 +118,7 @@ $MinWidth: 240px;
}
.mx_AppsContainer_resizer {
margin-bottom: $container-gap-width;
margin-bottom: var(--container-gap-width);
}
.mx_AppsContainer {
@@ -132,11 +132,11 @@ $MinWidth: 240px;
min-height: 0;
.mx_AppTile:first-of-type {
border-left-width: $container-border-width;
border-left-width: var(--container-border-width);
border-radius: 10px 0 0 10px;
}
.mx_AppTile:last-of-type {
border-right-width: $container-border-width;
border-right-width: var(--container-border-width);
border-radius: 0 10px 10px 0;
}
@@ -150,7 +150,7 @@ $MinWidth: 240px;
}
.mx_AppTile {
border: $container-border-width solid $widget-menu-bar-bg-color;
border: var(--container-border-width) solid $widget-menu-bar-bg-color;
display: flex;
flex-direction: column;
box-sizing: border-box;
@@ -161,7 +161,7 @@ $MinWidth: 240px;
width: 100% !important; /* to override the inline style set by the resizer */
margin: 0;
padding: 0;
border: $container-border-width solid $widget-menu-bar-bg-color;
border: var(--container-border-width) solid $widget-menu-bar-bg-color;
border-radius: 8px;
display: flex;
flex-direction: column;
res/css/views/rooms/_RoomPreviewBar.pcss
+2 -2
View File
@@ -100,8 +100,8 @@ limitations under the License.
/* With maximised widgets, the panel fits in better when rounded */
.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2); /* Shared with right panel */
margin: var(--container-gap-width);
margin-right: calc(var(--container-gap-width) / 2); /* Shared with right panel */
margin-top: 0; /* Already covered by apps drawer */
border-radius: 8px;
}
res/css/views/voip/_CallView.pcss
+2 -2
View File
@@ -20,8 +20,8 @@ limitations under the License.
display: flex;
flex-direction: column;
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2);
margin: var(--container-gap-width);
margin-right: calc(var(--container-gap-width) / 2);
background-color: $header-panel-bg-color;
padding: 8px;
res/css/views/voip/_LegacyCallView.pcss
+2 -2
View File
@@ -187,9 +187,9 @@ limitations under the License.
padding-bottom: 10px;
margin: $container-gap-width;
margin: var(--container-gap-width);
/* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */
margin-right: calc($container-gap-width / 2);
margin-right: calc(var(--container-gap-width) / 2);
margin-bottom: 10px;
}