├── .gitignore ├── README.md ├── margo-css.zip ├── margo.css ├── margo.min.css ├── margo.scss ├── package.json └── parts ├── _buttons.scss ├── _containers.scss ├── _forms.scss ├── _grid.scss ├── _helpers.scss ├── _lists.scss ├── _miscellaneous.scss ├── _mixins.scss ├── _normalize.scss ├── _segment.scss ├── _tables.scss ├── _tiles.scss ├── _typography.scss └── _variables.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Margo CSS 2 | 3 | A lightweight responsive CSS framework for building websites. 4 | 5 | ### Get Margo CSS 6 | ##### NPM 7 | `npm install margo-css --save` 8 | 9 | ##### zip-file 10 | margo-css.zip : [download link](margo-css.zip) 11 | 12 | ### Check out the styles 13 | [margocss.github.io](https://margocss.github.io) 14 | 15 | ### Read the Documentaition 16 | [Docs](https://margocss.github.io/documentation.html) 17 | -------------------------------------------------------------------------------- /margo-css.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tphdev/margo-css/67304545f61ef798331a2d3beaadc18795b71b90/margo-css.zip -------------------------------------------------------------------------------- /margo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import url(https://fonts.googleapis.com/css?family=Libre+Franklin:400,600,600italic,400italic,200italic,200); 3 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 4 | /* Document 5 | ========================================================================== */ 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | html { 12 | line-height: 1.15; 13 | /* 1 */ 14 | -ms-text-size-adjust: 100%; 15 | /* 2 */ 16 | -webkit-text-size-adjust: 100%; 17 | /* 2 */ } 18 | 19 | /* Sections 20 | ========================================================================== */ 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | body { 25 | margin: 0; } 26 | 27 | /** 28 | * Add the correct display in IE 9-. 29 | */ 30 | article, 31 | aside, 32 | footer, 33 | header, 34 | nav, 35 | section { 36 | display: block; } 37 | 38 | /** 39 | * Correct the font size and margin on `h1` elements within `section` and 40 | * `article` contexts in Chrome, Firefox, and Safari. 41 | */ 42 | h1 { 43 | font-size: 2em; 44 | margin: 0.67em 0; } 45 | 46 | /* Grouping content 47 | ========================================================================== */ 48 | /** 49 | * Add the correct display in IE 9-. 50 | * 1. Add the correct display in IE. 51 | */ 52 | figcaption, 53 | figure, 54 | main { 55 | /* 1 */ 56 | display: block; } 57 | 58 | /** 59 | * Add the correct margin in IE 8. 60 | */ 61 | figure { 62 | margin: 1em 40px; } 63 | 64 | /** 65 | * 1. Add the correct box sizing in Firefox. 66 | * 2. Show the overflow in Edge and IE. 67 | */ 68 | hr { 69 | box-sizing: content-box; 70 | /* 1 */ 71 | height: 0; 72 | /* 1 */ 73 | overflow: visible; 74 | /* 2 */ } 75 | 76 | /** 77 | * 1. Correct the inheritance and scaling of font size in all browsers. 78 | * 2. Correct the odd `em` font sizing in all browsers. 79 | */ 80 | pre { 81 | font-family: monospace, monospace; 82 | /* 1 */ 83 | font-size: 1em; 84 | /* 2 */ } 85 | 86 | /* Text-level semantics 87 | ========================================================================== */ 88 | /** 89 | * 1. Remove the gray background on active links in IE 10. 90 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 91 | */ 92 | a { 93 | background-color: transparent; 94 | /* 1 */ 95 | -webkit-text-decoration-skip: objects; 96 | /* 2 */ } 97 | 98 | /** 99 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 100 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 101 | */ 102 | abbr[title] { 103 | border-bottom: none; 104 | /* 1 */ 105 | text-decoration: underline; 106 | /* 2 */ 107 | text-decoration: underline dotted; 108 | /* 2 */ } 109 | 110 | /** 111 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 112 | */ 113 | b, 114 | strong { 115 | font-weight: inherit; } 116 | 117 | /** 118 | * Add the correct font weight in Chrome, Edge, and Safari. 119 | */ 120 | b, 121 | strong { 122 | font-weight: bolder; } 123 | 124 | /** 125 | * 1. Correct the inheritance and scaling of font size in all browsers. 126 | * 2. Correct the odd `em` font sizing in all browsers. 127 | */ 128 | code, 129 | kbd, 130 | samp { 131 | font-family: monospace, monospace; 132 | /* 1 */ 133 | font-size: 1em; 134 | /* 2 */ } 135 | 136 | /** 137 | * Add the correct font style in Android 4.3-. 138 | */ 139 | dfn { 140 | font-style: italic; } 141 | 142 | /** 143 | * Add the correct background and color in IE 9-. 144 | */ 145 | mark { 146 | background-color: #ff0; 147 | color: #000; } 148 | 149 | /** 150 | * Add the correct font size in all browsers. 151 | */ 152 | small { 153 | font-size: 80%; } 154 | 155 | /** 156 | * Prevent `sub` and `sup` elements from affecting the line height in 157 | * all browsers. 158 | */ 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; } 165 | 166 | sub { 167 | bottom: -0.25em; } 168 | 169 | sup { 170 | top: -0.5em; } 171 | 172 | /* Embedded content 173 | ========================================================================== */ 174 | /** 175 | * Add the correct display in IE 9-. 176 | */ 177 | audio, 178 | video { 179 | display: inline-block; } 180 | 181 | /** 182 | * Add the correct display in iOS 4-7. 183 | */ 184 | audio:not([controls]) { 185 | display: none; 186 | height: 0; } 187 | 188 | /** 189 | * Remove the border on images inside links in IE 10-. 190 | */ 191 | img { 192 | border-style: none; } 193 | 194 | /** 195 | * Hide the overflow in IE. 196 | */ 197 | svg:not(:root) { 198 | overflow: hidden; } 199 | 200 | /* Forms 201 | ========================================================================== */ 202 | /** 203 | * 1. Change the font styles in all browsers (opinionated). 204 | * 2. Remove the margin in Firefox and Safari. 205 | */ 206 | button, 207 | input, 208 | optgroup, 209 | select, 210 | textarea { 211 | font-family: sans-serif; 212 | /* 1 */ 213 | font-size: 100%; 214 | /* 1 */ 215 | line-height: 1.15; 216 | /* 1 */ 217 | margin: 0; 218 | /* 2 */ } 219 | 220 | /** 221 | * Show the overflow in IE. 222 | * 1. Show the overflow in Edge. 223 | */ 224 | button, 225 | input { 226 | /* 1 */ 227 | overflow: visible; } 228 | 229 | /** 230 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 231 | * 1. Remove the inheritance of text transform in Firefox. 232 | */ 233 | button, 234 | select { 235 | /* 1 */ 236 | text-transform: none; } 237 | 238 | /** 239 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 240 | * controls in Android 4. 241 | * 2. Correct the inability to style clickable types in iOS and Safari. 242 | */ 243 | button, 244 | html [type="button"], 245 | [type="reset"], 246 | [type="submit"] { 247 | -webkit-appearance: button; 248 | /* 2 */ } 249 | 250 | /** 251 | * Remove the inner border and padding in Firefox. 252 | */ 253 | button::-moz-focus-inner, 254 | [type="button"]::-moz-focus-inner, 255 | [type="reset"]::-moz-focus-inner, 256 | [type="submit"]::-moz-focus-inner { 257 | border-style: none; 258 | padding: 0; } 259 | 260 | /** 261 | * Restore the focus styles unset by the previous rule. 262 | */ 263 | button:-moz-focusring, 264 | [type="button"]:-moz-focusring, 265 | [type="reset"]:-moz-focusring, 266 | [type="submit"]:-moz-focusring { 267 | outline: 1px dotted ButtonText; } 268 | 269 | /** 270 | * Correct the padding in Firefox. 271 | */ 272 | fieldset { 273 | padding: 0.35em 0.75em 0.625em; } 274 | 275 | /** 276 | * 1. Correct the text wrapping in Edge and IE. 277 | * 2. Correct the color inheritance from `fieldset` elements in IE. 278 | * 3. Remove the padding so developers are not caught out when they zero out 279 | * `fieldset` elements in all browsers. 280 | */ 281 | legend { 282 | box-sizing: border-box; 283 | /* 1 */ 284 | color: inherit; 285 | /* 2 */ 286 | display: table; 287 | /* 1 */ 288 | max-width: 100%; 289 | /* 1 */ 290 | padding: 0; 291 | /* 3 */ 292 | white-space: normal; 293 | /* 1 */ } 294 | 295 | /** 296 | * 1. Add the correct display in IE 9-. 297 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 298 | */ 299 | progress { 300 | display: inline-block; 301 | /* 1 */ 302 | vertical-align: baseline; 303 | /* 2 */ } 304 | 305 | /** 306 | * Remove the default vertical scrollbar in IE. 307 | */ 308 | textarea { 309 | overflow: auto; } 310 | 311 | /** 312 | * 1. Add the correct box sizing in IE 10-. 313 | * 2. Remove the padding in IE 10-. 314 | */ 315 | [type="checkbox"], 316 | [type="radio"] { 317 | box-sizing: border-box; 318 | /* 1 */ 319 | padding: 0; 320 | /* 2 */ } 321 | 322 | /** 323 | * Correct the cursor style of increment and decrement buttons in Chrome. 324 | */ 325 | [type="number"]::-webkit-inner-spin-button, 326 | [type="number"]::-webkit-outer-spin-button { 327 | height: auto; } 328 | 329 | /** 330 | * 1. Correct the odd appearance in Chrome and Safari. 331 | * 2. Correct the outline style in Safari. 332 | */ 333 | [type="search"] { 334 | -webkit-appearance: textfield; 335 | /* 1 */ 336 | outline-offset: -2px; 337 | /* 2 */ } 338 | 339 | /** 340 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 341 | */ 342 | [type="search"]::-webkit-search-cancel-button, 343 | [type="search"]::-webkit-search-decoration { 344 | -webkit-appearance: none; } 345 | 346 | /** 347 | * 1. Correct the inability to style clickable types in iOS and Safari. 348 | * 2. Change font properties to `inherit` in Safari. 349 | */ 350 | ::-webkit-file-upload-button { 351 | -webkit-appearance: button; 352 | /* 1 */ 353 | font: inherit; 354 | /* 2 */ } 355 | 356 | /* Interactive 357 | ========================================================================== */ 358 | /* 359 | * Add the correct display in IE 9-. 360 | * 1. Add the correct display in Edge, IE, and Firefox. 361 | */ 362 | details, 363 | menu { 364 | display: block; } 365 | 366 | /* 367 | * Add the correct display in all browsers. 368 | */ 369 | summary { 370 | display: list-item; } 371 | 372 | /* Scripting 373 | ========================================================================== */ 374 | /** 375 | * Add the correct display in IE 9-. 376 | */ 377 | canvas { 378 | display: inline-block; } 379 | 380 | /** 381 | * Add the correct display in IE. 382 | */ 383 | template { 384 | display: none; } 385 | 386 | /* Hidden 387 | ========================================================================== */ 388 | /** 389 | * Add the correct display in IE 10-. 390 | */ 391 | [hidden] { 392 | display: none; } 393 | 394 | /* 395 | ** Sane Defaults 396 | */ 397 | input[type='button'], 398 | input[type='submit'] { 399 | -moz-appearance: none; 400 | -webkit-appearance: none; } 401 | 402 | button, .M-btn, button.M-btn, input[type='button'], input[type='submit'], a.M-btn--md, a.M-btn { 403 | display: inline-block; 404 | text-decoration: none; 405 | background: #fff; 406 | margin-top: .25rem; 407 | margin-bottom: .25rem; 408 | outline: 0; 409 | border: 1px solid #333; 410 | padding: 0.75rem 1.25rem; 411 | border-radius: 2px; 412 | font-size: 1rem; 413 | cursor: pointer; 414 | color: #333; } 415 | button.M-btn--sm, .M-btn.M-btn--sm, button.M-btn.M-btn--sm, input[type='button'].M-btn--sm, input[type='submit'].M-btn--sm, a.M-btn--md.M-btn--sm, a.M-btn.M-btn--sm { 416 | font-size: .75rem; 417 | padding: .5rem 1.25rem; } 418 | button.M-btn--lg, .M-btn.M-btn--lg, button.M-btn.M-btn--lg, input[type='button'].M-btn--lg, input[type='submit'].M-btn--lg, a.M-btn--md.M-btn--lg, a.M-btn.M-btn--lg { 419 | font-size: 1.5rem; 420 | padding: 1rem 1.75rem; } 421 | button.M-btn--block, .M-btn.M-btn--block, button.M-btn.M-btn--block, input[type='button'].M-btn--block, input[type='submit'].M-btn--block, a.M-btn--md.M-btn--block, a.M-btn.M-btn--block { 422 | width: 100%; } 423 | button:hover, .M-btn:hover, button.M-btn:hover, input[type='button']:hover, input[type='submit']:hover, a.M-btn--md:hover, a.M-btn:hover { 424 | background: #d2d7d3; } 425 | button.M-btn--primary, .M-btn.M-btn--primary, button.M-btn.M-btn--primary, input[type='button'].M-btn--primary, input[type='submit'].M-btn--primary, a.M-btn--md.M-btn--primary, a.M-btn.M-btn--primary { 426 | background: #3a539b; 427 | color: #fff; } 428 | button.M-btn--primary:hover, .M-btn.M-btn--primary:hover, button.M-btn.M-btn--primary:hover, input[type='button'].M-btn--primary:hover, input[type='submit'].M-btn--primary:hover, a.M-btn--md.M-btn--primary:hover, a.M-btn.M-btn--primary:hover { 429 | background: #5c97bf; } 430 | 431 | /* Body Content - container */ 432 | .M-container--narrow { 433 | max-width: 960px; 434 | padding: 0 5px; 435 | margin: 0 auto; 436 | width: 95%; } 437 | 438 | .M-container--full { 439 | width: 100%; } 440 | 441 | .M-input-paddings, .M-form-group input[type='text'], 442 | .M-form-group input[type='email'], 443 | .M-form-group input[type='password'], 444 | .M-form-group input[type='date'], 445 | .M-form-group select, .M-form-group textarea, 446 | input[type='text'], 447 | input[type='email'], 448 | input[type='date'], 449 | input[type='password'] { 450 | padding: 0 .75rem; 451 | height: 2.5rem; } 452 | 453 | input[type='date'], 454 | input[type='email'], 455 | input[type='password'] { 456 | padding: 0 0.1 0.25rem; } 457 | 458 | .M-input-defaults, 459 | input[type='text'], 460 | input[type='email'], 461 | input[type='password'], 462 | select, 463 | textarea { 464 | line-height: 1.5; 465 | outline: 0; 466 | border: #bfbfbf 1px solid; 467 | font-size: 1rem; 468 | border-radius: 2px; 469 | margin-bottom: 1.25rem; 470 | background: #fff; } 471 | .M-input-defaults:focus, 472 | input[type='text']:focus, 473 | input[type='email']:focus, 474 | input[type='password']:focus, 475 | select:focus, 476 | textarea:focus { 477 | border: 1px solid #5c97bf; } 478 | 479 | .M-textarea, .M-form-group input[type='text'], 480 | .M-form-group input[type='email'], 481 | .M-form-group input[type='password'], 482 | .M-form-group input[type='date'], 483 | .M-form-group select, 484 | .M-form-group textarea { 485 | width: 100%; 486 | padding: .5rem .75rem; } 487 | .M-textarea:focus, .M-form-group input[type='text']:focus, 488 | .M-form-group input[type='email']:focus, 489 | .M-form-group input[type='password']:focus, 490 | .M-form-group input[type='date']:focus, 491 | .M-form-group select:focus, 492 | .M-form-group textarea:focus { 493 | border: 1px solid #5c97bf; } 494 | 495 | .M-form-group { 496 | display: block; } 497 | .M-form-group input[type='text'], 498 | .M-form-group input[type='email'], 499 | .M-form-group input[type='password'], 500 | .M-form-group input[type='date'], 501 | .M-form-group select, 502 | .M-form-group textarea { 503 | width: 100%; } 504 | 505 | .M-form-group__field { 506 | display: inline-block; 507 | padding: 0 .25rem; } 508 | .M-form-group__field .M-form-group__field_label { 509 | display: block; 510 | font-weight: 700; 511 | margin-bottom: .5rem; } 512 | .M-form-group__field .M-form-group__field_input, 513 | .M-form-group__field input[type='text'].M-form-group__field_input, 514 | .M-form-group__field input[type='email'].M-form-group__field_input, 515 | .M-form-group__field input[type='password'].M-form-group__field_input, 516 | .M-form-group__field select.M-form-group__field_input, 517 | .M-form-group__field textarea.M-form-group__field_input { 518 | display: block; } 519 | 520 | .M-checkbox { 521 | padding: initial; 522 | -webkit-appearance: none; 523 | padding: 0; 524 | display: inline-block; 525 | margin: 0 3px 0 0; 526 | vertical-align: bottom; 527 | width: 24px; 528 | height: 24px; 529 | border: 1px #333 solid; 530 | position: relative; 531 | z-index: 9; } 532 | .M-checkbox:focus { 533 | outline: 0; } 534 | .M-checkbox:checked { 535 | background-color: #5C97BF; } 536 | .M-checkbox:checked:after { 537 | position: absolute; 538 | top: 40%; 539 | left: 50%; 540 | z-index: 10; 541 | content: ""; 542 | display: block; 543 | width: 11px; 544 | height: 5px; 545 | -webkit-transform: translate(-50%, -50%) rotate(-45deg); 546 | transform: translate(-50%, -50%) rotate(-45deg); 547 | border-left: 2px solid #fff; 548 | border-bottom: 2px solid #fff; } 549 | 550 | .M-radiocheck { 551 | -webkit-appearance: none; 552 | margin-right: .75rem; } 553 | .M-radiocheck > input[type="radio"], 554 | .M-radiocheck > input[type="checkbox"], 555 | .M-radiocheck > span { 556 | display: inline-block; 557 | vertical-align: middle; } 558 | .M-radiocheck > span { 559 | font-weight: initial; } 560 | 561 | .M-radio { 562 | padding: 0; 563 | margin: 0 3px 0 0px; 564 | -webkit-appearance: none; 565 | display: inline-block; 566 | vertical-align: bottom; 567 | width: 24px; 568 | height: 24px; 569 | border: 1px #333 solid; 570 | border-radius: 50%; 571 | position: relative; 572 | z-index: 9; } 573 | .M-radio:focus { 574 | outline: 0; } 575 | .M-radio:checked:after { 576 | position: absolute; 577 | background-color: #5C97BF; 578 | top: 50%; 579 | left: 50%; 580 | z-index: 10; 581 | content: ""; 582 | display: block; 583 | border-radius: 50%; 584 | width: 16px; 585 | height: 16px; 586 | -webkit-transform: translate(-50%, -50%) rotate(-45deg); 587 | transform: translate(-50%, -50%) rotate(-45deg); } 588 | 589 | .M-select { 590 | -webkit-appearance: none; 591 | background: #ddd; } 592 | .M-select:before { 593 | background: #333; 594 | width: 3px; 595 | height: 3px; 596 | border-bottom: 2px solid #333; 597 | border-left: 2px solid #333; } 598 | 599 | input[type='date'] { 600 | font-family: "Libre Franklin", "Helvetica Neue", "Helvetica", "Calibri", sans-serif; } 601 | 602 | .M-grid { 603 | font-size: 0; } 604 | .M-grid > * { 605 | font-size: medium; 606 | vertical-align: top; 607 | width: 100%; } 608 | 609 | .M-grid__sm-0-of-12 { 610 | display: none; } 611 | 612 | .M-grid__sm-1-of-12 { 613 | display: inline-block; 614 | width: 8.33333%; 615 | margin-left: 0; 616 | margin-right: 0; } 617 | 618 | .M-grid__sm-2-of-12 { 619 | display: inline-block; 620 | width: 16.66667%; 621 | margin-left: 0; 622 | margin-right: 0; } 623 | 624 | .M-grid__sm-3-of-12 { 625 | display: inline-block; 626 | width: 25%; 627 | margin-left: 0; 628 | margin-right: 0; } 629 | 630 | .M-grid__sm-4-of-12 { 631 | display: inline-block; 632 | width: 33.33333%; 633 | margin-left: 0; 634 | margin-right: 0; } 635 | 636 | .M-grid__sm-5-of-12 { 637 | display: inline-block; 638 | width: 41.66667%; 639 | margin-left: 0; 640 | margin-right: 0; } 641 | 642 | .M-grid__sm-6-of-12 { 643 | display: inline-block; 644 | width: 50%; 645 | margin-left: 0; 646 | margin-right: 0; } 647 | 648 | .M-grid__sm-7-of-12 { 649 | display: inline-block; 650 | width: 58.33333%; 651 | margin-left: 0; 652 | margin-right: 0; } 653 | 654 | .M-grid__sm-8-of-12 { 655 | display: inline-block; 656 | width: 66.66667%; 657 | margin-left: 0; 658 | margin-right: 0; } 659 | 660 | .M-grid__sm-9-of-12 { 661 | display: inline-block; 662 | width: 75%; 663 | margin-left: 0; 664 | margin-right: 0; } 665 | 666 | .M-grid__sm-10-of-12 { 667 | display: inline-block; 668 | width: 83.33333%; 669 | margin-left: 0; 670 | margin-right: 0; } 671 | 672 | .M-grid__sm-11-of-12 { 673 | display: inline-block; 674 | width: 91.66667%; 675 | margin-left: 0; 676 | margin-right: 0; } 677 | 678 | .M-grid__sm-12-of-12 { 679 | display: inline-block; 680 | width: 100%; 681 | margin-left: 0; 682 | margin-right: 0; } 683 | 684 | @media screen and (min-width: 750px) { 685 | .M-grid__md-0-of-12 { 686 | display: none; } 687 | 688 | .M-grid__md-1-of-12 { 689 | display: inline-block; 690 | width: 8.33333%; 691 | margin-left: 0; 692 | margin-right: 0; } 693 | 694 | .M-grid__md-2-of-12 { 695 | display: inline-block; 696 | width: 16.66667%; 697 | margin-left: 0; 698 | margin-right: 0; } 699 | 700 | .M-grid__md-3-of-12 { 701 | display: inline-block; 702 | width: 25%; 703 | margin-left: 0; 704 | margin-right: 0; } 705 | 706 | .M-grid__md-4-of-12 { 707 | display: inline-block; 708 | width: 33.33333%; 709 | margin-left: 0; 710 | margin-right: 0; } 711 | 712 | .M-grid__md-5-of-12 { 713 | display: inline-block; 714 | width: 41.66667%; 715 | margin-left: 0; 716 | margin-right: 0; } 717 | 718 | .M-grid__md-6-of-12 { 719 | display: inline-block; 720 | width: 50%; 721 | margin-left: 0; 722 | margin-right: 0; } 723 | 724 | .M-grid__md-7-of-12 { 725 | display: inline-block; 726 | width: 58.33333%; 727 | margin-left: 0; 728 | margin-right: 0; } 729 | 730 | .M-grid__md-8-of-12 { 731 | display: inline-block; 732 | width: 66.66667%; 733 | margin-left: 0; 734 | margin-right: 0; } 735 | 736 | .M-grid__md-9-of-12 { 737 | display: inline-block; 738 | width: 75%; 739 | margin-left: 0; 740 | margin-right: 0; } 741 | 742 | .M-grid__md-10-of-12 { 743 | display: inline-block; 744 | width: 83.33333%; 745 | margin-left: 0; 746 | margin-right: 0; } 747 | 748 | .M-grid__md-11-of-12 { 749 | display: inline-block; 750 | width: 91.66667%; 751 | margin-left: 0; 752 | margin-right: 0; } 753 | 754 | .M-grid__md-12-of-12 { 755 | display: inline-block; 756 | width: 100%; 757 | margin-left: 0; 758 | margin-right: 0; } } 759 | @media screen and (min-width: 1000px) { 760 | .M-grid__lg-0-of-12 { 761 | display: none; } 762 | 763 | .M-grid__lg-1-of-12 { 764 | display: inline-block; 765 | width: 8.33333%; 766 | margin-left: 0; 767 | margin-right: 0; } 768 | 769 | .M-grid__lg-2-of-12 { 770 | display: inline-block; 771 | width: 16.66667%; 772 | margin-left: 0; 773 | margin-right: 0; } 774 | 775 | .M-grid__lg-3-of-12 { 776 | display: inline-block; 777 | width: 25%; 778 | margin-left: 0; 779 | margin-right: 0; } 780 | 781 | .M-grid__lg-4-of-12 { 782 | display: inline-block; 783 | width: 33.33333%; 784 | margin-left: 0; 785 | margin-right: 0; } 786 | 787 | .M-grid__lg-5-of-12 { 788 | display: inline-block; 789 | width: 41.66667%; 790 | margin-left: 0; 791 | margin-right: 0; } 792 | 793 | .M-grid__lg-6-of-12 { 794 | display: inline-block; 795 | width: 50%; 796 | margin-left: 0; 797 | margin-right: 0; } 798 | 799 | .M-grid__lg-7-of-12 { 800 | display: inline-block; 801 | width: 58.33333%; 802 | margin-left: 0; 803 | margin-right: 0; } 804 | 805 | .M-grid__lg-8-of-12 { 806 | display: inline-block; 807 | width: 66.66667%; 808 | margin-left: 0; 809 | margin-right: 0; } 810 | 811 | .M-grid__lg-9-of-12 { 812 | display: inline-block; 813 | width: 75%; 814 | margin-left: 0; 815 | margin-right: 0; } 816 | 817 | .M-grid__lg-10-of-12 { 818 | display: inline-block; 819 | width: 83.33333%; 820 | margin-left: 0; 821 | margin-right: 0; } 822 | 823 | .M-grid__lg-11-of-12 { 824 | display: inline-block; 825 | width: 91.66667%; 826 | margin-left: 0; 827 | margin-right: 0; } 828 | 829 | .M-grid__lg-12-of-12 { 830 | display: inline-block; 831 | width: 100%; 832 | margin-left: 0; 833 | margin-right: 0; } } 834 | .M-text--center { 835 | text-align: center; } 836 | 837 | .M-text--left { 838 | text-left: left; } 839 | 840 | .M-text--justify { 841 | text-align: justify; } 842 | 843 | .M-text--right { 844 | text-align: right; } 845 | 846 | .M-text--primary { 847 | color: #3a539b; } 848 | 849 | .M-text--success { 850 | color: #019875; } 851 | 852 | .M-text--fail { 853 | color: #E26A6A; } 854 | 855 | .M-text--warn { 856 | color: #F4B350; } 857 | 858 | .M-text--info { 859 | color: #5C97BF; } 860 | 861 | .M-text--muted { 862 | color: #95A5A6; } 863 | 864 | button.M-bg--inverted, 865 | input[type="submit"].M-bg--inverted, 866 | a.M-bg--inverted, 867 | .M-bg--inverted, 868 | table tbody tr.M-bg--inverted, 869 | table thead tr.M-bg--inverted, 870 | table.M-table--striped thead tr.M-bg--inverted, 871 | table.M-table--striped tbody tr.M-bg--inverted { 872 | background: #333; 873 | color: #fff; } 874 | 875 | button.M-bg--success, 876 | input[type="submit"].M-bg--success, 877 | a.M-bg--success, 878 | .M-bg--success, 879 | table tbody tr.M-bg--success, 880 | table thead tr.M-bg--success, 881 | table.M-table--striped thead tr.M-bg--success, 882 | table.M-table--striped tbody tr.M-bg--success { 883 | background: #019875; 884 | color: #fff; } 885 | 886 | button.M-bg--success:hover, 887 | input[type="submit"].M-bg--success:hover, 888 | a.M-bg--success:hover { 889 | background: #34CBA8; } 890 | 891 | button.M-bg--info, 892 | input[type="submit"].M-bg--info, 893 | a.M-bg--info, 894 | .M-bg--info, 895 | table tbody tr.M-bg--info, 896 | table thead tr.M-bg--info, 897 | table.M-table--striped thead tr.M-bg--info, 898 | table.M-table--striped tbody tr.M-bg--info { 899 | background: #5C97BF; 900 | color: #fff; } 901 | 902 | button.M-bg--info:hover, 903 | input[type="submit"].M-bg--info:hover, 904 | a.M-bg--info:hover { 905 | background: #8FCAF2; } 906 | 907 | button.M-bg--warn, 908 | a.M-bg--warn, 909 | input[type="submit"].M-bg--warn, 910 | .M-bg--warn, 911 | table tbody tr.M-bg--warn, 912 | table thead tr.M-bg--warn, 913 | table.M-table--striped thead tr.M-bg--warn, 914 | table.M-table--striped tbody tr.M-bg--warn { 915 | background: #F4B350; } 916 | 917 | button.M-bg--warn:hover, 918 | a.M-bg--warn:hover, 919 | input[type="submit"].M-bg--warn:hover { 920 | background: #FFE683; } 921 | 922 | button.M-bg--fail, 923 | a.M-bg--fail, 924 | .M-bg--fail, 925 | table tbody tr.M-bg--fail, 926 | table thead tr.M-bg--fail, 927 | table.M-table--striped thead tr.M-bg--fail, 928 | table.M-table--striped tbody tr.M-bg--fail { 929 | background: #E26A6A; 930 | color: #fff; } 931 | 932 | button.M-bg--fail:hover, 933 | a.M-bg--fail:hover, 934 | input[type="submit"].M-bg--fail:hover { 935 | background: #FF9D9D; } 936 | 937 | button.M-bg--disabled, 938 | a.M-bg--disabled, 939 | .M-bg--disabled, 940 | table tbody tr.M-bg--disabled, 941 | table thead tr.M-bg--disabled, 942 | table.M-table--striped thead tr.M-bg--disabled, 943 | table.M-table--striped tbody tr.M-bg--disabled { 944 | background: #d2d7d3; 945 | opacity: 0.4; } 946 | 947 | button.M-bg--primary, 948 | a.M-bg--primary, 949 | .M-bg--primary, 950 | table tbody tr.M-bg--primary, 951 | table thead tr.M-bg--primary, 952 | table.M-table--striped thead tr.M-bg--primary, 953 | table.M-table--striped tbody tr.M-bg--primary { 954 | background: #3a539b; 955 | color: #fff; } 956 | 957 | ul, ol { 958 | padding-left: 1.25rem; 959 | margin: .5rem 0; } 960 | ul ul, ul ol, ol ul, ol ol { 961 | margin: 0rem 0 .5rem 0; } 962 | 963 | ul > li { 964 | padding-left: .25rem; } 965 | ul ul { 966 | padding-left: 0.75rem; } 967 | 968 | ol > li { 969 | padding-left: .5rem; } 970 | ol ol { 971 | list-style-type: lower-alpha; } 972 | ol ol ol { 973 | list-style-type: lower-roman; } 974 | 975 | .M-blockquote { 976 | border-left: #bfbfbf 0.5rem solid; 977 | background: #eeeeee; 978 | padding: 1.25rem 1rem; 979 | margin: 1rem; 980 | font-size: 1.0rem; } 981 | @media screen and (min-width: 750px) { 982 | .M-blockquote { 983 | font-size: 1.125rem; } } 984 | .M-blockquote > * { 985 | margin: .5rem; } 986 | .M-blockquote > *:first-child { 987 | margin-top: 0; } 988 | .M-blockquote > *:last-child { 989 | margin-bottom: 0; } 990 | 991 | .M-cite { 992 | display: block; 993 | margin-top: 1.5rem; 994 | color: #95A5A6; 995 | text-indent: -.75rem; 996 | margin-left: .75rem; 997 | font-size: .875rem; 998 | font-style: normal; } 999 | .M-cite:before { 1000 | content: "— "; } 1001 | @media screen and (min-width: 750px) { 1002 | .M-cite { 1003 | font-size: 1rem; } } 1004 | 1005 | pre { 1006 | margin: 1rem auto; 1007 | overflow: auto; 1008 | width: 90%; 1009 | background: #eeeeee; 1010 | padding: 1rem; 1011 | font-size: 1rem; } 1012 | @media screen and (min-width: 750px) { 1013 | pre { 1014 | font-size: 1.125rem; } } 1015 | @media screen and (min-width: 1000px) { 1016 | pre { 1017 | font-size: 1.125rem; } } 1018 | pre code { 1019 | padding: 0; } 1020 | 1021 | code { 1022 | background: #eeeeee; 1023 | color: #96281B; 1024 | padding: .1em .2em; 1025 | margin: 0 1px; 1026 | font-family: monospace; 1027 | font-size: 1em; } 1028 | 1029 | .M-segment { 1030 | position: relative; 1031 | box-shadow: 0 1px 2px 0 rgba(191, 191, 191, 0.5); 1032 | margin: 1rem 0; 1033 | padding: 1rem; 1034 | border-radius: 2px; 1035 | border: 1px solid #bfbfbf; } 1036 | .M-segment > *:first-child { 1037 | margin-top: 0; } 1038 | .M-segment > *:last-child { 1039 | margin-bottom: 0; } 1040 | 1041 | .M-table--full-width { 1042 | width: 100%; } 1043 | 1044 | .M-table--striped tbody tr:nth-child(2n) { 1045 | background: #eeeeee; } 1046 | 1047 | .M-table { 1048 | border-collapse: collapse; 1049 | table-layout: fixed; 1050 | margin: 1rem 0; } 1051 | .M-table th:first-child, 1052 | .M-table td:first-child { 1053 | padding-left: .375rem; } 1054 | .M-table th, 1055 | .M-table td { 1056 | text-align: left; 1057 | padding: .75rem 0 .75rem 2rem; } 1058 | .M-table th.tcol-1rem, 1059 | .M-table td.tcol-1rem { 1060 | width: 1rem; } 1061 | .M-table th.tcol-2rem, 1062 | .M-table td.tcol-2rem { 1063 | width: 2rem; } 1064 | .M-table th.tcol-3rem, 1065 | .M-table td.tcol-3rem { 1066 | width: 3rem; } 1067 | .M-table th.tcol-4rem, 1068 | .M-table td.tcol-4rem { 1069 | width: 4rem; } 1070 | .M-table th.tcol-5rem, 1071 | .M-table td.tcol-5rem { 1072 | width: 5rem; } 1073 | .M-table th.tcol-6rem, 1074 | .M-table td.tcol-6rem { 1075 | width: 6rem; } 1076 | .M-table th.tcol-7rem, 1077 | .M-table td.tcol-7rem { 1078 | width: 7rem; } 1079 | .M-table th.tcol-8rem, 1080 | .M-table td.tcol-8rem { 1081 | width: 8rem; } 1082 | .M-table th.tcol-9rem, 1083 | .M-table td.tcol-9rem { 1084 | width: 9rem; } 1085 | .M-table th.tcol-10rem, 1086 | .M-table td.tcol-10rem { 1087 | width: 10rem; } 1088 | @media screen and (min-width: 750px) { 1089 | .M-table th.tcol-1rem, 1090 | .M-table td.tcol-1rem { 1091 | width: inherit; } 1092 | .M-table th.tcol-2rem, 1093 | .M-table td.tcol-2rem { 1094 | width: inherit; } 1095 | .M-table th.tcol-3rem, 1096 | .M-table td.tcol-3rem { 1097 | width: inherit; } 1098 | .M-table th.tcol-4rem, 1099 | .M-table td.tcol-4rem { 1100 | width: inherit; } 1101 | .M-table th.tcol-5rem, 1102 | .M-table td.tcol-5rem { 1103 | width: inherit; } 1104 | .M-table th.tcol-6rem, 1105 | .M-table td.tcol-6rem { 1106 | width: inherit; } 1107 | .M-table th.tcol-7rem, 1108 | .M-table td.tcol-7rem { 1109 | width: inherit; } 1110 | .M-table th.tcol-8rem, 1111 | .M-table td.tcol-8rem { 1112 | width: inherit; } 1113 | .M-table th.tcol-9rem, 1114 | .M-table td.tcol-9rem { 1115 | width: inherit; } 1116 | .M-table th.tcol-10rem, 1117 | .M-table td.tcol-10rem { 1118 | width: inherit; } } 1119 | .M-table thead th { 1120 | border-bottom: #333 2px solid; } 1121 | .M-table tbody td { 1122 | border-bottom: #95A5A6 1px solid; } 1123 | 1124 | .M-tile { 1125 | position: relative; } 1126 | .M-tile .M-tile__content { 1127 | position: absolute; 1128 | top: 0; 1129 | bottom: 0; 1130 | left: 0; 1131 | right: 0; 1132 | overflow: hidden; } 1133 | .M-tile.M-tile--sm-1-x-1 { 1134 | padding-bottom: 100%; } 1135 | .M-tile.M-tile--sm-2-x-1 { 1136 | padding-bottom: 200%; } 1137 | .M-tile.M-tile--sm-2-x-3 { 1138 | padding-bottom: 150%; } 1139 | .M-tile.M-tile--sm-3-x-4 { 1140 | padding-bottom: 133.333%; } 1141 | .M-tile.M-tile--sm-3-x-1 { 1142 | padding-bottom: 300; } 1143 | .M-tile.M-tile--sm-4-x-1 { 1144 | padding-bottom: 400%; } 1145 | .M-tile.M-tile--sm-1-x-1 { 1146 | padding-bottom: 100%; } 1147 | .M-tile.M-tile--sm-2-x-1 { 1148 | padding-bottom: 50%; } 1149 | .M-tile.M-tile--sm-3-x-1 { 1150 | padding-bottom: 33.3333%; } 1151 | .M-tile.M-tile--sm-4-x-1 { 1152 | padding-bottom: 25%; } 1153 | .M-tile.M-tile--sm-3-x-2 { 1154 | padding-bottom: 66.6667%; } 1155 | .M-tile.M-tile--sm-4-x-3 { 1156 | padding-bottom: 75%; } 1157 | .M-tile.M-tile--sm-16-x-9 { 1158 | padding-bottom: 56.25%; } 1159 | 1160 | @media screen and (min-width: 750px) { 1161 | .M-tile.M-tile--md-1-x-1 { 1162 | padding-bottom: 100%; } 1163 | .M-tile.M-tile--md-2-x-1 { 1164 | padding-bottom: 200%; } 1165 | .M-tile.M-tile--md-2-x-3 { 1166 | padding-bottom: 150%; } 1167 | .M-tile.M-tile--md-3-x-4 { 1168 | padding-bottom: 133.333%; } 1169 | .M-tile.M-tile--md-3-x-1 { 1170 | padding-bottom: 300; } 1171 | .M-tile.M-tile--md-4-x-1 { 1172 | padding-bottom: 400%; } 1173 | .M-tile.M-tile--md-3-x-2 { 1174 | padding-bottom: 66.6667%; } 1175 | .M-tile.M-tile--md-4-x-3 { 1176 | padding-bottom: 75%; } 1177 | .M-tile.M-tile--md-16-x-9 { 1178 | padding-bottom: 56.25%; } 1179 | .M-tile.M-tile--md-1-x-3 { 1180 | padding-bottom: 300%; } 1181 | .M-tile.M-tile--md-1-x-3 { 1182 | padding-bottom: 200%; } 1183 | .M-tile.M-tile--md-1-x-4 { 1184 | padding-bottom: 400%; } } 1185 | @media screen and (min-width: 1000px) { 1186 | .M-tile.M-tile--lg-1-x-1 { 1187 | padding-bottom: 100%; } 1188 | .M-tile.M-tile--lg-2-x-3 { 1189 | padding-bottom: 150%; } 1190 | .M-tile.M-tile--lg-3-x-4 { 1191 | padding-bottom: 133.333%; } 1192 | .M-tile.M-tile--lg-2-x-1 { 1193 | padding-bottom: 200%; } 1194 | .M-tile.M-tile--lg-3-x-1 { 1195 | padding-bottom: 300; } 1196 | .M-tile.M-tile--lg-4-x-1 { 1197 | padding-bottom: 400%; } 1198 | .M-tile.M-tile--lg-1-x-1 { 1199 | padding-bottom: 100%; } 1200 | .M-tile.M-tile--lg-2-x-1 { 1201 | padding-bottom: 50%; } 1202 | .M-tile.M-tile--lg-3-x-1 { 1203 | padding-bottom: 33.3333%; } 1204 | .M-tile.M-tile--lg-4-x-1 { 1205 | padding-bottom: 25%; } 1206 | .M-tile.M-tile--lg-3-x-2 { 1207 | padding-bottom: 66.6667%; } 1208 | .M-tile.M-tile--lg-4-x-3 { 1209 | padding-bottom: 75%; } 1210 | .M-tile.M-tile--lg-16-x-9 { 1211 | padding-bottom: 56.25%; } 1212 | .M-tile.M-tile--lg-3-x-4 { 1213 | padding-bottom: 133.333%; } } 1214 | body, h1, h2, h3, h4, h5, h6 { 1215 | font-size-adjust: 0.5; 1216 | font-weight: 400; 1217 | font-family: "Libre Franklin", "Helvetica Neue", "Helvetica", "Calibri", sans-serif; } 1218 | 1219 | body { 1220 | line-height: 1.25; 1221 | /* equivalent to 20px */ } 1222 | 1223 | h1, h2, h3, h4, h5, h6 { 1224 | margin-bottom: 1rem; } 1225 | 1226 | h1 { 1227 | font-size: 2rem; 1228 | /* 2x body copy size = 32px */ 1229 | line-height: 1.25; 1230 | /* 45px / 36px */ } 1231 | 1232 | h2 { 1233 | font-size: 1.625rem; 1234 | /* 2x body copy size = 32px */ 1235 | line-height: 1.1538; 1236 | /* 45px / 36px */ } 1237 | 1238 | h3 { 1239 | font-size: 1.375rem; 1240 | /* 2x body copy size = 32px */ 1241 | line-height: 1.136363; 1242 | /* 45px / 36px */ } 1243 | 1244 | h4 { 1245 | font-size: 1.125rem; 1246 | /* 2x body copy size = 32px */ 1247 | line-height: 1.136363; 1248 | /* 45px / 36px */ } 1249 | 1250 | p { 1251 | margin-bottom: 1.5rem; 1252 | font-weight: 400; } 1253 | 1254 | @media screen and (min-width: 750px) { 1255 | body { 1256 | font-size: 1rem; 1257 | /* equivalent to 16px */ 1258 | line-height: 1.625; 1259 | /* equivalent to 22px */ } 1260 | 1261 | h1 { 1262 | font-size: 2.5rem; 1263 | /* 2.5x body copy size = 40px */ 1264 | line-height: 1.125; } 1265 | 1266 | h2 { 1267 | font-size: 2rem; 1268 | /* 2.5x body copy size = 40px */ 1269 | line-height: 1.25; } 1270 | 1271 | h3 { 1272 | font-size: 1.5rem; 1273 | /* 2.5x body copy size = 40px */ 1274 | line-height: 1.125; } 1275 | 1276 | h4 { 1277 | font-size: 1.125rem; 1278 | /* 2.5x body copy size = 40px */ 1279 | line-height: 1.222222; } } 1280 | @media screen and (min-width: 1000px) { 1281 | h1 { 1282 | font-size: 3rem; 1283 | /* 3x body copy size = 48px */ 1284 | line-height: 1.05; 1285 | /* keep to a multiple of the 20px line height 1286 | and something more appropriate for display headings */ } 1287 | 1288 | h2 { 1289 | font-size: 2.25rem; 1290 | /* 3x body copy size = 48px */ 1291 | line-height: 1.25; 1292 | /* keep to a multiple of the 20px line height 1293 | and something more appropriate for display headings */ } 1294 | 1295 | h3 { 1296 | font-size: 1.75rem; 1297 | /* 3x body copy size = 48px */ 1298 | line-height: 1.05; 1299 | /* keep to a multiple of the 20px line height 1300 | and something more appropriate for display headings */ } 1301 | 1302 | h4 { 1303 | font-size: 1.125rem; 1304 | /* 3x body copy size = 48px */ 1305 | line-height: 1.222222; 1306 | /* keep to a multiple of the 20px line height 1307 | and something more appropriate for display headings */ } } 1308 | mark { 1309 | background: #f7ca18; 1310 | padding: 0 .2em; } 1311 | 1312 | small { 1313 | font-size: .75rem; } 1314 | 1315 | a { 1316 | text-decoration: none; 1317 | color: #5c97bf; 1318 | cursor: pointer; } 1319 | a:hover { 1320 | color: #3a539b; } 1321 | a:focus { 1322 | outline: 0; } 1323 | 1324 | del { 1325 | text-decoration: line-through; } 1326 | 1327 | * { 1328 | box-sizing: border-box; } 1329 | 1330 | html { 1331 | font-size: 16px; } 1332 | 1333 | body { 1334 | margin: 0; } 1335 | 1336 | img { 1337 | max-width: 100%; } 1338 | -------------------------------------------------------------------------------- /margo.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Libre+Franklin:400,600,600italic,400italic,200italic,200);/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}input[type=button],input[type=submit]{-moz-appearance:none;-webkit-appearance:none}.M-btn,a.M-btn,a.M-btn--md,button,button.M-btn,input[type=button],input[type=submit]{display:inline-block;text-decoration:none;background:#fff;margin-top:.25rem;margin-bottom:.25rem;outline:0;border:1px solid #333;padding:.75rem 1.25rem;border-radius:2px;font-size:1rem;cursor:pointer;color:#333}.M-btn.M-btn--sm,a.M-btn--md.M-btn--sm,a.M-btn.M-btn--sm,button.M-btn--sm,button.M-btn.M-btn--sm,input[type=button].M-btn--sm,input[type=submit].M-btn--sm{font-size:.75rem;padding:.5rem 1.25rem}.M-btn.M-btn--lg,a.M-btn--md.M-btn--lg,a.M-btn.M-btn--lg,button.M-btn--lg,button.M-btn.M-btn--lg,input[type=button].M-btn--lg,input[type=submit].M-btn--lg{font-size:1.5rem;padding:1rem 1.75rem}.M-btn.M-btn--block,a.M-btn--md.M-btn--block,a.M-btn.M-btn--block,button.M-btn--block,button.M-btn.M-btn--block,input[type=button].M-btn--block,input[type=submit].M-btn--block{width:100%}.M-btn:hover,a.M-btn--md:hover,a.M-btn:hover,button.M-btn:hover,button:hover,input[type=button]:hover,input[type=submit]:hover{background:#d2d7d3}.M-btn.M-btn--primary,a.M-btn--md.M-btn--primary,a.M-btn.M-btn--primary,button.M-btn--primary,button.M-btn.M-btn--primary,input[type=button].M-btn--primary,input[type=submit].M-btn--primary{background:#3a539b;color:#fff}.M-btn.M-btn--primary:hover,a.M-btn--md.M-btn--primary:hover,a.M-btn.M-btn--primary:hover,button.M-btn--primary:hover,button.M-btn.M-btn--primary:hover,input[type=button].M-btn--primary:hover,input[type=submit].M-btn--primary:hover{background:#5c97bf}.M-container--narrow{max-width:960px;padding:0 5px;margin:0 auto;width:95%}.M-container--full{width:100%}.M-form-group input[type=date],.M-form-group input[type=email],.M-form-group input[type=password],.M-form-group input[type=text],.M-form-group select,.M-form-group textarea,.M-input-paddings,input[type=date],input[type=email],input[type=password],input[type=text]{padding:0 .75rem;height:2.5rem}input[type=date],input[type=email],input[type=password]{padding:0 .1 .25rem}.M-input-defaults,input[type=email],input[type=password],input[type=text],select,textarea{line-height:1.5;outline:0;border:#bfbfbf 1px solid;font-size:1rem;border-radius:2px;margin-bottom:1.25rem;background:#fff}.M-input-defaults:focus,input[type=email]:focus,input[type=password]:focus,input[type=text]:focus,select:focus,textarea:focus{border:1px solid #5c97bf}.M-form-group input[type=date],.M-form-group input[type=email],.M-form-group input[type=password],.M-form-group input[type=text],.M-form-group select,.M-form-group textarea,.M-textarea{width:100%;padding:.5rem .75rem}.M-form-group input[type=date]:focus,.M-form-group input[type=email]:focus,.M-form-group input[type=password]:focus,.M-form-group input[type=text]:focus,.M-form-group select:focus,.M-form-group textarea:focus,.M-textarea:focus{border:1px solid #5c97bf}.M-form-group{display:block}.M-form-group input[type=date],.M-form-group input[type=email],.M-form-group input[type=password],.M-form-group input[type=text],.M-form-group select,.M-form-group textarea{width:100%}.M-form-group__field{display:inline-block;padding:0 .25rem}.M-form-group__field .M-form-group__field_label{display:block;font-weight:700;margin-bottom:.5rem}.M-form-group__field .M-form-group__field_input,.M-form-group__field input[type=email].M-form-group__field_input,.M-form-group__field input[type=password].M-form-group__field_input,.M-form-group__field input[type=text].M-form-group__field_input,.M-form-group__field select.M-form-group__field_input,.M-form-group__field textarea.M-form-group__field_input{display:block}.M-checkbox{padding:initial;-webkit-appearance:none;padding:0;display:inline-block;margin:0 3px 0 0;vertical-align:bottom;width:24px;height:24px;border:1px #333 solid;position:relative;z-index:9}.M-checkbox:focus{outline:0}.M-checkbox:checked{background-color:#5c97bf}.M-checkbox:checked:after{position:absolute;top:40%;left:50%;z-index:10;content:"";display:block;width:11px;height:5px;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg);border-left:2px solid #fff;border-bottom:2px solid #fff}.M-radiocheck{-webkit-appearance:none;margin-right:.75rem}.M-radiocheck>input[type=checkbox],.M-radiocheck>input[type=radio],.M-radiocheck>span{display:inline-block;vertical-align:middle}.M-radiocheck>span{font-weight:initial}.M-radio{padding:0;margin:0 3px 0 0;-webkit-appearance:none;display:inline-block;vertical-align:bottom;width:24px;height:24px;border:1px #333 solid;border-radius:50%;position:relative;z-index:9}.M-radio:focus{outline:0}.M-radio:checked:after{position:absolute;background-color:#5c97bf;top:50%;left:50%;z-index:10;content:"";display:block;border-radius:50%;width:16px;height:16px;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.M-select{-webkit-appearance:none;background:#ddd}.M-select:before{background:#333;width:3px;height:3px;border-bottom:2px solid #333;border-left:2px solid #333}input[type=date]{font-family:"Libre Franklin","Helvetica Neue",Helvetica,Calibri,sans-serif}.M-grid{font-size:0}.M-grid>*{font-size:medium;vertical-align:top;width:100%}.M-grid__sm-0-of-12{display:none}.M-grid__sm-1-of-12{display:inline-block;width:8.33333%;margin-left:0;margin-right:0}.M-grid__sm-2-of-12{display:inline-block;width:16.66667%;margin-left:0;margin-right:0}.M-grid__sm-3-of-12{display:inline-block;width:25%;margin-left:0;margin-right:0}.M-grid__sm-4-of-12{display:inline-block;width:33.33333%;margin-left:0;margin-right:0}.M-grid__sm-5-of-12{display:inline-block;width:41.66667%;margin-left:0;margin-right:0}.M-grid__sm-6-of-12{display:inline-block;width:50%;margin-left:0;margin-right:0}.M-grid__sm-7-of-12{display:inline-block;width:58.33333%;margin-left:0;margin-right:0}.M-grid__sm-8-of-12{display:inline-block;width:66.66667%;margin-left:0;margin-right:0}.M-grid__sm-9-of-12{display:inline-block;width:75%;margin-left:0;margin-right:0}.M-grid__sm-10-of-12{display:inline-block;width:83.33333%;margin-left:0;margin-right:0}.M-grid__sm-11-of-12{display:inline-block;width:91.66667%;margin-left:0;margin-right:0}.M-grid__sm-12-of-12{display:inline-block;width:100%;margin-left:0;margin-right:0}@media screen and (min-width:750px){.M-grid__md-0-of-12{display:none}.M-grid__md-1-of-12{display:inline-block;width:8.33333%;margin-left:0;margin-right:0}.M-grid__md-2-of-12{display:inline-block;width:16.66667%;margin-left:0;margin-right:0}.M-grid__md-3-of-12{display:inline-block;width:25%;margin-left:0;margin-right:0}.M-grid__md-4-of-12{display:inline-block;width:33.33333%;margin-left:0;margin-right:0}.M-grid__md-5-of-12{display:inline-block;width:41.66667%;margin-left:0;margin-right:0}.M-grid__md-6-of-12{display:inline-block;width:50%;margin-left:0;margin-right:0}.M-grid__md-7-of-12{display:inline-block;width:58.33333%;margin-left:0;margin-right:0}.M-grid__md-8-of-12{display:inline-block;width:66.66667%;margin-left:0;margin-right:0}.M-grid__md-9-of-12{display:inline-block;width:75%;margin-left:0;margin-right:0}.M-grid__md-10-of-12{display:inline-block;width:83.33333%;margin-left:0;margin-right:0}.M-grid__md-11-of-12{display:inline-block;width:91.66667%;margin-left:0;margin-right:0}.M-grid__md-12-of-12{display:inline-block;width:100%;margin-left:0;margin-right:0}}@media screen and (min-width:1000px){.M-grid__lg-0-of-12{display:none}.M-grid__lg-1-of-12{display:inline-block;width:8.33333%;margin-left:0;margin-right:0}.M-grid__lg-2-of-12{display:inline-block;width:16.66667%;margin-left:0;margin-right:0}.M-grid__lg-3-of-12{display:inline-block;width:25%;margin-left:0;margin-right:0}.M-grid__lg-4-of-12{display:inline-block;width:33.33333%;margin-left:0;margin-right:0}.M-grid__lg-5-of-12{display:inline-block;width:41.66667%;margin-left:0;margin-right:0}.M-grid__lg-6-of-12{display:inline-block;width:50%;margin-left:0;margin-right:0}.M-grid__lg-7-of-12{display:inline-block;width:58.33333%;margin-left:0;margin-right:0}.M-grid__lg-8-of-12{display:inline-block;width:66.66667%;margin-left:0;margin-right:0}.M-grid__lg-9-of-12{display:inline-block;width:75%;margin-left:0;margin-right:0}.M-grid__lg-10-of-12{display:inline-block;width:83.33333%;margin-left:0;margin-right:0}.M-grid__lg-11-of-12{display:inline-block;width:91.66667%;margin-left:0;margin-right:0}.M-grid__lg-12-of-12{display:inline-block;width:100%;margin-left:0;margin-right:0}}.M-text--center{text-align:center}.M-text--left{text-left:left}.M-text--justify{text-align:justify}.M-text--right{text-align:right}.M-text--primary{color:#3a539b}.M-text--success{color:#019875}.M-text--fail{color:#e26a6a}.M-text--warn{color:#f4b350}.M-text--info{color:#5c97bf}.M-text--muted{color:#95a5a6}.M-bg--inverted,a.M-bg--inverted,button.M-bg--inverted,input[type=submit].M-bg--inverted,table tbody tr.M-bg--inverted,table thead tr.M-bg--inverted,table.M-table--striped tbody tr.M-bg--inverted,table.M-table--striped thead tr.M-bg--inverted{background:#333;color:#fff}.M-bg--success,a.M-bg--success,button.M-bg--success,input[type=submit].M-bg--success,table tbody tr.M-bg--success,table thead tr.M-bg--success,table.M-table--striped tbody tr.M-bg--success,table.M-table--striped thead tr.M-bg--success{background:#019875;color:#fff}a.M-bg--success:hover,button.M-bg--success:hover,input[type=submit].M-bg--success:hover{background:#34cba8}.M-bg--info,a.M-bg--info,button.M-bg--info,input[type=submit].M-bg--info,table tbody tr.M-bg--info,table thead tr.M-bg--info,table.M-table--striped tbody tr.M-bg--info,table.M-table--striped thead tr.M-bg--info{background:#5c97bf;color:#fff}a.M-bg--info:hover,button.M-bg--info:hover,input[type=submit].M-bg--info:hover{background:#8fcaf2}.M-bg--warn,a.M-bg--warn,button.M-bg--warn,input[type=submit].M-bg--warn,table tbody tr.M-bg--warn,table thead tr.M-bg--warn,table.M-table--striped tbody tr.M-bg--warn,table.M-table--striped thead tr.M-bg--warn{background:#f4b350}a.M-bg--warn:hover,button.M-bg--warn:hover,input[type=submit].M-bg--warn:hover{background:#ffe683}.M-bg--fail,a.M-bg--fail,button.M-bg--fail,table tbody tr.M-bg--fail,table thead tr.M-bg--fail,table.M-table--striped tbody tr.M-bg--fail,table.M-table--striped thead tr.M-bg--fail{background:#e26a6a;color:#fff}a.M-bg--fail:hover,button.M-bg--fail:hover,input[type=submit].M-bg--fail:hover{background:#ff9d9d}.M-bg--disabled,a.M-bg--disabled,button.M-bg--disabled,table tbody tr.M-bg--disabled,table thead tr.M-bg--disabled,table.M-table--striped tbody tr.M-bg--disabled,table.M-table--striped thead tr.M-bg--disabled{background:#d2d7d3;opacity:.4}.M-bg--primary,a.M-bg--primary,button.M-bg--primary,table tbody tr.M-bg--primary,table thead tr.M-bg--primary,table.M-table--striped tbody tr.M-bg--primary,table.M-table--striped thead tr.M-bg--primary{background:#3a539b;color:#fff}ol,ul{padding-left:1.25rem;margin:.5rem 0}ol ol,ol ul,ul ol,ul ul{margin:0 0 .5rem 0}ul>li{padding-left:.25rem}ul ul{padding-left:.75rem}ol>li{padding-left:.5rem}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}.M-blockquote{border-left:#bfbfbf .5rem solid;background:#eee;padding:1.25rem 1rem;margin:1rem;font-size:1rem}@media screen and (min-width:750px){.M-blockquote{font-size:1.125rem}}.M-blockquote>*{margin:.5rem}.M-blockquote>:first-child{margin-top:0}.M-blockquote>:last-child{margin-bottom:0}.M-cite{display:block;margin-top:1.5rem;color:#95a5a6;text-indent:-.75rem;margin-left:.75rem;font-size:.875rem;font-style:normal}.M-cite:before{content:"— "}@media screen and (min-width:750px){.M-cite{font-size:1rem}}pre{margin:1rem auto;overflow:auto;width:90%;background:#eee;padding:1rem;font-size:1rem}@media screen and (min-width:750px){pre{font-size:1.125rem}}@media screen and (min-width:1000px){pre{font-size:1.125rem}}pre code{padding:0}code{background:#eee;color:#96281b;padding:.1em .2em;margin:0 1px;font-family:monospace;font-size:1em}.M-segment{position:relative;box-shadow:0 1px 2px 0 rgba(191,191,191,.5);margin:1rem 0;padding:1rem;border-radius:2px;border:1px solid #bfbfbf}.M-segment>:first-child{margin-top:0}.M-segment>:last-child{margin-bottom:0}.M-table--full-width{width:100%}.M-table--striped tbody tr:nth-child(2n){background:#eee}.M-table{border-collapse:collapse;table-layout:fixed;margin:1rem 0}.M-table td:first-child,.M-table th:first-child{padding-left:.375rem}.M-table td,.M-table th{text-align:left;padding:.75rem 0 .75rem 2rem}.M-table td.tcol-1rem,.M-table th.tcol-1rem{width:1rem}.M-table td.tcol-2rem,.M-table th.tcol-2rem{width:2rem}.M-table td.tcol-3rem,.M-table th.tcol-3rem{width:3rem}.M-table td.tcol-4rem,.M-table th.tcol-4rem{width:4rem}.M-table td.tcol-5rem,.M-table th.tcol-5rem{width:5rem}.M-table td.tcol-6rem,.M-table th.tcol-6rem{width:6rem}.M-table td.tcol-7rem,.M-table th.tcol-7rem{width:7rem}.M-table td.tcol-8rem,.M-table th.tcol-8rem{width:8rem}.M-table td.tcol-9rem,.M-table th.tcol-9rem{width:9rem}.M-table td.tcol-10rem,.M-table th.tcol-10rem{width:10rem}@media screen and (min-width:750px){.M-table td.tcol-1rem,.M-table th.tcol-1rem{width:inherit}.M-table td.tcol-2rem,.M-table th.tcol-2rem{width:inherit}.M-table td.tcol-3rem,.M-table th.tcol-3rem{width:inherit}.M-table td.tcol-4rem,.M-table th.tcol-4rem{width:inherit}.M-table td.tcol-5rem,.M-table th.tcol-5rem{width:inherit}.M-table td.tcol-6rem,.M-table th.tcol-6rem{width:inherit}.M-table td.tcol-7rem,.M-table th.tcol-7rem{width:inherit}.M-table td.tcol-8rem,.M-table th.tcol-8rem{width:inherit}.M-table td.tcol-9rem,.M-table th.tcol-9rem{width:inherit}.M-table td.tcol-10rem,.M-table th.tcol-10rem{width:inherit}}.M-table thead th{border-bottom:#333 2px solid}.M-table tbody td{border-bottom:#95a5a6 1px solid}.M-tile{position:relative}.M-tile .M-tile__content{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.M-tile.M-tile--sm-1-x-1{padding-bottom:100%}.M-tile.M-tile--sm-2-x-1{padding-bottom:200%}.M-tile.M-tile--sm-2-x-3{padding-bottom:150%}.M-tile.M-tile--sm-3-x-4{padding-bottom:133.333%}.M-tile.M-tile--sm-3-x-1{padding-bottom:300}.M-tile.M-tile--sm-4-x-1{padding-bottom:400%}.M-tile.M-tile--sm-1-x-1{padding-bottom:100%}.M-tile.M-tile--sm-2-x-1{padding-bottom:50%}.M-tile.M-tile--sm-3-x-1{padding-bottom:33.3333%}.M-tile.M-tile--sm-4-x-1{padding-bottom:25%}.M-tile.M-tile--sm-3-x-2{padding-bottom:66.6667%}.M-tile.M-tile--sm-4-x-3{padding-bottom:75%}.M-tile.M-tile--sm-16-x-9{padding-bottom:56.25%}@media screen and (min-width:750px){.M-tile.M-tile--md-1-x-1{padding-bottom:100%}.M-tile.M-tile--md-2-x-1{padding-bottom:200%}.M-tile.M-tile--md-2-x-3{padding-bottom:150%}.M-tile.M-tile--md-3-x-4{padding-bottom:133.333%}.M-tile.M-tile--md-3-x-1{padding-bottom:300}.M-tile.M-tile--md-4-x-1{padding-bottom:400%}.M-tile.M-tile--md-3-x-2{padding-bottom:66.6667%}.M-tile.M-tile--md-4-x-3{padding-bottom:75%}.M-tile.M-tile--md-16-x-9{padding-bottom:56.25%}.M-tile.M-tile--md-1-x-3{padding-bottom:300%}.M-tile.M-tile--md-1-x-3{padding-bottom:200%}.M-tile.M-tile--md-1-x-4{padding-bottom:400%}}@media screen and (min-width:1000px){.M-tile.M-tile--lg-1-x-1{padding-bottom:100%}.M-tile.M-tile--lg-2-x-3{padding-bottom:150%}.M-tile.M-tile--lg-3-x-4{padding-bottom:133.333%}.M-tile.M-tile--lg-2-x-1{padding-bottom:200%}.M-tile.M-tile--lg-3-x-1{padding-bottom:300}.M-tile.M-tile--lg-4-x-1{padding-bottom:400%}.M-tile.M-tile--lg-1-x-1{padding-bottom:100%}.M-tile.M-tile--lg-2-x-1{padding-bottom:50%}.M-tile.M-tile--lg-3-x-1{padding-bottom:33.3333%}.M-tile.M-tile--lg-4-x-1{padding-bottom:25%}.M-tile.M-tile--lg-3-x-2{padding-bottom:66.6667%}.M-tile.M-tile--lg-4-x-3{padding-bottom:75%}.M-tile.M-tile--lg-16-x-9{padding-bottom:56.25%}.M-tile.M-tile--lg-3-x-4{padding-bottom:133.333%}}body,h1,h2,h3,h4,h5,h6{font-size-adjust:.5;font-weight:400;font-family:"Libre Franklin","Helvetica Neue",Helvetica,Calibri,sans-serif}body{line-height:1.25}h1,h2,h3,h4,h5,h6{margin-bottom:1rem}h1{font-size:2rem;line-height:1.25}h2{font-size:1.625rem;line-height:1.1538}h3{font-size:1.375rem;line-height:1.136363}h4{font-size:1.125rem;line-height:1.136363}p{margin-bottom:1.5rem;font-weight:400}@media screen and (min-width:750px){body{font-size:1rem;line-height:1.625}h1{font-size:2.5rem;line-height:1.125}h2{font-size:2rem;line-height:1.25}h3{font-size:1.5rem;line-height:1.125}h4{font-size:1.125rem;line-height:1.222222}}@media screen and (min-width:1000px){h1{font-size:3rem;line-height:1.05}h2{font-size:2.25rem;line-height:1.25}h3{font-size:1.75rem;line-height:1.05}h4{font-size:1.125rem;line-height:1.222222}}mark{background:#f7ca18;padding:0 .2em}small{font-size:.75rem}a{text-decoration:none;color:#5c97bf;cursor:pointer}a:hover{color:#3a539b}a:focus{outline:0}del{text-decoration:line-through}*{box-sizing:border-box}html{font-size:16px}body{margin:0}img{max-width:100%} -------------------------------------------------------------------------------- /margo.scss: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Libre+Franklin:400,600,600italic,400italic,200italic,200); 2 | @import "./parts/_normalize.scss"; 3 | 4 | @import "./parts/_mixins.scss"; 5 | @import "./parts/_variables.scss"; 6 | 7 | @import "./parts/_buttons.scss"; 8 | @import "./parts/_containers.scss"; 9 | @import "./parts/_forms.scss"; 10 | @import "./parts/_grid.scss"; 11 | @import "./parts/_helpers.scss"; 12 | @import "./parts/_lists.scss"; 13 | @import "./parts/_miscellaneous.scss"; 14 | @import "./parts/_segment.scss"; 15 | @import "./parts/_tables.scss"; 16 | @import "./parts/_tiles.scss"; 17 | @import "./parts/_typography.scss"; 18 | 19 | *{ 20 | box-sizing: border-box; 21 | } 22 | 23 | html{ 24 | font-size: 16px; 25 | } 26 | 27 | body{ 28 | margin: 0; 29 | } 30 | 31 | img { max-width: 100%; } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "margo-css", 3 | "version": "5.1.0", 4 | "description": "lightweight css framework for building responsive web sites", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/t3patterson/margo-css.git" 12 | }, 13 | "keywords": [ 14 | "margo", 15 | "css", 16 | "framework", 17 | "minimal" 18 | ], 19 | "author": "t3patterson", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/t3patterson/margo-css/issues" 23 | }, 24 | "homepage": "https://github.com/t3patterson/margo-css#readme" 25 | } 26 | -------------------------------------------------------------------------------- /parts/_buttons.scss: -------------------------------------------------------------------------------- 1 | 2 | // ========================= 3 | // Button styles 4 | 5 | input[type='button'], 6 | input[type='submit'] { 7 | -moz-appearance: none; 8 | -webkit-appearance: none; 9 | } 10 | 11 | button, .M-btn, button.M-btn, input[type='button'], input[type='submit'], a.M-btn--md, a.M-btn{ 12 | display: inline-block; 13 | text-decoration: none; 14 | background: #fff; 15 | margin-top: .25rem; 16 | margin-bottom: .25rem; 17 | 18 | outline: 0; 19 | border: 1px solid #333; 20 | padding: .75rem 1.25rem ; 21 | border-radius: 2px; 22 | font-size: 1rem; 23 | cursor: pointer; 24 | color: #333; 25 | 26 | &.M-btn--sm { font-size: .75rem; padding: .5rem 1.25rem; } 27 | &.M-btn--lg { font-size: 1.5rem; padding: 1rem 1.75rem; } 28 | &.M-btn--block { width: 100% } 29 | 30 | &:hover{ 31 | background: $light-gray; 32 | } 33 | 34 | &.M-btn--primary{ 35 | background: $primary-color; 36 | color:#fff; 37 | 38 | &:hover{ 39 | background: $light-primary; 40 | } 41 | } 42 | 43 | 44 | } 45 | -------------------------------------------------------------------------------- /parts/_containers.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | /* Body Content - container */ 3 | 4 | .M-container--narrow{ 5 | max-width: $container-content-max-width; 6 | padding: 0 5px; 7 | margin: 0 auto; 8 | width: 95%; 9 | } 10 | 11 | .M-container--full{ 12 | width: 100%; 13 | } 14 | -------------------------------------------------------------------------------- /parts/_forms.scss: -------------------------------------------------------------------------------- 1 | // INPUT SETTINGS 2 | // ------------------------- 3 | .M-input-paddings, 4 | input[type='text'], 5 | input[type='email'], 6 | input[type='date'], 7 | input[type='password']{ 8 | padding: 0 .75rem; 9 | height: 2.5rem; 10 | } 11 | 12 | input[type='date'], 13 | input[type='email'], 14 | input[type='password']{ 15 | padding: 0 .1.25rem; 16 | } 17 | 18 | 19 | 20 | .M-input-defaults, 21 | input[type='text'], 22 | input[type='email'], 23 | input[type='password'], 24 | select, 25 | textarea{ 26 | line-height: 1.5; 27 | outline: 0; 28 | border: $med-gray 1px solid; 29 | font-size: 1rem; 30 | border-radius: $site-border-radius; 31 | margin-bottom: 1.25rem; 32 | background: #fff; 33 | 34 | &:focus{ 35 | border: 1px solid $light-primary; 36 | } 37 | } 38 | 39 | .M-textarea { 40 | width: 100%; 41 | padding: .5rem .75rem; 42 | &:focus{ 43 | border: 1px solid $light-primary; 44 | } 45 | } 46 | 47 | 48 | .M-form-group{ 49 | display: block; 50 | input[type='text'], 51 | input[type='email'], 52 | input[type='password'], 53 | input[type='date'], 54 | select{ 55 | @extend .M-input-paddings; 56 | } 57 | 58 | 59 | input[type='text'], 60 | input[type='email'], 61 | input[type='password'], 62 | input[type='date'], 63 | select, 64 | textarea{ 65 | @extend .M-textarea; 66 | width: 100%; 67 | } 68 | 69 | textarea{ 70 | @extend .M-input-paddings; 71 | } 72 | } 73 | 74 | .M-form-group__field{ 75 | display: inline-block; 76 | padding: 0 .25rem; 77 | 78 | .M-form-group__field_label{ 79 | display: block; 80 | font-weight: 700; 81 | margin-bottom: .5rem; 82 | } 83 | 84 | .M-form-group__field_input, 85 | input[type='text'].M-form-group__field_input, 86 | input[type='email'].M-form-group__field_input, 87 | input[type='password'].M-form-group__field_input, 88 | select.M-form-group__field_input, 89 | textarea.M-form-group__field_input{ 90 | display: block; 91 | } 92 | } 93 | 94 | //Checkbox Settings 95 | //======================= 96 | .M-checkbox{ 97 | padding: initial; 98 | -webkit-appearance: none; 99 | padding: 0; 100 | display: inline-block; 101 | margin: 0 3px 0 0; 102 | vertical-align: bottom; 103 | width: 24px; height: 24px; 104 | border: 1px #333 solid; 105 | position: relative; 106 | z-index: 9; 107 | &:focus{ 108 | outline: 0; 109 | } 110 | &:checked{ 111 | background-color: $info-color; 112 | &:after{ 113 | position: absolute; 114 | top: 40%; left: 50%; 115 | z-index: 10; 116 | content: ""; 117 | display: block; 118 | width: 11px; 119 | height: 5px; 120 | transform: translate(-50%, -50%) rotate(-45deg); 121 | border-left: 2px solid #fff; 122 | border-bottom: 2px solid #fff; 123 | 124 | } 125 | } 126 | } 127 | 128 | 129 | //Radio Settings 130 | //======================= 131 | .M-radiocheck{ 132 | -webkit-appearance: none; 133 | margin-right: .75rem; 134 | > input[type="radio"], 135 | > input[type="checkbox"], 136 | > span{ 137 | display: inline-block; 138 | vertical-align: middle; 139 | } 140 | 141 | > span { 142 | font-weight: initial; 143 | } 144 | } 145 | 146 | 147 | .M-radio{ 148 | padding: 0; 149 | margin: 0 3px 0 0px; 150 | -webkit-appearance: none; 151 | display: inline-block; 152 | vertical-align: bottom; 153 | width: 24px; height: 24px; 154 | border: 1px #333 solid; 155 | border-radius: 50%; 156 | position: relative; 157 | z-index: 9; 158 | &:focus{ 159 | outline: 0; 160 | } 161 | &:checked{ 162 | &:after{ 163 | position: absolute; 164 | background-color: $info-color; 165 | top: 50%; left: 50%; 166 | z-index: 10; 167 | content: ""; 168 | display: block; 169 | border-radius: 50%; 170 | width: 16px; 171 | height: 16px; 172 | transform: translate(-50%, -50%) rotate(-45deg); 173 | 174 | } 175 | } 176 | } 177 | 178 | .M-select { 179 | -webkit-appearance: none; 180 | background: #ddd; 181 | 182 | &:before{ 183 | background: #333; 184 | width: 3px; 185 | height: 3px; 186 | border-bottom: 2px solid #333; 187 | border-left: 2px solid #333; 188 | } 189 | } 190 | 191 | 192 | input[type='date']{ 193 | font-family: $font-stack 194 | } 195 | -------------------------------------------------------------------------------- /parts/_grid.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | // Grid 3 | .M-grid { 4 | $col-1: 1/12; 5 | $col-2: 2/12; 6 | $col-3: 3/12; 7 | $col-4: 4/12; 8 | $col-5: 5/12; 9 | $col-6: 6/12; 10 | $col-7: 7/12; 11 | $col-8: 8/12; 12 | $col-9: 9/12; 13 | $col-10: 10/8; 14 | $col-11: 11/12; 15 | $col-12: 12/12; 16 | 17 | font-size: 0; 18 | 19 | > * { 20 | font-size: medium; 21 | vertical-align: top; 22 | width: 100%; 23 | } 24 | 25 | } 26 | 27 | .M-grid__sm-0-of-12 {display: none;} 28 | 29 | @for $i from 1 through 12{ 30 | .M-grid__sm-#{$i}-of-12{display: inline-block; width: #{$i/12 * 100%}; margin-left: 0; margin-right: 0;} 31 | } 32 | 33 | @include media-query($med-screen){ 34 | .M-grid__md-0-of-12 {display: none;} 35 | @for $i from 1 through 12{ 36 | .M-grid__md-#{$i}-of-12{display: inline-block; width: #{$i/12 * 100%}; margin-left: 0; margin-right: 0;} 37 | } 38 | } 39 | 40 | @include media-query($lg-screen){ 41 | .M-grid__lg-0-of-12 {display: none;} 42 | @for $i from 1 through 12{ 43 | .M-grid__lg-#{$i}-of-12{display: inline-block; width: #{$i/12 * 100%}; margin-left: 0; margin-right: 0;} 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /parts/_helpers.scss: -------------------------------------------------------------------------------- 1 | .M-text--center{ 2 | text-align: center; 3 | } 4 | 5 | .M-text--left{ 6 | text-left: left; 7 | } 8 | 9 | .M-text--justify{ 10 | text-align: justify; 11 | } 12 | 13 | .M-text--right{ 14 | text-align: right; 15 | } 16 | 17 | .M-text--primary{ 18 | color: $primary-color; 19 | } 20 | .M-text--success{ 21 | color: $success-color; 22 | } 23 | .M-text--fail{ 24 | color: $fail-color; 25 | } 26 | 27 | .M-text--warn{ 28 | color: $warn-color;} 29 | 30 | .M-text--info{ 31 | color: $info-color; 32 | } 33 | 34 | .M-text--muted{ 35 | color: $txt-muted-color; 36 | } 37 | 38 | button.M-bg--inverted, 39 | input[type="submit"].M-bg--inverted, 40 | a.M-bg--inverted, 41 | .M-bg--inverted, 42 | table tbody tr.M-bg--inverted, 43 | table thead tr.M-bg--inverted, 44 | table.M-table--striped thead tr.M-bg--inverted, 45 | table.M-table--striped tbody tr.M-bg--inverted { 46 | background: $bg-inverted-color; 47 | color: $inverted-font-color; 48 | } 49 | 50 | button.M-bg--success, 51 | input[type="submit"].M-bg--success, 52 | a.M-bg--success, 53 | .M-bg--success, 54 | table tbody tr.M-bg--success, 55 | table thead tr.M-bg--success, 56 | table.M-table--striped thead tr.M-bg--success, 57 | table.M-table--striped tbody tr.M-bg--success{ 58 | background: $success-color; 59 | color: $inverted-font-color; 60 | } 61 | 62 | button.M-bg--success:hover, 63 | input[type="submit"].M-bg--success:hover, 64 | a.M-bg--success:hover{ 65 | background: $success-color_lightened; 66 | } 67 | 68 | button.M-bg--info, 69 | input[type="submit"].M-bg--info, 70 | a.M-bg--info, 71 | .M-bg--info, 72 | table tbody tr.M-bg--info, 73 | table thead tr.M-bg--info, 74 | table.M-table--striped thead tr.M-bg--info, 75 | table.M-table--striped tbody tr.M-bg--info{ 76 | background: $info-color; 77 | color: $inverted-font-color; 78 | } 79 | 80 | button.M-bg--info:hover, 81 | input[type="submit"].M-bg--info:hover, 82 | a.M-bg--info:hover{ 83 | background: $info-color_lightened; 84 | } 85 | 86 | button.M-bg--warn, 87 | a.M-bg--warn, 88 | input[type="submit"].M-bg--warn, 89 | .M-bg--warn, 90 | table tbody tr.M-bg--warn, 91 | table thead tr.M-bg--warn, 92 | table.M-table--striped thead tr.M-bg--warn, 93 | table.M-table--striped tbody tr.M-bg--warn{ 94 | background: $warn-color; 95 | } 96 | 97 | button.M-bg--warn:hover, 98 | a.M-bg--warn:hover, 99 | input[type="submit"].M-bg--warn:hover { 100 | background: $warn-color_lightened; 101 | } 102 | 103 | button.M-bg--fail, 104 | a.M-bg--fail, 105 | .M-bg--fail, 106 | table tbody tr.M-bg--fail, 107 | table thead tr.M-bg--fail, 108 | table.M-table--striped thead tr.M-bg--fail, 109 | table.M-table--striped tbody tr.M-bg--fail 110 | { 111 | background: $fail-color; 112 | color: $inverted-font-color; 113 | } 114 | 115 | button.M-bg--fail:hover, 116 | a.M-bg--fail:hover, 117 | input[type="submit"].M-bg--fail:hover{ 118 | background: $fail-color_lightened; 119 | 120 | } 121 | 122 | 123 | button.M-bg--disabled, 124 | a.M-bg--disabled, 125 | .M-bg--disabled, 126 | table tbody tr.M-bg--disabled, 127 | table thead tr.M-bg--disabled, 128 | table.M-table--striped thead tr.M-bg--disabled, 129 | table.M-table--striped tbody tr.M-bg--disabled{ 130 | background: $bg-disabled-color; 131 | opacity: $bg-disabled-opacity; 132 | } 133 | 134 | button.M-bg--primary, 135 | a.M-bg--primary, 136 | .M-bg--primary, 137 | table tbody tr.M-bg--primary, 138 | table thead tr.M-bg--primary, 139 | table.M-table--striped thead tr.M-bg--primary, 140 | table.M-table--striped tbody tr.M-bg--primary{ 141 | background: $primary-color; 142 | color: $inverted-font-color; 143 | } 144 | -------------------------------------------------------------------------------- /parts/_lists.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | // Lists 3 | 4 | ul, ol{ 5 | padding-left: 1.25rem; 6 | margin: .5rem 0; 7 | 8 | ul, ol{ 9 | margin: 0rem 0 .5rem 0; 10 | } 11 | } 12 | 13 | ul { 14 | > li { 15 | padding-left: .25rem; 16 | } 17 | 18 | ul{ 19 | padding-left: .75rem 20 | } 21 | 22 | } 23 | 24 | ol{ 25 | >li { 26 | padding-left: .5rem; 27 | } 28 | ol{ 29 | list-style-type: lower-alpha; 30 | ol { 31 | list-style-type: lower-roman; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /parts/_miscellaneous.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | // Block Quotes 3 | 4 | .M-blockquote { 5 | border-left: $med-gray .5rem solid; 6 | background: $faint-gray; 7 | padding: 1.25rem 1rem; 8 | margin: 1rem; 9 | font-size: 1.0rem; 10 | 11 | @include media-query($med-screen){ 12 | font-size: 1.125rem; 13 | } 14 | 15 | > * { 16 | margin: .5rem; 17 | } 18 | 19 | > *:first-child{ 20 | margin-top: 0; 21 | } 22 | 23 | > *:last-child,{ 24 | margin-bottom: 0; 25 | } 26 | } 27 | 28 | // ========================= 29 | // Code Formatting 30 | 31 | .M-cite { 32 | display: block; 33 | margin-top: 1.5rem; 34 | &:before{ 35 | content: "— "; 36 | } 37 | 38 | color: $dark-gray; 39 | text-indent: -.75rem; 40 | margin-left: .75rem; 41 | 42 | font-size: .875rem; 43 | font-style: normal; 44 | @include media-query($med-screen){ 45 | font-size: 1rem; 46 | 47 | } 48 | } 49 | 50 | pre { 51 | margin: 1rem auto; 52 | overflow: auto; 53 | width: 90%; 54 | background: $faint-gray; 55 | padding: 1rem; 56 | font-size: 1rem; 57 | 58 | @include media-query($med-screen){ 59 | font-size: 1.125rem; 60 | } 61 | @include media-query($lg-screen){ 62 | font-size: 1.125rem; 63 | } 64 | code{ 65 | padding: 0; 66 | } 67 | } 68 | 69 | 70 | code { 71 | 72 | background: $faint-gray; 73 | color: $code-color; 74 | padding: .1em .2em; 75 | margin: 0 1px; 76 | font-family: monospace; 77 | font-size: 1em; 78 | 79 | // @include media-query($med-screen){ 80 | // font-size: 1.125em; 81 | // } 82 | } 83 | -------------------------------------------------------------------------------- /parts/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** Sane Defaults 3 | */ 4 | 5 | @mixin media-query($device) { 6 | @media screen and (min-width: $device) { 7 | @content; 8 | } 9 | } 10 | 11 | 12 | @mixin overlay-style($width,$height,$z-index){ 13 | position: absolute; 14 | width: $width; 15 | height: $height; 16 | z-index: $z-index; 17 | @content; 18 | } -------------------------------------------------------------------------------- /parts/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height: 1.15; /* 1 */ 14 | -ms-text-size-adjust: 100%; /* 2 */ 15 | -webkit-text-size-adjust: 100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section { 39 | display: block; 40 | } 41 | 42 | /** 43 | * Correct the font size and margin on `h1` elements within `section` and 44 | * `article` contexts in Chrome, Firefox, and Safari. 45 | */ 46 | 47 | h1 { 48 | font-size: 2em; 49 | margin: 0.67em 0; 50 | } 51 | 52 | /* Grouping content 53 | ========================================================================== */ 54 | 55 | /** 56 | * Add the correct display in IE 9-. 57 | * 1. Add the correct display in IE. 58 | */ 59 | 60 | figcaption, 61 | figure, 62 | main { /* 1 */ 63 | display: block; 64 | } 65 | 66 | /** 67 | * Add the correct margin in IE 8. 68 | */ 69 | 70 | figure { 71 | margin: 1em 40px; 72 | } 73 | 74 | /** 75 | * 1. Add the correct box sizing in Firefox. 76 | * 2. Show the overflow in Edge and IE. 77 | */ 78 | 79 | hr { 80 | box-sizing: content-box; /* 1 */ 81 | height: 0; /* 1 */ 82 | overflow: visible; /* 2 */ 83 | } 84 | 85 | /** 86 | * 1. Correct the inheritance and scaling of font size in all browsers. 87 | * 2. Correct the odd `em` font sizing in all browsers. 88 | */ 89 | 90 | pre { 91 | font-family: monospace, monospace; /* 1 */ 92 | font-size: 1em; /* 2 */ 93 | } 94 | 95 | /* Text-level semantics 96 | ========================================================================== */ 97 | 98 | /** 99 | * 1. Remove the gray background on active links in IE 10. 100 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 101 | */ 102 | 103 | a { 104 | background-color: transparent; /* 1 */ 105 | -webkit-text-decoration-skip: objects; /* 2 */ 106 | } 107 | 108 | /** 109 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom: none; /* 1 */ 115 | text-decoration: underline; /* 2 */ 116 | text-decoration: underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight: bolder; 135 | } 136 | 137 | /** 138 | * 1. Correct the inheritance and scaling of font size in all browsers. 139 | * 2. Correct the odd `em` font sizing in all browsers. 140 | */ 141 | 142 | code, 143 | kbd, 144 | samp { 145 | font-family: monospace, monospace; /* 1 */ 146 | font-size: 1em; /* 2 */ 147 | } 148 | 149 | /** 150 | * Add the correct font style in Android 4.3-. 151 | */ 152 | 153 | dfn { 154 | font-style: italic; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Add the correct display in IE 9-. 200 | */ 201 | 202 | audio, 203 | video { 204 | display: inline-block; 205 | } 206 | 207 | /** 208 | * Add the correct display in iOS 4-7. 209 | */ 210 | 211 | audio:not([controls]) { 212 | display: none; 213 | height: 0; 214 | } 215 | 216 | /** 217 | * Remove the border on images inside links in IE 10-. 218 | */ 219 | 220 | img { 221 | border-style: none; 222 | } 223 | 224 | /** 225 | * Hide the overflow in IE. 226 | */ 227 | 228 | svg:not(:root) { 229 | overflow: hidden; 230 | } 231 | 232 | /* Forms 233 | ========================================================================== */ 234 | 235 | /** 236 | * 1. Change the font styles in all browsers (opinionated). 237 | * 2. Remove the margin in Firefox and Safari. 238 | */ 239 | 240 | button, 241 | input, 242 | optgroup, 243 | select, 244 | textarea { 245 | font-family: sans-serif; /* 1 */ 246 | font-size: 100%; /* 1 */ 247 | line-height: 1.15; /* 1 */ 248 | margin: 0; /* 2 */ 249 | } 250 | 251 | /** 252 | * Show the overflow in IE. 253 | * 1. Show the overflow in Edge. 254 | */ 255 | 256 | button, 257 | input { /* 1 */ 258 | overflow: visible; 259 | } 260 | 261 | /** 262 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 263 | * 1. Remove the inheritance of text transform in Firefox. 264 | */ 265 | 266 | button, 267 | select { /* 1 */ 268 | text-transform: none; 269 | } 270 | 271 | /** 272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 273 | * controls in Android 4. 274 | * 2. Correct the inability to style clickable types in iOS and Safari. 275 | */ 276 | 277 | button, 278 | html [type="button"], /* 1 */ 279 | [type="reset"], 280 | [type="submit"] { 281 | -webkit-appearance: button; /* 2 */ 282 | } 283 | 284 | /** 285 | * Remove the inner border and padding in Firefox. 286 | */ 287 | 288 | button::-moz-focus-inner, 289 | [type="button"]::-moz-focus-inner, 290 | [type="reset"]::-moz-focus-inner, 291 | [type="submit"]::-moz-focus-inner { 292 | border-style: none; 293 | padding: 0; 294 | } 295 | 296 | /** 297 | * Restore the focus styles unset by the previous rule. 298 | */ 299 | 300 | button:-moz-focusring, 301 | [type="button"]:-moz-focusring, 302 | [type="reset"]:-moz-focusring, 303 | [type="submit"]:-moz-focusring { 304 | outline: 1px dotted ButtonText; 305 | } 306 | 307 | /** 308 | * Correct the padding in Firefox. 309 | */ 310 | 311 | fieldset { 312 | padding: 0.35em 0.75em 0.625em; 313 | } 314 | 315 | /** 316 | * 1. Correct the text wrapping in Edge and IE. 317 | * 2. Correct the color inheritance from `fieldset` elements in IE. 318 | * 3. Remove the padding so developers are not caught out when they zero out 319 | * `fieldset` elements in all browsers. 320 | */ 321 | 322 | legend { 323 | box-sizing: border-box; /* 1 */ 324 | color: inherit; /* 2 */ 325 | display: table; /* 1 */ 326 | max-width: 100%; /* 1 */ 327 | padding: 0; /* 3 */ 328 | white-space: normal; /* 1 */ 329 | } 330 | 331 | /** 332 | * 1. Add the correct display in IE 9-. 333 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 334 | */ 335 | 336 | progress { 337 | display: inline-block; /* 1 */ 338 | vertical-align: baseline; /* 2 */ 339 | } 340 | 341 | /** 342 | * Remove the default vertical scrollbar in IE. 343 | */ 344 | 345 | textarea { 346 | overflow: auto; 347 | } 348 | 349 | /** 350 | * 1. Add the correct box sizing in IE 10-. 351 | * 2. Remove the padding in IE 10-. 352 | */ 353 | 354 | [type="checkbox"], 355 | [type="radio"] { 356 | box-sizing: border-box; /* 1 */ 357 | padding: 0; /* 2 */ 358 | } 359 | 360 | /** 361 | * Correct the cursor style of increment and decrement buttons in Chrome. 362 | */ 363 | 364 | [type="number"]::-webkit-inner-spin-button, 365 | [type="number"]::-webkit-outer-spin-button { 366 | height: auto; 367 | } 368 | 369 | /** 370 | * 1. Correct the odd appearance in Chrome and Safari. 371 | * 2. Correct the outline style in Safari. 372 | */ 373 | 374 | [type="search"] { 375 | -webkit-appearance: textfield; /* 1 */ 376 | outline-offset: -2px; /* 2 */ 377 | } 378 | 379 | /** 380 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 381 | */ 382 | 383 | [type="search"]::-webkit-search-cancel-button, 384 | [type="search"]::-webkit-search-decoration { 385 | -webkit-appearance: none; 386 | } 387 | 388 | /** 389 | * 1. Correct the inability to style clickable types in iOS and Safari. 390 | * 2. Change font properties to `inherit` in Safari. 391 | */ 392 | 393 | ::-webkit-file-upload-button { 394 | -webkit-appearance: button; /* 1 */ 395 | font: inherit; /* 2 */ 396 | } 397 | 398 | /* Interactive 399 | ========================================================================== */ 400 | 401 | /* 402 | * Add the correct display in IE 9-. 403 | * 1. Add the correct display in Edge, IE, and Firefox. 404 | */ 405 | 406 | details, /* 1 */ 407 | menu { 408 | display: block; 409 | } 410 | 411 | /* 412 | * Add the correct display in all browsers. 413 | */ 414 | 415 | summary { 416 | display: list-item; 417 | } 418 | 419 | /* Scripting 420 | ========================================================================== */ 421 | 422 | /** 423 | * Add the correct display in IE 9-. 424 | */ 425 | 426 | canvas { 427 | display: inline-block; 428 | } 429 | 430 | /** 431 | * Add the correct display in IE. 432 | */ 433 | 434 | template { 435 | display: none; 436 | } 437 | 438 | /* Hidden 439 | ========================================================================== */ 440 | 441 | /** 442 | * Add the correct display in IE 10-. 443 | */ 444 | 445 | [hidden] { 446 | display: none; 447 | } -------------------------------------------------------------------------------- /parts/_segment.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | // Segment 3 | .M-segment { 4 | position: relative; 5 | box-shadow: 0 1px 2px 0 $med-gray-translucent; 6 | margin: 1rem 0; 7 | padding: 1rem; 8 | border-radius: 2px; 9 | border: 1px solid $med-gray; 10 | 11 | > *:first-child{ 12 | margin-top: 0; 13 | 14 | } 15 | 16 | > *:last-child,{ 17 | margin-bottom: 0; 18 | 19 | } 20 | } -------------------------------------------------------------------------------- /parts/_tables.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | // Table 3 | 4 | $header-row-color: #333; 5 | $body-row-color: $dark-gray; 6 | 7 | 8 | .M-table--full-width{ 9 | width: 100%; 10 | } 11 | 12 | .M-table--striped{ 13 | tbody tr:nth-child(2n){ 14 | background: $faint-gray; 15 | } 16 | } 17 | 18 | .M-table { 19 | 20 | border-collapse: collapse; 21 | table-layout: fixed; 22 | margin: 1rem 0; 23 | 24 | th:first-child, 25 | td:first-child{ 26 | padding-left: .375rem; 27 | } 28 | 29 | 30 | th, 31 | td { 32 | text-align: left; 33 | padding: .75rem 0 .75rem 2rem; 34 | @for $i from 1 through 10{ 35 | &.tcol-#{$i}rem { width: #{$i}rem; } 36 | } 37 | 38 | @include media-query($med-screen){ 39 | @for $i from 1 through 10{ 40 | &.tcol-#{$i}rem { width: inherit; } 41 | } 42 | } 43 | } 44 | 45 | thead th{ 46 | border-bottom: $header-row-color 2px solid; 47 | } 48 | 49 | tbody td{ 50 | border-bottom: $body-row-color 1px solid; 51 | } 52 | 53 | } 54 | -------------------------------------------------------------------------------- /parts/_tiles.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | // Tiles 3 | 4 | .M-tile{ 5 | position: relative; 6 | .M-tile__content{ 7 | position: absolute; 8 | top: 0; bottom: 0; 9 | left: 0; right: 0; 10 | overflow: hidden; 11 | } 12 | 13 | &.M-tile--sm-1-x-1{ padding-bottom: 100%;} 14 | &.M-tile--sm-2-x-1{ padding-bottom: 200%;} 15 | &.M-tile--sm-2-x-3{padding-bottom: 150%;} 16 | &.M-tile--sm-3-x-4{padding-bottom: 133.333%;} 17 | &.M-tile--sm-3-x-1{ padding-bottom: 300;} 18 | &.M-tile--sm-4-x-1{ padding-bottom: 400%;} 19 | &.M-tile--sm-1-x-1{padding-bottom: 100%;} 20 | &.M-tile--sm-2-x-1{padding-bottom: 50%;} 21 | &.M-tile--sm-3-x-1{padding-bottom: 33.3333%;} 22 | &.M-tile--sm-4-x-1{padding-bottom: 25%;} 23 | &.M-tile--sm-3-x-2{padding-bottom: 66.6667%;} 24 | &.M-tile--sm-4-x-3{padding-bottom: 75%;} 25 | &.M-tile--sm-16-x-9{padding-bottom: 56.25%;} 26 | } 27 | 28 | @include media-query($med-screen){ 29 | .M-tile{ 30 | &.M-tile--md-1-x-1{ padding-bottom: 100%;} 31 | &.M-tile--md-2-x-1{ padding-bottom: 200%;} 32 | &.M-tile--md-2-x-3{padding-bottom: 150%;} 33 | &.M-tile--md-3-x-4{padding-bottom: 133.333%;} 34 | &.M-tile--md-3-x-1{ padding-bottom: 300;} 35 | &.M-tile--md-4-x-1{ padding-bottom: 400%;} 36 | &.M-tile--md-3-x-2{ padding-bottom: 66.6667%;} 37 | &.M-tile--md-4-x-3{ padding-bottom: 75%;} 38 | &.M-tile--md-16-x-9{padding-bottom: 56.25%;} 39 | &.M-tile--md-1-x-3{ padding-bottom: 300%;} 40 | &.M-tile--md-1-x-3{ padding-bottom: 200%;} 41 | &.M-tile--md-1-x-4{ padding-bottom: 400%;} 42 | 43 | } 44 | } 45 | 46 | @include media-query($lg-screen){ 47 | .M-tile{ 48 | &.M-tile--lg-1-x-1{ padding-bottom: 100%;} 49 | &.M-tile--lg-2-x-3{padding-bottom: 150%;} 50 | &.M-tile--lg-3-x-4{padding-bottom: 133.333%;} 51 | &.M-tile--lg-2-x-1{ padding-bottom: 200%;} 52 | &.M-tile--lg-3-x-1{ padding-bottom: 300;} 53 | &.M-tile--lg-4-x-1{ padding-bottom: 400%;} 54 | &.M-tile--lg-1-x-1{ padding-bottom: 100%;} 55 | &.M-tile--lg-2-x-1{ padding-bottom: 50%;} 56 | &.M-tile--lg-3-x-1{ padding-bottom: 33.3333%;} 57 | &.M-tile--lg-4-x-1{ padding-bottom: 25%;} 58 | &.M-tile--lg-3-x-2{ padding-bottom: 66.6667%;} 59 | &.M-tile--lg-4-x-3{ padding-bottom: 75%;} 60 | &.M-tile--lg-16-x-9{padding-bottom: 56.25%;} 61 | &.M-tile--lg-3-x-4{padding-bottom: 133.333%;} 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /parts/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | body, h1, h2, h3, h4, h5, h6 { 4 | font-size-adjust: 0.5; 5 | font-weight: 400; 6 | font-family: $font-stack; 7 | } 8 | 9 | 10 | 11 | body { 12 | line-height: 1.25; /* equivalent to 20px */ 13 | } 14 | 15 | // ========================= 16 | // Typography 17 | 18 | h1,h2,h3,h4,h5,h6{ 19 | margin-bottom: 1rem; 20 | 21 | } 22 | 23 | h1 { 24 | font-size: 2rem;/* 2x body copy size = 32px */ 25 | line-height: 1.25; /* 45px / 36px */ 26 | 27 | } 28 | 29 | h2 { 30 | font-size: 1.625rem;/* 2x body copy size = 32px */ 31 | line-height: 1.1538; /* 45px / 36px */ 32 | } 33 | 34 | h3 { 35 | font-size: 1.375rem;/* 2x body copy size = 32px */ 36 | line-height: 1.136363; /* 45px / 36px */ 37 | 38 | } 39 | 40 | h4 { 41 | font-size: 1.125rem;/* 2x body copy size = 32px */ 42 | line-height: 1.136363; /* 45px / 36px */ 43 | } 44 | 45 | p{ 46 | margin-bottom: 1.5rem; 47 | font-weight: 400; 48 | } 49 | 50 | 51 | @include media-query($med-screen){ 52 | body { 53 | font-size: 1rem; /* equivalent to 16px */ 54 | line-height: 1.625; /* equivalent to 22px */ 55 | } 56 | 57 | h1{ 58 | font-size: 2.5rem; /* 2.5x body copy size = 40px */ 59 | line-height: 1.125; 60 | } 61 | h2{ 62 | font-size: 2rem; /* 2.5x body copy size = 40px */ 63 | line-height: 1.25; 64 | } 65 | h3{ 66 | font-size: 1.5rem; /* 2.5x body copy size = 40px */ 67 | line-height: 1.125; 68 | } 69 | h4{ 70 | font-size: 1.125rem; /* 2.5x body copy size = 40px */ 71 | line-height: 1.222222; 72 | } 73 | 74 | 75 | } 76 | 77 | @include media-query($lg-screen){ 78 | h1{ 79 | font-size: 3rem; /* 3x body copy size = 48px */ 80 | line-height: 1.05; 81 | /* keep to a multiple of the 20px line height 82 | and something more appropriate for display headings */ 83 | } 84 | h2{ 85 | font-size: 2.25rem; /* 3x body copy size = 48px */ 86 | line-height: 1.25; 87 | /* keep to a multiple of the 20px line height 88 | and something more appropriate for display headings */ 89 | } 90 | h3{ 91 | font-size: 1.75rem; /* 3x body copy size = 48px */ 92 | line-height: 1.05; 93 | /* keep to a multiple of the 20px line height 94 | and something more appropriate for display headings */ 95 | } 96 | h4{ 97 | font-size: 1.125rem; /* 3x body copy size = 48px */ 98 | line-height: 1.222222; 99 | /* keep to a multiple of the 20px line height 100 | and something more appropriate for display headings */ 101 | } 102 | } 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | // ========================= 113 | // Text Formatting 114 | 115 | mark{ 116 | background: $highlight-color; 117 | padding: 0 .2em; 118 | } 119 | 120 | small{ 121 | font-size: .75rem; 122 | } 123 | 124 | a { 125 | text-decoration: none; 126 | color: $light-primary; 127 | cursor: pointer; 128 | 129 | &:hover{ 130 | color: $primary-color; 131 | } 132 | 133 | &:focus{ 134 | outline: 0; 135 | } 136 | } 137 | 138 | del { 139 | text-decoration: line-through; 140 | } 141 | -------------------------------------------------------------------------------- /parts/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | $med-screen: 750px; 3 | $lg-screen: 1000px; 4 | 5 | $container-content-max-width: 960px; 6 | 7 | $font-stack: 'Libre Franklin', 'Helvetica Neue', 'Helvetica', 'Calibri', sans-serif; 8 | $default-font-color: #111; 9 | 10 | // Color Scheme Variables 11 | $primary-color: rgba(58, 83, 155, 1.0); 12 | $primary-color-tranlucent: rgba(58, 83, 155, .22); 13 | $dark-primary: rgba(44, 62, 80, 1.0); 14 | 15 | $light-primary: rgba(92, 151, 191, 1.0); 16 | 17 | 18 | $dark-gray: #95A5A6; 19 | $faint-gray: rgba(238, 238, 238,1); 20 | $faint-gray-translucent: rgba(238, 238, 238, .5); 21 | $light-gray: rgba(210, 215, 211, 1); 22 | $light-gray-translucent: rgba(210, 215, 211, .5); 23 | 24 | $med-gray: rgba(191, 191, 191, 1); 25 | $med-gray-translucent: rgba(191, 191, 191, .5); 26 | 27 | $light-text-shadow : 1px 1px 1px rgba(0,0,0, .1); 28 | $dark-text-shadow : 1px 1px 1px rgba(0,0,0, .45); 29 | // Import partials from `sass_dir` (defaults to `_sass`) 30 | 31 | $code-color: #96281B; 32 | $highlight-color: rgba(247, 202, 24, 1.0); 33 | 34 | $success-color: #019875; 35 | $info-color: #5C97BF; 36 | $warn-color: #F4B350; 37 | $fail-color: #E26A6A; 38 | 39 | $success-color_lightened: #34CBA8; 40 | $info-color_lightened: #8FCAF2; 41 | $warn-color_lightened: #FFE683; 42 | $fail-color_lightened: #FF9D9D; 43 | 44 | $bg-success-color: #d8f6f2; 45 | $bg-info-color: #cfe7fb; 46 | $bg-warn-color: #faddb0; 47 | $bg-fail-color: #f3bfbf; 48 | 49 | $bg-disabled-color: $light-gray; 50 | $bg-disabled-opacity: .4; 51 | 52 | $bg-inverted-color: #333; 53 | $inverted-font-color: #fff; 54 | 55 | $txt-muted-color: $dark-gray; 56 | 57 | // Nav Variables 58 | $nav-height: 80; 59 | $nav-height-mobile: $nav-height * .75; 60 | $hamburger-line-color: #333; 61 | $hamburger-hover-color: $light-gray; 62 | 63 | $site-border-radius: 2px; 64 | --------------------------------------------------------------------------------