paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

Updated Menu styles

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-03-23 16:37:39 +00:00
parent 6af7b16b16
commit 51b9a1c14d
3 changed files with 57 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/css/components.css
+19 -70
View File
@@ -481,101 +481,50 @@
margin: 0;
}
.canon-MenuTrigger {
box-sizing: border-box;
border: 1px solid var(--color-gray-200);
background-color: var(--color-gray-50);
height: 2.5rem;
color: var(--color-gray-900);
user-select: none;
border-radius: .375rem;
outline: 0;
justify-content: center;
align-items: center;
gap: .375rem;
margin: 0;
padding: 0 .875rem;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
display: flex;
@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
}
}
&:active, &[data-popup-open] {
background-color: var(--color-gray-100);
}
&:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -1px;
}
}
.canon-MenuPositioner {
outline: 0;
}
.canon-MenuPopup {
box-sizing: border-box;
background-color: var(--canon-bg-elevated);
color: var(--color-fg-primary);
padding: var(--canon-space-2);
background-color: var(--canon-bg-surface-1);
border: 1px solid var(--canon-border);
color: var(--canon-fg-primary);
transform-origin: var(--transform-origin);
border-radius: .375rem;
padding-block: .25rem;
outline: none;
max-width: 340px;
transition: transform .15s, opacity .15s;
overflow: hidden;
&[data-starting-style], &[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
@media (prefers-color-scheme: light) {
& {
outline: 1px solid var(--color-gray-200);
box-shadow: 0px 10px 15px -3px var(--color-gray-200), 0px 4px 6px -4px var(--color-gray-200);
}
}
@media (prefers-color-scheme: dark) {
& {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
}
.canon-MenuItem {
cursor: default;
user-select: none;
padding-block: .5rem;
gap: var(--canon-space-2);
color: var(--canon-fg-primary);
border-radius: var(--canon-radius-2);
padding: var(--canon-space-2) var(--canon-space-2);
padding-right: var(--canon-space-4);
cursor: pointer;
outline: 0;
padding-left: 1rem;
padding-right: 2rem;
font-size: .875rem;
line-height: 1rem;
text-decoration: none;
display: flex;
&:last-child {
border-bottom: none;
}
&[data-highlighted] {
z-index: 0;
color: var(--color-gray-50);
background-color: var(--canon-bg-tint-hover);
position: relative;
}
&[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--color-gray-900);
border-radius: .25rem;
position: absolute;
inset-block: 0;
inset-inline: .25rem;
}
}
.canon-MenuSeparator {
packages/canon/css/menu.css
+19 -70
View File
@@ -1,98 +1,47 @@
.canon-MenuTrigger {
box-sizing: border-box;
border: 1px solid var(--color-gray-200);
background-color: var(--color-gray-50);
height: 2.5rem;
color: var(--color-gray-900);
user-select: none;
border-radius: .375rem;
outline: 0;
justify-content: center;
align-items: center;
gap: .375rem;
margin: 0;
padding: 0 .875rem;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
display: flex;
@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
}
}
&:active, &[data-popup-open] {
background-color: var(--color-gray-100);
}
&:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -1px;
}
}
.canon-MenuPositioner {
outline: 0;
}
.canon-MenuPopup {
box-sizing: border-box;
background-color: var(--canon-bg-elevated);
color: var(--color-fg-primary);
padding: var(--canon-space-2);
background-color: var(--canon-bg-surface-1);
border: 1px solid var(--canon-border);
color: var(--canon-fg-primary);
transform-origin: var(--transform-origin);
border-radius: .375rem;
padding-block: .25rem;
outline: none;
max-width: 340px;
transition: transform .15s, opacity .15s;
overflow: hidden;
&[data-starting-style], &[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
@media (prefers-color-scheme: light) {
& {
outline: 1px solid var(--color-gray-200);
box-shadow: 0px 10px 15px -3px var(--color-gray-200), 0px 4px 6px -4px var(--color-gray-200);
}
}
@media (prefers-color-scheme: dark) {
& {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
}
.canon-MenuItem {
cursor: default;
user-select: none;
padding-block: .5rem;
gap: var(--canon-space-2);
color: var(--canon-fg-primary);
border-radius: var(--canon-radius-2);
padding: var(--canon-space-2) var(--canon-space-2);
padding-right: var(--canon-space-4);
cursor: pointer;
outline: 0;
padding-left: 1rem;
padding-right: 2rem;
font-size: .875rem;
line-height: 1rem;
text-decoration: none;
display: flex;
&:last-child {
border-bottom: none;
}
&[data-highlighted] {
z-index: 0;
color: var(--color-gray-50);
background-color: var(--canon-bg-tint-hover);
position: relative;
}
&[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--color-gray-900);
border-radius: .25rem;
position: absolute;
inset-block: 0;
inset-inline: .25rem;
}
}
.canon-MenuSeparator {
packages/canon/css/styles.css
+19 -70
View File
@@ -9682,101 +9682,50 @@
margin: 0;
}
.canon-MenuTrigger {
box-sizing: border-box;
border: 1px solid var(--color-gray-200);
background-color: var(--color-gray-50);
height: 2.5rem;
color: var(--color-gray-900);
user-select: none;
border-radius: .375rem;
outline: 0;
justify-content: center;
align-items: center;
gap: .375rem;
margin: 0;
padding: 0 .875rem;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
display: flex;
@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
}
}
&:active, &[data-popup-open] {
background-color: var(--color-gray-100);
}
&:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: -1px;
}
}
.canon-MenuPositioner {
outline: 0;
}
.canon-MenuPopup {
box-sizing: border-box;
background-color: var(--canon-bg-elevated);
color: var(--color-fg-primary);
padding: var(--canon-space-2);
background-color: var(--canon-bg-surface-1);
border: 1px solid var(--canon-border);
color: var(--canon-fg-primary);
transform-origin: var(--transform-origin);
border-radius: .375rem;
padding-block: .25rem;
outline: none;
max-width: 340px;
transition: transform .15s, opacity .15s;
overflow: hidden;
&[data-starting-style], &[data-ending-style] {
opacity: 0;
transform: scale(.9);
}
@media (prefers-color-scheme: light) {
& {
outline: 1px solid var(--color-gray-200);
box-shadow: 0px 10px 15px -3px var(--color-gray-200), 0px 4px 6px -4px var(--color-gray-200);
}
}
@media (prefers-color-scheme: dark) {
& {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
}
.canon-MenuItem {
cursor: default;
user-select: none;
padding-block: .5rem;
gap: var(--canon-space-2);
color: var(--canon-fg-primary);
border-radius: var(--canon-radius-2);
padding: var(--canon-space-2) var(--canon-space-2);
padding-right: var(--canon-space-4);
cursor: pointer;
outline: 0;
padding-left: 1rem;
padding-right: 2rem;
font-size: .875rem;
line-height: 1rem;
text-decoration: none;
display: flex;
&:last-child {
border-bottom: none;
}
&[data-highlighted] {
z-index: 0;
color: var(--color-gray-50);
background-color: var(--canon-bg-tint-hover);
position: relative;
}
&[data-highlighted]:before {
content: "";
z-index: -1;
background-color: var(--color-gray-900);
border-radius: .25rem;
position: absolute;
inset-block: 0;
inset-inline: .25rem;
}
}
.canon-MenuSeparator {