@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/).
49 lines (47 loc) • 890 B
CSS
.mt-color-badge {
display: inline-block;
height: var(--scale-size-8);
width: var(--scale-size-8);
margin: 0 0 1px var(--scale-size-10);
border-radius: 2px;
background-color: #d1d9e0;
&.is--rounded {
border-radius: 100%;
}
&.is--warning {
background-color: #ff9800;
}
&.is--critical,
&.is--danger {
background-color: #de294c;
}
&.is--positive {
background-color: #37d046;
}
&.is--info {
background-color: #189eff;
}
&.has--text {
height: auto;
width: auto;
padding: var(--scale-size-4) var(--scale-size-8);
border-radius: 8px;
&.is--warning {
background-color: #fff3e0;
color: #e65100;
}
&.is--critical,
&.is--danger {
background-color: #fbe5ea;
color: #c80f24;
}
&.is--positive {
background-color: #e7f9e9;
color: #16b320;
}
&.is--info {
background-color: #e3f3ff;
color: #0870ff;
}
}
}