imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

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