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
This commit is contained in:
Suguru Hirahara 2023-05-03 09:24:41 +00:00 committed by GitHub
parent 5a73d8e1b0
commit 5162cefa78
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 24 additions and 25 deletions

View file

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