xref: /template/sprintdoc/css/area_nav-usertools.less (revision 94199ca847cd93e7a2284e4d9e4498ea15a31f71) 
1/**
2 * This file provides the design styles for the direct / menu jump links.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8.nav-usertools {
9    &.has-bar {
10        margin-top: @height-context-bar;
11        padding-top: .5em;
12    }
13
14
15/* + + + + +  icon list  + + + + + */
16    ul {
17        float: right;
18        padding: 0;
19        margin: (@very-small-spacing * 2) -(@very-small-spacing) 0 0;
20
21        li {
22            .btn-usertools-wrapper(); // uniform li
23            .btn-usertools-num();
24
25            float: right;
26            min-height: 28px;
27
28            > strong,
29            > a {
30                display: block;
31                width: auto;
32                min-height: @toggle-size;
33                border: 1px solid @color-border;
34                border-radius: @border-radius;
35                color: @color-nav;
36                text-align: center;
37                margin: 0;
38
39                @media @screen_max-xxlg {
40                    min-height: 28px;
41                }
42
43                @media @screen_max-md {
44                    min-height: @toggle-size;
45                }
46            }
47
48            &.noopentasks {
49                strong {
50                    background-color: @color-site-bg;
51                }
52
53                .num {
54                    background-color: @noopentasks-background; // fix
55                    color: @noopentasks-color; // fix
56                }
57            }
58
59            &.user {
60                position: relative;
61                display: table-cell;
62                padding: 1px .2em 0 1px; // 1px for border
63
64                &::before {
65                    content: '';
66                    position: absolute;
67                    top: 0;
68                    left: 0;
69                    right: 0;
70                    bottom: 0;
71                    border: solid 1px @color-border;
72                    border-radius: @border-radius;
73                }
74
75                > a {
76                    background: #FFF; // for removing bg-image
77                    border: 0 none;
78                    text-indent: 0;
79                    color: @color-nav;
80                    font-size: inherit;
81                    margin-top: -1px; // for border
82                    margin-right: -.2em;
83                    padding: 0 .2em 0 0;
84
85                    @media @screen_only-lg {
86                        padding-top: .25rem;
87                    }
88
89                    &::before {
90                        content: '';
91                        position: absolute;
92                        left: 0;
93                        right: 0;
94                        bottom: 0;
95                        display: block;
96                        border: solid 1px @color-border;
97                        border-radius: @border-radius;
98                        transition: @transition border-color;
99
100                        @media @screen_min-xxlg {
101                            top: -3px;
102                        }
103
104                        @media @screen_max-xxlg {
105                            top: -4px;
106                        }
107
108                        @media @screen_max-xlg {
109                            top: -3px;
110                        }
111                    }
112
113                    &:hover,
114                    &:focus,
115                    &:active {
116                        background-color: @color-nav-hover-bg;
117                        color: @color-nav-hover;
118
119                        &::before {
120                            border-color: @color-nav-hover;
121                        }
122
123                        bdi,
124                        bdi:first-of-type {
125                            color: @color-nav-hover;
126
127                            &::before {
128                                color: inherit;
129                            }
130                        }
131                    }
132                }
133
134                bdi {
135                    color: inherit;
136                    display: inline-block;
137                    padding-top: 1px;
138                    transition: @transition color;
139                }
140
141                bdi:first-of-type {
142                    .fontello();
143                    .icon-user-circle();
144
145                    position: relative;
146                    margin: 0 0 .3em .25rem;
147
148                    @media @screen_min-xxlg {
149                        margin-top: 4px;
150                        padding-left: 1.3rem;
151                    }
152
153                    @media @screen_max-xxlg {
154                        margin-top: 5px;
155                        padding-left: 1.5rem;
156                    }
157
158                    @media @screen_max-xlg {
159                        margin-top: 5px;
160                        padding-left: 1.5rem;
161                    }
162
163                    @media @screen_max-md {
164                        min-height: 1.15rem;
165                        margin-top: 5px;
166                    }
167
168                    @media @screen_max-xxs {
169                        margin-top: 4px;
170                    }
171
172                    &::before {
173                        position: absolute;
174                        left: -2px;
175                        font-size: 1.4rem;
176                        color: @color-nav;
177                        margin: 0;
178                        transition: @transition color;
179
180                        @media @screen_min-xlg {
181                            top: -2px;
182                        }
183
184                        @media @screen_max-xlg {
185                            top: -1px;
186                        }
187
188                        @media @screen_max-md {
189                            top: -2px;
190                        }
191                    }
192                }
193
194                a {
195                    bdi:first-of-type {
196                        @media @screen_min-xxlg {
197                            margin-top: 5px;
198                        }
199
200                        @media @screen_max-xxlg {
201                            margin-top: 6px;
202                        }
203
204                        @media @screen_max-xlg {
205                            margin-top: 3px;
206                        }
207
208                        @media @screen_max-md {
209                            margin-top: 5px;
210                        }
211                    }
212                }
213            } // user
214
215            &.user-task {
216                position: relative;
217
218                a {
219                    position: relative;
220                    overflow: visible;
221                    white-space: normal;
222                    text-indent: 0;
223
224                    @media @screen_only-lg {
225                        padding-top: .14rem;
226                    }
227
228                    &::before {
229                        content: '';
230                        position: absolute;
231                    }
232                }
233
234                .prefix {
235                    .btn-prefix();
236                    .icon-clipboard();
237
238                    display: block;
239                    font-size: 1.2rem;
240                    text-align: center;
241                    margin-bottom: -1px;
242                }
243            } // user-task
244        } // li
245
246
247/* + + +  icons  + + + */
248        a {
249            .fontello();
250            .hide-text-show-before();
251
252            cursor: pointer;
253            background-color: #fff;
254            text-decoration: none;
255            transition: @transition color, @transition background-color, @transition border-color;
256
257            @media @screen_only-lg {
258                min-width: 2rem;
259            }
260
261            &::before {
262                content: "?";
263                display: block;
264                width: 100%;
265                box-sizing: border-box;
266                font-size: @font-size-default + (@font-scale-factor * 4);
267                cursor: pointer;
268                margin: 0;
269
270                @media @screen_min-xxlg {
271                    margin-top: .15rem;
272                }
273
274                @media @screen_max-xxlg {
275                    margin-top: .25rem;
276                }
277
278                @media @screen_max-md {
279                    margin-top: .15rem;
280                }
281            }
282
283            &:hover,
284            &:active,
285            &:focus {
286                background-color: @color-nav-hover-bg;
287                border-color: @color-nav-hover;
288                color: @color-nav-hover;
289            }
290
291            /* icon register new user */
292            &.register {
293                .icon-user();
294            }
295
296            /* icon log-out */
297            &.logout {
298                .icon-logout();
299
300                &::before {
301                    @media @screen_only-lg {
302                        margin-top: .3rem;
303                    }
304                }
305            }
306
307            /* icon log-in */
308            &.login {
309                .icon-login();
310
311                &::before {
312                    @media @screen_only-lg {
313                        margin-top: .3rem;
314                    }
315                }
316            }
317
318            /* icon admin */
319            &.admin {
320                .icon-cog();
321
322                &::before {
323                    @media @screen_only-lg {
324                        margin-top: .28rem;
325                    }
326                }
327            }
328        } // a
329    } // ul
330} // nav-usertools
331