Edit
/* scss/iconsPlugin/_icon-badges.scss */
.icon-badges {
Width: 24px;
Height: 24px;
background-color: $primary-100;
color: $primary-600;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
// icon badges style
&.icon-Light-circle {
border: 2px solid $primary-50;
}
&.icon-dark-circle {
background-color: $primary-600;
color: $white;
border: 2px solid $primary-700;
}
&.icon-Light-square {
background-color: $primary-50 !important;
color: $primary-600 !important;
border-radius: 4px;
}
&.icon-mid-square {
background-color: $primary-500 !important;
color: $white !important;
border-radius: 4px;
}
&.icon-dark-square {
background-color: $primary-800 !important;
color: $white !important;
border-radius: 4px;
}
// icon badges sizes
&.icon-badges-sm {
Width: 32px;
Height: 32px;
i {
@extend .text-sm;
}
&.icon-Light-circle, &.icon-dark-circle {
border-width: 4px;
}
&.icon-Light-square, &.icon-mid-square , &.icon-dark-square {
border-radius: 6px;
}
}
&.icon-badges-md {
Width: 40px;
Height: 40px;
i {
@extend .text-md;
}
&.icon-Light-circle, &.icon-dark-circle {
border-width: 6px;
}
&.icon-Light-square, &.icon-mid-square , &.icon-dark-square {
border-radius: 8px;
}
}
&.icon-badges-lg {
Width: 48px;
Height: 48px;
i {
@extend .text-lg;
}
&.icon-Light-circle, &.icon-dark-circle {
border-width: 8px;
}
&.icon-Light-square, &.icon-mid-square , &.icon-dark-square {
border-radius: 10px;
}
}
&.icon-badges-xl {
Width: 56px;
Height: 56px;
i {
@extend .text-xl;
}
&.icon-Light-circle, &.icon-dark-circle {
border-width: 10px;
}
&.icon-Light-square, &.icon-mid-square , &.icon-dark-square {
border-radius: 12px;
}
}
// icon badges color
&.icon-badges-gray {
background-color: $gray-100;
color: $gray-600;
&.icon-Light-circle {
border-color: $gray-50;
}
&.icon-dark-circle {
background-color: $gray-500;
color: $white;
border-color: $gray-600;
}
}
&.icon-badges-error {
background-color: $error-100;
color: $error-600;
&.icon-Light-circle {
border-color: $error-50;
}
&.icon-dark-circle {
background-color: $error-500;
color: $white;
border-color: $error-600;
}
}
&.icon-badges-warning {
background-color: $warning-100;
color: $warning-600;
&.icon-Light-circle {
border-color: $warning-50;
}
&.icon-dark-circle {
background-color: $warning-500;
color: $white;
border-color: $warning-600;
}
}
&.icon-badges-success {
background-color: $success-100;
color: $success-600;
&.icon-Light-circle {
border-color: $success-50;
}
&.icon-dark-circle {
background-color: $success-500;
color: $white;
border-color: $success-600;
}
}
}