diff options
Diffstat (limited to 'scss/uikit/components/badge.scss')
| -rw-r--r-- | scss/uikit/components/badge.scss | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/scss/uikit/components/badge.scss b/scss/uikit/components/badge.scss new file mode 100644 index 00000000..ab79ae28 --- /dev/null +++ b/scss/uikit/components/badge.scss @@ -0,0 +1,83 @@ +// Name: Badge +// Description: Component to create notification badges +// +// Component: `uk-badge` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$badge-size: 22px !default; +$badge-padding-vertical: 0 !default; +$badge-padding-horizontal: 5px !default; +$badge-border-radius: 500px !default; +$badge-background: $global-primary-background !default; +$badge-color: $global-inverse-color !default; +$badge-font-size: $global-small-font-size !default; + +$badge-hover-color: $global-inverse-color !default; + + +/* ======================================================================== + Component: Badge + ========================================================================== */ + +/* + * 1. Style + * 2. Center child vertically and horizontally + */ + +.uk-badge { + box-sizing: border-box; + min-width: $badge-size; + height: $badge-size; + padding: $badge-padding-vertical $badge-padding-horizontal; + border-radius: $badge-border-radius; + vertical-align: middle; + /* 1 */ + background: $badge-background; + color: $badge-color; + font-size: $badge-font-size; + /* 2 */ + display: inline-flex; + justify-content: center; + align-items: center; + @if(mixin-exists(hook-badge)) {@include hook-badge();} +} + +/* + * Required for `a` + */ + +.uk-badge:hover, +.uk-badge:focus { + color: $badge-hover-color; + text-decoration: none; + outline: none; + @if(mixin-exists(hook-badge-hover)) {@include hook-badge-hover();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-badge-misc)) {@include hook-badge-misc();} + +// @mixin hook-badge(){} +// @mixin hook-badge-hover(){} +// @mixin hook-badge-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-badge-background: $inverse-global-primary-background !default; +$inverse-badge-color: $inverse-global-inverse-color !default; +$inverse-badge-hover-color: $inverse-global-inverse-color !default; + + + +// @mixin hook-inverse-badge(){} +// @mixin hook-inverse-badge-hover(){}
\ No newline at end of file |