xref: /template/sprintdoc/css/area_nav-usertools.less (revision b6b228b16d3e618ad3eec47bc63240bdc8a8d87b) 
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: .2em -.2rem 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();
64
65                    &::before {
66                        float: left;
67                        background: @color-nav;
68                        border: 4px solid @color-nav;
69                        border-radius: 50%;
70                        color: #fff;
71                        font-size: .6rem;
72                        margin: -2px 6px -2px 0;
73                    }
74                }
75            } // user
76
77            &.user-task {
78                position: relative;
79
80                a {
81                    position: relative;
82                    overflow: visible;
83                    white-space: normal;
84                    text-indent: 0;
85
86                    &::before {
87                        content: '';
88                        position: absolute;
89                    }
90                }
91
92                .prefix {
93                    .btn-prefix();
94                    .icon-clipboard();
95                }
96            } // user-task
97        } // li
98
99
100/* + + +  icons  + + + */
101        a {
102            .fontello();
103            .hide-text-show-before();
104
105            cursor: pointer;
106            background-color: #fff;
107            text-decoration: none;
108            transition: @transition color, @transition border-color;
109
110            &:hover,
111            &:active,
112            &:focus {
113                border-color: @button_background;
114                //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
115                //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
116                color: @button_background;
117            }
118
119            &::before {
120                content: "?";
121                display: block;
122                width: 100%;
123                box-sizing: border-box;
124                font-size: 1.4em;
125                cursor: pointer;
126                margin: .2em 0 0;
127            }
128
129            /* icon register new user */
130            &.register {
131                .icon-user();
132            }
133
134            /* icon log-out */
135            &.logout {
136                .icon-logout();
137            }
138
139            /* icon log-in */
140            &.login {
141                .icon-login();
142            }
143
144            /* icon admin */
145            &.admin {
146                .icon-cog();
147
148                &::before {
149                    margin-top: .18rem;
150                }
151            }
152        } // a
153    } // ul
154} // nav-usertools
155