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

Refine menu, toast, and popover colors (#12247)

Browse source 
So that they use Compound semantic colors correctly and appear more similar to the real components now found in Compound.
This commit is contained in:
Robin 2024-02-14 17:30:16 -05:00 • committed by GitHub
parent 35ad92bf54
commit 0856c7617d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 32 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

29
res/css/views/context_menus/_IconizedContextMenu.pcss
View file

@ -36,26 +36,7 @@ limitations under the License.
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
&:nth-child(n + 2),
.mx_IconizedContextMenu_optionList_notFirst {
/* This is a bit of a hack when we could just use a simple border-top property, */
/* however we have a (kinda) good reason for doing it this way: we need opacity. */
/* To get the right color, we need an opacity modifier which means we have to work */
/* around the problem. PostCSS doesn't support the opacity() function, and if we */
/* use something like postcss-functions we quickly run into an issue where the */
/* function we would define gets passed a CSS variable for custom themes, which */
/* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
//
/* Therefore, we just hack in a line and border the thing ourselves */
&::before {
border-top: 1px solid $primary-content;
opacity: 0.1;
content: "";
/* Counteract the padding problems (width: 100% ignores the 40px padding, */
/* unless we position it absolutely then it does the right thing). */
width: 100%;
position: absolute;
left: 0;
}
border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
}
/* round the top corners of the top button for the hover effect to be bounded */
@ -87,7 +68,7 @@ limitations under the License.
&:hover,
&:focus-visible {
background-color: $menu-selected-color;
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
&.mx_AccessibleButton_disabled {
@ -137,7 +118,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $icon-button-color;
background-color: var(--cpd-color-icon-primary);
}
}
@ -147,7 +128,7 @@ limitations under the License.
}
.mx_IconizedContextMenu_icon::before {
background-color: $alert;
background-color: var(--cpd-color-icon-critical-primary);
}
}
@ -172,7 +153,7 @@ limitations under the License.
&.mx_IconizedContextMenu_compact {
.mx_IconizedContextMenu_optionList > * {
padding: 8px 16px 8px 11px;
padding: 8px 16px 8px 12px;
}
}