xref: /template/sprintdoc/css/area_nav-usertools.less (revision 3cdc9fcb67f99d27c8851a0155fad41fe7ea94cc) 
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) -.25rem 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                overflow: hidden;
34                border: 1px solid @ini_border;
35                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
36                color: @ini_nav_menu_color;
37                text-align: center;
38                margin: 0;
39
40                @media @screen_max-xxlg {
41                    min-height: 28px;
42                }
43
44                @media @screen_max-md {
45                    min-height: @toggle-size;
46                }
47            }
48
49            &.user {
50                position: relative;
51                display: table-cell;
52                border: solid 1px @ini_border;
53                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
54                padding-right: .3rem;
55
56                @media @screen_min-xxlg {
57                    padding-top: .35rem;
58                }
59
60                @media @screen_max-xxlg {
61                    padding-top: .4rem;
62                }
63
64                @media @screen_max-xlg {
65                    padding-top: .5rem;
66                }
67
68                @media @screen_max-md {
69                    min-height: @toggle-size;
70                    padding-top: .35rem;
71                }
72
73                > a {
74                    .display-flex();
75                    .align-items();
76
77                    position: relative;
78                    min-height: 26px;
79                    overflow: visible;
80                    background: #FFF; // for removing bg-image
81                    border: 0 none;
82                    text-indent: 0;
83                    color: @ini_nav_menu_color;
84                    font-size: inherit;
85                    margin-right: -.3rem;
86                    padding: 0 .2em 0 0;
87
88                    @media @screen_min-xxlg {
89                        margin-top: -.3rem;
90                    }
91
92                    @media @screen_max-xxlg {
93                        margin-top: -.3rem;
94                    }
95
96                    @media @screen_max-xlg {
97                        margin-top: -.5rem;
98                    }
99
100                    @media @screen_max-md {
101                        min-height: (@toggle-size - .1);
102                        margin-top: -.35rem;
103                    }
104
105                    &::before {
106                        content: '';
107                        top: -1px;
108                        bottom: -1px;
109                        left: -1px;
110                        right: -1px;
111                        width: auto;
112                        opacity: 0;
113                        border: solid 1px @ini_nav_menu_hover_color;
114                        border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
115                        transform: none;
116                        transition: @transition opacity;
117                    }
118
119                    &:hover,
120                    &:focus,
121                    &:active {
122                        background-color: @ini_nav_menu_hover_bg;
123                        border-color: @ini_nav_menu_hover_color;
124                        color: @ini_nav_menu_hover_color;
125
126                        &::before {
127                            opacity: 1;
128                        }
129
130                        bdi,
131                        bdi:first-of-type {
132                            color: @ini_nav_menu_hover_color;
133
134                            &::before {
135                                color: inherit;
136                            }
137                        }
138                    }
139                }
140
141                bdi {
142                    color: inherit;
143                    display: inline-block;
144                    transition: @transition color;
145                }
146
147                bdi:first-of-type {
148                    .fontello();
149                    .icon-user-circle();
150
151                    position: relative;
152                    margin: 0 0 0 .25rem;
153                    padding: 0 .1rem 0 1.3rem;
154
155                    &::before {
156                        position: absolute;
157                        left: -2px;
158                        font-size: 1.4rem;
159                        color: @ini_nav_menu_color;
160                        margin: 0;
161                        transition: @transition color;
162
163                        @media @screen_min-xxlg {
164                            top: -.25rem;
165                        }
166
167                        @media @screen_max-xxlg {
168                            top: -.2rem;
169                        }
170
171                        @media @screen_max-xxs {
172                            top: -.25rem;
173
174                        }
175                    }
176                }
177            } // user
178
179            &.user-task {
180                position: relative;
181
182                a {
183                    position: relative;
184                    overflow: visible;
185                    white-space: normal;
186                    text-indent: 0;
187
188                    @media @screen_only-lg {
189                        padding-top: .14rem;
190                    }
191
192                    &::before {
193                        content: '';
194                        position: absolute;
195                    }
196                }
197
198                .prefix {
199                    .btn-prefix();
200                    .icon-clipboard();
201
202                    display: block;
203                    font-size: 1.2rem;
204                    text-align: center;
205                    margin-bottom: -1px;
206                }
207            } // user-task
208
209            &.noopentasks {
210                strong {
211                    background-color: @color-site-bg;
212                }
213
214                .num {
215                    background-color: @noopentasks-background; // fix
216                    color: @noopentasks-color; // fix
217                }
218            }
219        } // li
220
221
222/* + + +  icons  + + + */
223        a {
224            .fontello();
225            .hide-text-show-before();
226
227            cursor: pointer;
228            position: relative;
229            background-color: #fff;
230            line-height: 1;
231            text-decoration: none;
232            transition: @transition color, @transition background-color, @transition border-color;
233
234            @media @screen_only-lg {
235                min-width: 2rem;
236            }
237
238            &::before {//background-color: deeppink !important;
239                .center-middle();
240
241                content: "?";
242                display: block;
243                width: 100%;
244                box-sizing: border-box;
245                font-size: @font-size-default + (@font-scale-factor * 4);
246                line-height: 1;
247                cursor: pointer;
248            }
249
250            &:hover,
251            &:active,
252            &:focus {
253                background-color: @ini_nav_menu_hover_bg;
254                border-color: @ini_nav_menu_hover_color;
255                color: @ini_nav_menu_hover_color;
256            }
257
258            /* icon register new user */
259            &.register {
260                .icon-user();
261            }
262
263            /* icon log-out */
264            &.logout {
265                .icon-logout();
266            }
267
268            /* icon log-in */
269            &.login {
270                .icon-login();
271            }
272
273            /* icon admin */
274            &.admin {
275                .icon-cog();
276
277                &::before {
278                    vertical-align: top;
279                }
280            }
281        } // a
282    } // ul
283} // nav-usertools
284