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: (@very-small-spacing * 2) -.25rem 0 0; 20 21 li { 22 .btn-usertools-wrapper(); // uniform li 23 .btn-usertools-num(); 24 25 float: right; 26 min-height: 28px; 27 28 > strong, 29 > a { 30 display: block; 31 width: auto; 32 min-height: @toggle-size; 33 overflow: hidden; 34 border: 1px solid @ini_border_light; 35 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius 36 color: @ini_nav_menu_color; 37 text-align: center; 38 margin: 0; 39 40 @media @screen_max-xxlg { 41 min-height: 28px; 42 } 43 44 @media @screen_max-md { 45 min-height: @toggle-size; 46 } 47 } 48 49 &.user { 50 @space-min-xxlg: .35rem; 51 @space-max-xxlg: .4rem; 52 @space-max-xlg: .5rem; 53 @space-max-md: .35rem; 54 55 position: relative; 56 display: table-cell; 57 border: solid 1px @ini_border_light; 58 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius 59 padding-right: .3rem; 60 61 @media @screen_min-xxlg { 62 padding-top: @space-min-xxlg; 63 } 64 65 @media @screen_max-xxlg { 66 padding-top: @space-max-xxlg; 67 } 68 69 @media @screen_max-xlg { 70 padding-top: @space-max-xlg; 71 } 72 73 @media @screen_max-md { 74 min-height: @toggle-size; 75 padding-top: @space-max-md; 76 } 77 78 > a { 79 .display-flex(); 80 .align-items(); 81 82 position: relative; 83 min-height: 26px; 84 overflow: visible; 85 background: #FFF; // for removing bg-image 86 border: 0 none; 87 text-indent: 0; 88 color: @ini_nav_menu_color; 89 font-size: inherit; 90 margin-right: -.3rem; 91 padding: 0 .2em 0 0; 92 93 @media @screen_min-xxlg { 94 margin-top: -(@space-min-xxlg); 95 } 96 97 @media @screen_max-xxlg { 98 margin-top: -(@space-max-xxlg); 99 } 100 101 @media @screen_max-xlg { 102 margin-top: -(@space-max-xlg); 103 } 104 105 @media @screen_max-md { 106 min-height: (@toggle-size - .1); 107 margin-top: -(@space-max-md); 108 } 109 110 &::before { 111 content: ''; 112 top: -1px; 113 bottom: -1px; 114 left: -1px; 115 right: -1px; 116 width: auto; 117 opacity: 0; 118 border: solid 1px @ini_nav_menu_hover_color; 119 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius 120 transform: none; 121 transition: @transition opacity; 122 } 123 124 &:hover, 125 &:focus, 126 &:active { 127 background-color: @ini_nav_menu_hover_bg; 128 border-color: @ini_nav_menu_hover_color; 129 color: @ini_nav_menu_hover_color; 130 131 &::before { 132 opacity: 1; 133 } 134 135 bdi, 136 bdi:first-of-type { 137 color: @ini_nav_menu_hover_color; 138 139 &::before { 140 color: inherit; 141 } 142 } 143 } 144 } 145 146 bdi { 147 color: inherit; 148 display: inline-block; 149 transition: @transition color; 150 } 151 152 bdi:first-of-type { 153 .fontello(); 154 .icon-user-circle(); 155 156 position: relative; 157 margin: 0 0 0 .25rem; 158 padding: 0 .1rem 0 1.3rem; 159 160 &::before { 161 position: absolute; 162 left: -2px; 163 font-size: 1.4rem; 164 color: @ini_nav_menu_color; 165 margin: 0; 166 transition: @transition color; 167 168 @media @screen_min-xxlg { 169 top: -.25rem; 170 } 171 172 @media @screen_max-xxlg { 173 top: -.2rem; 174 } 175 176 @media @screen_max-xxs { 177 top: -.25rem; 178 179 } 180 } 181 } 182 } // user 183 184 &.user-task { 185 position: relative; 186 187 a { 188 position: relative; 189 overflow: visible; 190 white-space: normal; 191 text-indent: 0; 192 193 @media @screen_only-lg { 194 padding-top: .14rem; 195 } 196 197 &::before { 198 content: ''; 199 position: absolute; 200 } 201 } 202 203 .prefix { 204 .btn-prefix(); 205 .icon-clipboard(); 206 207 display: block; 208 font-size: 1.2rem; 209 text-align: center; 210 margin-bottom: -1px; 211 } 212 } // user-task 213 214 &.noopentasks { 215 strong { 216 background-color: @ini_background_site; 217 } 218 219 .num { 220 background-color: @noopentasks-background; // fix 221 color: @noopentasks-color; // fix 222 } 223 } 224 } // li 225 226 227/* + + + icons + + + */ 228 a { 229 .fontello(); 230 .hide-text-show-before(); 231 232 cursor: pointer; 233 position: relative; 234 background-color: #fff; 235 line-height: 1; 236 text-decoration: none; 237 transition: @transition color, @transition background-color, @transition border-color; 238 239 @media @screen_only-lg { 240 min-width: 2rem; 241 } 242 243 &::before {//background-color: deeppink !important; 244 .center-middle(); 245 246 content: "?"; 247 display: block; 248 width: 100%; 249 box-sizing: border-box; 250 font-size: @font-size-default + (@font-scale-factor * 4); 251 line-height: 1; 252 cursor: pointer; 253 } 254 255 &:hover, 256 &:active, 257 &:focus { 258 background-color: @ini_nav_menu_hover_bg; 259 border-color: @ini_nav_menu_hover_color; 260 color: @ini_nav_menu_hover_color; 261 } 262 263 /* icon register new user */ 264 &.register { 265 .icon-user(); 266 } 267 268 /* icon log-out */ 269 &.logout { 270 .icon-logout(); 271 } 272 273 /* icon log-in */ 274 &.login { 275 .icon-login(); 276 } 277 278 /* icon admin */ 279 &.admin { 280 .icon-cog(); 281 282 &::before { 283 vertical-align: top; 284 } 285 } 286 } // a 287 } // ul 288} // nav-usertools 289