1.wvui-button { 2 box-sizing: border-box; 3 min-width: 32px; 4 min-height: 32px; 5 max-width: 28.75em; 6 margin: 0; 7 border-width: 1px; 8 border-style: solid; 9 border-radius: 2px; 10 padding-right: 12px; 11 padding-left: 12px; 12 overflow: visible; 13 font-family: inherit; 14 font-size: inherit; 15 font-weight: bold; 16 text-transform: none; 17 white-space: nowrap; 18 -webkit-transition-property: border-color, background-color, color, box-shadow; 19 transition-property: border-color, background-color, color, box-shadow; 20 -webkit-transition-duration: 100ms; 21 transition-duration: 100ms; 22} 23.wvui-button::-moz-focus-inner { 24 border: 0; 25 padding: 0; 26} 27.wvui-button:focus { 28 outline: 0; 29} 30.wvui-button:not( [ disabled ] ) { 31 color: #202122; 32 cursor: pointer; 33} 34.wvui-button:not( [ disabled ] ):focus { 35 border-color: #36c; 36 box-shadow: inset 0 0 0 1px #36c; 37 outline: 1px solid transparent; 38} 39.wvui-button:not( [ disabled ] ):active { 40 background-color: #c8ccd1; 41 color: #000; 42 box-shadow: none; 43} 44.wvui-button[disabled] { 45 border-color: transparent; 46} 47.wvui-button .wvui-icon { 48 color: inherit; 49} 50.wvui-button--framed:not( [ disabled ] ) { 51 background-color: #f8f9fa; 52 border-color: #a2a9b1; 53} 54.wvui-button--framed:not( [ disabled ] ):hover { 55 background-color: #fff; 56 color: #404244; 57} 58.wvui-button--framed:not( [ disabled ] ):active { 59 background-color: #c8ccd1; 60 color: #000; 61 border-color: #72777d; 62} 63.wvui-button--framed[disabled] { 64 background-color: #c8ccd1; 65 color: #fff; 66} 67.wvui-button--type-primary.wvui-button--action-progressive:not( [ disabled ] ) { 68 background-color: #36c; 69 color: #fff; 70 border-color: #36c; 71} 72.wvui-button--type-primary.wvui-button--action-progressive:not( [ disabled ] ):hover { 73 background-color: #447ff5; 74 border-color: #447ff5; 75} 76.wvui-button--type-primary.wvui-button--action-progressive:not( [ disabled ] ):focus { 77 background-color: #36c; 78 border-color: #36c; 79 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; 80} 81.wvui-button--type-primary.wvui-button--action-progressive:not( [ disabled ] ):active { 82 background-color: #2a4b8d; 83 border-color: #2a4b8d; 84 box-shadow: none; 85} 86.wvui-button--type-primary.wvui-button--action-destructive:not( [ disabled ] ) { 87 background-color: #d33; 88 color: #fff; 89 border-color: #d33; 90} 91.wvui-button--type-primary.wvui-button--action-destructive:not( [ disabled ] ):hover { 92 background-color: #ff4242; 93 border-color: #ff4242; 94} 95.wvui-button--type-primary.wvui-button--action-destructive:not( [ disabled ] ):focus { 96 background-color: #d33; 97 border-color: #d33; 98 box-shadow: inset 0 0 0 1px #d33, inset 0 0 0 2px #fff; 99} 100.wvui-button--type-primary.wvui-button--action-destructive:not( [ disabled ] ):active { 101 background-color: #b32424; 102 border-color: #b32424; 103 box-shadow: none; 104} 105.wvui-button--type-normal.wvui-button--action-progressive:not( [ disabled ] ) { 106 color: #36c; 107} 108.wvui-button--type-normal.wvui-button--action-progressive:not( [ disabled ] ):hover { 109 color: #447ff5; 110 border-color: #447ff5; 111} 112.wvui-button--type-normal.wvui-button--action-progressive:not( [ disabled ] ):focus { 113 color: #36c; 114 border-color: #36c; 115 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; 116} 117.wvui-button--type-normal.wvui-button--action-progressive:not( [ disabled ] ):active { 118 background-color: #eff3fa; 119 color: #2a4b8d; 120 border-color: #2a4b8d; 121 box-shadow: none; 122} 123.wvui-button--type-normal.wvui-button--action-destructive:not( [ disabled ] ) { 124 color: #d33; 125} 126.wvui-button--type-normal.wvui-button--action-destructive:not( [ disabled ] ):hover { 127 color: #ff4242; 128 border-color: #ff4242; 129} 130.wvui-button--type-normal.wvui-button--action-destructive:not( [ disabled ] ):focus { 131 color: #d33; 132 border-color: #d33; 133 box-shadow: inset 0 0 0 1px #d33, inset 0 0 0 2px #fff; 134} 135.wvui-button--type-normal.wvui-button--action-destructive:not( [ disabled ] ):active { 136 background-color: #ffffff; 137 color: #b32424; 138 border-color: #b32424; 139 box-shadow: none; 140} 141.wvui-button--type-quiet { 142 background-color: transparent; 143 border-color: transparent; 144} 145.wvui-button--type-quiet:not( [ disabled ] ):hover { 146 background-color: rgba(0, 24, 73, 0.02745098); 147} 148.wvui-button--type-quiet:not( [ disabled ] ):focus { 149 border-color: #36c; 150 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; 151} 152.wvui-button--type-quiet:not( [ disabled ] ):active { 153 background-color: rgba(0, 36, 73, 0.08235294); 154 border-color: #72777d; 155 box-shadow: none; 156} 157.wvui-button--type-quiet.wvui-button--action-progressive:not( [ disabled ] ) { 158 color: #36c; 159} 160.wvui-button--type-quiet.wvui-button--action-progressive:not( [ disabled ] ):hover { 161 background-color: rgba(52, 123, 255, 0.2); 162 color: #447ff5; 163} 164.wvui-button--type-quiet.wvui-button--action-progressive:not( [ disabled ] ):focus { 165 color: #36c; 166 border-color: #36c; 167 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; 168} 169.wvui-button--type-quiet.wvui-button--action-progressive:not( [ disabled ] ):active { 170 background-color: #2a4b8d; 171 color: #fff; 172 border-color: #2a4b8d; 173 box-shadow: none; 174} 175.wvui-button--type-quiet.wvui-button--action-destructive:not( [ disabled ] ) { 176 color: #d33; 177} 178.wvui-button--type-quiet.wvui-button--action-destructive:not( [ disabled ] ):hover { 179 background-color: rgba(209, 29, 19, 0.2); 180 color: #ff4242; 181} 182.wvui-button--type-quiet.wvui-button--action-destructive:not( [ disabled ] ):focus { 183 color: #d33; 184 border-color: #d33; 185 box-shadow: inset 0 0 0 1px #d33, inset 0 0 0 2px #fff; 186} 187.wvui-button--type-quiet.wvui-button--action-destructive:not( [ disabled ] ):active { 188 background-color: #b32424; 189 color: #fff; 190 border-color: #b32424; 191 box-shadow: none; 192} 193.wvui-button--type-quiet[disabled] { 194 color: #72777d; 195} 196 197.wvui-checkbox { 198 position: relative; 199 z-index: 0; 200 line-height: 1.42857143em; 201 cursor: pointer; 202} 203.wvui-checkbox__label-content { 204 display: inline-block; 205 padding-left: 1.92857143em; 206} 207.wvui-checkbox:not( .wvui-checkbox--inline) { 208 display: block; 209 margin-bottom: 12px; 210} 211.wvui-checkbox:not( .wvui-checkbox--inline):last-child { 212 margin-bottom: 0; 213} 214.wvui-checkbox--inline { 215 margin-right: 16px; 216 white-space: nowrap; 217} 218.wvui-checkbox--inline:last-child { 219 margin-right: 0; 220} 221.wvui-checkbox--inline span[class$='__label-content'] { 222 display: inline; 223} 224.wvui-checkbox[aria-disabled='true'] { 225 cursor: default; 226} 227.wvui-checkbox__icon { 228 background-color: #fff; 229 position: absolute; 230 left: 0; 231 box-sizing: border-box; 232 width: 1.42857143em; 233 height: 1.42857143em; 234 border: 1px solid #72777d; 235} 236.wvui-checkbox__input { 237 opacity: 0; 238 position: absolute; 239 left: 0; 240 z-index: 1; 241 width: 1.42857143em; 242 height: 1.42857143em; 243 margin: 0; 244 font-size: inherit; 245 cursor: inherit; 246} 247.wvui-checkbox__icon { 248 background-size: 0 0; 249 border-radius: 2px; 250 -webkit-transition-property: background-color, border-color, box-shadow; 251 transition-property: background-color, border-color, box-shadow; 252 -webkit-transition-duration: 100ms; 253 transition-duration: 100ms; 254} 255.wvui-checkbox__input:focus + .wvui-checkbox__icon { 256 border-color: #36c; 257 box-shadow: inset 0 0 0 1px #36c; 258 outline: 1px solid transparent; 259} 260.wvui-checkbox__input:hover + .wvui-checkbox__icon { 261 border-color: #447ff5; 262} 263.wvui-checkbox__input:indeterminate + .wvui-checkbox__icon:before { 264 content: ' '; 265 background-color: #fff; 266 position: absolute; 267 top: 50%; 268 right: 0.21428571em; 269 left: 0.21428571em; 270 height: 2px; 271 margin-top: -1px; 272} 273.wvui-checkbox__input:checked + .wvui-checkbox__icon { 274 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>check</title><g fill="%23fff"><path d="M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z"/></g></svg>'); 275 background-position: center; 276 background-repeat: no-repeat; 277 background-size: 1em 1em; 278} 279.wvui-checkbox__input:disabled + .wvui-checkbox__icon { 280 background-color: #c8ccd1; 281 border-color: #c8ccd1; 282 box-shadow: none; 283} 284.wvui-checkbox__input:disabled ~ .wvui-checkbox__label-content { 285 color: #72777d; 286} 287.wvui-checkbox__input:checked:enabled + .wvui-checkbox__icon, 288.wvui-checkbox__input:indeterminate:enabled + .wvui-checkbox__icon { 289 background-color: #36c; 290 border-color: #36c; 291} 292.wvui-checkbox__input:checked:enabled:focus + .wvui-checkbox__icon, 293.wvui-checkbox__input:indeterminate:enabled:focus + .wvui-checkbox__icon { 294 background-color: #36c; 295 border-color: #36c; 296 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; 297} 298.wvui-checkbox__input:checked:enabled:hover + .wvui-checkbox__icon, 299.wvui-checkbox__input:indeterminate:enabled:hover + .wvui-checkbox__icon { 300 background-color: #447ff5; 301 border-color: #447ff5; 302} 303.wvui-checkbox:active .wvui-checkbox__input:enabled + .wvui-checkbox__icon { 304 background-color: #2a4b8d; 305 border-color: #2a4b8d; 306 box-shadow: inset 0 0 0 1px #2a4b8d; 307} 308.wvui-checkbox:active .wvui-checkbox__input:enabled:checked + .wvui-checkbox__icon { 309 background-color: #2a4b8d; 310 border-color: #2a4b8d; 311 box-shadow: inset 0 0 0 1px #2a4b8d; 312} 313 314.wvui-icon { 315 color: #202122; 316 display: -webkit-inline-box; 317 display: inline-flex; 318 /* stylelint-disable-line plugin/no-unsupported-browser-features */ 319 -webkit-box-align: center; 320 align-items: center; 321 -webkit-box-pack: center; 322 justify-content: center; 323 vertical-align: middle; 324} 325[dir='rtl'] .wvui-icon--flip-for-rtl svg { 326 -webkit-transform: scaleX(-1); 327 transform: scaleX(-1); 328} 329 330.wvui-options-menu { 331 background-color: #fff; 332 box-sizing: border-box; 333 margin: 0; 334 border: 1px solid #a2a9b1; 335 border-radius: 0 0 2px 2px; 336 padding: 0; 337} 338.wvui-options-menu__item { 339 color: #202122; 340 list-style: none; 341 padding: 6px 12px; 342 overflow: hidden; 343 line-height: 1.42857143em; 344 text-overflow: ellipsis; 345 white-space: nowrap; 346 -webkit-transition-property: background-color, color; 347 transition-property: background-color, color; 348 -webkit-transition-duration: 100ms; 349 transition-duration: 100ms; 350} 351.wvui-options-menu__item--enabled { 352 cursor: pointer; 353} 354.wvui-options-menu__item--enabled:hover { 355 background-color: #eaecf0; 356} 357.wvui-options-menu__item--active, 358.wvui-options-menu__item--active:hover { 359 background-color: #eaf3ff; 360 color: #000; 361} 362.wvui-options-menu__item--highlighted { 363 background-color: #eaecf0; 364} 365.wvui-options-menu__item--selected, 366.wvui-options-menu__item--selected:hover { 367 background-color: #eaf3ff; 368} 369.wvui-options-menu__item--active.wvui-options-menu__item--selected { 370 color: #36c; 371} 372.wvui-options-menu__item--disabled { 373 color: #72777d; 374 cursor: default; 375} 376 377.wvui-dropdown { 378 display: inline-block; 379 position: relative; 380 min-width: 280px; 381} 382.wvui-dropdown__indicator { 383 color: #202122; 384 position: absolute; 385 top: 50%; 386 -webkit-transform: translateY(-50%); 387 transform: translateY(-50%); 388 right: 12px; 389 -webkit-transition-property: color; 390 transition-property: color; 391 -webkit-transition-duration: 100ms; 392 transition-duration: 100ms; 393} 394.wvui-dropdown__indicator svg { 395 width: 0.85714286em; 396 height: 0.85714286em; 397} 398.wvui-dropdown__handle { 399 background-color: #f8f9fa; 400 color: #202122; 401 position: relative; 402 box-sizing: border-box; 403 min-height: 2.28571429em; 404 width: 100%; 405 border: 1px solid #a2a9b1; 406 border-radius: 2px; 407 padding: 5px calc(2 * 12px + 0.85714286em) 5px 12px; 408 line-height: 1.42857143em; 409 -webkit-transition-property: background-color, color, border-color, box-shadow; 410 transition-property: background-color, color, border-color, box-shadow; 411 -webkit-transition-duration: 100ms; 412 transition-duration: 100ms; 413 cursor: pointer; 414} 415.wvui-dropdown__handle:hover { 416 background-color: #fff; 417 color: #404244; 418 border-color: #a2a9b1; 419} 420.wvui-dropdown__handle:hover .wvui-dropdown__indicator { 421 color: #404244; 422} 423.wvui-dropdown__handle:focus { 424 border-color: #36c; 425 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; 426 outline: 0; 427} 428.wvui-dropdown__handle:active { 429 color: #000; 430 border-color: #72777d; 431} 432.wvui-dropdown__menu { 433 position: absolute; 434 left: 0; 435 z-index: 4; 436 width: 100%; 437 margin-top: -1px; 438} 439.wvui-dropdown--open .wvui-dropdown__handle { 440 background-color: #fff; 441} 442.wvui-dropdown--open .wvui-dropdown__handle:hover .wvui-dropdown__indicator { 443 color: #202122; 444} 445.wvui-dropdown--disabled .wvui-dropdown__handle { 446 background-color: #eaecf0; 447 color: #72777d; 448 border-color: #c8ccd1; 449 text-shadow: 0 1px 1px #fff; 450 cursor: default; 451} 452.wvui-dropdown--disabled .wvui-dropdown__handle:hover .wvui-dropdown__indicator { 453 color: #72777d; 454} 455.wvui-dropdown--disabled .wvui-dropdown__indicator { 456 color: #72777d; 457} 458 459.wvui-input { 460 position: relative; 461 box-sizing: border-box; 462} 463.wvui-input__start-icon, 464.wvui-input__end-icon { 465 color: #54595d; 466 position: absolute; 467 top: 0; 468 min-height: 20px; 469 height: 100%; 470} 471.wvui-input__start-icon { 472 left: 1px; 473 width: 36px; 474 pointer-events: none; 475} 476.wvui-input__end-icon { 477 right: 1px; 478 width: 36px; 479} 480.wvui-input--clearable .wvui-input__end-icon { 481 width: calc(8px * 2 + 0.85714286em); 482 cursor: pointer; 483} 484.wvui-input--clearable .wvui-input__end-icon svg { 485 width: 0.85714286em; 486} 487.wvui-input__input { 488 display: block; 489 box-sizing: border-box; 490 width: 100%; 491 height: 2.28571429em; 492 margin: 0; 493 border-width: 1px; 494 border-style: solid; 495 border-radius: 2px; 496 padding: 5px 8px; 497 font-family: inherit; 498 font-size: inherit; 499 line-height: 1.42857143em; 500} 501.wvui-input__input:not( [ disabled ] ) { 502 background-color: #fff; 503 color: #000; 504 border-color: #a2a9b1; 505 box-shadow: inset 0 0 0 1px transparent; 506 -webkit-transition-property: border-color, box-shadow; 507 transition-property: border-color, box-shadow; 508 -webkit-transition-duration: 250ms; 509 transition-duration: 250ms; 510} 511.wvui-input__input:not( [ disabled ] ):hover { 512 border-color: #72777d; 513} 514.wvui-input__input:not( [ disabled ] ):focus { 515 border-color: #36c; 516 box-shadow: inset 0 0 0 1px #36c; 517 outline: 0; 518} 519.wvui-input__input:not( [ disabled ] ):focus ~ .wvui-input__start-icon, 520.wvui-input__input:not( [ disabled ] ):focus ~ .wvui-input__end-icon { 521 opacity: 1; 522} 523.wvui-input__input[disabled] { 524 background-color: #eaecf0; 525 color: #72777d; 526 -webkit-text-fill-color: #72777d; 527 border-color: #c8ccd1; 528 text-shadow: 0 1px 1px #fff; 529} 530.wvui-input__input[disabled] ~ .wvui-input__start-icon, 531.wvui-input__input[disabled] ~ .wvui-input__end-icon { 532 opacity: 0.51; 533 pointer-events: none; 534} 535.wvui-input__input::-webkit-input-placeholder { 536 color: #72777d; 537 opacity: 1; 538} 539.wvui-input__input:-ms-input-placeholder { 540 color: #72777d; 541 opacity: 1; 542} 543.wvui-input__input::placeholder { 544 color: #72777d; 545 opacity: 1; 546} 547.wvui-input__input::-ms-clear { 548 display: none; 549} 550.wvui-input__input[type='search'] { 551 /* stylelint-disable plugin/no-unsupported-browser-features */ 552 /* autoprefixer: ignore next */ 553 -webkit-appearance: none; 554 /* autoprefixer: ignore next */ 555 -moz-appearance: textfield; 556 /* stylelint-enable plugin/no-unsupported-browser-features */ 557} 558.wvui-input__input[type='search']::-webkit-search-decoration, 559.wvui-input__input[type='search']::-webkit-search-cancel-button { 560 display: none; 561} 562.wvui-input--has-start-icon .wvui-input__input { 563 padding-left: 36px; 564} 565.wvui-input--has-end-icon .wvui-input__input { 566 padding-right: 36px; 567} 568 569.wvui-progress-bar { 570 background-color: #fff; 571 box-sizing: border-box; 572 max-width: 50em; 573 border: 1px solid #a2a9b1; 574 border-radius: 16px; 575 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15); 576 overflow-x: hidden; 577} 578.wvui-progress-bar__bar { 579 background-color: #36c; 580 width: 40%; 581 height: 1.14285714em; 582 -webkit-animation: wvui-progress-bar__bar--slide 2s infinite linear; 583 animation: wvui-progress-bar__bar--slide 2s infinite linear; 584} 585@-webkit-keyframes wvui-progress-bar__bar--slide { 586from { 587 -webkit-transform: translate(-100%); 588 transform: translate(-100%); 589} 590to { 591 -webkit-transform: translate(350%); 592 transform: translate(350%); 593} 594} 595@keyframes wvui-progress-bar__bar--slide { 596from { 597 -webkit-transform: translate(-100%); 598 transform: translate(-100%); 599} 600to { 601 -webkit-transform: translate(350%); 602 transform: translate(350%); 603} 604} 605 606.wvui-radio { 607 position: relative; 608 z-index: 0; 609 line-height: 1.42857143em; 610 cursor: pointer; 611 /* stylelint-disable no-descending-specificity */ 612 /* stylelint-enable no-descending-specificity */ 613} 614.wvui-radio__label-content { 615 display: inline-block; 616 padding-left: 1.92857143em; 617} 618.wvui-radio:not( .wvui-radio--inline) { 619 display: block; 620 margin-bottom: 12px; 621} 622.wvui-radio:not( .wvui-radio--inline):last-child { 623 margin-bottom: 0; 624} 625.wvui-radio--inline { 626 margin-right: 16px; 627 white-space: nowrap; 628} 629.wvui-radio--inline:last-child { 630 margin-right: 0; 631} 632.wvui-radio--inline span[class$='__label-content'] { 633 display: inline; 634} 635.wvui-radio[aria-disabled='true'] { 636 cursor: default; 637} 638.wvui-radio__icon { 639 background-color: #fff; 640 position: absolute; 641 left: 0; 642 box-sizing: border-box; 643 width: 1.42857143em; 644 height: 1.42857143em; 645 border: 1px solid #72777d; 646} 647.wvui-radio__input { 648 opacity: 0; 649 position: absolute; 650 left: 0; 651 z-index: 1; 652 width: 1.42857143em; 653 height: 1.42857143em; 654 margin: 0; 655 font-size: inherit; 656 cursor: inherit; 657} 658.wvui-radio__icon { 659 border-radius: 50%; 660 -webkit-transition-property: background-color, border-color, border-width; 661 transition-property: background-color, border-color, border-width; 662 -webkit-transition-duration: 100ms; 663 transition-duration: 100ms; 664} 665.wvui-radio__icon:before { 666 content: ' '; 667 position: absolute; 668 top: -4px; 669 right: -4px; 670 bottom: -4px; 671 left: -4px; 672 border: 1px solid transparent; 673 border-radius: 50%; 674} 675.wvui-radio__input:enabled:hover + .wvui-radio__icon, 676.wvui-radio__input:enabled:checked:hover + .wvui-radio__icon { 677 border-color: #447ff5; 678} 679.wvui-radio__input:enabled:checked + .wvui-radio__icon { 680 border-width: 0.42857143em; 681 border-color: #36c; 682} 683.wvui-radio__input:enabled:checked:focus + .wvui-radio__icon:before { 684 border-color: #fff; 685} 686.wvui-radio__input:disabled ~ .wvui-radio__label-content { 687 color: #72777d; 688} 689.wvui-radio__input:disabled + .wvui-radio__icon { 690 background-color: #c8ccd1; 691 border-color: #c8ccd1; 692} 693.wvui-radio__input:disabled:checked + .wvui-radio__icon { 694 background-color: #fff; 695 border-width: 0.42857143em; 696} 697.wvui-radio:active .wvui-radio__input:enabled + .wvui-radio__icon { 698 background-color: #2a4b8d; 699 border-color: #2a4b8d; 700} 701.wvui-radio:active .wvui-radio__input:enabled:checked + .wvui-radio__icon { 702 background-color: #fff; 703 border-color: #2a4b8d; 704} 705.wvui-radio:active .wvui-radio__input:enabled:checked + .wvui-radio__icon:before { 706 border-color: #2a4b8d; 707} 708 709.wvui-toggle-button { 710 box-sizing: border-box; 711 min-width: 32px; 712 min-height: 32px; 713 max-width: 28.75em; 714 margin: 0; 715 border-width: 1px; 716 border-style: solid; 717 border-radius: 2px; 718 padding-right: 12px; 719 padding-left: 12px; 720 overflow: visible; 721 font-family: inherit; 722 font-size: inherit; 723 font-weight: bold; 724 text-transform: none; 725 white-space: nowrap; 726 -webkit-transition: border-color 100ms, background-color 100ms, color 100ms, box-shadow 100ms; 727 transition: border-color 100ms, background-color 100ms, color 100ms, box-shadow 100ms; 728} 729.wvui-toggle-button::-moz-focus-inner { 730 border: 0; 731 padding: 0; 732} 733.wvui-toggle-button:focus { 734 outline: 0; 735} 736.wvui-toggle-button:not( [ disabled ] ) { 737 background-color: #f8f9fa; 738 color: #202122; 739 border-color: #a2a9b1; 740 cursor: pointer; 741} 742.wvui-toggle-button:not( [ disabled ] ):focus { 743 border-color: #36c; 744 box-shadow: inset 0 0 0 1px #36c; 745 outline: 1px solid transparent; 746} 747.wvui-toggle-button:not( [ disabled ] ):hover { 748 background-color: #fff; 749 color: #404244; 750} 751.wvui-toggle-button:not( [ disabled ] ):active { 752 background-color: #c8ccd1; 753 color: #000; 754 border-color: #72777d; 755 box-shadow: none; 756} 757.wvui-toggle-button[disabled] { 758 background-color: #c8ccd1; 759 color: #fff; 760 border-color: #c8ccd1; 761} 762.wvui-toggle-button--active:disabled { 763 background-color: #919fb9; 764} 765.wvui-toggle-button--active:not( [ disabled ] ) { 766 background-color: #2a4b8d; 767 color: #fff; 768 border-color: #2a4b8d; 769} 770.wvui-toggle-button--active:not( [ disabled ] ):focus { 771 border-color: #36c; 772 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; 773} 774.wvui-toggle-button--active:not( [ disabled ] ):hover { 775 background-color: #2a4b8d; 776 color: #fff; 777} 778 779.wvui-typeahead-suggestion__title { 780 color: #202122; 781 display: block; 782 margin: 0 0 2px 0; 783 font-size: 1.14285714em; 784 font-weight: 700; 785} 786.wvui-typeahead-suggestion__match { 787 font-weight: 400; 788} 789 790.wvui-typeahead-suggestion { 791 display: -webkit-box; 792 display: flex; 793 -webkit-box-align: center; 794 align-items: center; 795 padding: 8px 12px; 796 text-decoration: none; 797 -webkit-hyphens: auto; 798 -ms-hyphens: auto; 799 hyphens: auto; 800 word-break: break-word; 801 word-wrap: break-word; 802} 803.wvui-typeahead-suggestion--active { 804 background-color: #eaecf0; 805} 806.wvui-typeahead-suggestion__thumbnail-placeholder, 807.wvui-typeahead-suggestion__thumbnail { 808 background-position: center; 809 background-repeat: no-repeat; 810 background-size: cover; 811 flex-shrink: 0; 812 width: 2.57142857em; 813 height: 2.57142857em; 814 margin-right: 12px; 815 border-radius: 2px; 816 box-shadow: 0 0 1px 1px #eaecf0; 817} 818.wvui-typeahead-suggestion__thumbnail { 819 display: inline-block; 820} 821.wvui-typeahead-suggestion__thumbnail-placeholder { 822 background-color: #f8f9fa; 823 display: -webkit-inline-box; 824 display: inline-flex; 825 -webkit-box-align: center; 826 align-items: center; 827 -webkit-box-pack: center; 828 justify-content: center; 829} 830.wvui-typeahead-suggestion__thumbnail-icon { 831 color: #54595d; 832} 833.wvui-typeahead-suggestion__text { 834 overflow: hidden; 835} 836.wvui-typeahead-suggestion__text .wvui-typeahead-suggestion__description { 837 color: #72777d; 838 display: block; 839 overflow: hidden; 840 font-size: 1em; 841 text-overflow: ellipsis; 842 white-space: nowrap; 843} 844 845.wvui-typeahead-search { 846 background-color: #fff; 847 border: 1px solid #a2a9b1; 848 border-radius: 2px; 849} 850.wvui-typeahead-search__form { 851 display: -webkit-box; 852 display: flex; 853} 854.wvui-typeahead-search__wrapper { 855 -webkit-box-flex: 1; 856 flex-grow: 1; 857 position: relative; 858 margin: -1px; 859} 860.wvui-typeahead-search__submit { 861 opacity: 0; 862 position: relative; 863 flex-shrink: 0; 864 margin: -1px -1px -1px 0; 865 border-top-left-radius: 0; 866 border-bottom-left-radius: 0; 867 -webkit-transition-property: opacity; 868 transition-property: opacity; 869 -webkit-transition-duration: 100ms; 870 transition-duration: 100ms; 871} 872.wvui-typeahead-search__submit:hover { 873 z-index: 1; 874} 875.wvui-typeahead-search__submit:focus { 876 opacity: 1; 877 z-index: 1; 878} 879.wvui-typeahead-search__suggestions { 880 background-color: #fff; 881 list-style: none; 882 display: none; 883 position: absolute; 884 top: 2.28571429em; 885 right: 0; 886 left: 0; 887 box-sizing: border-box; 888 margin: 0; 889 border: 1px solid #a2a9b1; 890 border-top-width: 0; 891 border-radius: 0 0 2px 2px; 892 padding: 0; 893 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25); 894} 895.wvui-typeahead-search__suggestions__footer { 896 color: #202122; 897 display: -webkit-box; 898 display: flex; 899 -webkit-box-align: center; 900 align-items: center; 901 border-top: 1px solid #c8ccd1; 902 padding: 8px 12px 8px 36px; 903 text-decoration: none; 904 cursor: pointer; 905} 906.wvui-typeahead-search__suggestions__footer:visited, 907.wvui-typeahead-search__suggestions__footer:active { 908 color: #202122; 909} 910.wvui-typeahead-search__suggestions__footer .wvui-icon { 911 color: #54595d; 912 width: auto; 913 height: 2.57142857em; 914 margin-right: 12px; 915} 916.wvui-typeahead-search__suggestions__footer--active { 917 background-color: #eaecf0; 918} 919.wvui-typeahead-search__suggestions__footer__text { 920 font-size: 1.14285714em; 921} 922.wvui-typeahead-search__suggestion { 923 padding-left: 36px; 924} 925.wvui-typeahead-search .wvui-input__input { 926 border-right-color: transparent; 927} 928.wvui-typeahead-search--has-value .wvui-input__input { 929 border-bottom-left-radius: 0; 930} 931.wvui-typeahead-search--active .wvui-typeahead-search__submit, 932.wvui-typeahead-search:hover .wvui-typeahead-search__submit { 933 opacity: 1; 934} 935.wvui-typeahead-search--active .wvui-typeahead-search__input, 936.wvui-typeahead-search:hover .wvui-typeahead-search__input { 937 z-index: 1; 938} 939.wvui-typeahead-search--active .wvui-input__input, 940.wvui-typeahead-search:hover .wvui-input__input { 941 border-top-right-radius: 0; 942 border-bottom-right-radius: 0; 943} 944.wvui-typeahead-search--expanded .wvui-typeahead-search__suggestions { 945 display: block; 946} 947.wvui-typeahead-search--show-thumbnail .wvui-input__input { 948 padding-left: 2.57142857em; 949} 950.wvui-typeahead-search--show-thumbnail .wvui-input__start-icon { 951 width: 2.57142857em; 952} 953.wvui-typeahead-search--show-thumbnail .wvui-input__input:focus { 954 position: relative; 955 left: -24px; 956 width: calc(100% + 24px); 957 padding-left: calc(12px + 2.57142857em + 12px); 958} 959.wvui-typeahead-search--show-thumbnail .wvui-input__input:focus + .wvui-input__start-icon { 960 left: -11px; 961} 962.wvui-typeahead-search--show-thumbnail .wvui-typeahead-search__suggestions { 963 left: -24px; 964} 965.wvui-typeahead-search--show-thumbnail .wvui-typeahead-search__suggestion { 966 padding-right: 12px; 967 padding-left: 12px; 968} 969.wvui-typeahead-search--show-thumbnail .wvui-typeahead-search__suggestions__footer { 970 padding-right: 12px; 971 padding-left: 12px; 972} 973.wvui-typeahead-search--show-thumbnail .wvui-typeahead-search__suggestions__footer__text, 974.wvui-typeahead-search--show-thumbnail .wvui-typeahead-search__suggestions__footer__text__query { 975 -webkit-hyphens: auto; 976 -ms-hyphens: auto; 977 hyphens: auto; 978 word-break: break-word; 979 word-wrap: break-word; 980} 981.wvui-typeahead-search--show-thumbnail .wvui-typeahead-search__suggestions-footer-article-icon { 982 flex-shrink: 0; 983 width: 2.57142857em; 984} 985 986