1.common-ui-search-field(@color-blue, @bg-image) { 2 .search-field { 3 max-width: 500px; 4 position: relative; 5 margin: 40px auto; 6 input { 7 position: relative; 8 z-index: 2; 9 border: 1px solid @color-blue; 10 border-radius: 4px; 11 line-height: 15px; 12 font-size: 15px; 13 padding: 8px 30px 8px 10px; 14 width: 100%; 15 max-height: 35px; 16 height: 35px; 17 padding-right: 45px; 18 box-sizing: border-box; 19 outline: none; 20 &:focus { 21 box-shadow: @color-blue 0 0 2px; 22 } 23 } 24 button { 25 position: absolute; 26 z-index: 3; 27 background-position: center; 28 background-repeat: no-repeat; 29 background-color: transparent; 30 background-image: @bg-image; 31 border: 0; 32 width: 18px; 33 height: 18px; 34 top: 8px; 35 right: 10px; 36 cursor: pointer; 37 &:hover { 38 transform: scale(1.05); 39 transition: transform 500ms; 40 } 41 &:focus { 42 outline: 0; 43 } 44 } 45 .dropdown { 46 list-style: none; 47 position: absolute; 48 margin: -10px 0 0 0; 49 width: 100%; 50 padding: 8px 0 0 0; 51 border: 1px solid @color-blue; 52 border-radius: 4px; 53 background-color: white; 54 box-sizing: border-box; 55 li { 56 padding: 8px 10px; 57 cursor: pointer; 58 text-align: left; 59 &:hover { 60 background-color: @color-blue; 61 color: white; 62 } 63 } 64 } 65 .error { 66 font-size: 12px; 67 text-align: left; 68 color: @color-blue; 69 position: absolute;
70 margin-top: 1px; 71 } 72 } 73} 74 75.common-ui-slides(@dur: 200ms; @off: 100%) { 76 .slides-switch { 77 > .slide-enter-active, 78 > .slide-exit-active { 79 transition: transform @dur; 80 } 81 &.slide-backward > .slide-enter { 82 transform: translate(-@off); 83 transition-delay: 100ms; 84 } 85 &.slide-forward > .slide-enter { 86 transform: translate(@off); 87 transition-delay: 100ms; 88 } 89 &.slide-forward > .slide-exit, 90 &.slide-backward > .slide-exit, 91 &.slide-forward > .slide-enter-active, 92 &.slide-backward > .slide-enter-active { 93 transform: translate(0); 94 } 95 &.slide-forward > .slide-exit-active { 96 transform: translate(-@off); 97 } 98 &.slide-backward > .slide-exit-active { 99 transform: translate(@off); 100 } 101 &.pre-mount > :not(.slide-appear):not(.slide-enter):not(.slide-exit):not(.slide-enter-done):not(.slide-enter-active):not(.slide-exit-active) { 102 display: none; 103 } 104 } 105} 106 107.scale-jump-on-hover(@scale: 1.1) { 108 transition: transform 0.5s cubic-bezier(0.2, 3, 0.4, 1) 0s; 109 &:hover { 110 transform: scale(@scale); 111 } 112} 113 114.common-ui-menu-icon() { 115 .menu-icon { 116 position: relative; 117 overflow: hidden; 118 width: 20px; 119 height: 20px; 120 svg { 121 position: absolute; 122 width: 100%; 123 height: 100%; 124 } 125 @keyframes roll_up { 126 0% { transform: translateY(0px); } 127 40% { transform: translateY(-26px); } 128 41% { opacity: 0; } 129 42% { transform: translateY(26px); } 130 43% { opacity: 1; } 131 85%, 100% { transform: translateY(0px); } 132 } 133 &.menu-icon-profile { 134 @keyframes profile_1 { 80%, 100% { transform: translateY(3px); }} 135 @keyframes profile_2 { 80%, 100% { transform: translateY(-3px); }} 136 svg:first-child { 137 bottom: 10px; 138 left: 7px; 139 width: 9px; 140 height: 9px; 141 } 142 svg:last-child { 143 bottom: 1px; 144 left: 5px; 145 width: 14px; 146 height: 8px; 147 } 148 *:hover > & { 149 svg:first-child { animation: profile_1 alternate 400ms 2; } 150 svg:last-child { animation: profile_2 alternate 400ms 2; } 151 } 152 } 153 &.menu-icon-logout { 154 width: 19px; 155 height: 19px; 156 } 157 &.menu-icon-plus { 158 @keyframes plus_2 { 80%, 100% { transform: translateY(-24px); } } 159 svg:first-child { 160 bottom: 1px; 161 left: 3px; 162 width: 14px; 163 height: 18px; 164 } 165 svg:last-child { 166 bottom: -100%; 167 left: 5px; 168 width: 9px; 169 height: 7px; 170 } 171 *:hover > & { 172 svg:last-child { animation: plus_2 alternate 400ms 2; } 173 } 174 } 175 &.menu-icon-settings { 176 @keyframes settings_2 { 80%, 100% { transform: rotate(145deg); } } 177 svg:first-child { 178 bottom: 0; 179 left: 0; 180 width: 20px; 181 height: 20px; 182 } 183 svg:last-child { display: none; } 184 *:hover > & { 185 svg:first-child { animation: settings_2 alternate 400ms 2; } 186 } 187 } 188 &.menu-icon-dns { 189 @keyframes dns_1 { 80%, 100% { transform: rotate(45deg); } } 190 svg:first-child { 191 bottom: 0; 192 left: 0; 193 width: 20px; 194 height: 20px; 195 } 196 svg:last-child { display: none; } 197 *:hover > & { 198 svg:first-child { animation: dns_1 alternate 400ms 2; } 199 } 200 } 201 &.menu-icon-support { 202 svg:first-child { 203 bottom: 1px; 204 left: 1px; 205 width: 18px; 206 height: 18px; 207 } 208 svg:last-child { 209 bottom: 5px; 210 left: 6px; 211 width: 8px; 212 height: 10px; 213 } 214 *:hover > & { 215 svg:last-child { animation: roll_up alternate 500ms 2; } 216 } 217 } 218 &.menu-icon-legal { 219 @keyframes legal_1 { 220 80%, 100% { transform: translate(-4px, -9px) rotate(60deg); } 221 } 222 svg:first-child { 223 bottom: 2px; 224 left: 2px; 225 width: 14px; 226 height: 18px; 227 transform-origin: 0 100%; 228 } 229 svg:last-child { 230 bottom: 0; 231 left: 7px; 232 width: 10px; 233 height: 6px; 234 } 235 *:hover > & { 236 svg:first-child { animation: legal_1 alternate 400ms 2; } 237 } 238 } 239 &.menu-icon-redeem { 240 @keyframes redeem_2 { 80%, 100% { transform: rotate(-15deg); } } 241 svg:first-child { 242 bottom: 1px; 243 left: 1px; 244 width: 16px; 245 height: 11px; 246 } 247 svg:last-child { 248 bottom: 11px; 249 left: 1px; 250 width: 16px; 251 height: 8px; 252 transform-origin: 0 100%; 253 } 254 *:hover > & { 255 svg:last-child { animation: redeem_2 alternate 400ms 2; } 256 } 257 } 258 &.menu-icon-add { 259 @keyframes add_2 { 80%, 100% { transform: rotate(90deg); } } 260 svg:first-child { 261 bottom: 0; 262 left: 0;
263 width: 20px; 264 height: 20px; 265 } 266 svg:last-child { display: none; } 267 *:hover > & { 268 svg:first-child { animation: add_2 alternate 400ms 2; } 269 } 270 } 271 &.menu-icon-language { 272 @keyframes language_2 { 273 80%, 100% { transform: translateY(-3px); } 274 } 275 svg:first-child { 276 bottom: 3px; 277 left: 3px; 278 width: 14px; 279 height: 10px; 280 } 281 svg:last-child { 282 bottom: 12px; 283 left: 3px; 284 width: 13px; 285 height: 5px; 286 transform-origin: 0 100%; 287 } 288 *:hover > & { 289 svg:last-child { animation: language_2 alternate 400ms 2; } 290 } 291 } 292 &.menu-icon-alert { 293 *:hover > & { 294 svg:last-child { animation: roll_up alternate 500ms 2; } 295 } 296 } 297 &.menu-icon-about { 298 *:hover > & { 299 svg:last-child { animation: roll_up alternate 500ms 2; } 300 } 301 } 302 &.menu-icon-incognito { 303 @keyframes incognito_2 { 80%, 100% { transform: rotate(7deg); } } 304 svg:last-child { 305 transform-origin: 100% 50%; 306 } 307 *:hover > & { 308 svg:last-child { animation: incognito_2 alternate 400ms 2; } 309 } 310 } 311 &.menu-icon-hide_ip { 312 @keyframes hide_ip_2 { 313 80%, 100% { transform: scale(0.65); } 314 } 315 *:hover > & { 316 svg:last-child { animation: hide_ip_2 alternate 400ms 2; } 317 } 318 } 319 &.menu-icon-protect { 320 @keyframes protect_2 { 321 80%, 100% { transform: translate(3px, -1px) scaleY(0.7); } 322 } 323 *:hover > & { 324 svg:last-child { animation: protect_2 alternate 400ms 2; } 325 } 326 } 327 &.menu-icon-devices { 328 @keyframes devices_2 { 329 80%, 100% { transform: translateY(-8px); } 330 } 331 *:hover > & { 332 svg:last-child { animation: devices_2 alternate 400ms 2; } 333 } 334 } 335 } 336}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.