xref: /template/sprintdoc/css/area_nav-usertools.less (revision ff975f3577c4e89537ed178054b9e8ada5e083ec) 
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 -(@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: 2em;
32                border: 1px solid @color-border;
33                border-radius: @border-radius;
34                color: @color-nav;
35                text-align: center;
36                margin: 0;
37            }
38
39            &.noopentasks {
40                strong {
41                    background-color: @color-site-bg;
42                }
43
44                .num {
45                    background-color: @color-border;
46                    color: @color-nav;
47                }
48            }
49
50            &.user {
51                border: 1px solid @color-border;
52                border-radius: @border-radius;
53                padding: .3em .25rem;
54
55                bdi {
56                    color: @color-nav;
57                    display: inline-block;
58                    padding-top: 1px;
59                }
60
61                > bdi:first-of-type {
62                    .fontello();
63                    .icon-user-circle();
64
65                    position: relative;
66
67                    @media @screen_min-md {
68                        padding-left: 22px;
69                    }
70
71                    @media @screen_max-md {
72                        padding-left: 25px;
73                    }
74
75                    &::before {
76                        position: absolute;
77                        left: -2px;
78                        font-size: 1.4rem;
79                        color: @color-nav;
80                        margin: 0;
81
82                        @media @screen_min-xlg {
83                            top: -2px;
84                        }
85
86                        @media @screen_max-xlg {
87                            top: -1px;
88                        }
89
90                        @media @screen_max-md {
91                            top: -2px;
92                        }
93                    }
94                }
95            } // user
96
97            &.user-task {
98                position: relative;
99
100                a {
101                    position: relative;
102                    overflow: visible;
103                    white-space: normal;
104                    text-indent: 0;
105
106                    &::before {
107                        content: '';
108                        position: absolute;
109                    }
110                }
111
112                .prefix {
113                    .btn-prefix();
114                    .icon-clipboard();
115
116                    font-size: 1.2rem;
117                }
118            } // user-task
119        } // li
120
121
122/* + + +  icons  + + + */
123        a {
124            .fontello();
125            .hide-text-show-before();
126
127            cursor: pointer;
128            background-color: #fff;
129            text-decoration: none;
130            transition: @transition color, @transition background-color, @transition border-color;
131
132            &:hover,
133            &:active,
134            &:focus {
135                background-color: @button_color;
136                border-color: @button_background;
137                //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
138                //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
139                color: @button_background;
140            }
141
142            &::before {
143                content: "?";
144                display: block;
145                width: 100%;
146                box-sizing: border-box;
147                font-size: @font-size-default + (@font-scale-factor * 4);
148                cursor: pointer;
149                margin: .15em 0 0;
150            }
151
152            /* icon register new user */
153            &.register {
154                .icon-user();
155            }
156
157            /* icon log-out */
158            &.logout {
159                .icon-logout();
160            }
161
162            /* icon log-in */
163            &.login {
164                .icon-login();
165            }
166
167            /* icon admin */
168            &.admin {
169                .icon-cog();
170            }
171        } // a
172    } // ul
173} // nav-usertools
174