OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Replace Sass variables specific to each CSS file with CSS custom properties (#11039) 

* Use CSS custom properties on _LeftPanel.pcss

* Use CSS custom properties on _SpacePanel.pcss

* Use CSS custom properties on _SpaceRoomView.pcss

* Use CSS custom properties on _ImageView.pcss

* Use CSS custom properties on _EventTile.pcss

* Remove a CSS custom properties on _SpaceCreateMenu.pcss

Used only on one instance

* Revert "Use CSS custom properties on _ImageView.pcss"

This reverts commit 0210659f94fcf1107adabecf1bce443fc970a31b.

* Revert "Use CSS custom properties on _EventTile.pcss"

This reverts commit 83cf824a57b174e62935bb9a4433aadcd8f8164f.

* Run prettier
pull/28217/head
Suguru Hirahara 2023-06-06 11:09:04 +00:00 committed by GitHub
parent d0c1a8e69c
commit b3545736dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
res/css/structures/_LeftPanel.pcss
View File

@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$roomListCollapsedWidth: 68px;
.mx_MatrixChat--with-avatar {
.mx_LeftPanel,
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
@ -33,6 +31,11 @@ $roomListCollapsedWidth: 68px;
contain: layout paint;
}
.mx_LeftPanel_wrapper,
.mx_LeftPanel {
--collapsedWidth: 68px;
}
.mx_LeftPanel_wrapper {
display: flex;
flex-direction: row;
@ -46,7 +49,7 @@ $roomListCollapsedWidth: 68px;
position: relative;
&[data-collapsed] {
max-width: $roomListCollapsedWidth;
max-width: var(--collapsedWidth);
}
}
}
@ -218,7 +221,7 @@ $roomListCollapsedWidth: 68px;
width: unset !important;
.mx_LeftPanel_roomListContainer {
width: $roomListCollapsedWidth;
width: var(--collapsedWidth);
.mx_LeftPanel_userHeader {
flex-direction: row;

41
res/css/structures/_SpacePanel.pcss
View File

@ -14,15 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$topLevelHeight: 32px;
$nestedHeight: 24px;
$gutterSize: 16px;
$activeBorderTransparentGap: 1px;
$activeBackgroundColor: $panel-actions;
$activeBorderColor: $primary-content;
.mx_SpacePanel {
--activeBackground-color: $panel-actions;
--activeBorder-color: $primary-content;
--activeBorder-transparent-gap: 1px;
--gutterSize: 16px;
--height-nested: 24px;
--height-topLevel: 32px;
background-color: $spacePanel-bg-color;
flex: 0 0 auto;
padding: 0;
@ -116,7 +115,7 @@ $activeBorderColor: $primary-content;
}
.mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: $gutterSize;
margin-left: var(--gutterSize);
min-width: 40px;
}
@ -130,12 +129,12 @@ $activeBorderColor: $primary-content;
&.mx_SpaceButton_active {
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
background-color: $activeBackgroundColor;
background-color: var(--activeBackground-color);
}
&.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
padding: $activeBorderTransparentGap;
border: 3px $activeBorderColor solid;
padding: var(--activeBorder-transparent-gap);
border: 3px var(--activeBorder-color) solid;
}
}
@ -162,9 +161,9 @@ $activeBorderColor: $primary-content;
}
.mx_SpaceButton_toggleCollapse {
width: $gutterSize;
width: var(--gutterSize);
padding: 10px 0;
min-width: $gutterSize;
min-width: var(--gutterSize);
height: 20px;
mask-position: center;
mask-size: 20px;
@ -174,17 +173,17 @@ $activeBorderColor: $primary-content;
}
.mx_SpaceButton_icon {
width: $topLevelHeight;
min-width: $topLevelHeight;
height: $topLevelHeight;
width: var(--height-topLevel);
min-width: var(--height-topLevel);
height: var(--height-topLevel);
border-radius: 8px;
position: relative;
&::before {
position: absolute;
content: "";
width: $topLevelHeight;
height: $topLevelHeight;
width: var(--height-topLevel);
height: var(--height-topLevel);
top: 0;
left: 0;
mask-position: center;
@ -344,10 +343,10 @@ $activeBorderColor: $primary-content;
padding: 0 8px 16px 0;
& > .mx_SpaceButton {
height: $topLevelHeight;
height: var(--height-topLevel);
&.mx_SpaceButton_active::before {
height: $topLevelHeight;
height: var(--height-topLevel);
}
}

12
res/css/structures/_SpaceRoomView.pcss
View File

@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$SpaceRoomViewInnerWidth: 428px;
@define-mixin SpacePillButton {
position: relative;
padding: 16px 32px 16px 72px;
@ -61,6 +59,8 @@ $SpaceRoomViewInnerWidth: 428px;
}
.mx_SpaceRoomView {
--innerWidth: 428px;
overflow-y: auto;
flex: 1;
@ -83,11 +83,11 @@ $SpaceRoomViewInnerWidth: 428px;
color: $secondary-content;
margin-top: 12px;
margin-bottom: 24px;
max-width: $SpaceRoomViewInnerWidth;
max-width: var(--innerWidth);
}
.mx_AddExistingToSpace {
max-width: $SpaceRoomViewInnerWidth;
max-width: var(--innerWidth);
.mx_AddExistingToSpace_content {
height: calc(100vh - 360px);
@ -98,7 +98,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_buttons {
display: block;
margin-top: 44px;
width: $SpaceRoomViewInnerWidth;
width: var(--innerWidth);
text-align: right; /* button alignment right */
.mx_AccessibleButton_hasKind {
@ -112,7 +112,7 @@ $SpaceRoomViewInnerWidth: 428px;
}
.mx_Field {
max-width: $SpaceRoomViewInnerWidth;
max-width: var(--innerWidth);
& + .mx_Field {
margin-top: 28px;

4
res/css/views/spaces/_SpaceCreateMenu.pcss
View File

@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$spacePanelWidth: 68px;
.mx_SpaceCreateMenu_wrapper {
/* background blur everything except SpacePanel */
.mx_ContextualMenu_background {
background-color: $dialog-backdrop-color;
opacity: 0.6;
left: $spacePanelWidth;
left: 68px;
}
.mx_ContextualMenu {