Project

General

Profile

1
// Name:            Totop
2
// Description:     Component to create an icon to scroll back to top
3
//
4
// Component:       `uk-totop`
5
//
6
// ========================================================================
7

    
8

    
9
// Variables
10
// ========================================================================
11

    
12
$totop-padding:                                  5px !default;
13
$totop-color:                                    $global-muted-color !default;
14

    
15
$totop-hover-color:                              $global-color !default;
16

    
17
$totop-active-color:                             $global-emphasis-color !default;
18

    
19

    
20
/* ========================================================================
21
   Component: Totop
22
 ========================================================================== */
23

    
24
/*
25
 * Addopts `uk-icon`
26
 */
27

    
28
.uk-totop {
29
    padding: $totop-padding;
30
    color: $totop-color;
31
    @if(mixin-exists(hook-totop)) {@include hook-totop();}
32
}
33

    
34
/* Hover + Focus */
35
.uk-totop:hover,
36
.uk-totop:focus {
37
    color: $totop-hover-color;
38
    outline: none;
39
    @if(mixin-exists(hook-totop-hover)) {@include hook-totop-hover();}
40
}
41

    
42
/* OnClick */
43
.uk-totop:active {
44
    color: $totop-active-color;
45
    @if(mixin-exists(hook-totop-active)) {@include hook-totop-active();}
46
}
47

    
48

    
49
// Hooks
50
// ========================================================================
51

    
52
@if(mixin-exists(hook-totop-misc)) {@include hook-totop-misc();}
53

    
54
// @mixin hook-totop(){}
55
// @mixin hook-totop-hover(){}
56
// @mixin hook-totop-active(){}
57
// @mixin hook-totop-misc(){}
58

    
59

    
60
// Inverse
61
// ========================================================================
62

    
63
$inverse-totop-color:                        $inverse-global-muted-color !default;
64
$inverse-totop-hover-color:                  $inverse-global-color !default;
65
$inverse-totop-active-color:                 $inverse-global-emphasis-color !default;
66

    
67

    
68

    
69
// @mixin hook-inverse-totop(){}
70
// @mixin hook-inverse-totop-hover(){}
71
// @mixin hook-inverse-totop-active(){}
(61-61/66)