Project

General

Profile

1
// Name:            Divider
2
// Description:     Styles for dividers
3
//
4
// Component:       `uk-divider-icon`
5
//                  `uk-divider-small`
6
//
7
// ========================================================================
8

    
9

    
10
// Variables
11
// ========================================================================
12

    
13
@divider-margin-vertical:                       @global-margin;
14

    
15
@divider-icon-width:                            50px;
16
@divider-icon-height:                           20px;
17
@divider-icon-color:                            @global-border;
18
@divider-icon-line-top:                         50%;
19
@divider-icon-line-width:                       100%;
20
@divider-icon-line-border-width:                @global-border-width;
21
@divider-icon-line-border:                      @global-border;
22

    
23
@internal-divider-icon-image:                   "../../images/backgrounds/divider-icon.svg";
24

    
25
@divider-small-width:                           100px;
26
@divider-small-border-width:                    @global-border-width;
27
@divider-small-border:                          @global-border;
28

    
29

    
30
/* ========================================================================
31
   Component: Divider
32
 ========================================================================== */
33

    
34
/*
35
 * 1. Reset default `hr`
36
 * 2. Set margin if a `div` is used for semantical reason
37
 */
38

    
39
[class*='uk-divider'] {
40
    /* 1 */
41
    border: none;
42
    /* 2 */
43
    margin-bottom: @divider-margin-vertical;
44
}
45

    
46
/* Add margin if adjacent element */
47
* + [class*='uk-divider'] { margin-top: @divider-margin-vertical; }
48

    
49

    
50
/* Icon
51
 ========================================================================== */
52

    
53
.uk-divider-icon {
54
    position: relative;
55
    height: @divider-icon-height;
56
    .svg-fill(@internal-divider-icon-image, "#000", @divider-icon-color);
57
    background-repeat: no-repeat;
58
    background-position: 50% 50%;
59
    .hook-divider-icon;
60
}
61

    
62
.uk-divider-icon::before,
63
.uk-divider-icon::after {
64
    content: "";
65
    position: absolute;
66
    top: @divider-icon-line-top;
67
    max-width: ~'calc(50% - (@{divider-icon-width} / 2))';
68
    border-bottom: @divider-icon-line-border-width solid @divider-icon-line-border;
69
    .hook-divider-icon-line;
70
}
71

    
72
.uk-divider-icon::before {
73
    right: ~'calc(50% + (@{divider-icon-width} / 2))';
74
    width: @divider-icon-line-width;
75
    .hook-divider-icon-line-left;
76
}
77

    
78
.uk-divider-icon::after {
79
    left: ~'calc(50% + (@{divider-icon-width} / 2))';
80
    width: @divider-icon-line-width;
81
    .hook-divider-icon-line-right;
82
}
83

    
84

    
85
/* Small
86
 ========================================================================== */
87

    
88
/*
89
 * Reset child height, caused by `inline-block`
90
 */
91

    
92
.uk-divider-small { line-height: 0; }
93

    
94
.uk-divider-small::after {
95
    content: "";
96
    display: inline-block;
97
    width: @divider-small-width;
98
    max-width: 100%;
99
    border-top: @divider-small-border-width solid @divider-small-border;
100
    vertical-align: top;
101
    .hook-divider-small;
102
}
103

    
104

    
105
// Hooks
106
// ========================================================================
107

    
108
.hook-divider-misc;
109

    
110
.hook-divider-icon() {}
111
.hook-divider-icon-line() {}
112
.hook-divider-icon-line-left() {}
113
.hook-divider-icon-line-right() {}
114
.hook-divider-small() {}
115
.hook-divider-misc() {}
116

    
117

    
118
// Inverse
119
// ========================================================================
120

    
121
@inverse-divider-icon-color:                      @inverse-global-border;
122
@inverse-divider-icon-line-border:                @inverse-global-border;
123
@inverse-divider-small-border:                    @inverse-global-border;
124

    
125
.hook-inverse() {
126

    
127
    .uk-divider-icon {
128
        .svg-fill(@internal-divider-icon-image, "#000", @inverse-divider-icon-color);
129
        .hook-inverse-divider-icon;
130
    }
131

    
132
    .uk-divider-icon::before,
133
    .uk-divider-icon::after {
134
        border-bottom-color: @inverse-divider-icon-line-border;
135
        .hook-inverse-divider-icon-line;
136
    }
137

    
138
    .uk-divider-small::after {
139
        border-top-color: @inverse-divider-small-border;
140
        .hook-inverse-divider-small;
141
    }
142

    
143
}
144

    
145
.hook-inverse-divider-icon() {}
146
.hook-inverse-divider-icon-line() {}
147
.hook-inverse-divider-small() {}
(20-20/66)