xref: /template/sprintdoc/css/area_nav-usertools.less (revision 646345133d72c121c484c6161208fb384f2f2bef) 
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: .5rem;
12    }
13
14
15/* + + + + +  icon list  + + + + + */
16    ul {
17        float: right;
18        padding: 0;
19        margin: .2rem -.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: .3rem .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
97                &.opentasks,
98                &.opentask {
99                    .num {
100                        background-color: @color-link;
101                        color: #fff;
102                    }
103                }
104            } // user-task
105        } // li
106
107
108/* + + +  icons  + + + */
109        a {
110            .fontello();
111            .hide-text-show-before();
112
113            cursor: pointer;
114            background-color: #fff;
115            text-decoration: none;
116            transition: @transition color, @transition border-color;
117
118            &:hover,
119            &:active,
120            &:focus {
121                border-color: @color-nav-hover;
122                //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
123                //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
124                color: @color-nav-hover;
125            }
126
127            &::before {
128                content: "?";
129                display: block;
130                width: 100%;
131                box-sizing: border-box;
132                font-size: 1.4em;
133                cursor: pointer;
134                margin: .2rem 0 0;
135            }
136
137            /* icon register new user */
138            &.register {
139                .icon-user();
140            }
141
142            /* icon log-out */
143            &.logout {
144                .icon-logout();
145            }
146
147            /* icon log-in */
148            &.login {
149                .icon-login();
150            }
151
152            /* icon admin */
153            &.admin {
154                .icon-cog();
155
156                &::before {
157                    margin-top: .18rem;
158                }
159            }
160        } // a
161    } // ul
162} // nav-usertools
163