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

Update right panel base card styling to match Compound (#12768)

Browse source 
* Update base card styling to match Compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-16 10:03:35 +01:00 • committed by GitHub
parent 5f10ccb5e4
commit f7a078d250
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 118 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

59
res/css/views/right_panel/_BaseCard.pcss
View file

@ -27,7 +27,7 @@ limitations under the License.
.mx_BaseCard_header {
height: 64px;
padding: var(--cpd-space-3x);
padding: var(--cpd-space-4x);
box-sizing: border-box;
/* changing the color from $separator to transparent as it is
the best visual output during the transition period. This will be
@ -36,8 +36,13 @@ limitations under the License.
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cpd-space-2x);
gap: var(--cpd-space-3x);
flex-shrink: 0;
border-block-end: var(--cpd-border-width-1) solid $separator;
.mx_BaseCard_header_spacer {
flex: 1;
}
> h2 {
margin: 0 44px;
@ -155,52 +160,6 @@ limitations under the License.
}
}
.mx_BaseCard_back,
.mx_BaseCard_close {
flex-shrink: 0;
position: relative;
/* @TODO(kerrya) background colours here are not semantic
these buttons to be replaced with IconButton after secondary variant is added
https://github.com/vector-im/compound/issues/279 */
background-color: var(--cpd-color-bg-subtle-secondary);
width: var(--BaseCard_header-button-size);
height: var(--BaseCard_header-button-size);
border-radius: 50%;
&:hover {
background-color: var(--cpd-color-bg-subtle-primary);
}
&::before {
content: "";
position: absolute;
height: inherit;
width: inherit;
top: 0;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
background-color: var(--cpd-color-icon-secondary);
}
}
.mx_BaseCard_back {
order: 0; /* always first! */
&::before {
transform: rotate(90deg);
mask-size: 22px;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
}
}
.mx_BaseCard_close {
order: 999; /* always last */
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title {
.mx_ContextualMenu {
position: initial;
@ -235,7 +194,3 @@ limitations under the License.
}
}
}
.mx_BaseCard_headerProp {
flex: 1 1 100%;
}