@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
69 lines (67 loc) • 1.84 kB
CSS
.mt-action-menu-item {
&[data-v-de4ae728] {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--scale-size-8);
font-size: var(--font-size-xs);
font-family: var(--font-family-body);
line-height: var(--font-line-height-xs);
font-weight: var(--font-weight-regular);
min-height: var(--scale-size-32);
padding-inline: var(--scale-size-10);
border-radius: var(--border-radius-s);
cursor: pointer;
user-select: none;
text-decoration: none;
}
&[data-highlighted][data-v-de4ae728] {
background-color: var(--color-interaction-secondary-hover);
outline: none;
}
}
.mt-action-menu-item--variant-default {
&[data-v-de4ae728] {
color: var(--color-text-primary-default);
}
&[data-disabled][data-v-de4ae728] {
color: var(--color-text-primary-disabled);
cursor: not-allowed;
}
}
.mt-action-menu-item--variant-critical {
&[data-v-de4ae728] {
color: var(--color-text-critical-default);
}
&[data-disabled][data-v-de4ae728] {
color: var(--color-text-critical-disabled);
cursor: not-allowed;
}
}
.mt-action-menu-item__shortcut[data-v-de4ae728] {
display: flex;
gap: 0.5ch;
margin-left: auto;
color: var(--color-text-secondary-default);
font-size: var(--font-size-xs);
font-family: var(--font-family-body);
line-height: var(--font-line-height-xs);
font-weight: var(--font-weight-regular);
user-select: none;
padding-left: var(--scale-size-24);
}
.mt-action-menu-item__shortcut--disabled[data-v-de4ae728] {
color: var(--color-text-secondary-disabled);
}
.mt-action-menu-item__arrow[data-v-de4ae728] {
margin-left: auto;
padding-left: var(--scale-size-24);
display: grid;
place-items: center;
}
.mt-action-menu-item__external-link[data-v-de4ae728] {
margin-left: auto;
padding-left: var(--scale-size-24);
display: grid;
place-items: center;
}