pure.css (31015B)
1 /*! 2 Pure v0.6.2 3 Copyright 2013 Yahoo! 4 Licensed under the BSD License. 5 https://github.com/yahoo/pure/blob/master/LICENSE.md 6 */ 7 /*! 8 normalize.css v^3.0 | MIT License | git.io/normalize 9 Copyright (c) Nicolas Gallagher and Jonathan Neal 10 */ 11 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 12 /** 13 * 1. Set default font family to sans-serif. 14 * 2. Prevent iOS and IE text size adjust after device orientation change, 15 * without disabling user zoom. 16 */ 17 html { 18 font-family: sans-serif; 19 /* 1 */ 20 -ms-text-size-adjust: 100%; 21 /* 2 */ 22 -webkit-text-size-adjust: 100%; 23 /* 2 */ } 24 25 /** 26 * Remove default margin. 27 */ 28 body { 29 margin: 0; } 30 31 /* HTML5 display definitions 32 ========================================================================== */ 33 /** 34 * Correct `block` display not defined for any HTML5 element in IE 8/9. 35 * Correct `block` display not defined for `details` or `summary` in IE 10/11 36 * and Firefox. 37 * Correct `block` display not defined for `main` in IE 11. 38 */ 39 article, 40 aside, 41 details, 42 figcaption, 43 figure, 44 footer, 45 header, 46 hgroup, 47 main, 48 menu, 49 nav, 50 section, 51 summary { 52 display: block; } 53 54 /** 55 * 1. Correct `inline-block` display not defined in IE 8/9. 56 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 57 */ 58 audio, 59 canvas, 60 progress, 61 video { 62 display: inline-block; 63 /* 1 */ 64 vertical-align: baseline; 65 /* 2 */ } 66 67 /** 68 * Prevent modern browsers from displaying `audio` without controls. 69 * Remove excess height in iOS 5 devices. 70 */ 71 audio:not([controls]) { 72 display: none; 73 height: 0; } 74 75 /** 76 * Address `[hidden]` styling not present in IE 8/9/10. 77 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 78 */ 79 [hidden], 80 template { 81 display: none; } 82 83 /* Links 84 ========================================================================== */ 85 /** 86 * Remove the gray background color from active links in IE 10. 87 */ 88 a { 89 background-color: transparent; } 90 91 /** 92 * Improve readability of focused elements when they are also in an 93 * active/hover state. 94 */ 95 a:active, 96 a:hover { 97 outline: 0; } 98 99 /* Text-level semantics 100 ========================================================================== */ 101 /** 102 * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 103 */ 104 abbr[title] { 105 border-bottom: 1px dotted; } 106 107 /** 108 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 109 */ 110 b, 111 strong { 112 font-weight: bold; } 113 114 /** 115 * Address styling not present in Safari and Chrome. 116 */ 117 dfn { 118 font-style: italic; } 119 120 /** 121 * Address variable `h1` font-size and margin within `section` and `article` 122 * contexts in Firefox 4+, Safari, and Chrome. 123 */ 124 h1 { 125 font-size: 2em; 126 margin: 0.67em 0; } 127 128 /** 129 * Address styling not present in IE 8/9. 130 */ 131 mark { 132 background: #ff0; 133 color: #000; } 134 135 /** 136 * Address inconsistent and variable font size in all browsers. 137 */ 138 small { 139 font-size: 80%; } 140 141 /** 142 * Prevent `sub` and `sup` affecting `line-height` in all browsers. 143 */ 144 sub, 145 sup { 146 font-size: 75%; 147 line-height: 0; 148 position: relative; 149 vertical-align: baseline; } 150 151 sup { 152 top: -0.5em; } 153 154 sub { 155 bottom: -0.25em; } 156 157 /* Embedded content 158 ========================================================================== */ 159 /** 160 * Remove border when inside `a` element in IE 8/9/10. 161 */ 162 img { 163 border: 0; } 164 165 /** 166 * Correct overflow not hidden in IE 9/10/11. 167 */ 168 svg:not(:root) { 169 overflow: hidden; } 170 171 /* Grouping content 172 ========================================================================== */ 173 /** 174 * Address margin not present in IE 8/9 and Safari. 175 */ 176 figure { 177 margin: 1em 40px; } 178 179 /** 180 * Address differences between Firefox and other browsers. 181 */ 182 hr { 183 box-sizing: content-box; 184 height: 0; } 185 186 /** 187 * Contain overflow in all browsers. 188 */ 189 pre { 190 overflow: auto; } 191 192 /** 193 * Address odd `em`-unit font size rendering in all browsers. 194 */ 195 code, 196 kbd, 197 pre, 198 samp { 199 font-family: monospace, monospace; 200 font-size: 1em; } 201 202 /* Forms 203 ========================================================================== */ 204 /** 205 * Known limitation: by default, Chrome and Safari on OS X allow very limited 206 * styling of `select`, unless a `border` property is set. 207 */ 208 /** 209 * 1. Correct color not being inherited. 210 * Known issue: affects color of disabled elements. 211 * 2. Correct font properties not being inherited. 212 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 213 */ 214 button, 215 input, 216 optgroup, 217 select, 218 textarea { 219 color: inherit; 220 /* 1 */ 221 font: inherit; 222 /* 2 */ 223 margin: 0; 224 /* 3 */ } 225 226 /** 227 * Address `overflow` set to `hidden` in IE 8/9/10/11. 228 */ 229 button { 230 overflow: visible; } 231 232 /** 233 * Address inconsistent `text-transform` inheritance for `button` and `select`. 234 * All other form control elements do not inherit `text-transform` values. 235 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 236 * Correct `select` style inheritance in Firefox. 237 */ 238 button, 239 select { 240 text-transform: none; } 241 242 /** 243 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 244 * and `video` controls. 245 * 2. Correct inability to style clickable `input` types in iOS. 246 * 3. Improve usability and consistency of cursor style between image-type 247 * `input` and others. 248 */ 249 button, 250 html input[type="button"], 251 input[type="reset"], 252 input[type="submit"] { 253 -webkit-appearance: button; 254 /* 2 */ 255 cursor: pointer; 256 /* 3 */ } 257 258 /** 259 * Re-set default cursor for disabled elements. 260 */ 261 button[disabled], 262 html input[disabled] { 263 cursor: default; } 264 265 /** 266 * Remove inner padding and border in Firefox 4+. 267 */ 268 button::-moz-focus-inner, 269 input::-moz-focus-inner { 270 border: 0; 271 padding: 0; } 272 273 /** 274 * Address Firefox 4+ setting `line-height` on `input` using `!important` in 275 * the UA stylesheet. 276 */ 277 input { 278 line-height: normal; } 279 280 /** 281 * It's recommended that you don't attempt to style these elements. 282 * Firefox's implementation doesn't respect box-sizing, padding, or width. 283 * 284 * 1. Address box sizing set to `content-box` in IE 8/9/10. 285 * 2. Remove excess padding in IE 8/9/10. 286 */ 287 input[type="checkbox"], 288 input[type="radio"] { 289 box-sizing: border-box; 290 /* 1 */ 291 padding: 0; 292 /* 2 */ } 293 294 /** 295 * Fix the cursor style for Chrome's increment/decrement buttons. For certain 296 * `font-size` values of the `input`, it causes the cursor style of the 297 * decrement button to change from `default` to `text`. 298 */ 299 input[type="number"]::-webkit-inner-spin-button, 300 input[type="number"]::-webkit-outer-spin-button { 301 height: auto; } 302 303 /** 304 * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 305 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 306 */ 307 input[type="search"] { 308 -webkit-appearance: textfield; 309 /* 1 */ 310 box-sizing: content-box; 311 /* 2 */ } 312 313 /** 314 * Remove inner padding and search cancel button in Safari and Chrome on OS X. 315 * Safari (but not Chrome) clips the cancel button when the search input has 316 * padding (and `textfield` appearance). 317 */ 318 input[type="search"]::-webkit-search-cancel-button, 319 input[type="search"]::-webkit-search-decoration { 320 -webkit-appearance: none; } 321 322 /** 323 * Define consistent border, margin, and padding. 324 */ 325 fieldset { 326 border: 1px solid #c0c0c0; 327 margin: 0 2px; 328 padding: 0.35em 0.625em 0.75em; } 329 330 /** 331 * 1. Correct `color` not being inherited in IE 8/9/10/11. 332 * 2. Remove padding so people aren't caught out if they zero out fieldsets. 333 */ 334 legend { 335 border: 0; 336 /* 1 */ 337 padding: 0; 338 /* 2 */ } 339 340 /** 341 * Remove default vertical scrollbar in IE 8/9/10/11. 342 */ 343 textarea { 344 overflow: auto; } 345 346 /** 347 * Don't inherit the `font-weight` (applied by a rule above). 348 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 349 */ 350 optgroup { 351 font-weight: bold; } 352 353 /* Tables 354 ========================================================================== */ 355 /** 356 * Remove most spacing between table cells. 357 */ 358 table { 359 border-collapse: collapse; 360 border-spacing: 0; } 361 362 td, 363 th { 364 padding: 0; } 365 366 /*csslint important:false*/ 367 /* ========================================================================== 368 Pure Base Extras 369 ========================================================================== */ 370 /** 371 * Extra rules that Pure adds on top of Normalize.css 372 */ 373 /** 374 * Always hide an element when it has the `hidden` HTML attribute. 375 */ 376 .hidden, 377 [hidden] { 378 display: none !important; } 379 380 /** 381 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining 382 * aspect ratio. 383 */ 384 .pure-img { 385 max-width: 100%; 386 height: auto; 387 display: block; } 388 389 /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ 390 .pure-g { 391 letter-spacing: -0.31em; 392 /* Webkit: collapse white-space between units */ 393 *letter-spacing: normal; 394 /* reset IE < 8 */ 395 *word-spacing: -0.43em; 396 /* IE < 8: collapse white-space between units */ 397 text-rendering: optimizespeed; 398 /* Webkit: fixes text-rendering: optimizeLegibility */ 399 /* 400 Sets the font stack to fonts known to work properly with the above letter 401 and word spacings. See: https://github.com/yahoo/pure/issues/41/ 402 403 The following font stack makes Pure Grids work on all known environments. 404 405 * FreeSans: Ships with many Linux distros, including Ubuntu 406 407 * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and 408 Arial to get picked up by the browser, even though neither is available 409 in Chrome OS. 410 411 * Droid Sans: Ships with all versions of Android. 412 413 * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. 414 */ 415 font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 416 /* Use flexbox when possible to avoid `letter-spacing` side-effects. */ 417 display: -webkit-box; 418 display: -webkit-flex; 419 display: -ms-flexbox; 420 display: flex; 421 -webkit-flex-flow: row wrap; 422 -ms-flex-flow: row wrap; 423 flex-flow: row wrap; 424 /* Prevents distributing space between rows */ 425 -webkit-align-content: flex-start; 426 -ms-flex-line-pack: start; 427 align-content: flex-start; } 428 429 /* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */ 430 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 431 table .pure-g { 432 display: block; } } 433 /* Opera as of 12 on Windows needs word-spacing. 434 The ".opera-only" selector is used to prevent actual prefocus styling 435 and is not required in markup. 436 */ 437 .opera-only :-o-prefocus, 438 .pure-g { 439 word-spacing: -0.43em; } 440 441 .pure-u { 442 display: inline-block; 443 *display: inline; 444 /* IE < 8: fake inline-block */ 445 zoom: 1; 446 letter-spacing: normal; 447 word-spacing: normal; 448 vertical-align: top; 449 text-rendering: auto; } 450 451 /* 452 Resets the font family back to the OS/browser's default sans-serif font, 453 this the same font stack that Normalize.css sets for the `body`. 454 */ 455 .pure-g [class*="pure-u"] { 456 font-family: sans-serif; } 457 458 .pure-u-1, 459 .pure-u-1-1, 460 .pure-u-1-2, 461 .pure-u-1-3, 462 .pure-u-2-3, 463 .pure-u-1-4, 464 .pure-u-3-4, 465 .pure-u-1-5, 466 .pure-u-2-5, 467 .pure-u-3-5, 468 .pure-u-4-5, 469 .pure-u-5-5, 470 .pure-u-1-6, 471 .pure-u-5-6, 472 .pure-u-1-8, 473 .pure-u-3-8, 474 .pure-u-5-8, 475 .pure-u-7-8, 476 .pure-u-1-12, 477 .pure-u-5-12, 478 .pure-u-7-12, 479 .pure-u-11-12, 480 .pure-u-1-24, 481 .pure-u-2-24, 482 .pure-u-3-24, 483 .pure-u-4-24, 484 .pure-u-5-24, 485 .pure-u-6-24, 486 .pure-u-7-24, 487 .pure-u-8-24, 488 .pure-u-9-24, 489 .pure-u-10-24, 490 .pure-u-11-24, 491 .pure-u-12-24, 492 .pure-u-13-24, 493 .pure-u-14-24, 494 .pure-u-15-24, 495 .pure-u-16-24, 496 .pure-u-17-24, 497 .pure-u-18-24, 498 .pure-u-19-24, 499 .pure-u-20-24, 500 .pure-u-21-24, 501 .pure-u-22-24, 502 .pure-u-23-24, 503 .pure-u-24-24 { 504 display: inline-block; 505 *display: inline; 506 zoom: 1; 507 letter-spacing: normal; 508 word-spacing: normal; 509 vertical-align: top; 510 text-rendering: auto; } 511 512 .pure-u-1-24 { 513 width: 4.1667%; 514 *width: 4.1357%; } 515 516 .pure-u-1-12, 517 .pure-u-2-24 { 518 width: 8.3333%; 519 *width: 8.3023%; } 520 521 .pure-u-1-8, 522 .pure-u-3-24 { 523 width: 12.5000%; 524 *width: 12.4690%; } 525 526 .pure-u-1-6, 527 .pure-u-4-24 { 528 width: 16.6667%; 529 *width: 16.6357%; } 530 531 .pure-u-1-5 { 532 width: 20%; 533 *width: 19.9690%; } 534 535 .pure-u-5-24 { 536 width: 20.8333%; 537 *width: 20.8023%; } 538 539 .pure-u-1-4, 540 .pure-u-6-24 { 541 width: 25%; 542 *width: 24.9690%; } 543 544 .pure-u-7-24 { 545 width: 29.1667%; 546 *width: 29.1357%; } 547 548 .pure-u-1-3, 549 .pure-u-8-24 { 550 width: 33.3333%; 551 *width: 33.3023%; } 552 553 .pure-u-3-8, 554 .pure-u-9-24 { 555 width: 37.5000%; 556 *width: 37.4690%; } 557 558 .pure-u-2-5 { 559 width: 40%; 560 *width: 39.9690%; } 561 562 .pure-u-5-12, 563 .pure-u-10-24 { 564 width: 41.6667%; 565 *width: 41.6357%; } 566 567 .pure-u-11-24 { 568 width: 45.8333%; 569 *width: 45.8023%; } 570 571 .pure-u-1-2, 572 .pure-u-12-24 { 573 width: 50%; 574 *width: 49.9690%; } 575 576 .pure-u-13-24 { 577 width: 54.1667%; 578 *width: 54.1357%; } 579 580 .pure-u-7-12, 581 .pure-u-14-24 { 582 width: 58.3333%; 583 *width: 58.3023%; } 584 585 .pure-u-3-5 { 586 width: 60%; 587 *width: 59.9690%; } 588 589 .pure-u-5-8, 590 .pure-u-15-24 { 591 width: 62.5000%; 592 *width: 62.4690%; } 593 594 .pure-u-2-3, 595 .pure-u-16-24 { 596 width: 66.6667%; 597 *width: 66.6357%; } 598 599 .pure-u-17-24 { 600 width: 70.8333%; 601 *width: 70.8023%; } 602 603 .pure-u-3-4, 604 .pure-u-18-24 { 605 width: 75%; 606 *width: 74.9690%; } 607 608 .pure-u-19-24 { 609 width: 79.1667%; 610 *width: 79.1357%; } 611 612 .pure-u-4-5 { 613 width: 80%; 614 *width: 79.9690%; } 615 616 .pure-u-5-6, 617 .pure-u-20-24 { 618 width: 83.3333%; 619 *width: 83.3023%; } 620 621 .pure-u-7-8, 622 .pure-u-21-24 { 623 width: 87.5000%; 624 *width: 87.4690%; } 625 626 .pure-u-11-12, 627 .pure-u-22-24 { 628 width: 91.6667%; 629 *width: 91.6357%; } 630 631 .pure-u-23-24 { 632 width: 95.8333%; 633 *width: 95.8023%; } 634 635 .pure-u-1, 636 .pure-u-1-1, 637 .pure-u-5-5, 638 .pure-u-24-24 { 639 width: 100%; } 640 641 .pure-button { 642 /* Structure */ 643 display: inline-block; 644 zoom: 1; 645 line-height: normal; 646 white-space: nowrap; 647 vertical-align: middle; 648 text-align: center; 649 cursor: pointer; 650 -webkit-user-drag: none; 651 -webkit-user-select: none; 652 -moz-user-select: none; 653 -ms-user-select: none; 654 user-select: none; 655 box-sizing: border-box; } 656 657 /* Firefox: Get rid of the inner focus border */ 658 .pure-button::-moz-focus-inner { 659 padding: 0; 660 border: 0; } 661 662 /* Inherit .pure-g styles */ 663 .pure-button-group { 664 letter-spacing: -0.31em; 665 /* Webkit: collapse white-space between units */ 666 *letter-spacing: normal; 667 /* reset IE < 8 */ 668 *word-spacing: -0.43em; 669 /* IE < 8: collapse white-space between units */ 670 text-rendering: optimizespeed; 671 /* Webkit: fixes text-rendering: optimizeLegibility */ } 672 673 .opera-only :-o-prefocus, 674 .pure-button-group { 675 word-spacing: -0.43em; } 676 677 .pure-button-group .pure-button { 678 letter-spacing: normal; 679 word-spacing: normal; 680 vertical-align: top; 681 text-rendering: auto; } 682 683 /*csslint outline-none:false*/ 684 .pure-button { 685 font-family: inherit; 686 font-size: 100%; 687 padding: 0.5em 1em; 688 color: #444; 689 /* rgba not supported (IE 8) */ 690 color: rgba(0, 0, 0, 0.8); 691 /* rgba supported */ 692 border: 1px solid #999; 693 /*IE 6/7/8*/ 694 border: none rgba(0, 0, 0, 0); 695 /*IE9 + everything else*/ 696 background-color: #E6E6E6; 697 text-decoration: none; 698 border-radius: 2px; } 699 700 .pure-button-hover, 701 .pure-button:hover, 702 .pure-button:focus { 703 /* csslint ignore:start */ 704 filter: alpha(opacity=90); 705 /* csslint ignore:end */ 706 background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); 707 background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } 708 709 .pure-button:focus { 710 outline: 0; } 711 712 .pure-button-active, 713 .pure-button:active { 714 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; 715 border-color: #000; } 716 717 .pure-button[disabled], 718 .pure-button-disabled, 719 .pure-button-disabled:hover, 720 .pure-button-disabled:focus, 721 .pure-button-disabled:active { 722 border: none; 723 background-image: none; 724 /* csslint ignore:start */ 725 filter: alpha(opacity=40); 726 /* csslint ignore:end */ 727 opacity: 0.40; 728 cursor: not-allowed; 729 box-shadow: none; 730 pointer-events: none; } 731 732 .pure-button-hidden { 733 display: none; } 734 735 .pure-button-primary, 736 .pure-button-selected, 737 a.pure-button-primary, 738 a.pure-button-selected { 739 background-color: #0078e7; 740 color: #fff; } 741 742 /* Button Groups */ 743 .pure-button-group .pure-button { 744 margin: 0; 745 border-radius: 0; 746 border-right: 1px solid #111; 747 /* fallback color for rgba() for IE7/8 */ 748 border-right: 1px solid rgba(0, 0, 0, 0.2); } 749 750 .pure-button-group .pure-button:first-child { 751 border-top-left-radius: 2px; 752 border-bottom-left-radius: 2px; } 753 754 .pure-button-group .pure-button:last-child { 755 border-top-right-radius: 2px; 756 border-bottom-right-radius: 2px; 757 border-right: none; } 758 759 /*csslint box-model:false*/ 760 /* 761 Box-model set to false because we're setting a height on select elements, which 762 also have border and padding. This is done because some browsers don't render 763 the padding. We explicitly set the box-model for select elements to border-box, 764 so we can ignore the csslint warning. 765 */ 766 .pure-form input[type="text"], 767 .pure-form input[type="password"], 768 .pure-form input[type="email"], 769 .pure-form input[type="url"], 770 .pure-form input[type="date"], 771 .pure-form input[type="month"], 772 .pure-form input[type="time"], 773 .pure-form input[type="datetime"], 774 .pure-form input[type="datetime-local"], 775 .pure-form input[type="week"], 776 .pure-form input[type="number"], 777 .pure-form input[type="search"], 778 .pure-form input[type="tel"], 779 .pure-form input[type="color"], 780 .pure-form select, 781 .pure-form textarea { 782 padding: 0.5em 0.6em; 783 display: inline-block; 784 border: 1px solid #ccc; 785 box-shadow: inset 0 1px 3px #ddd; 786 border-radius: 4px; 787 vertical-align: middle; 788 box-sizing: border-box; } 789 790 /* 791 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 792 since IE8 won't execute CSS that contains a CSS3 selector. 793 */ 794 .pure-form input:not([type]) { 795 padding: 0.5em 0.6em; 796 display: inline-block; 797 border: 1px solid #ccc; 798 box-shadow: inset 0 1px 3px #ddd; 799 border-radius: 4px; 800 box-sizing: border-box; } 801 802 /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ 803 /* May be able to remove this tweak as color inputs become more standardized across browsers. */ 804 .pure-form input[type="color"] { 805 padding: 0.2em 0.5em; } 806 807 .pure-form input[type="text"]:focus, 808 .pure-form input[type="password"]:focus, 809 .pure-form input[type="email"]:focus, 810 .pure-form input[type="url"]:focus, 811 .pure-form input[type="date"]:focus, 812 .pure-form input[type="month"]:focus, 813 .pure-form input[type="time"]:focus, 814 .pure-form input[type="datetime"]:focus, 815 .pure-form input[type="datetime-local"]:focus, 816 .pure-form input[type="week"]:focus, 817 .pure-form input[type="number"]:focus, 818 .pure-form input[type="search"]:focus, 819 .pure-form input[type="tel"]:focus, 820 .pure-form input[type="color"]:focus, 821 .pure-form select:focus, 822 .pure-form textarea:focus { 823 outline: 0; 824 border-color: #129FEA; } 825 826 /* 827 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 828 since IE8 won't execute CSS that contains a CSS3 selector. 829 */ 830 .pure-form input:not([type]):focus { 831 outline: 0; 832 border-color: #129FEA; } 833 834 .pure-form input[type="file"]:focus, 835 .pure-form input[type="radio"]:focus, 836 .pure-form input[type="checkbox"]:focus { 837 outline: thin solid #129FEA; 838 outline: 1px auto #129FEA; } 839 840 .pure-form .pure-checkbox, 841 .pure-form .pure-radio { 842 margin: 0.5em 0; 843 display: block; } 844 845 .pure-form input[type="text"][disabled], 846 .pure-form input[type="password"][disabled], 847 .pure-form input[type="email"][disabled], 848 .pure-form input[type="url"][disabled], 849 .pure-form input[type="date"][disabled], 850 .pure-form input[type="month"][disabled], 851 .pure-form input[type="time"][disabled], 852 .pure-form input[type="datetime"][disabled], 853 .pure-form input[type="datetime-local"][disabled], 854 .pure-form input[type="week"][disabled], 855 .pure-form input[type="number"][disabled], 856 .pure-form input[type="search"][disabled], 857 .pure-form input[type="tel"][disabled], 858 .pure-form input[type="color"][disabled], 859 .pure-form select[disabled], 860 .pure-form textarea[disabled] { 861 cursor: not-allowed; 862 background-color: #eaeded; 863 color: #cad2d3; } 864 865 /* 866 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 867 since IE8 won't execute CSS that contains a CSS3 selector. 868 */ 869 .pure-form input:not([type])[disabled] { 870 cursor: not-allowed; 871 background-color: #eaeded; 872 color: #cad2d3; } 873 874 .pure-form input[readonly], 875 .pure-form select[readonly], 876 .pure-form textarea[readonly] { 877 background-color: #eee; 878 /* menu hover bg color */ 879 color: #777; 880 /* menu text color */ 881 border-color: #ccc; } 882 883 .pure-form input:focus:invalid, 884 .pure-form textarea:focus:invalid, 885 .pure-form select:focus:invalid { 886 color: #b94a48; 887 border-color: #e9322d; } 888 889 .pure-form input[type="file"]:focus:invalid:focus, 890 .pure-form input[type="radio"]:focus:invalid:focus, 891 .pure-form input[type="checkbox"]:focus:invalid:focus { 892 outline-color: #e9322d; } 893 894 .pure-form select { 895 /* Normalizes the height; padding is not sufficient. */ 896 height: 2.25em; 897 border: 1px solid #ccc; 898 background-color: white; } 899 900 .pure-form select[multiple] { 901 height: auto; } 902 903 .pure-form label { 904 margin: 0.5em 0 0.2em; } 905 906 .pure-form fieldset { 907 margin: 0; 908 padding: 0.35em 0 0.75em; 909 border: 0; } 910 911 .pure-form legend { 912 display: block; 913 width: 100%; 914 padding: 0.3em 0; 915 margin-bottom: 0.3em; 916 color: #333; 917 border-bottom: 1px solid #e5e5e5; } 918 919 .pure-form-stacked input[type="text"], 920 .pure-form-stacked input[type="password"], 921 .pure-form-stacked input[type="email"], 922 .pure-form-stacked input[type="url"], 923 .pure-form-stacked input[type="date"], 924 .pure-form-stacked input[type="month"], 925 .pure-form-stacked input[type="time"], 926 .pure-form-stacked input[type="datetime"], 927 .pure-form-stacked input[type="datetime-local"], 928 .pure-form-stacked input[type="week"], 929 .pure-form-stacked input[type="number"], 930 .pure-form-stacked input[type="search"], 931 .pure-form-stacked input[type="tel"], 932 .pure-form-stacked input[type="color"], 933 .pure-form-stacked input[type="file"], 934 .pure-form-stacked select, 935 .pure-form-stacked label, 936 .pure-form-stacked textarea { 937 display: block; 938 margin: 0.25em 0; } 939 940 /* 941 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 942 since IE8 won't execute CSS that contains a CSS3 selector. 943 */ 944 .pure-form-stacked input:not([type]) { 945 display: block; 946 margin: 0.25em 0; } 947 948 .pure-form-aligned input, 949 .pure-form-aligned textarea, 950 .pure-form-aligned select, 951 .pure-form-aligned .pure-help-inline, 952 .pure-form-message-inline { 953 display: inline-block; 954 *display: inline; 955 *zoom: 1; 956 vertical-align: middle; } 957 958 .pure-form-aligned textarea { 959 vertical-align: top; } 960 961 /* Aligned Forms */ 962 .pure-form-aligned .pure-control-group { 963 margin-bottom: 0.5em; } 964 965 .pure-form-aligned .pure-control-group label { 966 text-align: right; 967 display: inline-block; 968 vertical-align: middle; 969 width: 10em; 970 margin: 0 1em 0 0; } 971 972 .pure-form-aligned .pure-controls { 973 margin: 1.5em 0 0 11em; } 974 975 /* Rounded Inputs */ 976 .pure-form input.pure-input-rounded, 977 .pure-form .pure-input-rounded { 978 border-radius: 2em; 979 padding: 0.5em 1em; } 980 981 /* Grouped Inputs */ 982 .pure-form .pure-group fieldset { 983 margin-bottom: 10px; } 984 985 .pure-form .pure-group input, 986 .pure-form .pure-group textarea { 987 display: block; 988 padding: 10px; 989 margin: 0 0 -1px; 990 border-radius: 0; 991 position: relative; 992 top: -1px; } 993 994 .pure-form .pure-group input:focus, 995 .pure-form .pure-group textarea:focus { 996 z-index: 3; } 997 998 .pure-form .pure-group input:first-child, 999 .pure-form .pure-group textarea:first-child { 1000 top: 1px; 1001 border-radius: 4px 4px 0 0; 1002 margin: 0; } 1003 1004 .pure-form .pure-group input:first-child:last-child, 1005 .pure-form .pure-group textarea:first-child:last-child { 1006 top: 1px; 1007 border-radius: 4px; 1008 margin: 0; } 1009 1010 .pure-form .pure-group input:last-child, 1011 .pure-form .pure-group textarea:last-child { 1012 top: -2px; 1013 border-radius: 0 0 4px 4px; 1014 margin: 0; } 1015 1016 .pure-form .pure-group button { 1017 margin: 0.35em 0; } 1018 1019 .pure-form .pure-input-1 { 1020 width: 100%; } 1021 1022 .pure-form .pure-input-3-4 { 1023 width: 75%; } 1024 1025 .pure-form .pure-input-2-3 { 1026 width: 66%; } 1027 1028 .pure-form .pure-input-1-2 { 1029 width: 50%; } 1030 1031 .pure-form .pure-input-1-3 { 1032 width: 33%; } 1033 1034 .pure-form .pure-input-1-4 { 1035 width: 25%; } 1036 1037 /* Inline help for forms */ 1038 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ 1039 .pure-form .pure-help-inline, 1040 .pure-form-message-inline { 1041 display: inline-block; 1042 padding-left: 0.3em; 1043 color: #666; 1044 vertical-align: middle; 1045 font-size: 0.875em; } 1046 1047 /* Block help for forms */ 1048 .pure-form-message { 1049 display: block; 1050 color: #666; 1051 font-size: 0.875em; } 1052 1053 @media only screen and (max-width: 480px) { 1054 .pure-form button[type="submit"] { 1055 margin: 0.7em 0 0; } 1056 1057 .pure-form input:not([type]), 1058 .pure-form input[type="text"], 1059 .pure-form input[type="password"], 1060 .pure-form input[type="email"], 1061 .pure-form input[type="url"], 1062 .pure-form input[type="date"], 1063 .pure-form input[type="month"], 1064 .pure-form input[type="time"], 1065 .pure-form input[type="datetime"], 1066 .pure-form input[type="datetime-local"], 1067 .pure-form input[type="week"], 1068 .pure-form input[type="number"], 1069 .pure-form input[type="search"], 1070 .pure-form input[type="tel"], 1071 .pure-form input[type="color"], 1072 .pure-form label { 1073 margin-bottom: 0.3em; 1074 display: block; } 1075 1076 .pure-group input:not([type]), 1077 .pure-group input[type="text"], 1078 .pure-group input[type="password"], 1079 .pure-group input[type="email"], 1080 .pure-group input[type="url"], 1081 .pure-group input[type="date"], 1082 .pure-group input[type="month"], 1083 .pure-group input[type="time"], 1084 .pure-group input[type="datetime"], 1085 .pure-group input[type="datetime-local"], 1086 .pure-group input[type="week"], 1087 .pure-group input[type="number"], 1088 .pure-group input[type="search"], 1089 .pure-group input[type="tel"], 1090 .pure-group input[type="color"] { 1091 margin-bottom: 0; } 1092 1093 .pure-form-aligned .pure-control-group label { 1094 margin-bottom: 0.3em; 1095 text-align: left; 1096 display: block; 1097 width: 100%; } 1098 1099 .pure-form-aligned .pure-controls { 1100 margin: 1.5em 0 0 0; } 1101 1102 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ 1103 .pure-form .pure-help-inline, 1104 .pure-form-message-inline, 1105 .pure-form-message { 1106 display: block; 1107 font-size: 0.75em; 1108 /* Increased bottom padding to make it group with its related input element. */ 1109 padding: 0.2em 0 0.8em; } } 1110 /*csslint adjoining-classes: false, box-model:false*/ 1111 .pure-menu { 1112 box-sizing: border-box; } 1113 1114 .pure-menu-fixed { 1115 position: fixed; 1116 left: 0; 1117 top: 0; 1118 z-index: 3; } 1119 1120 .pure-menu-list, 1121 .pure-menu-item { 1122 position: relative; } 1123 1124 .pure-menu-list { 1125 list-style: none; 1126 margin: 0; 1127 padding: 0; } 1128 1129 .pure-menu-item { 1130 padding: 0; 1131 margin: 0; 1132 height: 100%; } 1133 1134 .pure-menu-link, 1135 .pure-menu-heading { 1136 display: block; 1137 text-decoration: none; 1138 white-space: nowrap; } 1139 1140 /* HORIZONTAL MENU */ 1141 .pure-menu-horizontal { 1142 width: 100%; 1143 white-space: nowrap; } 1144 1145 .pure-menu-horizontal .pure-menu-list { 1146 display: inline-block; } 1147 1148 /* Initial menus should be inline-block so that they are horizontal */ 1149 .pure-menu-horizontal .pure-menu-item, 1150 .pure-menu-horizontal .pure-menu-heading, 1151 .pure-menu-horizontal .pure-menu-separator { 1152 display: inline-block; 1153 *display: inline; 1154 zoom: 1; 1155 vertical-align: middle; } 1156 1157 /* Submenus should still be display: block; */ 1158 .pure-menu-item .pure-menu-item { 1159 display: block; } 1160 1161 .pure-menu-children { 1162 display: none; 1163 position: absolute; 1164 left: 100%; 1165 top: 0; 1166 margin: 0; 1167 padding: 0; 1168 z-index: 3; } 1169 1170 .pure-menu-horizontal .pure-menu-children { 1171 left: 0; 1172 top: auto; 1173 width: inherit; } 1174 1175 .pure-menu-allow-hover:hover > .pure-menu-children, 1176 .pure-menu-active > .pure-menu-children { 1177 display: block; 1178 position: absolute; } 1179 1180 /* Vertical Menus - show the dropdown arrow */ 1181 .pure-menu-has-children > .pure-menu-link:after { 1182 padding-left: 0.5em; 1183 content: "\25B8"; 1184 font-size: small; } 1185 1186 /* Horizontal Menus - show the dropdown arrow */ 1187 .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { 1188 content: "\25BE"; } 1189 1190 /* scrollable menus */ 1191 .pure-menu-scrollable { 1192 overflow-y: scroll; 1193 overflow-x: hidden; } 1194 1195 .pure-menu-scrollable .pure-menu-list { 1196 display: block; } 1197 1198 .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { 1199 display: inline-block; } 1200 1201 .pure-menu-horizontal.pure-menu-scrollable { 1202 white-space: nowrap; 1203 overflow-y: hidden; 1204 overflow-x: auto; 1205 -ms-overflow-style: none; 1206 -webkit-overflow-scrolling: touch; 1207 /* a little extra padding for this style to allow for scrollbars */ 1208 padding: .5em 0; } 1209 1210 .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar { 1211 display: none; } 1212 1213 /* misc default styling */ 1214 .pure-menu-separator, 1215 .pure-menu-horizontal .pure-menu-children .pure-menu-separator { 1216 background-color: #ccc; 1217 height: 1px; 1218 margin: .3em 0; } 1219 1220 .pure-menu-horizontal .pure-menu-separator { 1221 width: 1px; 1222 height: 1.3em; 1223 margin: 0 0.3em; } 1224 1225 /* Need to reset the separator since submenu is vertical */ 1226 .pure-menu-horizontal .pure-menu-children .pure-menu-separator { 1227 display: block; 1228 width: auto; } 1229 1230 .pure-menu-heading { 1231 text-transform: uppercase; 1232 color: #565d64; } 1233 1234 .pure-menu-link { 1235 color: #777; } 1236 1237 .pure-menu-children { 1238 background-color: #fff; } 1239 1240 .pure-menu-link, 1241 .pure-menu-disabled, 1242 .pure-menu-heading { 1243 padding: .5em 1em; } 1244 1245 .pure-menu-disabled { 1246 opacity: .5; } 1247 1248 .pure-menu-disabled .pure-menu-link:hover { 1249 background-color: transparent; } 1250 1251 .pure-menu-active > .pure-menu-link, 1252 .pure-menu-link:hover, 1253 .pure-menu-link:focus { 1254 background-color: #eee; } 1255 1256 .pure-menu-selected .pure-menu-link, 1257 .pure-menu-selected .pure-menu-link:visited { 1258 color: #000; } 1259 1260 .pure-table { 1261 /* Remove spacing between table cells (from Normalize.css) */ 1262 border-collapse: collapse; 1263 border-spacing: 0; 1264 empty-cells: show; 1265 border: 1px solid #cbcbcb; } 1266 1267 .pure-table caption { 1268 color: #000; 1269 font: italic 85%/1 arial, sans-serif; 1270 padding: 1em 0; 1271 text-align: center; } 1272 1273 .pure-table td, 1274 .pure-table th { 1275 border-left: 1px solid #cbcbcb; 1276 /* inner column border */ 1277 border-width: 0 0 0 1px; 1278 font-size: inherit; 1279 margin: 0; 1280 overflow: visible; 1281 /*to make ths where the title is really long work*/ 1282 padding: 0.5em 1em; 1283 /* cell padding */ } 1284 1285 /* Consider removing this next declaration block, as it causes problems when 1286 there's a rowspan on the first cell. Case added to the tests. issue#432 */ 1287 .pure-table td:first-child, 1288 .pure-table th:first-child { 1289 border-left-width: 0; } 1290 1291 .pure-table thead { 1292 background-color: #e0e0e0; 1293 color: #000; 1294 text-align: left; 1295 vertical-align: bottom; } 1296 1297 /* 1298 striping: 1299 even - #fff (white) 1300 odd - #f2f2f2 (light gray) 1301 */ 1302 .pure-table td { 1303 background-color: transparent; } 1304 1305 .pure-table-odd td { 1306 background-color: #f2f2f2; } 1307 1308 /* nth-child selector for modern browsers */ 1309 .pure-table-striped tr:nth-child(2n-1) td { 1310 background-color: #f2f2f2; } 1311 1312 /* BORDERED TABLES */ 1313 .pure-table-bordered td { 1314 border-bottom: 1px solid #cbcbcb; } 1315 1316 .pure-table-bordered tbody > tr:last-child > td { 1317 border-bottom-width: 0; } 1318 1319 /* HORIZONTAL BORDERED TABLES */ 1320 .pure-table-horizontal td, 1321 .pure-table-horizontal th { 1322 border-width: 0 0 1px 0; 1323 border-bottom: 1px solid #cbcbcb; } 1324 1325 .pure-table-horizontal tbody > tr:last-child > td { 1326 border-bottom-width: 0; } 1327 1328 /*# sourceMappingURL=pure.css.map */