121 lines
2.3 KiB
SCSS
121 lines
2.3 KiB
SCSS
/**=====================
|
|
Badge CSS start
|
|
==========================**/
|
|
|
|
.badge-spacing {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
|
|
.badge {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
|
|
&.badge {
|
|
svg {
|
|
padding-top: 0px;
|
|
}
|
|
}
|
|
|
|
&.rounded-circle {
|
|
padding: 10px 14px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&.badge-p-space {
|
|
padding: 10px 13px;
|
|
}
|
|
|
|
&+.badge {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
&.btn-p-space {
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.badge {
|
|
&:hover {
|
|
color: inherit;
|
|
|
|
&.badge-dark {
|
|
&:hover {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
padding: $badge-padding;
|
|
font-family: $font-roboto, $font-serif;
|
|
font-weight: 500;
|
|
|
|
&+.badge {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
svg {
|
|
width: $badge-svg-size;
|
|
height: $badge-svg-size;
|
|
padding-top: 3px;
|
|
}
|
|
}
|
|
|
|
@each $pill-badge-name,
|
|
$pill-badge-color in (primary, var(--theme-deafult)),
|
|
(secondary, $secondary-color),
|
|
(success, $success-color),
|
|
(danger, $danger-color),
|
|
(info, $info-color),
|
|
(light, $light-color),
|
|
(dark, $dark-color),
|
|
(warning, $warning-color) {
|
|
.pill-badge-#{$pill-badge-name} {
|
|
background-color: $pill-badge-color;
|
|
box-shadow: -0.5px 4.33px 16px 0px rgba($pill-badge-color, 0.25);
|
|
color: $white;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.pill-badge-primary {
|
|
background-color: var(--theme-deafult);
|
|
}
|
|
|
|
.pill-badge-secondary {
|
|
background-color: var(--theme-secondary);
|
|
}
|
|
|
|
@each $round-badge-name,
|
|
$round-badge-color in (primary, var(--theme-deafult)),
|
|
(secondary, $secondary-color),
|
|
(success, $success-color),
|
|
(danger, $danger-color),
|
|
(info, $info-color),
|
|
(light, $light-color),
|
|
(dark, $dark-color),
|
|
(warning, $warning-color) {
|
|
.round-badge-#{$round-badge-name} {
|
|
border-radius: 6px;
|
|
background-color: $round-badge-color;
|
|
box-shadow: -0.5px -6.67px 14px 0px rgba($round-badge-color, 0.18);
|
|
color: $white !important;
|
|
}
|
|
}
|
|
|
|
.round-badge-primary {
|
|
background-color: var(--theme-deafult);
|
|
}
|
|
|
|
.round-badge-secondary {
|
|
background-color: var(--theme-secondary);
|
|
}
|
|
|
|
/**=====================
|
|
Badge CSS Ends
|
|
==========================**/ |