Changeset View
Changeset View
Standalone View
Standalone View
swh/web/tests/resources/contents/code/extensions/badge.less
- This file was added.
// Name: Badge | |||||
// | |||||
// Description: Define style for badges | |||||
// | |||||
// Component: `.am-badge` | |||||
// | |||||
// Modifiers: `.am-badge-primary` | |||||
// `.am-badge-secondary` | |||||
// `.am-badge-success` | |||||
// `.am-badge-warning` | |||||
// `.am-badge-danger` | |||||
// | |||||
// ============================================================================= | |||||
/* ========================================================================== | |||||
Component: Badge | |||||
============================================================================ */ | |||||
.@{ns}badge { | |||||
display: inline-block; | |||||
min-width: 10px; | |||||
padding: 0.25em 0.625em; | |||||
font-size: @font-size-xs; | |||||
font-weight: @badge-font-weight; | |||||
color: @badge-color; | |||||
line-height: @badge-line-height; | |||||
vertical-align: baseline; | |||||
white-space: nowrap; | |||||
text-align: center; | |||||
background-color: @badge-bg; | |||||
border-radius: @badge-border-radius; | |||||
&:empty { | |||||
display: none; | |||||
} | |||||
&.@{ns}square { | |||||
border-radius: 0; | |||||
} | |||||
&.@{ns}radius { | |||||
border-radius: @radius-normal; | |||||
} | |||||
&.@{ns}round { | |||||
border-radius: @global-rounded; | |||||
} | |||||
.hook-badge; | |||||
} | |||||
// link badge | |||||
a.@{ns}badge { | |||||
&:hover, | |||||
&:focus { | |||||
color: @badge-link-hover-color; | |||||
text-decoration: none; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
// Color modifier | |||||
// ============================================================================= | |||||
.@{ns}badge-primary { | |||||
background-color: @badge-primary-bg; | |||||
.hook-badge-primary; | |||||
} | |||||
.@{ns}badge-secondary { | |||||
background-color: @badge-secondary-bg; | |||||
.hook-badge-secondary; | |||||
} | |||||
.@{ns}badge-success { | |||||
background-color: @badge-success-bg; | |||||
.hook-badge-success; | |||||
} | |||||
.@{ns}badge-warning { | |||||
background-color: @badge-warning-bg; | |||||
.hook-badge-warning; | |||||
} | |||||
.@{ns}badge-danger { | |||||
background-color: @badge-danger-bg; | |||||
.hook-badge-danger; | |||||
} | |||||
// Hooks | |||||
// ============================================================================= | |||||
.hook-badge() {} | |||||
.hook-badge-primary() {} | |||||
.hook-badge-secondary() {} | |||||
.hook-badge-success() {} | |||||
.hook-badge-warning() {} | |||||
.hook-badge-danger() {} |