@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/).
135 lines • 3.78 kB
CSS
/* ------------------------------------
* Administration variables
* Table of contents
*
* 1. Primary colors
* 2. Status colors
* 3. Module colors
* 4. Generic colors
* 5. Gradients
* 6. Typography
* 7. Miscellaneous
* 8. z-index
* 9. Global widths
* ------------------------------------ */
/* ------------------------------------
* 1. Primary colors
* ------------------------------------ */
/* ------------------------------------
* 2. Status colors
* ------------------------------------ */
/* ------------------------------------
* 3. Module colors
* ------------------------------------ */
/* ------------------------------------
* 4. Generic colors
* ------------------------------------ */
/* ------------------------------------
* 5. Gradients
* ------------------------------------ */
/* ------------------------------------
* 6. Typography
* ------------------------------------ */
/* ------------------------------------
* 7. Miscellaneous
* ------------------------------------ */
/* ------------------------------------
* 8. z-index
* ------------------------------------ */
/**
* Use inter-font instead of normal font for popover. Also add the new variables to this file.
*/
.mt-popover-item-result__group-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--scale-size-4);
margin-top: var(--scale-size-8);
}
.mt-popover-item-result__group-label {
text-transform: uppercase;
}
.mt-popover-item-result__group-action {
transition: 0.3s all ease;
background-color: transparent;
border: none;
color: var(--color-text-brand-default);
font-family: var(--font-family-body);
font-size: var(--font-size-xs);
line-height: var(--font-line-height-xs);
font-weight: var(--font-weight-semibold);
text-decoration: underline;
cursor: pointer;
}
.mt-popover-item-result__group-action:hover {
color: #0e82ff;
}
.mt-popover-item-result__group-action:active {
color: #0870ff;
}
.mt-popover-item-result__option {
position: relative;
}
.mt-popover-item-result [class^=mt-popover-item-result__option_drop_] {
position: absolute;
height: 50%;
width: 100%;
left: 0;
opacity: 0;
pointer-events: none;
transition: 0.15s all ease;
}
.mt-popover-item-result [class^=mt-popover-item-result__option_drop_].is--valid-drop {
opacity: 1;
}
.mt-popover-item-result__option_drop_before {
top: 0;
box-shadow: inset 0px 4px 4px -4px #0870ff;
}
.mt-popover-item-result__option_drop_after {
bottom: 0;
box-shadow: inset 0px -4px 4px -4px #0870ff;
}
.mt-popover-item-result .mt-popover-item {
transition: 0.3s all ease;
padding-top: var(--scale-size-4);
padding-bottom: var(--scale-size-4);
}
.mt-popover-item-result .mt-popover-item.is--dragging {
opacity: 0.25;
border: none;
background-color: inherit;
}
.mt-popover-item-result .mt-popover-item.is--dragging > * {
opacity: 1;
}
.mt-popover-item-result .option-item-enter-active,
.mt-popover-item-result .option-item-leave-active {
transition: opacity 0.5s;
}
.mt-popover-item-result .option-item-leave-active {
transition: opacity 0.2s;
position: absolute;
opacity: 0;
}
.mt-popover-item-result .option-item-enter {
opacity: 0;
}
.mt-popover-item-result .option-item-move {
transition: transform 0.3s ease;
}
.mt-popover-item-result .option-fade-enter-active,
.mt-popover-item-result .option-fade-leave-active {
transition: opacity 0.3s;
}
.mt-popover-item-result .option-fade-enter,
.mt-popover-item-result .option-fade-leave-to {
opacity: 0;
}
body.is-popover-item-result-dragging [class^=mt-popover-item-result__option_drop_] {
pointer-events: all;
}
body.is-popover-item-result-dragging .mt-popover-item.is--drag-element {
box-shadow: none;
transition: 0.3s rotate ease-in-out;
}