47 lines
1.1 KiB
SCSS
47 lines
1.1 KiB
SCSS
@use '../../styles/variables' as *;
|
|
@use '../../styles/mixins' as *;
|
|
@use 'sass:selector';
|
|
|
|
.ui-badge {
|
|
@include txt-s-m;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
gap: 4px;
|
|
padding: 4.5px 8.73px;
|
|
border-radius: 8px;
|
|
color: var(--badge-color);
|
|
background-color: var(--badge-background);
|
|
white-space: nowrap;
|
|
|
|
@include element-variant('badge', 'neutral', (
|
|
'color': $clr-cyan-500,
|
|
'background': $clr-grey-300,
|
|
));
|
|
|
|
@include element-variant('badge', 'positive', (
|
|
'color': $clr-green-500,
|
|
'background': $clr-green-100,
|
|
));
|
|
|
|
@include element-variant('badge', 'warning', (
|
|
'color': $clr-warn-500,
|
|
'background': $clr-warn-200,
|
|
));
|
|
|
|
@include element-variant('badge', 'negative', (
|
|
'color': $clr-red-500,
|
|
'background': $clr-red-100,
|
|
));
|
|
|
|
@include element-variant('badge', 'marketing', (
|
|
'color': $clr-white,
|
|
'background': $clr-cyan-300,
|
|
));
|
|
|
|
@include element-variant('badge', 'extended', (
|
|
'color': $clr-cyan-500,
|
|
'background': $clr-white,
|
|
));
|
|
} |