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

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

* Replace a Sass variable with a CSS custom property - $container-border-width

res/css/_common.pcss

@@ -33,13 +33,12 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-mess
 $slider-dot-size: 1em;
 $slider-selection-dot-size: 2.4em;
 
-$container-border-width: 8px;
-$container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
-
 $timeline-image-border-radius: 8px;
 :root {
     font-size: 10px;
 
+    --container-border-width: 8px;
+    --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
     --transition-short: 0.1s;
     --transition-standard: 0.3s;
     --MessageTimestamp-width: $MessageTimestamp_width;

res/css/structures/_MainSplit.pcss

@@ -23,10 +23,10 @@ limitations under the License.
 }
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
-    padding: $container-gap-width;
+    padding: var(--container-gap-width);
     /* The resizer should be centered: only half of the gap-width is handled by the right panel. */
     /* The other half by the RoomView. */
-    padding-left: calc($container-gap-width / 2);
+    padding-left: calc(var(--container-gap-width) / 2);
     height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */
 
     &:hover .mx_ResizeHandle_horizontal::before {

res/css/structures/_MatrixChat.pcss

@@ -81,7 +81,7 @@ limitations under the License.
 /* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
 /* https://github.com/vector-im/element-web/issues/19863 happens. */
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
+    margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2);
     /* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
     /* (IF there is NO margin on the leftPanel_wrapper) */
     /* The resizeHandle does not change the gap between the left panel and the room view: */
@@ -91,7 +91,7 @@ limitations under the License.
     /*      the handle requires no space */
     /* right: -6px left: -6px positions the element exactly on the edge of leftPanel. */
     /* left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. */
-    /* We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2) */
+    /* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */
 }
 
 .mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {

res/css/structures/_RightPanel.pcss

@@ -22,7 +22,7 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     border-radius: 8px;
-    padding: $container-border-width 0;
+    padding: var(--container-border-width) 0;
     box-sizing: border-box;
     height: 100%;
     contain: strict;

res/css/structures/_RoomView.pcss

@@ -109,7 +109,7 @@ limitations under the License.
         flex: 1;
         display: flex;
         flex-direction: column;
-        margin-right: calc($container-gap-width / 2);
+        margin-right: calc(var(--container-gap-width) / 2);
     }
 }
 

res/css/views/right_panel/_TimelineCard.pcss

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;
     }