Project

General

Profile

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