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