diff options
1 files changed, 70 insertions, 0 deletions
| -rw-r--r-- | src/_badges.scss | 70 |
diff --git a/src/_badges.scss b/src/_badges.scss new file mode 100644 index 0000000..9f1d734 --- /dev/null +++ b/src/_badges.scss @@ -0,0 +1,70 @@ +// Badges +.badge { + position: relative; + white-space: nowrap; + + &[data-badge], + &:not([data-badge]) { + &::after { + background: $primary-color; + background-clip: padding-box; + border-radius: .5rem; + box-shadow: 0 0 0 .1rem $bg-color-light; + color: $light-color; + content: attr(data-badge); + display: inline-block; + transform: translate(-.1rem, -.5rem); + } + } + &[data-badge] { + &::after { + font-size: $font-size-sm; + height: 18px; + line-height: 1; + min-width: 18px; + padding: 3px 5px; + text-align: center; + white-space: nowrap; + } + } + &:not([data-badge]), + &[data-badge=''] { + &::after { + height: 6px; + min-width: 6px; + padding: 0; + width: 6px; + } + } + + // Badges for Buttons + &.btn { + &::after { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + } + } + + // Badges for Avatars + &.avatar { + &::after { + position: absolute; + top: 14.64%; + right: 14.64%; + transform: translate(50%, -50%); + z-index: $zindex-1; + } + } + + &.avatar-xs { + &::after { + content: ""; + height: $unit-2; + min-width: $unit-2; + padding: 0; + width: $unit-2; + } + } +} |