platform/static/assets/scss/volt/components/_badge.scss
Administrator 9e7fc7b4c1 initial
2023-09-23 16:13:11 +03:00

99 lines
1.7 KiB
SCSS

/**
* = Badges
*/
.badge {
font-size:$badge-font-size;
font-weight: $badge-font-weight;
a {
color: $white;
}
&.super-badge{
vertical-align: super;
}
}
// Variations
.badge-pill {
padding-right: $badge-pill-padding-x;
padding-left: $badge-pill-padding-x;
}
// Multiple inline badges
.badge-inline {
margin-right: .625rem;
& + span {
top: 2px;
position: relative;
& > a {
text-decoration: underline;
}
}
}
// Sizes
.badge-sm {
padding: .2rem .6rem;
}
.badge-lg {
font-size: $font-size-lg;
padding: .35rem .85rem;
}
//button badges
.btn{
.badge-corner{
position: absolute;
top: -50%;
right: .5rem;
transform: translate(50%,50%);
margin: 0;
border: 3px solid;
padding-left: .5rem;
padding-right: .5rem;
}
}
//Tags
.wi-tags{
a {
display: inline-block;
padding: 0.125rem 0.875rem;
margin: 0.25rem;
line-height: 2;
font-size: $font-size-sm;
box-shadow: $box-shadow-sm;
background-color: $white;
}
}
.pixel-pro-badge{
position: relative;
font-size: $font-size-sm;
text-transform: uppercase;
font-weight: $font-weight-bold;
right: -11px;
padding: 4px 12px;
top: -30px;
background: $white;
@include border-radius($border-radius-sm);
@include box-shadow($box-shadow-sm);
@include media-breakpoint-down(sm){
font-size: $font-size-base;
right: -13px;
padding: 5px 10px;
top: -23px;
}
}
.subscription-badge {
top: -19px;
right: -12px;
font-size: .75rem;
}