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. limitations under the License.
*/ */
$roomListCollapsedWidth: 68px;
.mx_MatrixChat--with-avatar { .mx_MatrixChat--with-avatar {
.mx_LeftPanel, .mx_LeftPanel,
.mx_LeftPanel .mx_LeftPanel_roomListContainer { .mx_LeftPanel .mx_LeftPanel_roomListContainer {
@ -33,6 +31,11 @@ $roomListCollapsedWidth: 68px;
contain: layout paint; contain: layout paint;
} }
.mx_LeftPanel_wrapper,
.mx_LeftPanel {
--collapsedWidth: 68px;
}
.mx_LeftPanel_wrapper { .mx_LeftPanel_wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -46,7 +49,7 @@ $roomListCollapsedWidth: 68px;
position: relative; position: relative;
&[data-collapsed] { &[data-collapsed] {
max-width: $roomListCollapsedWidth; max-width: var(--collapsedWidth);
} }
} }
} }
@ -218,7 +221,7 @@ $roomListCollapsedWidth: 68px;
width: unset !important; width: unset !important;
.mx_LeftPanel_roomListContainer { .mx_LeftPanel_roomListContainer {
width: $roomListCollapsedWidth; width: var(--collapsedWidth);
.mx_LeftPanel_userHeader { .mx_LeftPanel_userHeader {
flex-direction: row; 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. limitations under the License.
*/ */
$topLevelHeight: 32px;
$nestedHeight: 24px;
$gutterSize: 16px;
$activeBorderTransparentGap: 1px;
$activeBackgroundColor: $panel-actions;
$activeBorderColor: $primary-content;
.mx_SpacePanel { .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; background-color: $spacePanel-bg-color;
flex: 0 0 auto; flex: 0 0 auto;
padding: 0; padding: 0;
@ -116,7 +115,7 @@ $activeBorderColor: $primary-content;
} }
.mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton { .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: $gutterSize; margin-left: var(--gutterSize);
min-width: 40px; min-width: 40px;
} }
@ -130,12 +129,12 @@ $activeBorderColor: $primary-content;
&.mx_SpaceButton_active { &.mx_SpaceButton_active {
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper { &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
background-color: $activeBackgroundColor; background-color: var(--activeBackground-color);
} }
&.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper { &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
padding: $activeBorderTransparentGap; padding: var(--activeBorder-transparent-gap);
border: 3px $activeBorderColor solid; border: 3px var(--activeBorder-color) solid;
} }
} }
@ -162,9 +161,9 @@ $activeBorderColor: $primary-content;
} }
.mx_SpaceButton_toggleCollapse { .mx_SpaceButton_toggleCollapse {
width: $gutterSize; width: var(--gutterSize);
padding: 10px 0; padding: 10px 0;
min-width: $gutterSize; min-width: var(--gutterSize);
height: 20px; height: 20px;
mask-position: center; mask-position: center;
mask-size: 20px; mask-size: 20px;
@ -174,17 +173,17 @@ $activeBorderColor: $primary-content;
} }
.mx_SpaceButton_icon { .mx_SpaceButton_icon {
width: $topLevelHeight; width: var(--height-topLevel);
min-width: $topLevelHeight; min-width: var(--height-topLevel);
height: $topLevelHeight; height: var(--height-topLevel);
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
&::before { &::before {
position: absolute; position: absolute;
content: ""; content: "";
width: $topLevelHeight; width: var(--height-topLevel);
height: $topLevelHeight; height: var(--height-topLevel);
top: 0; top: 0;
left: 0; left: 0;
mask-position: center; mask-position: center;
@ -344,10 +343,10 @@ $activeBorderColor: $primary-content;
padding: 0 8px 16px 0; padding: 0 8px 16px 0;
& > .mx_SpaceButton { & > .mx_SpaceButton {
height: $topLevelHeight; height: var(--height-topLevel);
&.mx_SpaceButton_active::before { &.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. limitations under the License.
*/ */
$SpaceRoomViewInnerWidth: 428px;
@define-mixin SpacePillButton { @define-mixin SpacePillButton {
position: relative; position: relative;
padding: 16px 32px 16px 72px; padding: 16px 32px 16px 72px;
@ -61,6 +59,8 @@ $SpaceRoomViewInnerWidth: 428px;
} }
.mx_SpaceRoomView { .mx_SpaceRoomView {
--innerWidth: 428px;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
@ -83,11 +83,11 @@ $SpaceRoomViewInnerWidth: 428px;
color: $secondary-content; color: $secondary-content;
margin-top: 12px; margin-top: 12px;
margin-bottom: 24px; margin-bottom: 24px;
max-width: $SpaceRoomViewInnerWidth; max-width: var(--innerWidth);
} }
.mx_AddExistingToSpace { .mx_AddExistingToSpace {
max-width: $SpaceRoomViewInnerWidth; max-width: var(--innerWidth);
.mx_AddExistingToSpace_content { .mx_AddExistingToSpace_content {
height: calc(100vh - 360px); height: calc(100vh - 360px);
@ -98,7 +98,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_buttons { .mx_SpaceRoomView_buttons {
display: block; display: block;
margin-top: 44px; margin-top: 44px;
width: $SpaceRoomViewInnerWidth; width: var(--innerWidth);
text-align: right; /* button alignment right */ text-align: right; /* button alignment right */
.mx_AccessibleButton_hasKind { .mx_AccessibleButton_hasKind {
@ -112,7 +112,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
.mx_Field { .mx_Field {
max-width: $SpaceRoomViewInnerWidth; max-width: var(--innerWidth);
& + .mx_Field { & + .mx_Field {
margin-top: 28px; 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. limitations under the License.
*/ */
$spacePanelWidth: 68px;
.mx_SpaceCreateMenu_wrapper { .mx_SpaceCreateMenu_wrapper {
/* background blur everything except SpacePanel */ /* background blur everything except SpacePanel */
.mx_ContextualMenu_background { .mx_ContextualMenu_background {
background-color: $dialog-backdrop-color; background-color: $dialog-backdrop-color;
opacity: 0.6; opacity: 0.6;
left: $spacePanelWidth; left: 68px;
} }
.mx_ContextualMenu { .mx_ContextualMenu {