UNPKG

4.03 kBSCSSView Raw
1// Name: Link
2// Description: Styles for links
3//
4// Component: `uk-link-muted`
5// `uk-link-text`
6// `uk-link-heading`
7// `uk-link-reset`
8//
9// Sub-objects: `uk-link-toggle`
10//
11// ========================================================================
12
13
14// Variables
15// ========================================================================
16
17$link-muted-color: $global-muted-color !default;
18$link-muted-hover-color: $global-color !default;
19
20$link-text-hover-color: $global-muted-color !default;
21
22$link-heading-hover-color: $global-primary-background !default;
23$link-heading-hover-text-decoration: none !default;
24
25
26/* ========================================================================
27 Component: Link
28 ========================================================================== */
29
30
31/* Muted
32 ========================================================================== */
33
34a.uk-link-muted,
35.uk-link-muted a {
36 color: $link-muted-color;
37 @if(mixin-exists(hook-link-muted)) {@include hook-link-muted();}
38}
39
40a.uk-link-muted:hover,
41.uk-link-muted a:hover,
42.uk-link-toggle:hover .uk-link-muted,
43.uk-link-toggle:focus .uk-link-muted {
44 color: $link-muted-hover-color;
45 @if(mixin-exists(hook-link-muted-hover)) {@include hook-link-muted-hover();}
46}
47
48
49/* Text
50 ========================================================================== */
51
52a.uk-link-text,
53.uk-link-text a {
54 color: inherit;
55 @if(mixin-exists(hook-link-text)) {@include hook-link-text();}
56}
57
58a.uk-link-text:hover,
59.uk-link-text a:hover,
60.uk-link-toggle:hover .uk-link-text,
61.uk-link-toggle:focus .uk-link-text {
62 color: $link-text-hover-color;
63 @if(mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();}
64}
65
66
67/* Heading
68 ========================================================================== */
69
70a.uk-link-heading,
71.uk-link-heading a {
72 color: inherit;
73 @if(mixin-exists(hook-link-heading)) {@include hook-link-heading();}
74}
75
76a.uk-link-heading:hover,
77.uk-link-heading a:hover,
78.uk-link-toggle:hover .uk-link-heading,
79.uk-link-toggle:focus .uk-link-heading {
80 color: $link-heading-hover-color;
81 text-decoration: $link-heading-hover-text-decoration;
82 @if(mixin-exists(hook-link-heading-hover)) {@include hook-link-heading-hover();}
83}
84
85
86/* Reset
87 ========================================================================== */
88
89/*
90 * `!important` needed to override inverse component
91 */
92
93a.uk-link-reset,
94.uk-link-reset a {
95 color: inherit !important;
96 text-decoration: none !important;
97 @if(mixin-exists(hook-link-reset)) {@include hook-link-reset();}
98}
99
100
101/* Toggle
102 ========================================================================== */
103
104.uk-link-toggle {
105 color: inherit !important;
106 text-decoration: none !important;
107}
108
109.uk-link-toggle:focus { outline: none; }
110
111
112// Hooks
113// ========================================================================
114
115@if(mixin-exists(hook-link-misc)) {@include hook-link-misc();}
116
117// @mixin hook-link-muted(){}
118// @mixin hook-link-muted-hover(){}
119// @mixin hook-link-text(){}
120// @mixin hook-link-text-hover(){}
121// @mixin hook-link-heading(){}
122// @mixin hook-link-heading-hover(){}
123// @mixin hook-link-reset(){}
124// @mixin hook-link-misc(){}
125
126
127// Inverse
128// ========================================================================
129
130$inverse-link-muted-color: $inverse-global-muted-color !default;
131$inverse-link-muted-hover-color: $inverse-global-color !default;
132$inverse-link-text-hover-color: $inverse-global-muted-color !default;
133$inverse-link-heading-hover-color: $inverse-global-primary-background !default;
134
135
136
137// @mixin hook-inverse-link-muted(){}
138// @mixin hook-inverse-link-muted-hover(){}
139// @mixin hook-inverse-link-text-hover(){}
140// @mixin hook-inverse-link-heading-hover(){}