Project

General

Profile

1
// Name:            Link
2
// Description:     Styles for links
3
//
4
// Component:       `uk-link-muted`
5
//                  `uk-link-reset`
6
//
7
// ========================================================================
8

    
9

    
10
// Variables
11
// ========================================================================
12

    
13
@link-muted-color:                              @global-muted-color;
14
@link-muted-hover-color:                        @global-color;
15

    
16

    
17
/* ========================================================================
18
   Component: Link
19
 ========================================================================== */
20

    
21

    
22
/* Muted
23
 ========================================================================== */
24

    
25
a.uk-link-muted,
26
.uk-link-muted a {
27
    color: @link-muted-color;
28
    .hook-link-muted;
29
}
30

    
31
a.uk-link-muted:hover,
32
.uk-link-muted a:hover {
33
    color: @link-muted-hover-color;
34
    .hook-link-muted-hover;
35
}
36

    
37

    
38
/* Reset
39
 ========================================================================== */
40

    
41
/*
42
 * `!important` needed to override inverse component
43
 */
44

    
45
a.uk-link-reset,
46
a.uk-link-reset:hover,
47
a.uk-link-reset:focus,
48
.uk-link-reset a,
49
.uk-link-reset a:hover,
50
.uk-link-reset a:focus {
51
    color: inherit !important;
52
    text-decoration: none !important;
53
    .hook-link-reset;
54
}
55

    
56

    
57
// Hooks
58
// ========================================================================
59

    
60
.hook-link-misc;
61

    
62
.hook-link-muted() {}
63
.hook-link-muted-hover() {}
64
.hook-link-reset() {}
65
.hook-link-misc() {}
66

    
67

    
68
// Inverse
69
// ========================================================================
70

    
71
@inverse-link-muted-color:                        @inverse-global-muted-color;
72
@inverse-link-muted-hover-color:                  @inverse-global-color;
73

    
74
.hook-inverse() {
75

    
76
    a.uk-link-muted,
77
    .uk-link-muted a {
78
        color: @inverse-link-muted-color;
79
        .hook-inverse-link-muted;
80
    }
81

    
82
    a.uk-link-muted:hover,
83
    .uk-link-muted a:hover {
84
        color: @inverse-link-muted-hover-color;
85
        .hook-inverse-link-muted-hover;
86
    }
87

    
88
}
89

    
90
.hook-inverse-link-muted() {}
91
.hook-inverse-link-muted-hover() {}
(32-32/66)