1
|
// Name: Icon
|
2
|
// Description: Component to create icons
|
3
|
//
|
4
|
// Component: `uk-icon`
|
5
|
//
|
6
|
// Modifiers: `uk-icon-image`
|
7
|
// `uk-icon-link`
|
8
|
// `uk-icon-button`
|
9
|
//
|
10
|
// States: `uk-preserve`
|
11
|
//
|
12
|
// ========================================================================
|
13
|
|
14
|
|
15
|
// Variables
|
16
|
// ========================================================================
|
17
|
|
18
|
$icon-image-size: 20px !default;
|
19
|
|
20
|
$icon-link-color: $global-muted-color !default;
|
21
|
$icon-link-hover-color: $global-color !default;
|
22
|
$icon-link-active-color: darken($global-color, 5%) !default;
|
23
|
|
24
|
$icon-button-size: 36px !default;
|
25
|
$icon-button-border-radius: 500px !default;
|
26
|
$icon-button-background: $global-muted-background !default;
|
27
|
$icon-button-color: $global-muted-color !default;
|
28
|
|
29
|
$icon-button-hover-background: darken($icon-button-background, 5%) !default;
|
30
|
$icon-button-hover-color: $global-color !default;
|
31
|
|
32
|
$icon-button-active-background: darken($icon-button-background, 10%) !default;
|
33
|
$icon-button-active-color: $global-color !default;
|
34
|
|
35
|
|
36
|
/* ========================================================================
|
37
|
Component: Icon
|
38
|
========================================================================== */
|
39
|
|
40
|
/*
|
41
|
* 1. Fill all SVG elements with the current text color if no `fill` attribute is set
|
42
|
* 2. Let the container fit the height of the icon
|
43
|
*/
|
44
|
|
45
|
.uk-icon {
|
46
|
display: inline-block;
|
47
|
/* 1 */
|
48
|
fill: currentcolor;
|
49
|
/* 2 */
|
50
|
line-height: 0;
|
51
|
}
|
52
|
|
53
|
/*
|
54
|
* Set the fill and stroke color of all SVG elements to the current text color
|
55
|
*/
|
56
|
|
57
|
.uk-icon [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
|
58
|
.uk-icon [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
|
59
|
|
60
|
/*
|
61
|
* Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
|
62
|
*/
|
63
|
|
64
|
.uk-icon > * { transform: translate(0,0); }
|
65
|
|
66
|
|
67
|
/* Image modifier
|
68
|
========================================================================== */
|
69
|
|
70
|
/*
|
71
|
* Display images in icon dimensions
|
72
|
*/
|
73
|
|
74
|
.uk-icon-image {
|
75
|
width: $icon-image-size;
|
76
|
height: $icon-image-size;
|
77
|
background-position: 50% 50%;
|
78
|
background-repeat: no-repeat;
|
79
|
background-size: contain;
|
80
|
vertical-align: middle;
|
81
|
}
|
82
|
|
83
|
|
84
|
/* Style modifiers
|
85
|
========================================================================== */
|
86
|
|
87
|
/*
|
88
|
* Link
|
89
|
*/
|
90
|
|
91
|
.uk-icon-link {
|
92
|
color: $icon-link-color;
|
93
|
@if(mixin-exists(hook-icon-link)) {@include hook-icon-link();}
|
94
|
}
|
95
|
|
96
|
.uk-icon-link:hover,
|
97
|
.uk-icon-link:focus {
|
98
|
color: $icon-link-hover-color;
|
99
|
outline: none;
|
100
|
@if(mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();}
|
101
|
}
|
102
|
|
103
|
/* OnClick + Active */
|
104
|
.uk-icon-link:active,
|
105
|
.uk-active > .uk-icon-link {
|
106
|
color: $icon-link-active-color;
|
107
|
@if(mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();}
|
108
|
}
|
109
|
|
110
|
/*
|
111
|
* Button
|
112
|
* 1. Center icon vertically and horizontally
|
113
|
*/
|
114
|
|
115
|
.uk-icon-button {
|
116
|
box-sizing: border-box;
|
117
|
width: $icon-button-size;
|
118
|
height: $icon-button-size;
|
119
|
border-radius: $icon-button-border-radius;
|
120
|
background: $icon-button-background;
|
121
|
color: $icon-button-color;
|
122
|
vertical-align: middle;
|
123
|
/* 1 */
|
124
|
display: -ms-inline-flexbox;
|
125
|
display: -webkit-inline-flex;
|
126
|
display: inline-flex;
|
127
|
-ms-flex-pack: center;
|
128
|
-webkit-justify-content: center;
|
129
|
justify-content: center;
|
130
|
-ms-flex-align: center;
|
131
|
-webkit-align-items: center;
|
132
|
align-items: center;
|
133
|
@if(mixin-exists(hook-icon-button)) {@include hook-icon-button();}
|
134
|
}
|
135
|
|
136
|
/* Hover + Focus */
|
137
|
.uk-icon-button:hover,
|
138
|
.uk-icon-button:focus {
|
139
|
background-color: $icon-button-hover-background;
|
140
|
color: $icon-button-hover-color;
|
141
|
outline: none;
|
142
|
@if(mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();}
|
143
|
}
|
144
|
|
145
|
/* OnClick + Active */
|
146
|
.uk-icon-button:active,
|
147
|
.uk-active > .uk-icon-button {
|
148
|
background-color: $icon-button-active-background;
|
149
|
color: $icon-button-active-color;
|
150
|
@if(mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();}
|
151
|
}
|
152
|
|
153
|
|
154
|
// Hooks
|
155
|
// ========================================================================
|
156
|
|
157
|
@if(mixin-exists(hook-icon-misc)) {@include hook-icon-misc();}
|
158
|
|
159
|
// @mixin hook-icon-link(){}
|
160
|
// @mixin hook-icon-link-hover(){}
|
161
|
// @mixin hook-icon-link-active(){}
|
162
|
// @mixin hook-icon-button(){}
|
163
|
// @mixin hook-icon-button-hover(){}
|
164
|
// @mixin hook-icon-button-active(){}
|
165
|
// @mixin hook-icon-misc(){}
|
166
|
|
167
|
|
168
|
// Inverse
|
169
|
// ========================================================================
|
170
|
|
171
|
$inverse-icon-link-color: $inverse-global-muted-color !default;
|
172
|
$inverse-icon-link-hover-color: $inverse-global-color !default;
|
173
|
$inverse-icon-link-active-color: $inverse-global-color !default;
|
174
|
$inverse-icon-button-background: $inverse-global-muted-background !default;
|
175
|
$inverse-icon-button-color: $inverse-global-muted-color !default;
|
176
|
$inverse-icon-button-hover-background: darken($inverse-icon-button-background, 5%) !default;
|
177
|
$inverse-icon-button-hover-color: $inverse-global-color !default;
|
178
|
$inverse-icon-button-active-background: darken($inverse-icon-button-background, 10%) !default;
|
179
|
$inverse-icon-button-active-color: $inverse-global-color !default;
|
180
|
|
181
|
|
182
|
|
183
|
// @mixin hook-inverse-icon-link(){}
|
184
|
// @mixin hook-inverse-icon-link-hover(){}
|
185
|
// @mixin hook-inverse-icon-link-active(){}
|
186
|
// @mixin hook-inverse-icon-button(){}
|
187
|
// @mixin hook-inverse-icon-button-hover(){}
|
188
|
// @mixin hook-inverse-icon-button-active(){}
|