From 17f23ec926c6105bbe13a4de61c6490efc0c5cbf Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Wed, 17 Apr 2019 13:50:54 -0500 Subject: [PATCH 01/29] fsa-style@2.2.0 updated [closes #234] --- css/fsa-design-system.css | 1233 ++++++++++++++++++++---- css/fsa-design-system.css.map | 27 +- css/fsa-design-system.min.css | 2 +- css/fsa-design-system.min.css.map | 27 +- img/angle-arrow-down-hover.png | Bin 15183 -> 209 bytes img/angle-arrow-down-primary-hover.png | Bin 14730 -> 213 bytes img/angle-arrow-down-primary.png | Bin 14731 -> 214 bytes img/angle-arrow-down.png | Bin 512 -> 231 bytes img/angle-arrow-up-primary-hover.png | Bin 2567 -> 222 bytes img/angle-arrow-up-primary.png | Bin 2546 -> 213 bytes img/arrow-both.png | Bin 0 -> 227 bytes img/arrow-both.svg | 1 + img/circle-124.png | Bin 17738 -> 2232 bytes img/close-primary.png | Bin 0 -> 206 bytes img/close-primary.svg | 16 + img/close.png | Bin 2031 -> 215 bytes img/close.svg | 13 +- img/correct8-alt.png | Bin 0 -> 211 bytes img/correct8-alt.svg | 1 + img/external-link-alt-hover.png | Bin 15206 -> 663 bytes img/external-link-alt.png | Bin 1218 -> 833 bytes img/external-link-hover.png | Bin 2105 -> 1099 bytes img/external-link.png | Bin 2043 -> 1036 bytes img/favicons/favicon-114.png | Bin 606 -> 603 bytes img/favicons/favicon-40.png | Bin 2030 -> 1328 bytes img/favicons/favicon-57.png | Bin 526 -> 521 bytes img/favicons/favicon-72.png | Bin 400 -> 399 bytes img/hero.png | Bin 740766 -> 689079 bytes img/minus-alt.png | Bin 14612 -> 147 bytes img/plus-alt.png | Bin 14716 -> 249 bytes img/search-alt.png | Bin 17585 -> 372 bytes img/search-primary.png | Bin 0 -> 345 bytes img/search-primary.svg | 12 + img/social-icons/png/facebook25.png | Bin 406 -> 270 bytes img/social-icons/png/rss25.png | Bin 1018 -> 502 bytes img/social-icons/png/twitter16.png | Bin 841 -> 431 bytes img/social-icons/png/youtube15.png | Bin 1036 -> 590 bytes package.json | 2 +- 38 files changed, 1107 insertions(+), 227 deletions(-) create mode 100644 img/arrow-both.png create mode 100644 img/arrow-both.svg create mode 100644 img/close-primary.png create mode 100644 img/close-primary.svg create mode 100644 img/correct8-alt.png create mode 100644 img/correct8-alt.svg create mode 100644 img/search-primary.png create mode 100644 img/search-primary.svg diff --git a/css/fsa-design-system.css b/css/fsa-design-system.css index 988abb4f..2c9affc4 100644 --- a/css/fsa-design-system.css +++ b/css/fsa-design-system.css @@ -1,12 +1,4 @@ @charset "UTF-8"; -html { - box-sizing: border-box; -} - -*, *::after, *::before { - box-sizing: inherit; -} - /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. @@ -414,6 +406,7 @@ html { } body { + font-size: 17px; font-size: 17px; font-size: 1.7rem; } @@ -433,13 +426,13 @@ a:hover, a:active { color: #205493; } -a:visited { - color: #4c2c92; +a:focus { + outline: 2px dotted #aeb0b5; + outline-offset: 3px; } -a:focus { - box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf; - outline: 0; +a:visited { + color: #4c2c92; } .usa-external_link::after { @@ -485,46 +478,53 @@ h6 { clear: both; font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif; line-height: 1.3; - margin-bottom: .5em; + margin-bottom: 0.5em; margin-top: 1.5em; } h1 { + font-size: 40px; font-size: 40px; font-size: 4rem; font-weight: 700; } h2 { + font-size: 30px; font-size: 30px; font-size: 3rem; font-weight: 700; } h3 { + font-size: 20px; font-size: 20px; font-size: 2rem; font-weight: 700; } h4 { + font-size: 17px; font-size: 17px; font-size: 1.7rem; font-weight: 700; } h5 { + font-size: 15px; font-size: 15px; font-size: 1.5rem; font-weight: 700; } h6 { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; + font-size: 13px; font-size: 13px; font-size: 1.3rem; font-weight: 400; + line-height: 1.5; text-transform: uppercase; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; } cite, @@ -534,16 +534,14 @@ dfn { font-style: normal; } -.usa-content p:not(.usa-font-lead), +.usa-content p, .usa-content ul:not(.usa-accordion):not(.usa-accordion-bordered), .usa-content ol:not(.usa-accordion):not(.usa-accordion-bordered) { - max-width: 530px; - max-width: 53rem; + max-width: 66ch; } .usa-content-list { - max-width: 530px; - max-width: 53rem; + max-width: 66ch; } .usa-sans p, @@ -566,6 +564,7 @@ dfn { } .usa-display { + font-size: 20px; font-size: 20px; font-size: 2rem; font-weight: 700; @@ -589,32 +588,15 @@ dfn { .usa-font-lead { font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif; font-size: 20px; + font-size: 20px; font-size: 2rem; + font-weight: 400; line-height: 1.7; max-width: 770px; + max-width: 770px; max-width: 77rem; } -.usa-image-block { - position: relative; -} - -.usa-image-text-block { - color: #ffffff; - left: 0; - margin-left: 8%; - position: absolute; - top: 0; -} - -.usa-image-text { - margin-top: 0; -} - -.usa-drop_text { - margin-bottom: 0; -} - .usa-background-dark { background-color: #323a45; } @@ -633,6 +615,7 @@ dfn { } .usa-text-small { + font-size: 13px; font-size: 13px; font-size: 1.3rem; margin-top: 0; @@ -704,65 +687,92 @@ dfn { .usa-alert, .fsa-alert { background-color: #f1f1f1; - background-position: 10px 20px; - background-position: 1rem 2rem; + background-position: 20px 20px; + background-position: 20px 20px; + background-position: 2rem 2rem; background-repeat: no-repeat; - background-size: 4rem; - margin-top: 1.5em; - padding: 1em; + background-size: 5.2rem; + padding-bottom: 14px; + padding-bottom: 14px; + padding-bottom: 1.4rem; + padding-left: 30px; + padding-left: 30px; + padding-left: 3rem; + padding-right: 20px; + padding-right: 20px; + padding-right: 2rem; + padding-top: 20px; + padding-top: 20px; + padding-top: 2rem; + position: relative; } -@media screen and (min-width: 600px) { - .usa-alert, .fsa-alert { - background-size: 5.2rem; - } +.usa-alert::before, .fsa-alert::before { + background-color: #8b8b8b; + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 10px; + width: 10px; + width: 1rem; +} + +.usa-alert a, .fsa-alert a { + color: #205493; +} + +.usa-alert a:focus, .fsa-alert a:focus, .usa-alert a:hover, .fsa-alert a:hover { + color: #112e51; } .usa-alert ul, .fsa-alert ul { margin-bottom: 0; - margin-top: 1em; - padding-left: 1em; + margin-top: 10px; + margin-top: 10px; + margin-top: 1rem; + padding-left: 10px; + padding-left: 10px; + padding-left: 1rem; +} + +.usa-alert-slim { + background-position: 20px 10px; + background-position: 20px 10px; + background-position: 2rem 1rem; + padding-bottom: 10px; + padding-bottom: 10px; + padding-bottom: 1rem; + padding-top: 10px; + padding-top: 10px; + padding-top: 1rem; +} + +.usa-alert-slim .usa-alert-text:only-child, .usa-alert-slim .fsa-alert__text:only-child { + margin-bottom: 5px; + margin-bottom: 5px; + margin-bottom: 0.5rem; + padding-top: 5px; + padding-top: 5px; + padding-top: 0.5rem; } .usa-alert-icon, .fsa-alert__icon { display: table-cell; padding-right: 10px; + padding-right: 10px; padding-right: 1rem; } .usa-alert-body, .fsa-alert__body { display: table-cell; - padding-left: 35px; - padding-left: 3.5rem; vertical-align: top; } -@media screen and (min-width: 600px) { - .usa-alert-body, .fsa-alert__body { - padding-left: 5rem; - } -} - -.usa-alert-body p:first-child, .fsa-alert__body p:first-child { - margin-top: 8px; - margin-top: 0.8rem; -} - -.usa-alert-body p:last-child, .fsa-alert__body p:last-child { - margin-bottom: 8px; - margin-bottom: 0.8rem; -} - .usa-alert-heading, .fsa-alert__heading { - margin-bottom: 3px; - margin-bottom: .3rem; margin-top: 0; -} - -@media screen and (min-width: 600px) { - .usa-alert-heading, .fsa-alert__heading { - margin-top: .3rem; - } + margin-bottom: 0; } .usa-alert-text, .fsa-alert__text { @@ -771,38 +781,89 @@ dfn { margin-top: 0; } +.usa-alert-text:only-child, .fsa-alert__text:only-child { + margin-bottom: 10px; + margin-bottom: 10px; + margin-bottom: 1rem; + padding-top: 5px; + padding-top: 5px; + padding-top: 0.5rem; +} + .usa-alert-success, .fsa-alert--success { background-color: #e7f4e4; background-image: url("../img/alerts/success.png"); background-image: url("../img/alerts/success.svg"); } +.usa-alert-success::before, .fsa-alert--success::before { + background-color: #2e8540; +} + +.usa-alert-success .usa-alert-body, .fsa-alert--success .usa-alert-body, .usa-alert-success .fsa-alert__body, .fsa-alert--success .fsa-alert__body { + padding-left: 50px; + padding-left: 50px; + padding-left: 5rem; +} + .usa-alert-warning, .fsa-alert--warning { background-color: #fff1d2; background-image: url("../img/alerts/warning.png"); background-image: url("../img/alerts/warning.svg"); } +.usa-alert-warning::before, .fsa-alert--warning::before { + background-color: #fdb81e; +} + +.usa-alert-warning .usa-alert-body, .fsa-alert--warning .usa-alert-body, .usa-alert-warning .fsa-alert__body, .fsa-alert--warning .fsa-alert__body { + padding-left: 50px; + padding-left: 50px; + padding-left: 5rem; +} + .usa-alert-error, .fsa-alert--error { background-color: #f9dede; background-image: url("../img/alerts/error.png"); background-image: url("../img/alerts/error.svg"); } +.usa-alert-error::before, .fsa-alert--error::before { + background-color: #e31c3d; +} + +.usa-alert-error .usa-alert-body, .fsa-alert--error .usa-alert-body, .usa-alert-error .fsa-alert__body, .fsa-alert--error .fsa-alert__body { + padding-left: 50px; + padding-left: 50px; + padding-left: 5rem; +} + .usa-alert-info, .fsa-alert--info { background-color: #e1f3f8; background-image: url("../img/alerts/info.png"); background-image: url("../img/alerts/info.svg"); } +.usa-alert-info::before, .fsa-alert--info::before { + background-color: #02bfe7; +} + +.usa-alert-info .usa-alert-body, .fsa-alert--info .usa-alert-body, .usa-alert-info .fsa-alert__body, .fsa-alert--info .fsa-alert__body { + padding-left: 50px; + padding-left: 50px; + padding-left: 5rem; +} + .usa-alert-no_icon, .fsa-alert--no-icon { background-image: none; } .usa-alert-paragraph { - width: 530px; - width: 53rem; - padding: 1em 3em 1em 1em; + width: 66ch; +} + +.usa-alert, .fsa-alert { + margin-top: 1.5em; } /* stylelint-disable at-rule-empty-line-before */ @@ -840,6 +901,7 @@ dfn { background-color: #fad980; margin: 0; padding: 8px 12px; + padding: 8px 12px; padding: 0.8rem 1.2rem; border-bottom: 2px solid #fdb81e; text-align: center; @@ -849,6 +911,14 @@ html { scroll-behavior: smooth; } +html { + box-sizing: border-box; +} + +*, *::after, *::before { + box-sizing: inherit; +} + body { overflow-x: initial; background-color: #f8fafc; @@ -868,7 +938,8 @@ body { } } -main:focus { +main:focus, +main[tabindex]:focus { outline: 0; } @@ -884,6 +955,7 @@ tt { border-radius: 2px; background-color: #f8fafc; padding: 2px; + padding: 2px; padding: 0.2rem; } @@ -902,6 +974,7 @@ code strong { } pre { + padding: 4px; padding: 4px; padding: 0.4rem; } @@ -909,6 +982,12 @@ pre { abbr[title], acronym[title], dfn[title] { cursor: default; + text-decoration: none; +} + +a abbr[title], a acronym[title], +a dfn[title] { + cursor: pointer; } ins { @@ -926,16 +1005,18 @@ mark { } blockquote { + font-size: 15px; font-size: 15px; font-size: 1.5rem; font-style: italic; margin: 0; padding-left: 12px; + padding-left: 12px; padding-left: 1.2rem; border-left: 4px solid #dbdad9; + border-left: 4px solid #dbdad9; border-left: 0.4rem solid #dbdad9; - max-width: 530px; - max-width: 53rem; + max-width: 66ch; } @media (min-width: 54em) { @@ -965,6 +1046,17 @@ fieldset[disabled] { opacity: .6; } +[contentEditable=true]:focus, +[href]:focus, +[tabindex]:focus, +button:not([disabled]):focus, +iframe:focus, +input:not([disabled]):focus, +select:not([disabled]):focus, +textarea:not([disabled]):focus { + outline: 3px solid #009afa; +} + .fsa-grid { letter-spacing: -.31em; *letter-spacing: normal; @@ -978,6 +1070,7 @@ fieldset[disabled] { -ms-flex-line-pack: start; align-content: flex-start; margin-left: -25.5px; + margin-left: -25.5px; margin-left: -2.55rem; } @@ -988,6 +1081,7 @@ fieldset[disabled] { .fsa-grid__demo { background-color: #f0f0f0; padding: 4px; + padding: 4px; padding: 0.4rem; } @@ -1006,6 +1100,7 @@ fieldset[disabled] { vertical-align: top; text-rendering: auto; padding-left: 25.5px; + padding-left: 25.5px; padding-left: 2.55rem; -ms-flex: 1; flex: 1; @@ -1044,6 +1139,7 @@ fieldset[disabled] { vertical-align: top; text-rendering: auto; padding-left: 25.5px; + padding-left: 25.5px; padding-left: 2.55rem; } @@ -1480,6 +1576,7 @@ fieldset[disabled] { background: white; font-weight: 700; padding: 10px 15px; + padding: 10px 15px; padding: 1rem 1.5rem; position: absolute; left: 50%; @@ -1492,9 +1589,9 @@ fieldset[disabled] { transition: all .2s ease-in-out; -ms-transform: translateX(-50%); transform: translateX(-50%); - outline: 0; position: absolute; top: 12px; + top: 12px; top: 1.2rem; } @@ -1531,10 +1628,12 @@ h1, .h1 { font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 700; font-size: 42px; + font-size: 42px; font-size: 4.2rem; font-weight: 700; font-weight: 400; margin-top: 12px; + margin-top: 12px; margin-top: 1.2rem; margin-bottom: 0; } @@ -1544,6 +1643,7 @@ h1 + p, .h1 + p { } .fsa-section__bd > h1, .fsa-section__bd > .h1 { + margin-top: 24px; margin-top: 24px; margin-top: 2.4rem; } @@ -1559,6 +1659,7 @@ h2, .h2 { font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 700; font-size: 30px; + font-size: 30px; font-size: 3rem; font-weight: 700; } @@ -1567,11 +1668,18 @@ h2 + p, .h2 + p { margin-top: .5em; } +.fsa-text--h1 + h2, +h1 + h2, .fsa-text--h1 + .h2, +h1 + .h2 { + margin-top: .5em; +} + h3, .h3 { color: #494440; font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 700; font-size: 20px; + font-size: 20px; font-size: 2rem; font-weight: 700; } @@ -1585,6 +1693,7 @@ h4, .h4 { font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 700; font-size: 17px; + font-size: 17px; font-size: 1.7rem; font-weight: 700; } @@ -1598,6 +1707,7 @@ h5, .h5 { font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 700; font-size: 15px; + font-size: 15px; font-size: 1.5rem; font-weight: 700; } @@ -1610,10 +1720,11 @@ h6, .h6 { color: #494440; font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 700; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; + font-size: 13px; font-size: 13px; font-size: 1.3rem; font-weight: 400; + line-height: 1.5; text-transform: uppercase; } @@ -1624,6 +1735,7 @@ h6 + p, .h6 + p { .fsa-text--lead, .fsa-font-lead, .usa-font-lead { + font-size: 20px; font-size: 20px; font-size: 2rem; line-height: 1.3; @@ -1683,6 +1795,7 @@ li { padding: 0; display: inline-block; margin-right: 8px; + margin-right: 8px; margin-right: 0.8rem; } @@ -1749,6 +1862,7 @@ p + ol { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 39px; + height: 39px; height: 3.9rem; -webkit-user-select: none; -moz-user-select: none; @@ -1758,28 +1872,35 @@ p + ol { line-height: 1; position: relative; top: 1px; + top: 1px; top: .1rem; text-decoration: none !important; font-size: 17px; + font-size: 17px; font-size: 1.7rem; font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 700; display: inline-block; border-radius: 0.4rem; padding: 11px 18px 11px; + padding: 11px 18px 11px; padding: 1.1rem 1.8rem 1.1rem; background-color: #205493; color: #fff; } .fsa-btn + .fsa-select, -.fsa-btn + .form-text, +.fsa-btn + .fsa-input, +.fsa-btn + .fsa-btn-group, +.fsa-btn + span.fsa-spinbox, .fsa-btn + .fsa-btn { + margin-left: 6px; margin-left: 6px; margin-left: 0.6rem; } .fsa-btn + .fsa-btn--flat { + margin-left: 12px; margin-left: 12px; margin-left: 1.2rem; } @@ -1809,10 +1930,15 @@ p + ol { background-color: #183f6e; } -.fsa-btn:focus:not([disabled]), .fsa-btn:active:not([disabled]) { +.fsa-btn:focus:not([disabled]) { + outline-offset: 3px; +} + +.fsa-btn:active:not([disabled]) { color: #fff; background-color: #0e2642; box-shadow: none; + outline-offset: 3px; } .fsa-btn[disabled] { @@ -1838,7 +1964,6 @@ p + ol { } .fsa-btn--primary { - white-space: nowrap; background-color: #205493; color: #fff; } @@ -1855,13 +1980,12 @@ p + ol { background-color: #183f6e; } -.fsa-btn--primary:focus:not([disabled]), .fsa-btn--primary:active:not([disabled]) { +.fsa-btn--primary:active:not([disabled]) { color: #fff; background-color: #122e51; } .fsa-btn--secondary, .fsa-btn--alt { - white-space: nowrap; color: #205493; background-color: #fff; box-shadow: 0 0 0 1px #205493 inset; @@ -1880,7 +2004,7 @@ p + ol { background-color: #f2f2f2; } -.fsa-btn--secondary:focus:not([disabled]), .fsa-btn--secondary:active:not([disabled]), .fsa-btn--alt:focus:not([disabled]), .fsa-btn--alt:active:not([disabled]) { +.fsa-btn--secondary:active:not([disabled]), .fsa-btn--alt:active:not([disabled]) { color: #f2f2f2; background-color: #0e2642; box-shadow: none; @@ -1895,7 +2019,6 @@ p + ol { } .fsa-btn--tertiary { - white-space: nowrap; color: #fff; background-color: #cd2026; } @@ -1905,40 +2028,42 @@ p + ol { background-color: #90161b; } -.fsa-btn--tertiary:focus:not([disabled]), .fsa-btn--tertiary:active:not([disabled]) { +.fsa-btn--tertiary:active:not([disabled]) { color: #fff; background-color: #3e0a0b; } .fsa-btn--block { - white-space: nowrap; width: 100%; display: block; } .fsa-btn--small { - white-space: nowrap; + height: 30px; height: 30px; height: 3rem; padding: 8px 12px 8px; + padding: 8px 12px 8px; padding: 0.8rem 1.2rem 0.8rem; font-size: 14px; + font-size: 14px; font-size: 1.4rem; } .fsa-btn--large { - white-space: nowrap; + height: 48px; height: 48px; height: 4.8rem; padding: 14px 18px; + padding: 14px 18px; padding: 1.4rem 1.8rem; font-size: 20px; + font-size: 20px; font-size: 2rem; border-radius: 0.6rem; } .fsa-btn--flat { - white-space: nowrap; text-align: left; height: auto; padding-top: 0; @@ -1946,7 +2071,7 @@ p + ol { color: #0068ad; font-weight: inherit; background-color: transparent; - box-shadow: 0 0 0 1px transparent inset; + box-shadow: none; text-decoration: underline !important; } @@ -1959,17 +2084,13 @@ p + ol { color: #0068ad; } -.fsa-btn--flat:hover { - color: inherit; -} - .fsa-btn--flat:hover:not([disabled]) { color: #183f6e; background-color: transparent; } -.fsa-btn--flat:focus:not([disabled]), .fsa-btn--flat:active:not([disabled]) { - color: #0068ad; +.fsa-btn--flat:active:not([disabled]) { + color: #2f2c2a; background-color: transparent; box-shadow: none; } @@ -1997,6 +2118,7 @@ img { appearance: none; display: inline-block; height: 39px; + height: 39px; height: 3.9rem; border: 1px solid #c8c7c6; max-width: 100%; @@ -2005,6 +2127,7 @@ img { box-shadow: none; font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 17px; + font-size: 17px; font-size: 1.7rem; color: #2f2c2a; line-height: 1; @@ -2012,17 +2135,23 @@ img { } .fsa-input + .fsa-select, -.fsa-input + .form-text, +.fsa-input + .fsa-input, +.fsa-input + .fsa-btn-group, +.fsa-input + span.fsa-spinbox, .fsa-input + .fsa-btn, .fsa-textarea + .fsa-select, -.fsa-textarea + .form-text, +.fsa-textarea + .fsa-input, +.fsa-textarea + .fsa-btn-group, +.fsa-textarea + span.fsa-spinbox, .fsa-textarea + .fsa-btn { + margin-left: 6px; margin-left: 6px; margin-left: 0.6rem; } .fsa-input + .fsa-btn--flat, .fsa-textarea + .fsa-btn--flat { + margin-left: 12px; margin-left: 12px; margin-left: 1.2rem; } @@ -2043,11 +2172,11 @@ img { .fsa-textarea[readonly]:focus { border-color: inherit; box-shadow: none; - outline: 0; } .fsa-input, .fsa-textarea { + padding: 7px 8px 8px; padding: 7px 8px 8px; padding: 0.7rem 0.8rem 0.8rem; } @@ -2074,8 +2203,8 @@ img { .fsa-input:focus, .fsa-textarea:focus { - border-color: #4f78aa; - box-shadow: 0 0 0 1px #4f78aa inset; + border-color: #009afa; + box-shadow: 0 0 0 1px #009afa inset; } .fsa-input--error, @@ -2140,7 +2269,7 @@ img { .fsa-input--positive:focus, .fsa-textarea--positive:focus { - box-shadow: 0 0 0 0.2rem #4f78aa inset; + box-shadow: 0 0 0 0.2rem #009afa inset; border-color: transparent; } @@ -2152,23 +2281,33 @@ img { .fsa-input--small, .fsa-textarea--small { + height: 30px; height: 30px; height: 3rem; font-size: 14px; + font-size: 14px; font-size: 1.4rem; } .fsa-input--large, .fsa-textarea--large { + height: 48px; height: 48px; height: 4.8rem; font-size: 20px; + font-size: 20px; font-size: 2rem; padding-left: 12px; + padding-left: 12px; padding-left: 1.2rem; } +.fsa-input[size] { + width: auto; +} + .fsa-textarea { + min-height: 150px; min-height: 150px; min-height: 15rem; display: block; @@ -2176,6 +2315,7 @@ img { width: 100%; line-height: 1.5; padding: 8px; + padding: 8px; padding: 0.8rem; resize: vertical; } @@ -2183,6 +2323,7 @@ img { .fsa-textarea[rows] { height: auto; min-height: 60px; + min-height: 60px; min-height: 6rem; } @@ -2190,6 +2331,204 @@ img { box-sizing: border-box; } +.fsa-input[type=range], +[type=range] { + background-color: transparent; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + padding-left: 0; + display: block; + width: 100%; + padding: 0; + height: 24px; + height: 24px; + height: 2.4rem; +} + +.fsa-input[type=range]:focus, +[type=range]:focus { + outline: none !important; + box-shadow: none; +} + +.fsa-input[type=range]:focus::-webkit-slider-thumb, +[type=range]:focus::-webkit-slider-thumb { + box-shadow: 0 0 0 3px #009afa; +} + +.fsa-input[type=range]:focus::-moz-range-thumb, +[type=range]:focus::-moz-range-thumb { + box-shadow: 0 0 0 3px #009afa; +} + +.fsa-input[type=range]:focus::-ms-thumb, +[type=range]:focus::-ms-thumb { + box-shadow: 0 0 0 3px #009afa; + background-color: #009afa; + border: 0; +} + +.fsa-input[type=range]::-webkit-slider-runnable-track, +[type=range]::-webkit-slider-runnable-track { + background: #dbdad9; + cursor: pointer; + height: 12px; + height: 12px; + height: 1.2rem; + width: 100%; +} + +.fsa-input[type=range]::-moz-range-track, +[type=range]::-moz-range-track { + background: #dbdad9; + cursor: pointer; + height: 12px; + height: 12px; + height: 1.2rem; + width: 100%; +} + +.fsa-input[type=range]::-ms-track, +[type=range]::-ms-track { + background: #dbdad9; + cursor: pointer; + height: 12px; + height: 12px; + height: 1.2rem; + width: 100%; +} + +.fsa-input[type=range]::-webkit-slider-thumb, +[type=range]::-webkit-slider-thumb { + background: #fff; + box-shadow: 0 0 0 1px #75716e; + border-radius: 100%; + cursor: pointer; + height: 24px; + height: 24px; + height: 2.4rem; + width: 24px; + width: 24px; + width: 2.4rem; + -webkit-appearance: none; + appearance: none; + margin-top: -6px; + margin-top: -6px; + margin-top: -0.6rem; +} + +.fsa-input[type=range]::-moz-range-thumb, +[type=range]::-moz-range-thumb { + background: #fff; + box-shadow: 0 0 0 1px #75716e; + border-radius: 100%; + cursor: pointer; + height: 24px; + height: 24px; + height: 2.4rem; + width: 24px; + width: 24px; + width: 2.4rem; +} + +.fsa-input[type=range]::-ms-thumb, +[type=range]::-ms-thumb { + background: #fff; + box-shadow: 0 0 0 1px #75716e; + border-radius: 100%; + cursor: pointer; + height: 24px; + height: 24px; + height: 2.4rem; + width: 24px; + width: 24px; + width: 2.4rem; + box-shadow: none; + width: 12px; + width: 12px; + width: 1.2rem; + border: 0; + border-radius: 0; + background-color: #494440; +} + +.fsa-input[type=range]::-ms-fill-lower, +[type=range]::-ms-fill-lower { + background: #aeb0b5; + border: 1px solid #757575; + border-radius: 2rem; +} + +.fsa-input[type=range]::-ms-fill-upper, +[type=range]::-ms-fill-upper { + background: #aeb0b5; + border: 1px solid #757575; + border-radius: 2rem; +} + +[type='file'] { + height: auto; + font-size: 14px; + font-size: 14px; + font-size: 1.4rem; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + padding-top: 8px; +} + +[type='file']:not(.fsa-input) { + background-color: transparent; +} + +[type='file']::-ms-value { + border: 0; + background: transparent; + padding: 0; + margin: 0; +} + +[type='file']::-ms-browse { + appearance: none; + font-size: 13px; + font-size: 13px; + font-size: 1.3rem; + background-color: #fff; + border: 0; + box-shadow: 0 0 0 1px #205493 inset; + padding: 5px 8px 4px; + padding: 5px 8px 4px; + padding: 0.5rem 0.8rem 0.4rem; + color: #205493; + border-radius: 0.4rem; + margin-right: 8px; + margin-right: 8px; + margin-right: 0.8rem; + border-radius: 0; +} + +[type='file']::-webkit-file-upload-button { + -webkit-appearance: none; + appearance: none; + font-size: 13px; + font-size: 13px; + font-size: 1.3rem; + background-color: #fff; + border: 0; + box-shadow: 0 0 0 1px #205493 inset; + padding: 5px 8px 4px; + padding: 5px 8px 4px; + padding: 0.5rem 0.8rem 0.4rem; + color: #205493; + border-radius: 0.4rem; + margin-right: 8px; + margin-right: 8px; + margin-right: 0.8rem; +} + .fsa-form-list { display: block; list-style-type: none; @@ -2205,6 +2544,7 @@ img { } .fsa-form-list > li > .fsa-form-list { + margin-left: 24px; margin-left: 24px; margin-left: 2.4rem; } @@ -2216,6 +2556,28 @@ img { cursor: pointer; } +.fsa-checkbox__other, +.fsa-radio__other { + margin-top: .5em; + max-height: 0; + overflow: hidden; + transition: all .46s ease-in-out; + opacity: 0; + visibility: hidden; +} + +.fsa-radio:checked ~ .fsa-checkbox__other, +.fsa-checkbox:checked ~ .fsa-checkbox__other, .fsa-radio:checked ~ +.fsa-radio__other, +.fsa-checkbox:checked ~ +.fsa-radio__other { + visibility: visible; + max-height: 152px; + max-height: 152px; + max-height: 15.2rem; + opacity: 1; +} + .lt-ie9 .fsa-checkbox, .lt-ie9 .fsa-radio { border: 0; @@ -2235,6 +2597,7 @@ img { text-indent: -1.7em; margin-left: 1.7em; margin-right: 12px; + margin-right: 12px; margin-right: 1.2rem; display: inline-block; position: relative; @@ -2245,6 +2608,7 @@ img { display: block; background-color: #dbdad9; padding: 12px; + padding: 12px; padding: 1.2rem; margin-bottom: 1em; content: 'CSS ERROR: checkbox or radio requires a