blob: ab79ae288bbef509a4c4c78e967126d4d7b51297 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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(){}
|
