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