Badges

Success Danger Warning Info Disable Default

HTML

<span class="badge || badge_success">Success</span>
<span class="badge || badge_danger">Danger</span>
<span class="badge || badge_warning">Warning</span>
<span class="badge || badge_info">Info</span>
<span class="badge || badge_disable">Disable</span>
<span class="badge || badge_default">Default</span>

CSS

.badge{display:inline-block;font:700 1.4rem/3.2rem 'Nunito Sans',sans-serif;height:3rem;min-width:6.25em;padding:0 1.5rem;-webkit-border-radius:1.5rem;-moz-border-radius:1.5rem;border-radius:1.5rem;text-align:center;white-space:nowrap;text-transform:capitalize;text-decoration:none;-webkit-transition:.3s ease-out;-o-transition:.3s ease-out;-moz-transition:.3s ease-out;transition:.3s ease-out;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.badge.badge_success{color:#fff;background-color:#28a745;border-color:#28a745}
.badge.badge_danger{color:#fff;background-color:#dc3545;border-color:#dc3545}
.badge.badge_warning{color:#000;background-color:#ffb92e;border-color:#ffb92e}
.badge.badge_info{color:#fff;background-color:#119eb5;border-color:#119eb5}
.badge.badge_disable{color:#000;background-color:#ccc;border-color:#ccc}
.badge.badge_default{color:#fff;background-color:#607487;border-color:#607487}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.badge.badge_success:hover{color:#fff;background-color:#24993f;border-color:#24993f}
	.badge.badge_danger:hover{color:#fff;background-color:#c82333;border-color:#c82333}
	.badge.badge_warning:hover{color:#000;background-color:#fdae11;border-color:#fdae11}
	.badge.badge_info:hover{color:#fff;background-color:#0890a7;border-color:#0890a7}
	.badge.badge_disable:hover{color:#000;background-color:#c3bfbf;border-color:#c3bfbf}
	.badge.badge_default:hover{color:#fff;background-color:#50606e;border-color:#50606e}
}

SCSS

/* Vars */
$font:           'Nunito Sans', sans-serif;
$cb:              #000000;
$white:           #ffffff;
$success:         #28a745;
$success2:        #24993f;
$danger:          #dc3545;
$danger2:         #c82333;
$warning:         #ffb92e;
$warning2:        #fdae11;
$info:            #119eb5;
$info2:           #0890a7;
$disable:         #cccccc;
$disable2:        #c3bfbf;
$default:         #607487;
$default2:        #50606e;

.badge {
	display: inline-block;
	font: 700 1.4rem/3.2rem $font;
	height: 3rem;
	min-width: 6.25em;
	padding: 0 1.5rem;
	border-radius: 1.5rem;
	text-align: center;
	white-space: nowrap;
	text-transform: capitalize;
	text-decoration: none;
	transition: .3s ease-out;
	cursor: pointer;
	user-select: none;
	appearance: none;
	
	&.badge_success {
		color: $white;
		background-color: $success;
		border-color: $success;
	}
	
	&.badge_danger {
		color: $white;
		background-color: $danger;
		border-color: $danger;
	}
	
	&.badge_warning {
		color: $cb;
		background-color: $warning;
		border-color: $warning;
	}
	
	&.badge_info {
		color: $white;
		background-color: $info;
		border-color: $info;
	}
	
	&.badge_disable {
		color: $cb;
		background-color: $disable;
		border-color: $disable;
	}
	
	&.badge_default {
		color: $white;
		background-color: $default;
		border-color: $default;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.badge {
		&.badge_success {
			&:hover {
				color: $white;
				background-color: $success2;
				border-color: $success2;
			}
		}
		
		&.badge_danger {
			&:hover {
				color: $white;
				background-color: $danger2;
				border-color: $danger2;
			}
		}
		
		&.badge_warning {
			&:hover {
				color: $cb;
				background-color: $warning2;
				border-color: $warning2;
			}
		}
		
		&.badge_info {
			&:hover {
				color: $white;
				background-color: $info2;
				border-color: $info2;
			}
		}
		
		&.badge_disable {
			&:hover {
				color: $cb;
				background-color: $disable2;
				border-color: $disable2;
			}
		}
		
		&.badge_default {
			&:hover {
				color: $white;
				background-color: $default2;
				border-color: $default2;
			}
		}
	}
}