xref: /template/sprintdoc/css/area_nav-usertools.less (revision ed6fc9e542700e6895baddbff69081f577b470a3) 
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    ul {
15        float: right;
16        padding: 0;
17        margin: .2rem -.2rem 0 0;
18
19        li {
20            .btn-usertools-wrapper(); // uniform li
21
22            float: right;
23            font-size: .8rem;
24
25            * {
26                font-size: .8rem;
27            }
28
29            > strong,
30            > a {
31                display: block;
32                width: auto;
33                min-height: 2em;
34                border: 1px solid @color-border;
35                border-radius: @border-radius;
36                color: @color-nav;
37                text-align: center;
38                margin: 0;
39            }
40
41            .btn-usertools-num ();
42
43            &.user {
44                border: 1px solid @color-border;
45                border-radius: @border-radius;
46                padding: .3rem .25rem;
47
48                bdi {
49                    color: @color-nav;
50                    display: inline-block;
51                    padding-top: 1px;
52                }
53
54                > bdi:first-of-type {
55                    .fontello();
56                    .icon-user();
57
58                    &::before {
59                        float: left;
60                        background: @color-nav;
61                        border: 4px solid @color-nav;
62                        border-radius: 50%;
63                        color: #fff;
64                        font-size: .5rem;
65                        margin-top: -1px;
66                        margin-right: 6px;
67                    }
68                }
69            } // user
70
71            &.user-task {
72                position: relative;
73
74                a {
75                    position: relative;
76                    overflow: visible;
77                    white-space: normal;
78                    text-indent: 0;
79
80                    &::before {
81                        content: "";
82                        position: absolute;
83                    }
84                }
85
86                .prefix {
87                    .fontello();
88                    .hide-text-show-before();
89                    .icon-clipboard();
90
91                    color: @color-nav;
92                    margin-top: .3rem;
93                }
94
95                &.opentasks,
96                &.opentask {
97                    .num {
98                        background-color: @color-link;
99                        color: #fff;
100                    }
101                }
102            } // user-task
103        } // li
104
105        a {
106            .fontello();
107            .hide-text-show-before();
108
109            cursor: pointer;
110            background-color: #fff;
111            text-decoration: none;
112            transition: @transition color, @transition border-color;
113
114            &:hover,
115            &:active,
116            &:focus {
117                border-color: @color-nav-hover;
118                //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
119                //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
120                color: @color-nav-hover;
121            }
122
123            &::before {
124                content: "?";
125                display: block;
126                width: 100%;
127                box-sizing: border-box;
128                font-size: 1.12em;
129                cursor: pointer;
130                margin: .3rem 0;
131            }
132
133            /* icon register new user */
134            &.register {
135                .icon-user();
136            }
137
138            /* icon log-out */
139            &.logout {
140                .icon-logout();
141            }
142
143            /* icon log-in */
144            &.login {
145                .icon-login();
146            }
147
148            /* icon admin */
149            &.admin {
150                .icon-cog();
151            }
152
153            /* add more icons if needed */
154        }
155    }
156}
157