1
|
// Name: Label
|
2
|
// Description: Component to indicate important notes
|
3
|
//
|
4
|
// Component: `uk-label`
|
5
|
//
|
6
|
// Modifiers: `uk-label-success`
|
7
|
// `uk-label-warning`
|
8
|
// `uk-label-danger`
|
9
|
//
|
10
|
// ========================================================================
|
11
|
|
12
|
|
13
|
// Variables
|
14
|
// ========================================================================
|
15
|
|
16
|
@label-padding-vertical: 0;
|
17
|
@label-padding-horizontal: @global-small-margin;
|
18
|
@label-background: @global-primary-background;
|
19
|
@label-line-height: @global-line-height;
|
20
|
@label-font-size: @global-small-font-size;
|
21
|
@label-color: @global-inverse-color;
|
22
|
|
23
|
@label-success-background: @global-success-background;
|
24
|
@label-success-color: @global-inverse-color;
|
25
|
@label-warning-background: @global-warning-background;
|
26
|
@label-warning-color: @global-inverse-color;
|
27
|
@label-danger-background: @global-danger-background;
|
28
|
@label-danger-color: @global-inverse-color;
|
29
|
|
30
|
|
31
|
/* ========================================================================
|
32
|
Component: Label
|
33
|
========================================================================== */
|
34
|
|
35
|
.uk-label {
|
36
|
display: inline-block;
|
37
|
padding: @label-padding-vertical @label-padding-horizontal;
|
38
|
background: @label-background;
|
39
|
line-height: @label-line-height;
|
40
|
font-size: @label-font-size;
|
41
|
color: @label-color;
|
42
|
vertical-align: middle;
|
43
|
white-space: nowrap;
|
44
|
.hook-label;
|
45
|
}
|
46
|
|
47
|
|
48
|
/* Color modifiers
|
49
|
========================================================================== */
|
50
|
|
51
|
/*
|
52
|
* Success
|
53
|
*/
|
54
|
|
55
|
.uk-label-success {
|
56
|
background-color: @label-success-background;
|
57
|
color: @label-success-color;
|
58
|
.hook-label-success;
|
59
|
}
|
60
|
|
61
|
/*
|
62
|
* Warning
|
63
|
*/
|
64
|
|
65
|
.uk-label-warning {
|
66
|
background-color: @label-warning-background;
|
67
|
color: @label-warning-color;
|
68
|
.hook-label-warning;
|
69
|
}
|
70
|
|
71
|
/*
|
72
|
* Danger
|
73
|
*/
|
74
|
|
75
|
.uk-label-danger {
|
76
|
background-color: @label-danger-background;
|
77
|
color: @label-danger-color;
|
78
|
.hook-label-danger;
|
79
|
}
|
80
|
|
81
|
|
82
|
// Hooks
|
83
|
// ========================================================================
|
84
|
|
85
|
.hook-label-misc;
|
86
|
|
87
|
.hook-label() {}
|
88
|
.hook-label-success() {}
|
89
|
.hook-label-warning() {}
|
90
|
.hook-label-danger() {}
|
91
|
.hook-label-misc() {}
|
92
|
|
93
|
|
94
|
// Inverse
|
95
|
// ========================================================================
|
96
|
|
97
|
@inverse-label-background: @inverse-global-primary-background;
|
98
|
@inverse-label-color: @inverse-global-inverse-color;
|
99
|
|
100
|
.hook-inverse() {
|
101
|
|
102
|
.uk-label {
|
103
|
background-color: @inverse-label-background;
|
104
|
color: @inverse-label-color;
|
105
|
.hook-inverse-label;
|
106
|
}
|
107
|
|
108
|
}
|
109
|
|
110
|
.hook-inverse-label() {}
|