Project

General

Profile

1
// Name:            Close
2
// Description:     Component to create a close button
3
//
4
// Component:       `uk-close`
5
//
6
// ========================================================================
7

    
8

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

    
12
$close-color:                                    $global-muted-color !default;
13
$close-hover-color:                              $global-color !default;
14

    
15

    
16
/* ========================================================================
17
   Component: Close
18
 ========================================================================== */
19

    
20
/*
21
 * Adopts `uk-icon`
22
 * 1. Remove margins in Chrome, Safari and Opera.
23
 * 2. Remove borders for `button`.
24
 * 3. Address `overflow` set to `hidden` in IE.
25
 * 4. Correct `font` properties and `color` not being inherited for `button`.
26
 * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
27
 * 6. Remove default `button` padding and background color
28
 * 7. Required for `button`.
29
 * 8. Re-reset `line-height` for icon
30
 */
31

    
32
.uk-close {
33
    /* 1 */
34
    margin: 0;
35
    /* 2 */
36
    border: none;
37
    /* 3 */
38
    overflow: visible;
39
    /* 4 */
40
    font: inherit;
41
    color: $close-color;
42
    /* 5 */
43
    text-transform: none;
44
    /* 6. */
45
    padding: 0;
46
    background-color: transparent;
47
    /* 7 */
48
    cursor: pointer;
49
    /* 8 */
50
    line-height: 0;
51
    @if(mixin-exists(hook-close)) {@include hook-close();}
52
}
53

    
54
/*
55
 * Remove the inner border and padding in Firefox.
56
 */
57

    
58
.uk-close::-moz-focus-inner {
59
    border: 0;
60
    padding: 0;
61
}
62

    
63
 /* Hover + Focus */
64
.uk-close:hover,
65
.uk-close:focus {
66
    color: $close-hover-color;
67
    outline: none;
68
    @if(mixin-exists(hook-close-hover)) {@include hook-close-hover();}
69
}
70

    
71

    
72
// Hooks
73
// ========================================================================
74

    
75
@if(mixin-exists(hook-close-misc)) {@include hook-close-misc();}
76

    
77
// @mixin hook-close(){}
78
// @mixin hook-close-hover(){}
79
// @mixin hook-close-misc(){}
80

    
81

    
82
// Inverse
83
// ========================================================================
84

    
85
$inverse-close-color:                            $inverse-global-muted-color !default;
86
$inverse-close-hover-color:                      $inverse-global-color !default;
87

    
88

    
89

    
90
// @mixin hook-inverse-close(){}
91
// @mixin hook-inverse-close-hover(){}
(14-14/66)