Project

General

Profile

1
//
2
// Component: Tab
3
//
4
// ========================================================================
5

    
6

    
7
// Variables
8
// ========================================================================
9

    
10
//
11
// New
12
//
13

    
14
@tab-border-width:                              @global-border-width;
15
@tab-border:                                    @global-border;
16

    
17
@tab-item-border-width:                         @global-border-width;
18
@tab-item-font-size:                            @global-small-font-size;
19
@tab-item-text-transform:                       uppercase;
20

    
21
@tab-item-active-border:                        @global-primary-background;
22

    
23

    
24
// Component
25
// ========================================================================
26

    
27
.hook-tab() {
28

    
29
    position: relative;
30

    
31
    &::before {
32
        content: "";
33
        position: absolute;
34
        bottom: 0;
35
        left: @tab-margin-horizontal;
36
        right: 0;
37
        border-bottom: @tab-border-width solid @tab-border;
38
    }
39

    
40
}
41

    
42

    
43
// Items
44
// ========================================================================
45

    
46
.hook-tab-item() {
47
    border-bottom: @tab-item-border-width solid transparent;
48
    font-size: @tab-item-font-size;
49
    text-transform: @tab-item-text-transform;
50
    -webkit-transition: color 0.1s ease-in-out;
51
    transition: color 0.1s ease-in-out;
52
}
53

    
54
.hook-tab-item-hover() {}
55

    
56
.hook-tab-item-active() { border-color: @tab-item-active-border; }
57

    
58
.hook-tab-item-disabled() {}
59

    
60

    
61
// Position modifiers
62
// ========================================================================
63

    
64
.hook-tab-bottom() {
65

    
66
    &::before {
67
        top: 0;
68
        bottom: auto;
69
    }
70

    
71
}
72

    
73
.hook-tab-bottom-item() {
74
    border-top: @tab-item-border-width solid transparent;
75
    border-bottom: none;
76
}
77

    
78
.hook-tab-left() {
79

    
80
    &::before {
81
        top: 0;
82
        bottom: 0;
83
        left: auto;
84
        right: 0;
85
        border-left: @tab-border-width solid @tab-border;
86
        border-bottom: none;
87
    }
88

    
89
}
90

    
91
.hook-tab-left-item() {
92
    border-right: @tab-item-border-width solid transparent;
93
    border-bottom: none;
94
}
95

    
96
.hook-tab-right() {
97

    
98
    &::before {
99
        top: 0;
100
        bottom: 0;
101
        left: 0;
102
        right: auto;
103
        border-left: @tab-border-width solid @tab-border;
104
        border-bottom: none;
105
    }
106

    
107
}
108

    
109
.hook-tab-right-item() {
110
    border-left: @tab-item-border-width solid transparent;
111
    border-bottom: none;
112
}
113

    
114

    
115
// Miscellaneous
116
// ========================================================================
117

    
118
.hook-tab-misc() {
119

    
120
    .uk-tab .uk-dropdown { margin-left: (@tab-margin-horizontal + @tab-item-padding-horizontal) }
121

    
122
}
123

    
124

    
125
// Inverse
126
// ========================================================================
127

    
128
@inverse-tab-border:                        @inverse-global-border;
129

    
130
.hook-inverse-tab() {
131

    
132
    &::before { border-color: @inverse-tab-border; }
133

    
134
}
135

    
136
.hook-inverse-tab-item() {}
137
.hook-inverse-tab-item-hover() {}
138
.hook-inverse-tab-item-active() { border-color: @inverse-global-primary-background; }
139
.hook-inverse-tab-item-disabled() {}
(50-50/59)