1/** 2* 3* Copyright 2012 Adobe Systems Inc.; 4* 5* Licensed under the Apache License, Version 2.0 (the "License"); 6* you may not use this file except in compliance with the License. 7* You may obtain a copy of the License at 8* 9* http://www.apache.org/licenses/LICENSE-2.0 10* 11* Unless required by applicable law or agreed to in writing, software 12* distributed under the License is distributed on an "AS IS" BASIS, 13* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14* See the License for the specific language governing permissions and 15* limitations under the License. 16* 17*/ 18 19.button-bar { 20 display: table; 21 table-layout: fixed; 22 white-space: nowrap; 23 margin: 0; 24 padding: 0; 25} 26 27.button-bar__item { 28 display: table-cell; 29 width: auto; 30 border-radius: 0; 31} 32 33.button-bar__item > input { 34 position: absolute; 35 overflow: hidden; 36 padding: 0; 37 border: 0; 38 opacity: 0.001; 39 z-index: 1; 40 vertical-align: top; 41 outline: none; 42} 43 44.button-bar__button { 45 border-radius: inherit; 46} 47 48.button-bar__item:disabled { 49 opacity: 0.3; 50 cursor: default; 51 pointer-events: none; 52} 53 54/** 55* 56* Copyright 2012 Adobe Systems Inc.; 57* 58* Licensed under the Apache License, Version 2.0 (the "License"); 59* you may not use this file except in compliance with the License. 60* You may obtain a copy of the License at 61* 62* http://www.apache.org/licenses/LICENSE-2.0 63* 64* Unless required by applicable law or agreed to in writing, software 65* distributed under the License is distributed on an "AS IS" BASIS, 66* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 67* See the License for the specific language governing permissions and 68* limitations under the License. 69* 70*/ 71 72/** 73* 74* Copyright 2012 Adobe Systems Inc.; 75* 76* Licensed under the Apache License, Version 2.0 (the "License"); 77* you may not use this file except in compliance with the License. 78* You may obtain a copy of the License at 79* 80* http://www.apache.org/licenses/LICENSE-2.0 81* 82* Unless required by applicable law or agreed to in writing, software 83* distributed under the License is distributed on an "AS IS" BASIS, 84* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 85* See the License for the specific language governing permissions and 86* limitations under the License. 87* 88*/ 89 90/** 91* 92* Copyright 2012 Adobe Systems Inc.; 93* 94* Licensed under the Apache License, Version 2.0 (the "License"); 95* you may not use this file except in compliance with the License. 96* You may obtain a copy of the License at 97* 98* http://www.apache.org/licenses/LICENSE-2.0 99* 100* Unless required by applicable law or agreed to in writing, software 101* distributed under the License is distributed on an "AS IS" BASIS, 102* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 103* See the License for the specific language governing permissions and 104* limitations under the License. 105* 106*/ 107 108.button, 109.topcoat-button, 110.topcoat-button--quiet, 111.topcoat-button--large, 112.topcoat-button--large--quiet, 113.topcoat-button--cta, 114.topcoat-button--large--cta, 115.topcoat-button-bar__button, 116.topcoat-button-bar__button--large { 117 position: relative; 118 display: inline-block; 119 vertical-align: top; 120 -moz-box-sizing: border-box; 121 box-sizing: border-box; 122 background-clip: padding-box; 123 padding: 0; 124 margin: 0; 125 font: inherit; 126 color: inherit; 127 background: transparent; 128 border: none; 129 cursor: default; 130 -webkit-user-select: none; 131 -moz-user-select: none; 132 -ms-user-select: none; 133 user-select: none; 134 text-overflow: ellipsis; 135 white-space: nowrap; 136 overflow: hidden; 137 text-decoration: none; 138} 139 140.button--quiet { 141 background: transparent; 142 border: 1px solid transparent; 143 box-shadow: none; 144} 145 146.button--disabled, 147.topcoat-button:disabled, 148.topcoat-button--quiet:disabled, 149.topcoat-button--large:disabled, 150.topcoat-button--large--quiet:disabled, 151.topcoat-button--cta:disabled, 152.topcoat-button--large--cta:disabled, 153.topcoat-button-bar__button:disabled, 154.topcoat-button-bar__button--large:disabled { 155 opacity: 0.3; 156 cursor: default; 157 pointer-events: none; 158} 159 160.topcoat-button, 161.topcoat-button--quiet, 162.topcoat-button--large, 163.topcoat-button--large--quiet, 164.topcoat-button--cta, 165.topcoat-button--large--cta, 166.topcoat-button-bar__button, 167.topcoat-button-bar__button--large { 168 padding: 0 1.25rem; 169 font-size: 16px; 170 line-height: 3rem; 171 letter-spacing: 1px; 172 color: #454545; 173 text-shadow: 0 1px #fff; 174 vertical-align: top; 175 background-color: #e5e9e8; 176 box-shadow: inset 0 1px #fff; 177 border: 1px solid #a5a8a8; 178 border-radius: 6px; 179} 180 181.topcoat-button:hover, 182.topcoat-button--quiet:hover, 183.topcoat-button--large:hover, 184.topcoat-button--large--quiet:hover, 185.topcoat-button-bar__button:hover, 186.topcoat-button-bar__button--large:hover { 187 background-color: #edf1f1; 188} 189 190.topcoat-button:active, 191.topcoat-button--large:active, 192.topcoat-button-bar__button:active, 193.topcoat-button-bar__button--large:active, 194:checked + .topcoat-button-bar__button { 195 background-color: #d3d7d7; 196 box-shadow: inset 0 1px rgba(0,0,0,0.12); 197} 198 199.topcoat-button:focus, 200.topcoat-button--quiet:focus, 201.topcoat-button--large:focus, 202.topcoat-button--large--quiet:focus, 203.topcoat-button--cta:focus, 204.topcoat-button--large--cta:focus, 205.topcoat-button-bar__button:focus, 206.topcoat-button-bar__button--large:focus { 207 border: 1px solid #0940fd; 208 box-shadow: 0 0 0 2px #6fb5f1; 209 outline: 0; 210} 211 212.topcoat-button--quiet { 213 background: transparent; 214 border: 1px solid transparent; 215 box-shadow: none; 216} 217 218.topcoat-button--quiet:hover, 219.topcoat-button--large--quiet:hover { 220 text-shadow: 0 1px #fff; 221 border: 1px solid #a5a8a8; 222 box-shadow: inset 0 1px #fff; 223} 224 225.topcoat-button--quiet:active, 226.topcoat-button--large--quiet:active { 227 color: #454545; 228 text-shadow: 0 1px #fff; 229 background-color: #d3d7d7; 230 border: 1px solid #a5a8a8; 231 box-shadow: inset 0 1px rgba(0,0,0,0.12); 232} 233 234.topcoat-button--large, 235.topcoat-button--large--quiet, 236.topcoat-button-bar__button--large { 237 font-size: 1.3rem; 238 font-weight: 400; 239 line-height: 4.375rem; 240 padding: 0 1.25rem; 241} 242 243.topcoat-button--large--quiet { 244 background: transparent; 245 border: 1px solid transparent; 246 box-shadow: none; 247} 248 249.topcoat-button--cta, 250.topcoat-button--large--cta { 251 border: 1px solid #143250; 252 background-color: #288edf; 253 box-shadow: inset 0 1px rgba(255,255,255,0.36); 254 color: #fff; 255 font-weight: 500; 256 text-shadow: 0 -1px rgba(0,0,0,0.36); 257} 258 259.topcoat-button--cta:hover, 260.topcoat-button--large--cta:hover { 261 background-color: #509bef; 262} 263 264.topcoat-button--cta:active, 265.topcoat-button--large--cta:active { 266 background-color: #0380e8; 267 box-shadow: inset 0 1px rgba(0,0,0,0.12); 268} 269 270.topcoat-button--large--cta { 271 font-size: 1.3rem; 272 font-weight: 400; 273 line-height: 4.375rem; 274 padding: 0 1.25rem; 275} 276 277.button-bar, 278.topcoat-button-bar { 279 display: table; 280 table-layout: fixed; 281 white-space: nowrap; 282 margin: 0; 283 padding: 0; 284} 285 286.button-bar__item, 287.topcoat-button-bar__item { 288 display: table-cell; 289 width: auto; 290 border-radius: 0; 291} 292 293.button-bar__item > input, 294.topcoat-button-bar__item > input { 295 position: absolute; 296 overflow: hidden; 297 padding: 0; 298 border: 0; 299 opacity: 0.001; 300 z-index: 1; 301 vertical-align: top; 302 outline: none; 303} 304 305.button-bar__button { 306 border-radius: inherit; 307} 308 309.button-bar__item:disabled { 310 opacity: 0.3; 311 cursor: default; 312 pointer-events: none; 313} 314 315/* topdoc 316 name: Button Bar 317 description: Component of grouped buttons 318 modifiers: 319 :disabled: Disabled state 320 markup: 321 <div class="topcoat-button-bar"> 322 <div class="topcoat-button-bar__item"> 323 <button class="topcoat-button-bar__button">One</button> 324 </div> 325 <div class="topcoat-button-bar__item"> 326 <button class="topcoat-button-bar__button">Two</button> 327 </div> 328 <div class="topcoat-button-bar__item"> 329 <button class="topcoat-button-bar__button">Three</button> 330 </div> 331 </div> 332 examples: 333 mobile button bar: http://codepen.io/Topcoat/pen/kdKyg 334 tags: 335 - desktop 336 - light 337 - dark 338 - mobile 339 - button 340 - group 341 - bar 342*/ 343 344.topcoat-button-bar > .topcoat-button-bar__item:first-child { 345 border-top-left-radius: 6px; 346 border-bottom-left-radius: 6px; 347} 348 349.topcoat-button-bar > .topcoat-button-bar__item:last-child { 350 border-top-right-radius: 6px; 351 border-bottom-right-radius: 6px; 352} 353 354.topcoat-button-bar__item:first-child > .topcoat-button-bar__button, 355.topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large { 356 border-right: none; 357} 358 359.topcoat-button-bar__item:last-child > .topcoat-button-bar__button, 360.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large { 361 border-left: none; 362} 363 364.topcoat-button-bar__button { 365 border-radius: inherit; 366} 367 368.topcoat-button-bar__button:focus, 369.topcoat-button-bar__button--large:focus { 370 z-index: 1; 371} 372 373/* topdoc 374 name: Large Button Bar 375 description: A button bar, only larger 376 modifiers: 377 :disabled: Disabled state 378 markup: 379 <div class="topcoat-button-bar"> 380 <div class="topcoat-button-bar__item"> 381 <button class="topcoat-button-bar__button--large">One</button> 382 </div> 383 <div class="topcoat-button-bar__item"> 384 <button class="topcoat-button-bar__button--large">Two</button> 385 </div> 386 <div class="topcoat-button-bar__item"> 387 <button class="topcoat-button-bar__button--large">Three</button> 388 </div> 389 </div> 390 tags: 391 - desktop 392 - light 393 - dark 394 - mobile 395 - button 396 - group 397 - bar 398 - large 399*/ 400 401.topcoat-button-bar__button--large { 402 border-radius: inherit; 403} 404 405/** 406* 407* Copyright 2012 Adobe Systems Inc.; 408* 409* Licensed under the Apache License, Version 2.0 (the "License"); 410* you may not use this file except in compliance with the License. 411* You may obtain a copy of the License at 412* 413* http://www.apache.org/licenses/LICENSE-2.0 414* 415* Unless required by applicable law or agreed to in writing, software 416* distributed under the License is distributed on an "AS IS" BASIS, 417* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 418* See the License for the specific language governing permissions and 419* limitations under the License. 420* 421*/ 422 423.button { 424 position: relative; 425 display: inline-block; 426 vertical-align: top; 427 -moz-box-sizing: border-box; 428 box-sizing: border-box; 429 background-clip: padding-box; 430 padding: 0; 431 margin: 0; 432 font: inherit; 433 color: inherit; 434 background: transparent; 435 border: none; 436 cursor: default; 437 -webkit-user-select: none; 438 -moz-user-select: none; 439 -ms-user-select: none; 440 user-select: none; 441 text-overflow: ellipsis; 442 white-space: nowrap; 443 overflow: hidden; 444 text-decoration: none; 445} 446 447.button--quiet { 448 background: transparent; 449 border: 1px solid transparent; 450 box-shadow: none; 451} 452 453.button--disabled { 454 opacity: 0.3; 455 cursor: default; 456 pointer-events: none; 457} 458 459/** 460* 461* Copyright 2012 Adobe Systems Inc.; 462* 463* Licensed under the Apache License, Version 2.0 (the "License"); 464* you may not use this file except in compliance with the License. 465* You may obtain a copy of the License at 466* 467* http://www.apache.org/licenses/LICENSE-2.0 468* 469* Unless required by applicable law or agreed to in writing, software 470* distributed under the License is distributed on an "AS IS" BASIS, 471* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 472* See the License for the specific language governing permissions and 473* limitations under the License. 474* 475*/ 476 477/** 478* 479* Copyright 2012 Adobe Systems Inc.; 480* 481* Licensed under the Apache License, Version 2.0 (the "License"); 482* you may not use this file except in compliance with the License. 483* You may obtain a copy of the License at 484* 485* http://www.apache.org/licenses/LICENSE-2.0 486* 487* Unless required by applicable law or agreed to in writing, software 488* distributed under the License is distributed on an "AS IS" BASIS, 489* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 490* See the License for the specific language governing permissions and 491* limitations under the License. 492* 493*/ 494 495/** 496* 497* Copyright 2012 Adobe Systems Inc.; 498* 499* Licensed under the Apache License, Version 2.0 (the "License"); 500* you may not use this file except in compliance with the License. 501* You may obtain a copy of the License at 502* 503* http://www.apache.org/licenses/LICENSE-2.0 504* 505* Unless required by applicable law or agreed to in writing, software 506* distributed under the License is distributed on an "AS IS" BASIS, 507* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 508* See the License for the specific language governing permissions and 509* limitations under the License. 510* 511*/ 512 513.button, 514.topcoat-button, 515.topcoat-button--quiet, 516.topcoat-button--large, 517.topcoat-button--large--quiet, 518.topcoat-button--cta, 519.topcoat-button--large--cta { 520 position: relative; 521 display: inline-block; 522 vertical-align: top; 523 -moz-box-sizing: border-box; 524 box-sizing: border-box; 525 background-clip: padding-box; 526 padding: 0; 527 margin: 0; 528 font: inherit; 529 color: inherit; 530 background: transparent; 531 border: none; 532 cursor: default; 533 -webkit-user-select: none; 534 -moz-user-select: none; 535 -ms-user-select: none; 536 user-select: none; 537 text-overflow: ellipsis; 538 white-space: nowrap; 539 overflow: hidden; 540 text-decoration: none; 541} 542 543.button--quiet { 544 background: transparent; 545 border: 1px solid transparent; 546 box-shadow: none; 547} 548 549.button--disabled, 550.topcoat-button:disabled, 551.topcoat-button--quiet:disabled, 552.topcoat-button--large:disabled, 553.topcoat-button--large--quiet:disabled, 554.topcoat-button--cta:disabled, 555.topcoat-button--large--cta:disabled { 556 opacity: 0.3; 557 cursor: default; 558 pointer-events: none; 559} 560 561/* topdoc 562 name: Button 563 description: A simple button 564 modifiers: 565 :active: Active state 566 :disabled: Disabled state 567 :hover: Hover state 568 :focus: Focused 569 markup: 570 <button class="topcoat-button">Button</button> 571 <button class="topcoat-button" disabled>Button</button> 572 examples: 573 mobile button: http://codepen.io/Topcoat/pen/DpKtf 574 tags: 575 - desktop 576 - light 577 - mobile 578 - button 579*/ 580 581.topcoat-button, 582.topcoat-button--quiet, 583.topcoat-button--large, 584.topcoat-button--large--quiet, 585.topcoat-button--cta, 586.topcoat-button--large--cta { 587 padding: 0 1.25rem; 588 font-size: 16px; 589 line-height: 3rem; 590 letter-spacing: 1px; 591 color: #454545; 592 text-shadow: 0 1px #fff; 593 vertical-align: top; 594 background-color: #e5e9e8; 595 box-shadow: inset 0 1px #fff; 596 border: 1px solid #a5a8a8; 597 border-radius: 6px; 598} 599 600.topcoat-button:hover, 601.topcoat-button--quiet:hover, 602.topcoat-button--large:hover, 603.topcoat-button--large--quiet:hover { 604 background-color: #edf1f1; 605} 606 607.topcoat-button:active, 608.topcoat-button--large:active { 609 background-color: #d3d7d7; 610 box-shadow: inset 0 1px rgba(0,0,0,0.12); 611} 612 613.topcoat-button:focus, 614.topcoat-button--quiet:focus, 615.topcoat-button--large:focus, 616.topcoat-button--large--quiet:focus, 617.topcoat-button--cta:focus, 618.topcoat-button--large--cta:focus { 619 border: 1px solid #0940fd; 620 box-shadow: 0 0 0 2px #6fb5f1; 621 outline: 0; 622} 623 624/* topdoc 625 name: Quiet Button 626 description: A simple, yet quiet button 627 modifiers: 628 :active: Quiet button active state 629 :disabled: Disabled state 630 :hover: Hover state 631 :focus: Focused 632 markup: 633 <button class="topcoat-button--quiet">Button</button> 634 <button class="topcoat-button--quiet" disabled>Button</button> 635 tags: 636 - desktop 637 - light 638 - mobile 639 - button 640 - quiet 641*/ 642 643.topcoat-button--quiet { 644 background: transparent; 645 border: 1px solid transparent; 646 box-shadow: none; 647} 648 649.topcoat-button--quiet:hover, 650.topcoat-button--large--quiet:hover { 651 text-shadow: 0 1px #fff; 652 border: 1px solid #a5a8a8; 653 box-shadow: inset 0 1px #fff; 654} 655 656.topcoat-button--quiet:active, 657.topcoat-button--large--quiet:active { 658 color: #454545; 659 text-shadow: 0 1px #fff; 660 background-color: #d3d7d7; 661 border: 1px solid #a5a8a8; 662 box-shadow: inset 0 1px rgba(0,0,0,0.12); 663} 664 665/* topdoc 666 name: Large Button 667 description: A big ol button 668 modifiers: 669 :active: Active state 670 :disabled: Disabled state 671 :hover: Hover state 672 :focus: Focused 673 markup: 674 <button class="topcoat-button--large" >Button</button> 675 <button class="topcoat-button--large" disabled>Button</button> 676 tags: 677 - desktop 678 - light 679 - mobile 680 - button 681 - large 682*/ 683 684.topcoat-button--large, 685.topcoat-button--large--quiet { 686 font-size: 1.3rem; 687 font-weight: 400; 688 line-height: 4.375rem; 689 padding: 0 1.25rem; 690} 691 692/* topdoc 693 name: Large Quiet Button 694 description: A large, yet quiet button 695 modifiers: 696 :active: Active state 697 :disabled: Disabled state 698 :hover: Hover state 699 :focus: Focused 700 markup: 701 <button class="topcoat-button--large--quiet" >Button</button> 702 <button class="topcoat-button--large--quiet" disabled>Button</button> 703 tags: 704 - desktop 705 - light 706 - mobile 707 - button 708 - large 709 - quiet 710*/ 711 712.topcoat-button--large--quiet { 713 background: transparent; 714 border: 1px solid transparent; 715 box-shadow: none; 716} 717 718/* topdoc 719 name: Call To Action Button 720 description: A CALL TO ARMS, er, ACTION! 721 modifiers: 722 :active: Active state 723 :disabled: Disabled state 724 :hover: Hover state 725 :focus: Focused 726 markup: 727 <button class="topcoat-button--cta" >Button</button> 728 <button class="topcoat-button--cta" disabled>Button</button> 729 tags: 730 - desktop 731 - light 732 - mobile 733 - button 734 - call to action 735*/ 736 737.topcoat-button--cta, 738.topcoat-button--large--cta { 739 border: 1px solid #143250; 740 background-color: #288edf; 741 box-shadow: inset 0 1px rgba(255,255,255,0.36); 742 color: #fff; 743 font-weight: 500; 744 text-shadow: 0 -1px rgba(0,0,0,0.36); 745} 746 747.topcoat-button--cta:hover, 748.topcoat-button--large--cta:hover { 749 background-color: #509bef; 750} 751 752.topcoat-button--cta:active, 753.topcoat-button--large--cta:active { 754 background-color: #0380e8; 755 box-shadow: inset 0 1px rgba(0,0,0,0.12); 756} 757 758/* topdoc 759 name: Large Call To Action Button 760 description: Like call to action, but bigger 761 modifiers: 762 :active: Active state 763 :disabled: Disabled state 764 :hover: Hover state 765 :focus: Focused 766 markup: 767 <button class="topcoat-button--large--cta" >Button</button> 768 <button class="topcoat-button--large--cta" disabled>Button</button> 769 tags: 770 - desktop 771 - light 772 - mobile 773 - button 774 - large 775 - call to action 776*/ 777 778.topcoat-button--large--cta { 779 font-size: 1.3rem; 780 font-weight: 400; 781 line-height: 4.375rem; 782 padding: 0 1.25rem; 783} 784 785/** 786* 787* Copyright 2012 Adobe Systems Inc.; 788* 789* Licensed under the Apache License, Version 2.0 (the "License"); 790* you may not use this file except in compliance with the License. 791* You may obtain a copy of the License at 792* 793* http://www.apache.org/licenses/LICENSE-2.0 794* 795* Unless required by applicable law or agreed to in writing, software 796* distributed under the License is distributed on an "AS IS" BASIS, 797* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 798* See the License for the specific language governing permissions and 799* limitations under the License. 800* 801*/ 802 803input[type="checkbox"] { 804 position: absolute; 805 overflow: hidden; 806 padding: 0; 807 border: 0; 808 opacity: 0.001; 809 z-index: 1; 810 vertical-align: top; 811 outline: none; 812} 813 814.checkbox { 815 -moz-box-sizing: border-box; 816 box-sizing: border-box; 817 background-clip: padding-box; 818 position: relative; 819 display: inline-block; 820 vertical-align: top; 821 cursor: default; 822 -webkit-user-select: none; 823 -moz-user-select: none; 824 -ms-user-select: none; 825 user-select: none; 826} 827 828.checkbox__label { 829 position: relative; 830 display: inline-block; 831 vertical-align: top; 832 cursor: default; 833 -webkit-user-select: none; 834 -moz-user-select: none; 835 -ms-user-select: none; 836 user-select: none; 837} 838 839.checkbox--disabled { 840 opacity: 0.3; 841 cursor: default; 842 pointer-events: none; 843} 844 845.checkbox:before, 846.checkbox:after { 847 content: ''; 848 position: absolute; 849} 850 851.checkbox:before { 852 -moz-box-sizing: border-box; 853 box-sizing: border-box; 854 background-clip: padding-box; 855} 856 857/** 858* 859* Copyright 2012 Adobe Systems Inc.; 860* 861* Licensed under the Apache License, Version 2.0 (the "License"); 862* you may not use this file except in compliance with the License. 863* You may obtain a copy of the License at 864* 865* http://www.apache.org/licenses/LICENSE-2.0 866* 867* Unless required by applicable law or agreed to in writing, software 868* distributed under the License is distributed on an "AS IS" BASIS, 869* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 870* See the License for the specific language governing permissions and 871* limitations under the License. 872* 873*/ 874 875/** 876* 877* Copyright 2012 Adobe Systems Inc.; 878* 879* Licensed under the Apache License, Version 2.0 (the "License"); 880* you may not use this file except in compliance with the License. 881* You may obtain a copy of the License at 882* 883* http://www.apache.org/licenses/LICENSE-2.0 884* 885* Unless required by applicable law or agreed to in writing, software 886* distributed under the License is distributed on an "AS IS" BASIS, 887* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 888* See the License for the specific language governing permissions and 889* limitations under the License. 890* 891*/ 892 893/** 894* 895* Copyright 2012 Adobe Systems Inc.; 896* 897* Licensed under the Apache License, Version 2.0 (the "License"); 898* you may not use this file except in compliance with the License. 899* You may obtain a copy of the License at 900* 901* http://www.apache.org/licenses/LICENSE-2.0 902* 903* Unless required by applicable law or agreed to in writing, software 904* distributed under the License is distributed on an "AS IS" BASIS, 905* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 906* See the License for the specific language governing permissions and 907* limitations under the License. 908* 909*/ 910 911input[type="checkbox"] { 912 position: absolute; 913 overflow: hidden; 914 padding: 0; 915 border: 0; 916 opacity: 0.001; 917 z-index: 1; 918 vertical-align: top; 919 outline: none; 920} 921 922.checkbox, 923.topcoat-checkbox__checkmark { 924 -moz-box-sizing: border-box; 925 box-sizing: border-box; 926 background-clip: padding-box; 927 position: relative; 928 display: inline-block; 929 vertical-align: top; 930 cursor: default; 931 -webkit-user-select: none; 932 -moz-user-select: none; 933 -ms-user-select: none; 934 user-select: none; 935} 936 937.checkbox__label, 938.topcoat-checkbox { 939 position: relative; 940 display: inline-block; 941 vertical-align: top; 942 cursor: default; 943 -webkit-user-select: none; 944 -moz-user-select: none; 945 -ms-user-select: none; 946 user-select: none; 947} 948 949.checkbox--disabled, 950input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark { 951 opacity: 0.3; 952 cursor: default; 953 pointer-events: none; 954} 955 956.checkbox:before, 957.checkbox:after, 958.topcoat-checkbox__checkmark:before, 959.topcoat-checkbox__checkmark:after { 960 content: ''; 961 position: absolute; 962} 963 964.checkbox:before, 965.topcoat-checkbox__checkmark:before { 966 -moz-box-sizing: border-box; 967 box-sizing: border-box; 968 background-clip: padding-box; 969} 970 971/* topdoc 972 name: Checkbox 973 description: Default skin for Topcoat checkbox 974 modifiers: 975 :focus: Focus state 976 :disabled: Disabled state 977 markup: 978 <label class="topcoat-checkbox"> 979 <input type="checkbox"> 980 <div class="topcoat-checkbox__checkmark"></div> 981 Default 982 </label> 983 <br> 984 <br> 985 <label class="topcoat-checkbox"> 986 <input type="checkbox" disabled> 987 <div class="topcoat-checkbox__checkmark"></div> 988 Disabled 989 </label> 990 examples: 991 mobile checkbox: http://codepen.io/Topcoat/pen/piHcs 992 tags: 993 - desktop 994 - light 995 - mobile 996 - checkbox 997*/ 998 999.topcoat-checkbox__checkmark { 1000 height: 2rem; 1001} 1002 1003input[type="checkbox"] { 1004 height: 2rem; 1005 width: 2rem; 1006 margin-top: 0; 1007 margin-right: -2rem; 1008 margin-bottom: -2rem; 1009 margin-left: 0; 1010} 1011 1012input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after { 1013 opacity: 1; 1014} 1015 1016.topcoat-checkbox { 1017 line-height: 2rem; 1018} 1019 1020.topcoat-checkbox__checkmark:before { 1021 width: 2rem; 1022 height: 2rem; 1023 background: #e5e9e8; 1024 border: 1px solid #a5a8a8; 1025 border-radius: 3px; 1026 box-shadow: inset 0 1px #fff; 1027} 1028 1029.topcoat-checkbox__checkmark { 1030 width: 2rem; 1031 height: 2rem; 1032} 1033 1034.topcoat-checkbox__checkmark:after { 1035 top: 1px; 1036 left: 2px; 1037 opacity: 0; 1038 width: 28px; 1039 height: 11px; 1040 background: transparent; 1041 border: 7px solid #666; 1042 border-width: 7px; 1043 border-top: none; 1044 border-right: none; 1045 border-radius: 2px; 1046 -webkit-transform: rotate(-50deg); 1047 -ms-transform: rotate(-50deg); 1048 transform: rotate(-50deg); 1049} 1050 1051input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before { 1052 border: 1px solid #0940fd; 1053 box-shadow: 0 0 0 2px #6fb5f1; 1054} 1055 1056/** 1057* 1058* Copyright 2012 Adobe Systems Inc.; 1059* 1060* Licensed under the Apache License, Version 2.0 (the "License"); 1061* you may not use this file except in compliance with the License. 1062* You may obtain a copy of the License at 1063* 1064* http://www.apache.org/licenses/LICENSE-2.0 1065* 1066* Unless required by applicable law or agreed to in writing, software 1067* distributed under the License is distributed on an "AS IS" BASIS, 1068* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1069* See the License for the specific language governing permissions and 1070* limitations under the License. 1071* 1072*/ 1073 1074/** 1075* 1076* Copyright 2012 Adobe Systems Inc.; 1077* 1078* Licensed under the Apache License, Version 2.0 (the "License"); 1079* you may not use this file except in compliance with the License. 1080* You may obtain a copy of the License at 1081* 1082* http://www.apache.org/licenses/LICENSE-2.0 1083* 1084* Unless required by applicable law or agreed to in writing, software 1085* distributed under the License is distributed on an "AS IS" BASIS, 1086* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1087* See the License for the specific language governing permissions and 1088* limitations under the License. 1089* 1090*/ 1091 1092.button, 1093.topcoat-icon-button, 1094.topcoat-icon-button--quiet, 1095.topcoat-icon-button--large, 1096.topcoat-icon-button--large--quiet { 1097 position: relative; 1098 display: inline-block; 1099 vertical-align: top; 1100 -moz-box-sizing: border-box; 1101 box-sizing: border-box; 1102 background-clip: padding-box; 1103 padding: 0; 1104 margin: 0; 1105 font: inherit; 1106 color: inherit; 1107 background: transparent; 1108 border: none; 1109 cursor: default; 1110 -webkit-user-select: none; 1111 -moz-user-select: none; 1112 -ms-user-select: none; 1113 user-select: none; 1114 text-overflow: ellipsis; 1115 white-space: nowrap; 1116 overflow: hidden; 1117 text-decoration: none; 1118} 1119 1120.button--quiet { 1121 background: transparent; 1122 border: 1px solid transparent; 1123 box-shadow: none; 1124} 1125 1126.button--disabled, 1127.topcoat-icon-button:disabled, 1128.topcoat-icon-button--quiet:disabled, 1129.topcoat-icon-button--large:disabled, 1130.topcoat-icon-button--large--quiet:disabled { 1131 opacity: 0.3; 1132 cursor: default; 1133 pointer-events: none; 1134} 1135 1136/* topdoc 1137 name: Icon Button 1138 description: Like button, but it has an icon. 1139 modifiers: 1140 :active: Active state 1141 :disabled: Disabled state 1142 :hover: Hover state 1143 :focus: Focused 1144 markup: 1145 <button class="topcoat-icon-button"> 1146 <span class="topcoat-icon" style="background-color:#A5A7A7;"></span> 1147 </button> 1148 <button class="topcoat-icon-button" disabled> 1149 <span class="topcoat-icon" style="background-color:#A5A7A7;"></span> 1150 </button> 1151 tags: 1152 - desktop 1153 - light 1154 - mobile 1155 - button 1156 - icon 1157*/ 1158 1159.topcoat-icon-button, 1160.topcoat-icon-button--quiet, 1161.topcoat-icon-button--large, 1162.topcoat-icon-button--large--quiet { 1163 padding: 0 0.75rem; 1164 line-height: 3rem; 1165 letter-spacing: 1px; 1166 color: #454545; 1167 text-shadow: 0 1px #fff; 1168 vertical-align: baseline; 1169 background-color: #e5e9e8; 1170 box-shadow: inset 0 1px #fff; 1171 border: 1px solid #a5a8a8; 1172 border-radius: 6px; 1173} 1174 1175.topcoat-icon-button:hover, 1176.topcoat-icon-button--quiet:hover, 1177.topcoat-icon-button--large:hover, 1178.topcoat-icon-button--large--quiet:hover { 1179 background-color: #edf1f1; 1180} 1181 1182.topcoat-icon-button:active { 1183 background-color: #d3d7d7; 1184 box-shadow: inset 0 1px rgba(0,0,0,0.12); 1185} 1186 1187.topcoat-icon-button:focus, 1188.topcoat-icon-button--quiet:focus, 1189.topcoat-icon-button--quiet:hover:focus, 1190.topcoat-icon-button--large:focus, 1191.topcoat-icon-button--large--quiet:focus, 1192.topcoat-icon-button--large--quiet:hover:focus { 1193 border: 1px solid #0940fd; 1194 box-shadow: 0 0 0 2px #6fb5f1; 1195 outline: 0; 1196} 1197 1198/* topdoc 1199 name: Quiet Icon Button 1200 description: Like quiet button, but it has an icon. 1201 modifiers: 1202 :active: Active state 1203 :disabled: Disabled state 1204 :hover: Hover state 1205 :focus: Focused 1206 markup: 1207 <button class="topcoat-icon-button--quiet"> 1208 <span class="topcoat-icon" style="background-color:#A5A7A7;"></span> 1209 </button> 1210 <button class="topcoat-icon-button--quiet" disabled> 1211 <span class="topcoat-icon" style="background-color:#A5A7A7;"></span> 1212 </button> 1213 tags: 1214 - desktop 1215 - light 1216 - mobile 1217 - button 1218 - icon 1219 - quiet 1220*/ 1221 1222.topcoat-icon-button--quiet { 1223 background: transparent; 1224 border: 1px solid transparent; 1225 box-shadow: none; 1226} 1227 1228.topcoat-icon-button--quiet:hover, 1229.topcoat-icon-button--large--quiet:hover { 1230 text-shadow: 0 1px #fff; 1231 border: 1px solid #a5a8a8; 1232 box-shadow: inset 0 1px #fff; 1233} 1234 1235.topcoat-icon-button--quiet:active, 1236.topcoat-icon-button--large--quiet:active { 1237 color: #454545; 1238 text-shadow: 0 1px #fff; 1239 background-color: #d3d7d7; 1240 border: 1px solid #a5a8a8; 1241 box-shadow: inset 0 1px rgba(0,0,0,0.12); 1242} 1243 1244/* topdoc 1245 name: Large Icon Button 1246 description: Like large button, but it has an icon. 1247 modifiers: 1248 :active: Active state 1249 :disabled: Disabled state 1250 :hover: Hover state 1251 :focus: Focused 1252 markup: 1253 <button class="topcoat-icon-button--large"> 1254 <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span> 1255 </button> 1256 <button class="topcoat-icon-button--large" disabled> 1257 <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span> 1258 </button> 1259 tags: 1260 - desktop 1261 - light 1262 - mobile 1263 - button 1264 - icon 1265 - large 1266*/ 1267 1268.topcoat-icon-button--large, 1269.topcoat-icon-button--large--quiet { 1270 width: 4.375rem; 1271 height: 4.375rem; 1272 line-height: 4.375rem; 1273} 1274 1275.topcoat-icon-button--large:active { 1276 background-color: #d3d7d7; 1277 box-shadow: inset 0 1px rgba(0,0,0,0.12); 1278} 1279 1280/* topdoc 1281 name: Large Quiet Icon Button 1282 description: Like large button, but it has an icon and this one is quiet. 1283 modifiers: 1284 :active: Active state 1285 :disabled: Disabled state 1286 :hover: Hover state 1287 markup: 1288 <button class="topcoat-icon-button--large--quiet"> 1289 <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span> 1290 </button> 1291 <button class="topcoat-icon-button--large--quiet" disabled> 1292 <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span> 1293 </button> 1294 tags: 1295 - desktop 1296 - light 1297 - mobile 1298 - button 1299 - icon 1300 - large 1301 - quiet 1302*/ 1303 1304.topcoat-icon-button--large--quiet { 1305 background: transparent; 1306 border: 1px solid transparent; 1307 box-shadow: none; 1308} 1309 1310.topcoat-icon, 1311.topcoat-icon--large { 1312 position: relative; 1313 display: inline-block; 1314 vertical-align: top; 1315 overflow: hidden; 1316 width: 1.62rem; 1317 height: 1.62rem; 1318 vertical-align: middle; 1319 top: -1px; 1320} 1321 1322.topcoat-icon--large { 1323 width: 2.499999998125rem; 1324 height: 2.499999998125rem; 1325 top: -2px; 1326} 1327 1328/** 1329* 1330* Copyright 2012 Adobe Systems Inc.; 1331* 1332* Licensed under the Apache License, Version 2.0 (the "License"); 1333* you may not use this file except in compliance with the License. 1334* You may obtain a copy of the License at 1335* 1336* http://www.apache.org/licenses/LICENSE-2.0 1337* 1338* Unless required by applicable law or agreed to in writing, software 1339* distributed under the License is distributed on an "AS IS" BASIS, 1340* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1341* See the License for the specific language governing permissions and 1342* limitations under the License. 1343* 1344*/ 1345 1346/** 1347* 1348* Copyright 2012 Adobe Systems Inc.; 1349* 1350* Licensed under the Apache License, Version 2.0 (the "License"); 1351* you may not use this file except in compliance with the License. 1352* You may obtain a copy of the License at 1353* 1354* http://www.apache.org/licenses/LICENSE-2.0 1355* 1356* Unless required by applicable law or agreed to in writing, software 1357* distributed under the License is distributed on an "AS IS" BASIS, 1358* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1359* See the License for the specific language governing permissions and 1360* limitations under the License. 1361* 1362*/ 1363 1364.input { 1365 padding: 0; 1366 margin: 0; 1367 font: inherit; 1368 color: inherit; 1369 background: transparent; 1370 border: none; 1371 -moz-box-sizing: border-box; 1372 box-sizing: border-box; 1373 background-clip: padding-box; 1374 vertical-align: top; 1375 outline: none; 1376} 1377 1378.input:disabled { 1379 opacity: 0.3; 1380 cursor: default; 1381 pointer-events: none; 1382} 1383 1384/** 1385* 1386* Copyright 2012 Adobe Systems Inc.; 1387* 1388* Licensed under the Apache License, Version 2.0 (the "License"); 1389* you may not use this file except in compliance with the License. 1390* You may obtain a copy of the License at 1391* 1392* http://www.apache.org/licenses/LICENSE-2.0 1393* 1394* Unless required by applicable law or agreed to in writing, software 1395* distributed under the License is distributed on an "AS IS" BASIS, 1396* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1397* See the License for the specific language governing permissions and 1398* limitations under the License. 1399* 1400*/ 1401 1402/** 1403* 1404* Copyright 2012 Adobe Systems Inc.; 1405* 1406* Licensed under the Apache License, Version 2.0 (the "License"); 1407* you may not use this file except in compliance with the License. 1408* You may obtain a copy of the License at 1409* 1410* http://www.apache.org/licenses/LICENSE-2.0 1411* 1412* Unless required by applicable law or agreed to in writing, software 1413* distributed under the License is distributed on an "AS IS" BASIS, 1414* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1415* See the License for the specific language governing permissions and 1416* limitations under the License. 1417* 1418*/ 1419 1420.list { 1421 padding: 0; 1422 margin: 0; 1423 font: inherit; 1424 color: inherit; 1425 background: transparent; 1426 border: none; 1427 cursor: default; 1428 -webkit-user-select: none; 1429 -moz-user-select: none; 1430 -ms-user-select: none; 1431 user-select: none; 1432 overflow: auto; 1433 -webkit-overflow-scrolling: touch; 1434} 1435 1436.list__header { 1437 margin: 0; 1438} 1439 1440.list__container { 1441 padding: 0; 1442 margin: 0; 1443 list-style-type: none; 1444} 1445 1446.list__item { 1447 margin: 0; 1448 padding: 0; 1449} 1450 1451/** 1452* 1453* Copyright 2012 Adobe Systems Inc.; 1454* 1455* Licensed under the Apache License, Version 2.0 (the "License"); 1456* you may not use this file except in compliance with the License. 1457* You may obtain a copy of the License at 1458* 1459* http://www.apache.org/licenses/LICENSE-2.0 1460* 1461* Unless required by applicable law or agreed to in writing, software 1462* distributed under the License is distributed on an "AS IS" BASIS, 1463* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1464* See the License for the specific language governing permissions and 1465* limitations under the License. 1466* 1467*/ 1468 1469/** 1470* 1471* Copyright 2012 Adobe Systems Inc.; 1472* 1473* Licensed under the Apache License, Version 2.0 (the "License"); 1474* you may not use this file except in compliance with the License. 1475* You may obtain a copy of the License at 1476* 1477* http://www.apache.org/licenses/LICENSE-2.0 1478* 1479* Unless required by applicable law or agreed to in writing, software 1480* distributed under the License is distributed on an "AS IS" BASIS, 1481* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1482* See the License for the specific language governing permissions and 1483* limitations under the License. 1484* 1485*/ 1486 1487.list, 1488.topcoat-list { 1489 padding: 0; 1490 margin: 0; 1491 font: inherit; 1492 color: inherit; 1493 background: transparent; 1494 border: none; 1495 cursor: default; 1496 -webkit-user-select: none; 1497 -moz-user-select: none; 1498 -ms-user-select: none; 1499 user-select: none; 1500 overflow: auto; 1501 -webkit-overflow-scrolling: touch; 1502} 1503 1504.list__header, 1505.topcoat-list__header { 1506 margin: 0; 1507} 1508 1509.list__container, 1510.topcoat-list__container { 1511 padding: 0; 1512 margin: 0; 1513 list-style-type: none; 1514} 1515 1516.list__item, 1517.topcoat-list__item { 1518 margin: 0; 1519 padding: 0; 1520} 1521 1522/* topdoc 1523 name: List 1524 description: Topcoat default list skin 1525 markup: 1526 <div class="topcoat-list"> 1527 <h3 class="topcoat-list__header">Category</h3> 1528 <ul class="topcoat-list__container"> 1529 <li class="topcoat-list__item"> 1530 Item 1531 </li> 1532 <li class="topcoat-list__item"> 1533 Item 1534 </li> 1535 <li class="topcoat-list__item"> 1536 Item 1537 </li> 1538 </ul> 1539 </div> 1540 tags: 1541 - mobile 1542 - list 1543*/ 1544 1545.topcoat-list { 1546 border-top: 1px solid #bcbfbf; 1547 border-bottom: 1px solid #eff1f1; 1548 background-color: #dfe2e2; 1549} 1550 1551.topcoat-list__header { 1552 padding: 4px 20px; 1553 font-size: 0.9em; 1554 font-weight: 400; 1555 background-color: #cccfcf; 1556 color: #656565; 1557 text-shadow: 0 1px 0 rgba(255,255,255,0.5); 1558 border-top: 1px solid rgba(255,255,255,0.5); 1559 border-bottom: 1px solid rgba(255,255,255,0.23); 1560} 1561 1562.topcoat-list__container { 1563 border-top: 1px solid #bcbfbf; 1564 color: #454545; 1565} 1566 1567.topcoat-list__item { 1568 padding: 1.25rem; 1569 border-top: 1px solid #eff1f1; 1570 border-bottom: 1px solid #bcbfbf; 1571} 1572 1573.topcoat-list__item:first-child { 1574 border-top: 1px solid rgba(0,0,0,0.05); 1575} 1576 1577/** 1578* 1579* Copyright 2012 Adobe Systems Inc.; 1580* 1581* Licensed under the Apache License, Version 2.0 (the "License"); 1582* you may not use this file except in compliance with the License. 1583* You may obtain a copy of the License at 1584* 1585* http://www.apache.org/licenses/LICENSE-2.0 1586* 1587* Unless required by applicable law or agreed to in writing, software 1588* distributed under the License is distributed on an "AS IS" BASIS, 1589* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1590* See the License for the specific language governing permissions and 1591* limitations under the License. 1592* 1593*/ 1594 1595/** 1596* 1597* Copyright 2012 Adobe Systems Inc.; 1598* 1599* Licensed under the Apache License, Version 2.0 (the "License"); 1600* you may not use this file except in compliance with the License. 1601* You may obtain a copy of the License at 1602* 1603* http://www.apache.org/licenses/LICENSE-2.0 1604* 1605* Unless required by applicable law or agreed to in writing, software 1606* distributed under the License is distributed on an "AS IS" BASIS, 1607* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1608* See the License for the specific language governing permissions and 1609* limitations under the License. 1610* 1611*/ 1612 1613/** 1614* 1615* Copyright 2012 Adobe Systems Inc.; 1616* 1617* Licensed under the Apache License, Version 2.0 (the "License"); 1618* you may not use this file except in compliance with the License. 1619* You may obtain a copy of the License at 1620* 1621* http://www.apache.org/licenses/LICENSE-2.0 1622* 1623* Unless required by applicable law or agreed to in writing, software 1624* distributed under the License is distributed on an "AS IS" BASIS, 1625* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1626* See the License for the specific language governing permissions and 1627* limitations under the License. 1628* 1629*/ 1630 1631.navigation-bar { 1632 -moz-box-sizing: border-box; 1633 box-sizing: border-box; 1634 background-clip: padding-box; 1635 white-space: nowrap; 1636 overflow: hidden; 1637 word-spacing: 0; 1638 padding: 0; 1639 margin: 0; 1640 font: inherit; 1641 color: inherit; 1642 background: transparent; 1643 border: none; 1644 cursor: default; 1645 -webkit-user-select: none; 1646 -moz-user-select: none; 1647 -ms-user-select: none; 1648 user-select: none; 1649} 1650 1651.navigation-bar__item { 1652 -moz-box-sizing: border-box; 1653 box-sizing: border-box; 1654 background-clip: padding-box; 1655 position: relative; 1656 display: inline-block; 1657 vertical-align: top; 1658 padding: 0; 1659 margin: 0; 1660 font: inherit; 1661 color: inherit; 1662 background: transparent; 1663 border: none; 1664} 1665 1666.navigation-bar__title { 1667 padding: 0; 1668 margin: 0; 1669 font: inherit; 1670 color: inherit; 1671 background: transparent; 1672 border: none; 1673 text-overflow: ellipsis; 1674 white-space: nowrap; 1675 overflow: hidden; 1676} 1677 1678/** 1679* 1680* Copyright 2012 Adobe Systems Inc.; 1681* 1682* Licensed under the Apache License, Version 2.0 (the "License"); 1683* you may not use this file except in compliance with the License. 1684* You may obtain a copy of the License at 1685* 1686* http://www.apache.org/licenses/LICENSE-2.0 1687* 1688* Unless required by applicable law or agreed to in writing, software 1689* distributed under the License is distributed on an "AS IS" BASIS, 1690* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1691* See the License for the specific language governing permissions and 1692* limitations under the License. 1693* 1694*/ 1695 1696/** 1697* 1698* Copyright 2012 Adobe Systems Inc.; 1699* 1700* Licensed under the Apache License, Version 2.0 (the "License"); 1701* you may not use this file except in compliance with the License. 1702* You may obtain a copy of the License at 1703* 1704* http://www.apache.org/licenses/LICENSE-2.0 1705* 1706* Unless required by applicable law or agreed to in writing, software 1707* distributed under the License is distributed on an "AS IS" BASIS, 1708* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1709* See the License for the specific language governing permissions and 1710* limitations under the License. 1711* 1712*/ 1713 1714.navigation-bar, 1715.topcoat-navigation-bar { 1716 -moz-box-sizing: border-box; 1717 box-sizing: border-box; 1718 background-clip: padding-box; 1719 white-space: nowrap; 1720 overflow: hidden; 1721 word-spacing: 0; 1722 padding: 0; 1723 margin: 0; 1724 font: inherit; 1725 color: inherit; 1726 background: transparent; 1727 border: none; 1728 cursor: default; 1729 -webkit-user-select: none; 1730 -moz-user-select: none; 1731 -ms-user-select: none; 1732 user-select: none; 1733} 1734 1735.navigation-bar__item, 1736.topcoat-navigation-bar__item { 1737 -moz-box-sizing: border-box; 1738 box-sizing: border-box; 1739 background-clip: padding-box; 1740 position: relative; 1741 display: inline-block; 1742 vertical-align: top; 1743 padding: 0; 1744 margin: 0; 1745 font: inherit; 1746 color: inherit; 1747 background: transparent; 1748 border: none; 1749} 1750 1751.navigation-bar__title, 1752.topcoat-navigation-bar__title { 1753 padding: 0; 1754 margin: 0; 1755 font: inherit; 1756 color: inherit; 1757 background: transparent; 1758 border: none; 1759 text-overflow: ellipsis; 1760 white-space: nowrap; 1761 overflow: hidden; 1762} 1763 1764/* topdoc 1765 name: Navigation Bar 1766 description: A place where navigation goes to drink 1767 markup: 1768 <div class="topcoat-navigation-bar"> 1769 <div class="topcoat-navigation-bar__item center full"> 1770 <h1 class="topcoat-navigation-bar__title">Header</h1> 1771 </div> 1772 </div> 1773 tags: 1774 - desktop 1775 - light 1776 - mobile 1777 - navigation 1778 - bar 1779*/ 1780 1781.topcoat-navigation-bar { 1782 height: 4.375rem; 1783 padding-left: 1rem; 1784 padding-right: 1rem; 1785 background: #e5e9e8; 1786 color: #000; 1787 box-shadow: inset 0 -1px #b9bcbc, 0 1px #d4d6d6; 1788} 1789 1790.topcoat-navigation-bar__item { 1791 margin: 0; 1792 line-height: 4.375rem; 1793 vertical-align: top; 1794} 1795 1796.topcoat-navigation-bar__title { 1797 font-size: 1.3rem; 1798 font-weight: 400; 1799 color: #000; 1800} 1801 1802/* 1803Copyright 2012 Adobe Systems Inc.; 1804Licensed under the Apache License, Version 2.0 (the "License"); 1805you may not use this file except in compliance with the License. 1806You may obtain a copy of the License at 1807 1808http://www.apache.org/licenses/LICENSE-2.0 1809 1810Unless required by applicable law or agreed to in writing, software 1811distributed under the License is distributed on an "AS IS" BASIS, 1812WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1813See the License for the specific language governing permissions and 1814limitations under the License. 1815*/ 1816 1817/** 1818* 1819* Copyright 2012 Adobe Systems Inc.; 1820* 1821* Licensed under the Apache License, Version 2.0 (the "License"); 1822* you may not use this file except in compliance with the License. 1823* You may obtain a copy of the License at 1824* 1825* http://www.apache.org/licenses/LICENSE-2.0 1826* 1827* Unless required by applicable law or agreed to in writing, software 1828* distributed under the License is distributed on an "AS IS" BASIS, 1829* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1830* See the License for the specific language governing permissions and 1831* limitations under the License. 1832* 1833*/ 1834 1835.notification { 1836 position: relative; 1837 display: inline-block; 1838 vertical-align: top; 1839 -moz-box-sizing: border-box; 1840 box-sizing: border-box; 1841 background-clip: padding-box; 1842 padding: 0; 1843 margin: 0; 1844 font: inherit; 1845 color: inherit; 1846 background: transparent; 1847 border: none; 1848 cursor: default; 1849 -webkit-user-select: none; 1850 -moz-user-select: none; 1851 -ms-user-select: none; 1852 user-select: none; 1853 text-overflow: ellipsis; 1854 white-space: nowrap; 1855 overflow: hidden; 1856 text-decoration: none; 1857} 1858 1859/* 1860Copyright 2012 Adobe Systems Inc.; 1861Licensed under the Apache License, Version 2.0 (the "License"); 1862you may not use this file except in compliance with the License. 1863You may obtain a copy of the License at 1864 1865http://www.apache.org/licenses/LICENSE-2.0 1866 1867Unless required by applicable law or agreed to in writing, software 1868distributed under the License is distributed on an "AS IS" BASIS, 1869WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1870See the License for the specific language governing permissions and 1871limitations under the License. 1872*/ 1873 1874/** 1875* 1876* Copyright 2012 Adobe Systems Inc.; 1877* 1878* Licensed under the Apache License, Version 2.0 (the "License"); 1879* you may not use this file except in compliance with the License. 1880* You may obtain a copy of the License at 1881* 1882* http://www.apache.org/licenses/LICENSE-2.0 1883* 1884* Unless required by applicable law or agreed to in writing, software 1885* distributed under the License is distributed on an "AS IS" BASIS, 1886* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1887* See the License for the specific language governing permissions and 1888* limitations under the License. 1889* 1890*/ 1891 1892.notification, 1893.topcoat-notification { 1894 position: relative; 1895 display: inline-block; 1896 vertical-align: top; 1897 -moz-box-sizing: border-box; 1898 box-sizing: border-box; 1899 background-clip: padding-box; 1900 padding: 0; 1901 margin: 0; 1902 font: inherit; 1903 color: inherit; 1904 background: transparent; 1905 border: none; 1906 cursor: default; 1907 -webkit-user-select: none; 1908 -moz-user-select: none; 1909 -ms-user-select: none; 1910 user-select: none; 1911 text-overflow: ellipsis; 1912 white-space: nowrap; 1913 overflow: hidden; 1914 text-decoration: none; 1915} 1916 1917/* topdoc 1918 name: Notification 1919 description: Notification badge 1920 markup: 1921 <span class="topcoat-notification">1</span> 1922 tags: 1923 - desktop 1924 - light 1925 - mobile 1926 - notification 1927*/ 1928 1929.topcoat-notification { 1930 padding: 0.15em 0.5em 0.2em; 1931 border-radius: 2px; 1932 background-color: #ec514e; 1933 color: #fff; 1934} 1935 1936/** 1937* 1938* Copyright 2012 Adobe Systems Inc.; 1939* 1940* Licensed under the Apache License, Version 2.0 (the "License"); 1941* you may not use this file except in compliance with the License. 1942* You may obtain a copy of the License at 1943* 1944* http://www.apache.org/licenses/LICENSE-2.0 1945* 1946* Unless required by applicable law or agreed to in writing, software 1947* distributed under the License is distributed on an "AS IS" BASIS, 1948* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1949* See the License for the specific language governing permissions and 1950* limitations under the License. 1951* 1952*/ 1953 1954/** 1955* 1956* Copyright 2012 Adobe Systems Inc.; 1957* 1958* Licensed under the Apache License, Version 2.0 (the "License"); 1959* you may not use this file except in compliance with the License. 1960* You may obtain a copy of the License at 1961* 1962* http://www.apache.org/licenses/LICENSE-2.0 1963* 1964* Unless required by applicable law or agreed to in writing, software 1965* distributed under the License is distributed on an "AS IS" BASIS, 1966* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1967* See the License for the specific language governing permissions and 1968* limitations under the License. 1969* 1970*/ 1971 1972input[type="radio"] { 1973 position: absolute; 1974 overflow: hidden; 1975 padding: 0; 1976 border: 0; 1977 opacity: 0.001; 1978 z-index: 1; 1979 vertical-align: top; 1980 outline: none; 1981} 1982 1983.radio-button { 1984 -moz-box-sizing: border-box; 1985 box-sizing: border-box; 1986 background-clip: padding-box; 1987 position: relative; 1988 display: inline-block; 1989 vertical-align: top; 1990 cursor: default; 1991 -webkit-user-select: none; 1992 -moz-user-select: none; 1993 -ms-user-select: none; 1994 user-select: none; 1995} 1996 1997.radio-button__label { 1998 position: relative; 1999 display: inline-block; 2000 vertical-align: top; 2001 cursor: default; 2002 -webkit-user-select: none; 2003 -moz-user-select: none; 2004 -ms-user-select: none; 2005 user-select: none; 2006} 2007 2008.radio-button:before, 2009.radio-button:after { 2010 content: ''; 2011 position: absolute; 2012 border-radius: 100%; 2013} 2014 2015.radio-button:after { 2016 top: 50%; 2017 left: 50%; 2018 -webkit-transform: translate(-50%, -50%); 2019 -ms-transform: translate(-50%, -50%); 2020 transform: translate(-50%, -50%); 2021} 2022 2023.radio-button:before { 2024 -moz-box-sizing: border-box; 2025 box-sizing: border-box; 2026 background-clip: padding-box; 2027} 2028 2029.radio-button--disabled { 2030 opacity: 0.3; 2031 cursor: default; 2032 pointer-events: none; 2033} 2034 2035/** 2036* 2037* Copyright 2012 Adobe Systems Inc.; 2038* 2039* Licensed under the Apache License, Version 2.0 (the "License"); 2040* you may not use this file except in compliance with the License. 2041* You may obtain a copy of the License at 2042* 2043* http://www.apache.org/licenses/LICENSE-2.0 2044* 2045* Unless required by applicable law or agreed to in writing, software 2046* distributed under the License is distributed on an "AS IS" BASIS, 2047* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2048* See the License for the specific language governing permissions and 2049* limitations under the License. 2050* 2051*/ 2052 2053/** 2054* 2055* Copyright 2012 Adobe Systems Inc.; 2056* 2057* Licensed under the Apache License, Version 2.0 (the "License"); 2058* you may not use this file except in compliance with the License. 2059* You may obtain a copy of the License at 2060* 2061* http://www.apache.org/licenses/LICENSE-2.0 2062* 2063* Unless required by applicable law or agreed to in writing, software 2064* distributed under the License is distributed on an "AS IS" BASIS, 2065* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2066* See the License for the specific language governing permissions and 2067* limitations under the License. 2068* 2069*/ 2070 2071input[type="radio"] { 2072 position: absolute; 2073 overflow: hidden; 2074 padding: 0; 2075 border: 0; 2076 opacity: 0.001; 2077 z-index: 1; 2078 vertical-align: top; 2079 outline: none; 2080} 2081 2082.radio-button, 2083.topcoat-radio-button__checkmark { 2084 -moz-box-sizing: border-box; 2085 box-sizing: border-box; 2086 background-clip: padding-box; 2087 position: relative; 2088 display: inline-block; 2089 vertical-align: top; 2090 cursor: default; 2091 -webkit-user-select: none; 2092 -moz-user-select: none; 2093 -ms-user-select: none; 2094 user-select: none; 2095} 2096 2097.radio-button__label, 2098.topcoat-radio-button { 2099 position: relative; 2100 display: inline-block; 2101 vertical-align: top; 2102 cursor: default; 2103 -webkit-user-select: none; 2104 -moz-user-select: none; 2105 -ms-user-select: none; 2106 user-select: none; 2107} 2108 2109.radio-button:before, 2110.radio-button:after, 2111.topcoat-radio-button__checkmark:before, 2112.topcoat-radio-button__checkmark:after { 2113 content: ''; 2114 position: absolute; 2115 border-radius: 100%; 2116} 2117 2118.radio-button:after, 2119.topcoat-radio-button__checkmark:after { 2120 top: 50%; 2121 left: 50%; 2122 -webkit-transform: translate(-50%, -50%); 2123 -ms-transform: translate(-50%, -50%); 2124 transform: translate(-50%, -50%); 2125} 2126 2127.radio-button:before, 2128.topcoat-radio-button__checkmark:before { 2129 -moz-box-sizing: border-box; 2130 box-sizing: border-box; 2131 background-clip: padding-box; 2132} 2133 2134.radio-button--disabled, 2135input[type="radio"]:disabled + .topcoat-radio-button__checkmark { 2136 opacity: 0.3; 2137 cursor: default; 2138 pointer-events: none; 2139} 2140 2141/* topdoc 2142 name: Radio Button 2143 description: A button that can play music, but usually just plays ads. 2144 modifiers: 2145 markup: 2146 <!-- NO LABEL --> 2147 <label class="topcoat-radio-button"> 2148 <input type="radio" name="topcoat"> 2149 <div class="topcoat-radio-button__checkmark"></div> 2150 </label> 2151 <br> 2152 <br> 2153 <!-- LEFT LABEL --> 2154 <label class="topcoat-radio-button"> 2155 Left label 2156 <input type="radio" name="topcoat"> 2157 <div class="topcoat-radio-button__checkmark"></div> 2158 </label> 2159 <br> 2160 <br> 2161 <!-- RIGHT LABEL --> 2162 <label class="topcoat-radio-button"> 2163 <input type="radio" name="topcoat"> 2164 <div class="topcoat-radio-button__checkmark"></div> 2165 Right label 2166 </label> 2167 <br> 2168 <br> 2169 <!-- DISABLED --> 2170 <label class="topcoat-radio-button"> 2171 <input type="radio" name="topcoat" Disabled> 2172 <div class="topcoat-radio-button__checkmark"></div> 2173 Disabled 2174 </label> 2175 examples: 2176 Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj 2177 tags: 2178 - desktop 2179 - light 2180 - mobile 2181 - Radio 2182*/ 2183 2184input[type="radio"] { 2185 height: 1.875rem; 2186 width: 1.875rem; 2187 margin-top: 0; 2188 margin-right: -1.875rem; 2189 margin-bottom: -1.875rem; 2190 margin-left: 0; 2191} 2192 2193input[type="radio"]:checked + .topcoat-radio-button__checkmark:after { 2194 opacity: 1; 2195} 2196 2197.topcoat-radio-button { 2198 color: #454545; 2199 line-height: 1.875rem; 2200} 2201 2202.topcoat-radio-button__checkmark:before { 2203 width: 1.875rem; 2204 height: 1.875rem; 2205 background: #e5e9e8; 2206 border: 1px solid #a5a8a8; 2207 box-shadow: inset 0 1px #fff; 2208} 2209 2210.topcoat-radio-button__checkmark { 2211 position: relative; 2212 width: 1.875rem; 2213 height: 1.875rem; 2214} 2215 2216.topcoat-radio-button__checkmark:after { 2217 opacity: 0; 2218 width: 0.875rem; 2219 height: 0.875rem; 2220 background: #666; 2221 border: 1px solid rgba(0,0,0,0.1); 2222 box-shadow: 0 1px rgba(255,255,255,0.5); 2223 -webkit-transform: none; 2224 -ms-transform: none; 2225 transform: none; 2226 top: 7px; 2227 left: 7px; 2228} 2229 2230input[type="radio"]:focus + .topcoat-radio-button__checkmark:before { 2231 border: 1px solid #0940fd; 2232 box-shadow: 0 0 0 2px #6fb5f1; 2233} 2234 2235/* 2236Copyright 2012 Adobe Systems Inc.; 2237Licensed under the Apache License, Version 2.0 (the "License"); 2238you may not use this file except in compliance with the License. 2239You may obtain a copy of the License at 2240 2241http://www.apache.org/licenses/LICENSE-2.0 2242 2243Unless required by applicable law or agreed to in writing, software 2244distributed under the License is distributed on an "AS IS" BASIS, 2245WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2246See the License for the specific language governing permissions and 2247limitations under the License. 2248*/ 2249 2250/* 2251Copyright 2012 Adobe Systems Inc.; 2252Licensed under the Apache License, Version 2.0 (the "License"); 2253you may not use this file except in compliance with the License. 2254You may obtain a copy of the License at 2255 2256http://www.apache.org/licenses/LICENSE-2.0 2257 2258Unless required by applicable law or agreed to in writing, software 2259distributed under the License is distributed on an "AS IS" BASIS, 2260WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2261See the License for the specific language governing permissions and 2262limitations under the License. 2263*/ 2264 2265.range { 2266 padding: 0; 2267 margin: 0; 2268 font: inherit; 2269 color: inherit; 2270 background: transparent; 2271 border: none; 2272 -moz-box-sizing: border-box; 2273 box-sizing: border-box; 2274 background-clip: padding-box; 2275 vertical-align: top; 2276 outline: none; 2277 -webkit-appearance: none; 2278} 2279 2280.range__thumb { 2281 cursor: pointer; 2282} 2283 2284.range__thumb--webkit { 2285 cursor: pointer; 2286 -webkit-appearance: none; 2287} 2288 2289.range:disabled { 2290 opacity: 0.3; 2291 cursor: default; 2292 pointer-events: none; 2293} 2294 2295/* 2296Copyright 2012 Adobe Systems Inc.; 2297Licensed under the Apache License, Version 2.0 (the "License"); 2298you may not use this file except in compliance with the License. 2299You may obtain a copy of the License at 2300 2301http://www.apache.org/licenses/LICENSE-2.0 2302 2303Unless required by applicable law or agreed to in writing, software 2304distributed under the License is distributed on an "AS IS" BASIS, 2305WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2306See the License for the specific language governing permissions and 2307limitations under the License. 2308*/ 2309 2310/* 2311Copyright 2012 Adobe Systems Inc.; 2312Licensed under the Apache License, Version 2.0 (the "License"); 2313you may not use this file except in compliance with the License. 2314You may obtain a copy of the License at 2315 2316http://www.apache.org/licenses/LICENSE-2.0 2317 2318Unless required by applicable law or agreed to in writing, software 2319distributed under the License is distributed on an "AS IS" BASIS, 2320WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2321See the License for the specific language governing permissions and 2322limitations under the License. 2323*/ 2324 2325.range, 2326.topcoat-range { 2327 padding: 0; 2328 margin: 0; 2329 font: inherit; 2330 color: inherit; 2331 background: transparent; 2332 border: none; 2333 -moz-box-sizing: border-box; 2334 box-sizing: border-box; 2335 background-clip: padding-box; 2336 vertical-align: top; 2337 outline: none; 2338 -webkit-appearance: none; 2339} 2340 2341.range__thumb, 2342.topcoat-range::-moz-range-thumb { 2343 cursor: pointer; 2344} 2345 2346.range__thumb--webkit, 2347.topcoat-range::-webkit-slider-thumb { 2348 cursor: pointer; 2349 -webkit-appearance: none; 2350} 2351 2352.range:disabled, 2353.topcoat-range:disabled { 2354 opacity: 0.3; 2355 cursor: default; 2356 pointer-events: none; 2357} 2358 2359/* topdoc 2360 name: Range 2361 description: Range input 2362 modifiers: 2363 :active: Active state 2364 :disabled: Disabled state 2365 :hover: Hover state 2366 :focus: Focused 2367 markup: 2368 <input type="range" class="topcoat-range"> 2369 <input type="range" class="topcoat-range" disabled> 2370 examples: 2371 mobile range: http://codepen.io/Topcoat/pen/BskEn 2372 tags: 2373 - desktop 2374 - mobile 2375 - range 2376*/ 2377 2378.topcoat-range { 2379 border-radius: 6px; 2380 border: 1px solid #a5a8a8; 2381 background-color: #d3d7d7; 2382 height: 1rem; 2383 border-radius: 30px; 2384} 2385 2386.topcoat-range::-moz-range-track { 2387 border-radius: 6px; 2388 border: 1px solid #a5a8a8; 2389 background-color: #d3d7d7; 2390 height: 1rem; 2391 border-radius: 30px; 2392} 2393 2394.topcoat-range::-webkit-slider-thumb { 2395 height: 3rem; 2396 width: 2rem; 2397 background-color: #e5e9e8; 2398 border: 1px solid #a5a8a8; 2399 border-radius: 6px; 2400 box-shadow: inset 0 1px #fff; 2401} 2402 2403.topcoat-range::-moz-range-thumb { 2404 height: 3rem; 2405 width: 2rem; 2406 background-color: #e5e9e8; 2407 border: 1px solid #a5a8a8; 2408 border-radius: 6px; 2409 box-shadow: inset 0 1px #fff; 2410} 2411 2412.topcoat-range:focus::-webkit-slider-thumb { 2413 border: 1px solid #0940fd; 2414 box-shadow: 0 0 0 2px #6fb5f1; 2415} 2416 2417.topcoat-range:focus::-moz-range-thumb { 2418 border: 1px solid #0940fd; 2419 box-shadow: 0 0 0 2px #6fb5f1; 2420} 2421 2422/** 2423* 2424* Copyright 2012 Adobe Systems Inc.; 2425* 2426* Licensed under the Apache License, Version 2.0 (the "License"); 2427* you may not use this file except in compliance with the License. 2428* You may obtain a copy of the License at 2429* 2430* http://www.apache.org/licenses/LICENSE-2.0 2431* 2432* Unless required by applicable law or agreed to in writing, software 2433* distributed under the License is distributed on an "AS IS" BASIS, 2434* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2435* See the License for the specific language governing permissions and 2436* limitations under the License. 2437* 2438*/ 2439 2440/** 2441* 2442* Copyright 2012 Adobe Systems Inc.; 2443* 2444* Licensed under the Apache License, Version 2.0 (the "License"); 2445* you may not use this file except in compliance with the License. 2446* You may obtain a copy of the License at 2447* 2448* http://www.apache.org/licenses/LICENSE-2.0 2449* 2450* Unless required by applicable law or agreed to in writing, software 2451* distributed under the License is distributed on an "AS IS" BASIS, 2452* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2453* See the License for the specific language governing permissions and 2454* limitations under the License. 2455* 2456*/ 2457 2458.search-input { 2459 padding: 0; 2460 margin: 0; 2461 font: inherit; 2462 color: inherit; 2463 background: transparent; 2464 border: none; 2465 -moz-box-sizing: border-box; 2466 box-sizing: border-box; 2467 background-clip: padding-box; 2468 vertical-align: top; 2469 outline: none; 2470 -webkit-appearance: none; 2471} 2472 2473input[type="search"]::-webkit-search-cancel-button { 2474 -webkit-appearance: none; 2475} 2476 2477.search-input:disabled { 2478 opacity: 0.3; 2479 cursor: default; 2480 pointer-events: none; 2481} 2482 2483/** 2484* 2485* Copyright 2012 Adobe Systems Inc.; 2486* 2487* Licensed under the Apache License, Version 2.0 (the "License"); 2488* you may not use this file except in compliance with the License. 2489* You may obtain a copy of the License at 2490* 2491* http://www.apache.org/licenses/LICENSE-2.0 2492* 2493* Unless required by applicable law or agreed to in writing, software 2494* distributed under the License is distributed on an "AS IS" BASIS, 2495* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2496* See the License for the specific language governing permissions and 2497* limitations under the License. 2498* 2499*/ 2500 2501/** 2502* 2503* Copyright 2012 Adobe Systems Inc.; 2504* 2505* Licensed under the Apache License, Version 2.0 (the "License"); 2506* you may not use this file except in compliance with the License. 2507* You may obtain a copy of the License at 2508* 2509* http://www.apache.org/licenses/LICENSE-2.0 2510* 2511* Unless required by applicable law or agreed to in writing, software 2512* distributed under the License is distributed on an "AS IS" BASIS, 2513* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2514* See the License for the specific language governing permissions and 2515* limitations under the License. 2516* 2517*/ 2518 2519.search-input, 2520.topcoat-search-input, 2521.topcoat-search-input--large { 2522 padding: 0; 2523 margin: 0; 2524 font: inherit; 2525 color: inherit; 2526 background: transparent; 2527 border: none; 2528 -moz-box-sizing: border-box; 2529 box-sizing: border-box; 2530 background-clip: padding-box; 2531 vertical-align: top; 2532 outline: none; 2533 -webkit-appearance: none; 2534} 2535 2536input[type="search"]::-webkit-search-cancel-button { 2537 -webkit-appearance: none; 2538} 2539 2540.search-input:disabled, 2541.topcoat-search-input:disabled, 2542.topcoat-search-input--large:disabled { 2543 opacity: 0.3; 2544 cursor: default; 2545 pointer-events: none; 2546} 2547 2548/* topdoc 2549 name: Search Input 2550 description: A text input designed for searching. 2551 modifiers: 2552 :disabled: Disabled state 2553 markup: 2554 <input type="search" value="" placeholder="search" class="topcoat-search-input"> 2555 <input type="search" value="" placeholder="search" class="topcoat-search-input" disabled> 2556 tags: 2557 - desktop 2558 - light 2559 - mobile 2560 - text 2561 - input 2562 - search 2563 - form 2564*/ 2565 2566.topcoat-search-input, 2567.topcoat-search-input--large { 2568 line-height: 3rem; 2569 font-size: 16px; 2570 border: 1px solid #a5a8a8; 2571 background-color: #d3d7d7; 2572 box-shadow: inset 0 1px rgba(0,0,0,0.12); 2573 color: #454545; 2574 padding: 0 0 0 2rem; 2575 border-radius: 30px; 2576 background-image: url("../img/search.svg"); 2577 background-position: 1em center; 2578 background-repeat: no-repeat; 2579 background-size: 16px; 2580} 2581 2582.topcoat-search-input:focus, 2583.topcoat-search-input--large:focus { 2584 background-image: url("../img/search_dark.svg"); 2585 background-color: #edf1f1; 2586 color: #000; 2587 border: 1px solid #0940fd; 2588 box-shadow: 0 0 0 2px #6fb5f1; 2589} 2590 2591.topcoat-search-input::-webkit-search-cancel-button, 2592.topcoat-search-input::-webkit-search-decoration, 2593.topcoat-search-input--large::-webkit-search-cancel-button, 2594.topcoat-search-input--large::-webkit-search-decoration { 2595 margin-right: 5px; 2596} 2597 2598.topcoat-search-input:focus::-webkit-input-placeholder, 2599.topcoat-search-input:focus::-webkit-input-placeholder { 2600 color: #c6c8c8; 2601} 2602 2603.topcoat-search-input:disabled::-webkit-input-placeholder { 2604 color: #000; 2605} 2606 2607.topcoat-search-input:disabled::-moz-placeholder { 2608 color: #000; 2609} 2610 2611.topcoat-search-input:disabled:-ms-input-placeholder { 2612 color: #000; 2613} 2614 2615/* topdoc 2616 name: Large Search Input 2617 description: A large text input designed for searching. 2618 modifiers: 2619 :disabled: Disabled state 2620 markup: 2621 <input type="search" value="" placeholder="search" class="topcoat-search-input--large"> 2622 <input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled> 2623 tags: 2624 - desktop 2625 - light 2626 - mobile 2627 - text 2628 - input 2629 - search 2630 - form 2631 - large 2632*/ 2633 2634.topcoat-search-input--large { 2635 line-height: 4.375rem; 2636 font-size: 1.3rem; 2637 font-weight: 200; 2638 padding: 0 0 0 2.9rem; 2639 border-radius: 40px; 2640 background-position: 1.2em center; 2641 background-size: 1.3rem; 2642} 2643 2644.topcoat-search-input--large:disabled { 2645 color: #000; 2646} 2647 2648.topcoat-search-input--large:disabled::-webkit-input-placeholder { 2649 color: #000; 2650} 2651 2652.topcoat-search-input--large:disabled::-moz-placeholder { 2653 color: #000; 2654} 2655 2656.topcoat-search-input--large:disabled:-ms-input-placeholder { 2657 color: #000; 2658} 2659 2660/** 2661* 2662* Copyright 2012 Adobe Systems Inc.; 2663* 2664* Licensed under the Apache License, Version 2.0 (the "License"); 2665* you may not use this file except in compliance with the License. 2666* You may obtain a copy of the License at 2667* 2668* http://www.apache.org/licenses/LICENSE-2.0 2669* 2670* Unless required by applicable law or agreed to in writing, software 2671* distributed under the License is distributed on an "AS IS" BASIS, 2672* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2673* See the License for the specific language governing permissions and 2674* limitations under the License. 2675* 2676*/ 2677 2678/** 2679* 2680* Copyright 2012 Adobe Systems Inc.; 2681* 2682* Licensed under the Apache License, Version 2.0 (the "License"); 2683* you may not use this file except in compliance with the License. 2684* You may obtain a copy of the License at 2685* 2686* http://www.apache.org/licenses/LICENSE-2.0 2687* 2688* Unless required by applicable law or agreed to in writing, software 2689* distributed under the License is distributed on an "AS IS" BASIS, 2690* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2691* See the License for the specific language governing permissions and 2692* limitations under the License. 2693* 2694*/ 2695 2696.switch { 2697 position: relative; 2698 display: inline-block; 2699 vertical-align: top; 2700 -moz-box-sizing: border-box; 2701 box-sizing: border-box; 2702 background-clip: padding-box; 2703} 2704 2705.switch__input { 2706 position: absolute; 2707 overflow: hidden; 2708 padding: 0; 2709 border: 0; 2710 opacity: 0.001; 2711 z-index: 1; 2712 vertical-align: top; 2713 outline: none; 2714} 2715 2716.switch__toggle { 2717 position: relative; 2718 display: inline-block; 2719 vertical-align: top; 2720 -moz-box-sizing: border-box; 2721 box-sizing: border-box; 2722 background-clip: padding-box; 2723 padding: 0; 2724 margin: 0; 2725 font: inherit; 2726 color: inherit; 2727 background: transparent; 2728 border: none; 2729 cursor: default; 2730 -webkit-user-select: none; 2731 -moz-user-select: none; 2732 -ms-user-select: none; 2733 user-select: none; 2734} 2735 2736.switch__toggle:before, 2737.switch__toggle:after { 2738 content: ''; 2739 position: absolute; 2740 z-index: -1; 2741 -moz-box-sizing: border-box; 2742 box-sizing: border-box; 2743 background-clip: padding-box; 2744} 2745 2746.switch--disabled { 2747 opacity: 0.3; 2748 cursor: default; 2749 pointer-events: none; 2750} 2751 2752/** 2753* 2754* Copyright 2012 Adobe Systems Inc.; 2755* 2756* Licensed under the Apache License, Version 2.0 (the "License"); 2757* you may not use this file except in compliance with the License. 2758* You may obtain a copy of the License at 2759* 2760* http://www.apache.org/licenses/LICENSE-2.0 2761* 2762* Unless required by applicable law or agreed to in writing, software 2763* distributed under the License is distributed on an "AS IS" BASIS, 2764* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2765* See the License for the specific language governing permissions and 2766* limitations under the License. 2767* 2768*/ 2769 2770/** 2771* 2772* Copyright 2012 Adobe Systems Inc.; 2773* 2774* Licensed under the Apache License, Version 2.0 (the "License"); 2775* you may not use this file except in compliance with the License. 2776* You may obtain a copy of the License at 2777* 2778* http://www.apache.org/licenses/LICENSE-2.0 2779* 2780* Unless required by applicable law or agreed to in writing, software 2781* distributed under the License is distributed on an "AS IS" BASIS, 2782* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2783* See the License for the specific language governing permissions and 2784* limitations under the License. 2785* 2786*/ 2787 2788.switch, 2789.topcoat-switch { 2790 position: relative; 2791 display: inline-block; 2792 vertical-align: top; 2793 -moz-box-sizing: border-box; 2794 box-sizing: border-box; 2795 background-clip: padding-box; 2796} 2797 2798.switch__input, 2799.topcoat-switch__input { 2800 position: absolute; 2801 overflow: hidden; 2802 padding: 0; 2803 border: 0; 2804 opacity: 0.001; 2805 z-index: 1; 2806 vertical-align: top; 2807 outline: none; 2808} 2809 2810.switch__toggle, 2811.topcoat-switch__toggle { 2812 position: relative; 2813 display: inline-block; 2814 vertical-align: top; 2815 -moz-box-sizing: border-box; 2816 box-sizing: border-box; 2817 background-clip: padding-box; 2818 padding: 0; 2819 margin: 0; 2820 font: inherit; 2821 color: inherit; 2822 background: transparent; 2823 border: none; 2824 cursor: default; 2825 -webkit-user-select: none; 2826 -moz-user-select: none; 2827 -ms-user-select: none; 2828 user-select: none; 2829} 2830 2831.switch__toggle:before, 2832.switch__toggle:after, 2833.topcoat-switch__toggle:before, 2834.topcoat-switch__toggle:after { 2835 content: ''; 2836 position: absolute; 2837 z-index: -1; 2838 -moz-box-sizing: border-box; 2839 box-sizing: border-box; 2840 background-clip: padding-box; 2841} 2842 2843.switch--disabled, 2844.topcoat-switch__input:disabled + .topcoat-switch__toggle { 2845 opacity: 0.3; 2846 cursor: default; 2847 pointer-events: none; 2848} 2849 2850/* topdoc 2851 name: Switch 2852 description: Default skin for Topcoat switch 2853 modifiers: 2854 :focus: Focus state 2855 :disabled: Disabled state 2856 markup: 2857 <label class="topcoat-switch"> 2858 <input type="checkbox" class="topcoat-switch__input"> 2859 <div class="topcoat-switch__toggle"></div> 2860 </label> 2861 <br> 2862 <br> 2863 <label class="topcoat-switch"> 2864 <input type="checkbox" class="topcoat-switch__input" checked> 2865 <div class="topcoat-switch__toggle"></div> 2866 </label> 2867 <br> 2868 <br> 2869 <label class="topcoat-switch"> 2870 <input type="checkbox" class="topcoat-switch__input" disabled> 2871 <div class="topcoat-switch__toggle"></div> 2872 </label> 2873 examples: 2874 mobile switch: http://codepen.io/Topcoat/pen/upxds 2875 tags: 2876 - desktop 2877 - light 2878 - mobile 2879 - switch 2880*/ 2881 2882.topcoat-switch { 2883 font-size: 16px; 2884 padding: 0 1.25rem; 2885 border-radius: 6px; 2886 border: 1px solid #a5a8a8; 2887 overflow: hidden; 2888 width: 6rem; 2889} 2890 2891.topcoat-switch__toggle:before, 2892.topcoat-switch__toggle:after { 2893 top: -1px; 2894 width: 5rem; 2895} 2896 2897.topcoat-switch__toggle:before { 2898 content: 'ON'; 2899 color: #0083e8; 2900 background-color: #e0f0fa; 2901 right: 1rem; 2902 padding-left: 1.5rem; 2903} 2904 2905.topcoat-switch__toggle { 2906 line-height: 3rem; 2907 height: 3rem; 2908 width: 2rem; 2909 border-radius: 6px; 2910 color: #454545; 2911 text-shadow: 0 1px #fff; 2912 background-color: #e5e9e8; 2913 border: 1px solid #a5a8a8; 2914 margin-left: -1.3rem; 2915 margin-bottom: -1px; 2916 margin-top: -1px; 2917 box-shadow: inset 0 1px #fff; 2918 -webkit-transition: margin-left 0.05s ease-in-out; 2919 transition: margin-left 0.05s ease-in-out; 2920} 2921 2922.topcoat-switch__toggle:after { 2923 content: 'OFF'; 2924 background-color: #d3d7d7; 2925 left: 1rem; 2926 padding-left: 2rem; 2927} 2928 2929.topcoat-switch__input:checked + .topcoat-switch__toggle { 2930 margin-left: 2.7rem; 2931} 2932 2933.topcoat-switch__input:focus + .topcoat-switch__toggle { 2934 border: 1px solid #0940fd; 2935 box-shadow: 0 0 0 2px #6fb5f1; 2936} 2937 2938.topcoat-switch__input:disabled + .topcoat-switch__toggle:after, 2939.topcoat-switch__input:disabled + .topcoat-switch__toggle:before { 2940 background: transparent; 2941} 2942 2943/** 2944* 2945* Copyright 2012 Adobe Systems Inc.; 2946* 2947* Licensed under the Apache License, Version 2.0 (the "License"); 2948* you may not use this file except in compliance with the License. 2949* You may obtain a copy of the License at 2950* 2951* http://www.apache.org/licenses/LICENSE-2.0 2952* 2953* Unless required by applicable law or agreed to in writing, software 2954* distributed under the License is distributed on an "AS IS" BASIS, 2955* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2956* See the License for the specific language governing permissions and 2957* limitations under the License. 2958* 2959*/ 2960 2961/** 2962* 2963* Copyright 2012 Adobe Systems Inc.; 2964* 2965* Licensed under the Apache License, Version 2.0 (the "License"); 2966* you may not use this file except in compliance with the License. 2967* You may obtain a copy of the License at 2968* 2969* http://www.apache.org/licenses/LICENSE-2.0 2970* 2971* Unless required by applicable law or agreed to in writing, software 2972* distributed under the License is distributed on an "AS IS" BASIS, 2973* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2974* See the License for the specific language governing permissions and 2975* limitations under the License. 2976* 2977*/ 2978 2979.button, 2980.topcoat-tab-bar__button { 2981 position: relative; 2982 display: inline-block; 2983 vertical-align: top; 2984 -moz-box-sizing: border-box; 2985 box-sizing: border-box; 2986 background-clip: padding-box; 2987 padding: 0; 2988 margin: 0; 2989 font: inherit; 2990 color: inherit; 2991 background: transparent; 2992 border: none; 2993 cursor: default; 2994 -webkit-user-select: none; 2995 -moz-user-select: none; 2996 -ms-user-select: none; 2997 user-select: none; 2998 text-overflow: ellipsis; 2999 white-space: nowrap; 3000 overflow: hidden; 3001 text-decoration: none; 3002} 3003 3004.button--quiet { 3005 background: transparent; 3006 border: 1px solid transparent; 3007 box-shadow: none; 3008} 3009 3010.button--disabled, 3011.topcoat-tab-bar__button:disabled { 3012 opacity: 0.3; 3013 cursor: default; 3014 pointer-events: none; 3015} 3016 3017.button-bar, 3018.topcoat-tab-bar { 3019 display: table; 3020 table-layout: fixed; 3021 white-space: nowrap; 3022 margin: 0; 3023 padding: 0; 3024} 3025 3026.button-bar__item, 3027.topcoat-tab-bar__item { 3028 display: table-cell; 3029 width: auto; 3030 border-radius: 0; 3031} 3032 3033.button-bar__item > input, 3034.topcoat-tab-bar__item > input { 3035 position: absolute; 3036 overflow: hidden; 3037 padding: 0; 3038 border: 0; 3039 opacity: 0.001; 3040 z-index: 1; 3041 vertical-align: top; 3042 outline: none; 3043} 3044 3045.button-bar__button { 3046 border-radius: inherit; 3047} 3048 3049.button-bar__item:disabled { 3050 opacity: 0.3; 3051 cursor: default; 3052 pointer-events: none; 3053} 3054 3055/* topdoc 3056 name: Tab Bar 3057 description: Component of tab buttons 3058 modifiers: 3059 :disabled: Disabled state 3060 markup: 3061 <div class="topcoat-tab-bar"> 3062 <label class="topcoat-tab-bar__item"> 3063 <input type="radio" name="tab-bar"> 3064 <button class="topcoat-tab-bar__button">One</button> 3065 </label> 3066 <label class="topcoat-tab-bar__item"> 3067 <input type="radio" name="tab-bar"> 3068 <button class="topcoat-tab-bar__button">Two</button> 3069 </label> 3070 <label class="topcoat-tab-bar__item"> 3071 <input type="radio" name="tab-bar"> 3072 <button class="topcoat-tab-bar__button">Three</button> 3073 </label> 3074 </div> 3075 examples: 3076 mobile tab bar: http://codepen.io/Topcoat/pen/rJICF 3077 tags: 3078 - desktop 3079 - light 3080 - dark 3081 - mobile 3082 - tab 3083 - group 3084 - bar 3085*/ 3086 3087.topcoat-tab-bar__button { 3088 padding: 0 1.25rem; 3089 height: 3rem; 3090 line-height: 3rem; 3091 letter-spacing: 1px; 3092 color: #454545; 3093 text-shadow: 0 1px #fff; 3094 vertical-align: top; 3095 background-color: #e5e9e8; 3096 box-shadow: inset 0 1px #fff; 3097 border-top: 1px solid #a5a8a8; 3098} 3099 3100.topcoat-tab-bar__button:active, 3101.topcoat-tab-bar__button--large:active, 3102:checked + .topcoat-tab-bar__button { 3103 color: #0083e8; 3104 background-color: #e0f0fa; 3105 box-shadow: inset 0 0 2px #c0ced8; 3106} 3107 3108.topcoat-tab-bar__button:focus, 3109.topcoat-tab-bar__button--large:focus { 3110 z-index: 1; 3111} 3112 3113/** 3114* 3115* Copyright 2012 Adobe Systems Inc.; 3116* 3117* Licensed under the Apache License, Version 2.0 (the "License"); 3118* you may not use this file except in compliance with the License. 3119* You may obtain a copy of the License at 3120* 3121* http://www.apache.org/licenses/LICENSE-2.0 3122* 3123* Unless required by applicable law or agreed to in writing, software 3124* distributed under the License is distributed on an "AS IS" BASIS, 3125* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3126* See the License for the specific language governing permissions and 3127* limitations under the License. 3128* 3129*/ 3130 3131/** 3132* 3133* Copyright 2012 Adobe Systems Inc.; 3134* 3135* Licensed under the Apache License, Version 2.0 (the "License"); 3136* you may not use this file except in compliance with the License. 3137* You may obtain a copy of the License at 3138* 3139* http://www.apache.org/licenses/LICENSE-2.0 3140* 3141* Unless required by applicable law or agreed to in writing, software 3142* distributed under the License is distributed on an "AS IS" BASIS, 3143* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3144* See the License for the specific language governing permissions and 3145* limitations under the License. 3146* 3147*/ 3148 3149.input, 3150.topcoat-text-input, 3151.topcoat-text-input--large { 3152 padding: 0; 3153 margin: 0; 3154 font: inherit; 3155 color: inherit; 3156 background: transparent; 3157 border: none; 3158 -moz-box-sizing: border-box; 3159 box-sizing: border-box; 3160 background-clip: padding-box; 3161 vertical-align: top; 3162 outline: none; 3163} 3164 3165.input:disabled, 3166.topcoat-text-input:disabled, 3167.topcoat-text-input--large:disabled { 3168 opacity: 0.3; 3169 cursor: default; 3170 pointer-events: none; 3171} 3172 3173/* topdoc 3174 name: Text input 3175 description: Topdoc text input 3176 modifiers: 3177 :disabled: Disabled state 3178 :focus: Focused 3179 :invalid: Hover state 3180 markup: 3181 <input type="text" class="topcoat-text-input" placeholder="text" value=""> 3182 <br> 3183 <br> 3184 <input type="text" class="topcoat-text-input" placeholder="text" value="" disabled> 3185 <br> 3186 <br> 3187 <input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"> 3188 tags: 3189 - desktop 3190 - mobile 3191 - text 3192 - input 3193*/ 3194 3195.topcoat-text-input, 3196.topcoat-text-input--large { 3197 line-height: 3rem; 3198 font-size: 16px; 3199 letter-spacing: 1px; 3200 padding: 0 1.25rem; 3201 border: 1px solid #a5a8a8; 3202 border-radius: 6px; 3203 background-color: #d3d7d7; 3204 box-shadow: inset 0 1px rgba(0,0,0,0.12); 3205 color: #454545; 3206 vertical-align: top; 3207} 3208 3209.topcoat-text-input:focus, 3210.topcoat-text-input--large:focus { 3211 background-color: #edf1f1; 3212 color: #000; 3213 border: 1px solid #0940fd; 3214 box-shadow: 0 0 0 2px #6fb5f1; 3215} 3216 3217.topcoat-text-input:disabled::-webkit-input-placeholder { 3218 color: #000; 3219} 3220 3221.topcoat-text-input:disabled::-moz-placeholder { 3222 color: #000; 3223} 3224 3225.topcoat-text-input:disabled:-ms-input-placeholder { 3226 color: #000; 3227} 3228 3229.topcoat-text-input:invalid { 3230 border: 1px solid #d83b75; 3231} 3232 3233/* topdoc 3234 name: Large Text Input 3235 description: A bigger input, still for text. 3236 modifiers: 3237 :disabled: Disabled state 3238 :focus: Focused 3239 :invalid: Hover state 3240 markup: 3241 <input type="text" class="topcoat-text-input--large" value="" placeholder="text"> 3242 <br> 3243 <br> 3244 <input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled> 3245 <br> 3246 <br> 3247 <input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail"> 3248 tags: 3249 - desktop 3250 - light 3251 - mobile 3252 - form 3253 - input 3254 - large 3255*/ 3256 3257.topcoat-text-input--large { 3258 line-height: 4.375rem; 3259 font-size: 1.3rem; 3260} 3261 3262.topcoat-text-input--large:disabled { 3263 color: #000; 3264} 3265 3266.topcoat-text-input--large:disabled::-webkit-input-placeholder { 3267 color: #000; 3268} 3269 3270.topcoat-text-input--large:disabled::-moz-placeholder { 3271 color: #000; 3272} 3273 3274.topcoat-text-input--large:disabled:-ms-input-placeholder { 3275 color: #000; 3276} 3277 3278.topcoat-text-input--large:invalid { 3279 border: 1px solid #d83b75; 3280} 3281 3282/** 3283* 3284* Copyright 2012 Adobe Systems Inc.; 3285* 3286* Licensed under the Apache License, Version 2.0 (the "License"); 3287* you may not use this file except in compliance with the License. 3288* You may obtain a copy of the License at 3289* 3290* http://www.apache.org/licenses/LICENSE-2.0 3291* 3292* Unless required by applicable law or agreed to in writing, software 3293* distributed under the License is distributed on an "AS IS" BASIS, 3294* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3295* See the License for the specific language governing permissions and 3296* limitations under the License. 3297* 3298*/ 3299 3300/** 3301* 3302* Copyright 2012 Adobe Systems Inc.; 3303* 3304* Licensed under the Apache License, Version 2.0 (the "License"); 3305* you may not use this file except in compliance with the License. 3306* You may obtain a copy of the License at 3307* 3308* http://www.apache.org/licenses/LICENSE-2.0 3309* 3310* Unless required by applicable law or agreed to in writing, software 3311* distributed under the License is distributed on an "AS IS" BASIS, 3312* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3313* See the License for the specific language governing permissions and 3314* limitations under the License. 3315* 3316*/ 3317 3318.textarea { 3319 -moz-box-sizing: border-box; 3320 box-sizing: border-box; 3321 background-clip: padding-box; 3322 padding: 0; 3323 margin: 0; 3324 font: inherit; 3325 color: inherit; 3326 background: transparent; 3327 border: none; 3328 vertical-align: top; 3329 resize: none; 3330 outline: none; 3331} 3332 3333.textarea:disabled { 3334 opacity: 0.3; 3335 cursor: default; 3336 pointer-events: none; 3337} 3338 3339/** 3340* 3341* Copyright 2012 Adobe Systems Inc.; 3342* 3343* Licensed under the Apache License, Version 2.0 (the "License"); 3344* you may not use this file except in compliance with the License. 3345* You may obtain a copy of the License at 3346* 3347* http://www.apache.org/licenses/LICENSE-2.0 3348* 3349* Unless required by applicable law or agreed to in writing, software 3350* distributed under the License is distributed on an "AS IS" BASIS, 3351* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3352* See the License for the specific language governing permissions and 3353* limitations under the License. 3354* 3355*/ 3356 3357/** 3358* 3359* Copyright 2012 Adobe Systems Inc.; 3360* 3361* Licensed under the Apache License, Version 2.0 (the "License"); 3362* you may not use this file except in compliance with the License. 3363* You may obtain a copy of the License at 3364* 3365* http://www.apache.org/licenses/LICENSE-2.0 3366* 3367* Unless required by applicable law or agreed to in writing, software 3368* distributed under the License is distributed on an "AS IS" BASIS, 3369* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3370* See the License for the specific language governing permissions and 3371* limitations under the License. 3372* 3373*/ 3374 3375.textarea, 3376.topcoat-textarea, 3377.topcoat-textarea--large { 3378 -moz-box-sizing: border-box; 3379 box-sizing: border-box; 3380 background-clip: padding-box; 3381 padding: 0; 3382 margin: 0; 3383 font: inherit; 3384 color: inherit; 3385 background: transparent; 3386 border: none; 3387 vertical-align: top; 3388 resize: none; 3389 outline: none; 3390} 3391 3392.textarea:disabled, 3393.topcoat-textarea:disabled, 3394.topcoat-textarea--large:disabled { 3395 opacity: 0.3; 3396 cursor: default; 3397 pointer-events: none; 3398} 3399 3400/* topdoc 3401 name: Textarea 3402 description: A whole area, just for text. 3403 modifiers: 3404 :disabled: Disabled state 3405 markup: 3406 <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea> 3407 <br> 3408 <br> 3409 <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea> 3410 tags: 3411 - desktop 3412 - light 3413 - mobile 3414 - form 3415 - input 3416 - textarea 3417*/ 3418 3419.topcoat-textarea, 3420.topcoat-textarea--large { 3421 padding: 2rem; 3422 font-size: 2.5rem; 3423 font-weight: 200; 3424 border-radius: 6px; 3425 line-height: 3rem; 3426 border: 1px solid #a5a8a8; 3427 background-color: #d3d7d7; 3428 box-shadow: inset 0 1px rgba(0,0,0,0.12); 3429 color: #454545; 3430 letter-spacing: 1px; 3431} 3432 3433.topcoat-textarea:focus, 3434.topcoat-textarea--large:focus { 3435 background-color: #edf1f1; 3436 color: #000; 3437 border: 1px solid #0940fd; 3438 box-shadow: 0 0 0 2px #6fb5f1; 3439} 3440 3441.topcoat-textarea:disabled::-webkit-input-placeholder { 3442 color: #000; 3443} 3444 3445.topcoat-textarea:disabled::-moz-placeholder { 3446 color: #000; 3447} 3448 3449.topcoat-textarea:disabled:-ms-input-placeholder { 3450 color: #000; 3451} 3452 3453/* topdoc 3454 name: Large Textarea 3455 description: A whole area, just for text; now available in large. 3456 modifiers: 3457 :disabled: Disabled state 3458 markup: 3459 <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea> 3460 <br> 3461 <br> 3462 <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea> 3463 tags: 3464 - desktop 3465 - light 3466 - mobile 3467 - form 3468 - input 3469 - textarea 3470*/ 3471 3472.topcoat-textarea--large { 3473 font-size: 3rem; 3474 line-height: 4.375rem; 3475} 3476 3477.topcoat-textarea--large:disabled { 3478 color: #000; 3479} 3480 3481.topcoat-textarea--large:disabled::-webkit-input-placeholder { 3482 color: #000; 3483} 3484 3485.topcoat-textarea--large:disabled::-moz-placeholder { 3486 color: #000; 3487} 3488 3489.topcoat-textarea--large:disabled:-ms-input-placeholder { 3490 color: #000; 3491} 3492 3493@font-face { 3494 font-family: "Source Sans"; 3495 src: url("../font/SourceSansPro-Regular.otf"); 3496} 3497 3498@font-face { 3499 font-family: "Source Sans"; 3500 src: url("../font/SourceSansPro-Light.otf"); 3501 font-weight: 200; 3502} 3503 3504@font-face { 3505 font-family: "Source Sans"; 3506 src: url("../font/SourceSansPro-Semibold.otf"); 3507 font-weight: 600; 3508} 3509 3510body { 3511 margin: 0; 3512 padding: 0; 3513 background: #dfe2e2; 3514 color: #000; 3515 font: 16px "Source Sans", helvetica, arial, sans-serif; 3516 font-weight: 200; 3517} 3518 3519:focus { 3520 outline-color: transparent; 3521 outline-style: none; 3522} 3523 3524.topcoat-icon--menu-stack { 3525 background: url("../img/hamburger_dark.svg") no-repeat; 3526 background-size: cover; 3527} 3528 3529.quarter { 3530 width: 25%; 3531} 3532 3533.half { 3534 width: 50%; 3535} 3536 3537.three-quarters { 3538 width: 75%; 3539} 3540 3541.third { 3542 width: 33.333%; 3543} 3544 3545.two-thirds { 3546 width: 66.666%; 3547} 3548 3549.full { 3550 width: 100%; 3551} 3552 3553.left { 3554 text-align: left; 3555} 3556 3557.center { 3558 text-align: center; 3559} 3560 3561.right { 3562 text-align: right; 3563} 3564 3565.reset-ui { 3566 -moz-box-sizing: border-box; 3567 box-sizing: border-box; 3568 background-clip: padding-box; 3569 position: relative; 3570 display: inline-block; 3571 vertical-align: top; 3572 padding: 0; 3573 margin: 0; 3574 font: inherit; 3575 color: inherit; 3576 background: transparent; 3577 border: none; 3578 cursor: default; 3579 -webkit-user-select: none; 3580 -moz-user-select: none; 3581 -ms-user-select: none; 3582 user-select: none; 3583 text-overflow: ellipsis; 3584 white-space: nowrap; 3585 overflow: hidden; 3586} 3587 3588/* This file should include color and image variables corresponding to the dark theme */ 3589 3590/* Call To Action */ 3591 3592/* Icons */ 3593 3594/* Navigation Bar */ 3595 3596/* Text Input */ 3597 3598/* Search Input */ 3599 3600/* List */ 3601 3602/* Checkbox */ 3603 3604/* Overlay */ 3605 3606/* Progress bar */ 3607 3608/* Checkbox */ 3609 3610/* Radio Button */ 3611 3612/* Tab bar */ 3613 3614/* Switch */ 3615 3616/* Icon Button */ 3617 3618/* Navigation bar */ 3619 3620/* List */ 3621 3622/* Search Input */ 3623 3624/* Textarea */ 3625 3626/* Checkbox */ 3627 3628/* Radio */ 3629 3630/* Range input */ 3631 3632/* Search Input */ 3633 3634/* Switch */ 3635 3636/* This file should include color and image variables corresponding to the light theme */ 3637 3638/* Call To Action */ 3639 3640/* Icons */ 3641 3642/* Navigation Bar */ 3643 3644/* Text Input */ 3645 3646/* List */ 3647 3648/* Overlay */ 3649 3650/* Progress bar */ 3651 3652/* Checkbox */ 3653 3654/* Range input */ 3655 3656/* Radio Button */ 3657 3658/* Tab bar */ 3659 3660/* Switch */ 3661 3662/* Containers */ 3663 3664/* Icon Button */ 3665 3666/* Navigation bar */ 3667 3668/* List */ 3669 3670/* Search Input */ 3671 3672/* Text Area */ 3673 3674/* Checkbox */ 3675 3676/* Radio */ 3677 3678/* Range input */ 3679 3680/* Search Input */ 3681 3682/* Switch */ 3683 3684/* Text Input */ 3685 3686/* Radio input */ 3687 3688/* Overlay */ 3689 3690/* Textarea */ 3691 3692/* Progress bar container */ 3693 3694/* Progress bar progress */ 3695 3696/* Search input */ 3697 3698/* Switch */ 3699 3700/* Notification */