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