xref: /template/sprintdoc/css/area_nav-usertools.less (revision 52b93d12e9171b5f43c148b4ee48dfbeadde1035) 
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 background-color, @transition border-color;
109
110            &:hover,
111            &:active,
112            &:focus {
113                background-color: @button_color;
114                border-color: @button_background;
115                //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
116                //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
117                color: @button_background;
118            }
119
120            &::before {
121                content: "?";
122                display: block;
123                width: 100%;
124                box-sizing: border-box;
125                font-size: 1.4em;
126                cursor: pointer;
127                margin: .2em 0 0;
128            }
129
130            /* icon register new user */
131            &.register {
132                .icon-user();
133            }
134
135            /* icon log-out */
136            &.logout {
137                .icon-logout();
138            }
139
140            /* icon log-in */
141            &.login {
142                .icon-login();
143            }
144
145            /* icon admin */
146            &.admin {
147                .icon-cog();
148
149                &::before {
150                    margin-top: .18rem;
151                }
152            }
153        } // a
154    } // ul
155} // nav-usertools
156