Project

General

Profile

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() {}
(31-31/66)