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