diff --git a/build.js b/build.js new file mode 100644 index 0000000..fb6cc0c --- /dev/null +++ b/build.js @@ -0,0 +1,67 @@ +const autoprefixer = require("autoprefixer"); +const fs = require("fs"); +const getDirName = require("path").dirname; +const mkdirp = require("mkdirp"); +const postcss = require("postcss"); +const sass = require("node-sass"); + +function buildDistFile(options = {}) { + return new Promise((resolve, reject) => { + console.log(`Processing ${options.src}...`); + + const result = sass.renderSync({ + file: options.src, + }); + + mkdirp(getDirName(options.dest), function (err) { + if (err) reject(err); + + postcss([autoprefixer()]) + .process(result.css) + .then((result) => { + fs.writeFile(options.dest, result.css, function (err) { + if (err) reject(err); + resolve(); + }); + }); + }); + }); +} + +Promise.all([ + ["flystyles", "utilities", "reboot"].forEach(function (filename) { + buildDistFile({ + src: `./src/${filename}.scss`, + dest: `./dist/${filename}.css`, + }); + }), + + [ + "Alert", + "Autocomplete", + "Badge", + "Button", + "Calendar", + "Checkbox", + "Datepicker", + "Dropdown", + "FormGroup", + "Icon", + "Input", + "InputGroup", + "Label", + "Modal", + "PhoneNumber", + "Radio", + "Select", + "Switch", + "Textarea", + ].forEach(function (component) { + buildDistFile({ + src: `./src/components/${component}/${component}.scss`, + dest: `./dist/components/${component}.css`, + }); + }), +]).then(() => { + console.log("Finished Building Flystyles!"); +}); diff --git a/dist/components/Alert.css b/dist/components/Alert.css new file mode 100644 index 0000000..609e0c8 --- /dev/null +++ b/dist/components/Alert.css @@ -0,0 +1,23 @@ +.Alert { + padding: 16px; + margin-bottom: 16px; + border: 1px solid transparent; + border-radius: 0; + color: #1b2733; + font-size: 14px; } + +.Alert--danger { + background-color: #fae6e8; + border-left: 4px solid #d63442; } + +.Alert--warning { + background-color: #fff4c4; + border-left: 4px solid #edc200; } + +.Alert--info { + background-color: #d6ecff; + border-left: 4px solid #008bff; } + +.Alert--success { + background-color: #e3f4ec; + border-left: 4px solid #48b985; } diff --git a/dist/components/Autocomplete.css b/dist/components/Autocomplete.css new file mode 100644 index 0000000..5da76d8 --- /dev/null +++ b/dist/components/Autocomplete.css @@ -0,0 +1,134 @@ +.Autocomplete { + position: relative; } + +.Autocomplete-search { + display: block; + width: 100%; + font-family: "Rubik", "Open Sans", "Lucida Grande", Verdana, Arial, sans-serif; + font-size: 14px; + color: #1b2733; + background-color: #fdfdfd; + border: 1px solid #dae0e4; + border-radius: 2px; + outline: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-transition: 200ms border, background, box-shadow, color ease-in-out; + transition: 200ms border, background, box-shadow, color ease-in-out; + will-change: border, background, color; + padding-right: 32px; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='185 19 10 7'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M194.82 20.819l-.713-.68c-.198-.192-.518-.192-.714-.002L190 23.416l-3.423-3.303c-.2-.19-.518-.19-.716 0l-.713.68c-.196.186-.196.49 0 .678l4.494 4.33c.2.186.52.186.715 0l4.466-4.302c.2-.188.2-.492 0-.68z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: calc(100% - 0.8rem) center; + background-size: 0.8rem; + appearance: none; + text-indent: 1px; + text-overflow: ''; + height: 48px; + padding: 0 9.6px; + line-height: normal; + font-size: 14px; + display: table-cell; + vertical-align: middle; } + .Autocomplete-search:hover { + border: 1px solid #bdc7ce; + box-shadow: inset 0 0 0 1px transparent; } + .Autocomplete-search:focus { + border: 1px solid #1274c4; + box-shadow: inset 0 0 0 1px #1274c4; } + .Autocomplete-search::-webkit-input-placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Autocomplete-search:-ms-input-placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Autocomplete-search::placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Autocomplete-search:disabled { + color: rgba(27, 39, 51, 0.5); + border-color: #eaeef1; + background-color: #f8f9f9; + cursor: not-allowed; } + .Autocomplete-search[readonly] { + color: inherit; + border-color: #dae0e4; + background-color: #f4f5f6; + cursor: not-allowed; } + .FormGroup--floatingLabel .Autocomplete-search { + padding-top: 15px; + font-size: 0.9375rem; } + .FormGroup--floatingLabel .Autocomplete-search::-webkit-input-placeholder { + color: transparent; } + .FormGroup--floatingLabel .Autocomplete-search:-ms-input-placeholder { + color: transparent; } + .FormGroup--floatingLabel .Autocomplete-search::placeholder { + color: transparent; } + .Autocomplete-search::-ms-clear { + display: none; } + .Autocomplete-search:invalid { + box-shadow: none; } + .is-searching .Autocomplete-search { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='185 19 10 7'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M194.82 25.09l-.713.68c-.198.19-.518.19-.714 0L190 22.494l-3.423 3.304c-.2.19-.518.19-.716 0l-.713-.68c-.196-.186-.196-.49 0-.678l4.494-4.33c.2-.187.52-.187.715 0l4.466 4.3c.2.19.2.493 0 .68z'/%3E%3C/svg%3E"); + border: 1px solid #1274c4; + box-shadow: inset 0 0 0 1px #1274c4; } + .Autocomplete--searchDisabled .Autocomplete-search { + background-color: #fdfdfd; + cursor: pointer; } + .Autocomplete--searchDisabled .Autocomplete-search:hover { + border: 1px solid #bdc7ce; } + .Autocomplete--searchDisabled .Autocomplete-search:focus { + border: 1px solid #1274c4; } + +.Autocomplete-search { + text-overflow: ellipsis; + padding-left: 1rem; } + .has-success .Autocomplete-search, .Autocomplete-search--success { + border: 1px solid #48b985; + box-shadow: inset 0 0 0 1px #48b985, 0 0 4px 0 rgba(72, 185, 133, 0.5); } + .has-error .Autocomplete-search, .Autocomplete-search--error { + border: 1px solid #d63442; + box-shadow: inset 0 0 0 1px #d63442, 0 0 4px 0 rgba(214, 52, 66, 0.5); } + +.Autocomplete-options { + position: absolute; + top: calc(100% - 3px); + width: 100%; + max-height: 0; + padding: 0; + margin: 0; + overflow-y: scroll; + list-style: none; + visibility: hidden; + background: #fff; + border: 1px solid #dae0e4; + border-top: 1px solid #f7f9fa; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; + opacity: 0; + -webkit-transition: all 200ms ease-in-out; + transition: all 200ms ease-in-out; + z-index: 2; } + .is-searching .Autocomplete-options { + max-height: 288px; + visibility: visible; + border: 2px solid #1274c4; + border-top: 1px solid #f7f9fa; + opacity: 1; } + +.Autocomplete-option { + min-height: 48px; + padding: 1rem; + font-size: 0.9375rem; } + .Autocomplete-option.is-active { + color: #fff; + background-color: #1274c4; } + .Autocomplete-option .is-highlighted { + border-bottom: 1px dotted #aaa; } + +.Autocomplete--noReadOnly .Autocomplete-search[readonly] { + background-color: #fff; + border-color: #dae0e4; } + .has-error .Autocomplete--noReadOnly .Autocomplete-search[readonly] { + border-color: #d63442; } diff --git a/dist/components/Badge.css b/dist/components/Badge.css new file mode 100644 index 0000000..38f4f0b --- /dev/null +++ b/dist/components/Badge.css @@ -0,0 +1,10 @@ +.Badge { + display: inline-block; + padding: 0 8px; + line-height: 16px; + color: #fff; + font-size: rem(11px); + font-weight: 500; + text-transform: uppercase; + background: #1274c4; + border-radius: 3px; } diff --git a/dist/components/Button.css b/dist/components/Button.css new file mode 100644 index 0000000..4dfe17f --- /dev/null +++ b/dist/components/Button.css @@ -0,0 +1,283 @@ +.Button { + display: inline-block; + min-width: 136px; + padding: 16px 24px; + font-size: 13px; + line-height: 1.05; + font-family: "Rubik", "Open Sans", "Lucida Grande", Verdana, Arial, sans-serif; + font-weight: 500; + text-align: center; + text-transform: uppercase; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 0; + border-radius: 3px; + outline: 0; + -webkit-transition: all 200ms ease-out; + transition: all 200ms ease-out; + overflow: hidden; + text-decoration: none; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px transparent; } + .Button:focus { + outline: 0; } + .Button--medium { + font-size: rem(11px); + padding: 10px 12px; + min-width: 0; } + +.Button, +.Button--default { + background: #fff; + color: #1274c4; + border: 1px solid #e0e0e0; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); } + .Button:hover, + .Button--default:hover { + color: #1274c4; + text-decoration: none; + background-color: white; + text-decoration: none; } + .Button:active, .Button.Button--active, .Button.is-active, + .Button--default:active, + .Button--default.Button--active, + .Button--default.is-active { + background-color: #ebebeb; } + .Button:focus, + .Button--default:focus { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px #ebebeb; } + .Button:hover, + .Button--default:hover { + background-color: rgba(224, 224, 227, 0.4); + border-color: lightgray; } + .Button:focus, + .Button--default:focus { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); } + .Button:active, + .Button--default:active { + background-color: rgba(224, 224, 227, 0.8); } + +.Button--primary { + background: #1274c4; + color: #fff; + border-color: #1274c4; } + .Button--primary:hover { + color: #fff; + text-decoration: none; + background-color: #1585e0; + text-decoration: none; } + .Button--primary:active, .Button--primary.Button--active, .Button--primary.is-active { + background-color: #0f5e9f; } + .Button--primary:focus { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px #0f5e9f; } + .Button--primary:hover { + border-color: #116ebb; } + +.Button--danger { + background: #d63442; + color: #fff; + border-color: #d63442; } + .Button--danger:hover { + color: #fff; + text-decoration: none; + background-color: #db4d5a; + text-decoration: none; } + .Button--danger:active, .Button--danger.Button--active, .Button--danger.is-active { + background-color: #bb2633; } + .Button--danger:focus { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px #bb2633; } + .Button--danger:hover { + border-color: #d42c3a; } + +.Button--warning { + background: #edc200; + color: #fff; + border-color: #edc200; } + .Button--warning:hover { + color: #fff; + text-decoration: none; + background-color: #ffd30d; + text-decoration: none; } + .Button--warning:active, .Button--warning.Button--active, .Button--warning.is-active { + background-color: #c4a100; } + .Button--warning:focus { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px #c4a100; } + .Button--warning:hover { + border-color: #e3ba00; } + +.Button--success { + background: #48b985; + color: #fff; + border-color: #48b985; } + .Button--success:hover { + color: #fff; + text-decoration: none; + background-color: #5ec194; + text-decoration: none; } + .Button--success:active, .Button--success.Button--active, .Button--success.is-active { + background-color: #3c9c70; } + .Button--success:focus { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px #3c9c70; } + .Button--success:hover { + border-color: #44b380; } + +.Button--info { + background: #008bff; + color: #fff; + border-color: #008bff; } + .Button--info:hover { + color: #fff; + text-decoration: none; + background-color: #1f99ff; + text-decoration: none; } + .Button--info:active, .Button--info.Button--active, .Button--info.is-active { + background-color: #0075d6; } + .Button--info:focus { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px #0075d6; } + .Button--info:hover { + border-color: #0085f5; } + +.Button--outline { + background: transparent; + color: #939fac; + box-shadow: inset 0px 0px 0px 1px #939fac; } + .Button--outline:hover { + color: #fff; + background-color: #a4aeb9; + box-shadow: none; + text-decoration: none; } + .Button--outline:active, .Button--outline:visited { + background-color: #7c8a9a; } + .Button--outline:focus { + box-shadow: inset 0px 0px 0px 2px #7c8a9a; } + +.Button--outlineWhite { + background: transparent; + color: #fff; + box-shadow: inset 0px 0px 0px 1px #fff; } + .Button--outlineWhite:hover { + color: #1274c4; + background-color: white; + box-shadow: none; + text-decoration: none; } + .Button--outlineWhite:active, .Button--outlineWhite:visited { + background-color: #ebebeb; } + .Button--outlineWhite:focus { + box-shadow: inset 0px 0px 0px 2px #ebebeb; } + +.Button--outlinePrimary { + background: transparent; + color: #1274c4; + box-shadow: inset 0px 0px 0px 1px #1274c4; } + .Button--outlinePrimary:hover { + color: #fff; + background-color: #1585e0; + box-shadow: none; + text-decoration: none; } + .Button--outlinePrimary:active, .Button--outlinePrimary:visited { + background-color: #0f5e9f; } + .Button--outlinePrimary:focus { + box-shadow: inset 0px 0px 0px 2px #0f5e9f; } + +.Button--outlineDanger { + background: transparent; + color: #d63442; + box-shadow: inset 0px 0px 0px 1px #d63442; } + .Button--outlineDanger:hover { + color: #fff; + background-color: #db4d5a; + box-shadow: none; + text-decoration: none; } + .Button--outlineDanger:active, .Button--outlineDanger:visited { + background-color: #bb2633; } + .Button--outlineDanger:focus { + box-shadow: inset 0px 0px 0px 2px #bb2633; } + +.Button--outlineWarning { + background: transparent; + color: #edc200; + box-shadow: inset 0px 0px 0px 1px #edc200; } + .Button--outlineWarning:hover { + color: #fff; + background-color: #ffd30d; + box-shadow: none; + text-decoration: none; } + .Button--outlineWarning:active, .Button--outlineWarning:visited { + background-color: #c4a100; } + .Button--outlineWarning:focus { + box-shadow: inset 0px 0px 0px 2px #c4a100; } + +.Button--outlineSuccess { + background: transparent; + color: #48b985; + box-shadow: inset 0px 0px 0px 1px #48b985; } + .Button--outlineSuccess:hover { + color: #fff; + background-color: #5ec194; + box-shadow: none; + text-decoration: none; } + .Button--outlineSuccess:active, .Button--outlineSuccess:visited { + background-color: #3c9c70; } + .Button--outlineSuccess:focus { + box-shadow: inset 0px 0px 0px 2px #3c9c70; } + +.Button--outlineInfo { + background: transparent; + color: #008bff; + box-shadow: inset 0px 0px 0px 1px #008bff; } + .Button--outlineInfo:hover { + color: #fff; + background-color: #1f99ff; + box-shadow: none; + text-decoration: none; } + .Button--outlineInfo:active, .Button--outlineInfo:visited { + background-color: #0075d6; } + .Button--outlineInfo:focus { + box-shadow: inset 0px 0px 0px 2px #0075d6; } + +.Button--block { + display: block; + width: 100%; } + +.Button--disabled, +.Button:disabled { + cursor: not-allowed; + opacity: 0.5; + border: 1px solid #e0e0e0; + border-radius: 3px; + background-color: transparent; + box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.05); } + +.Button--primary.Button--disabled, .Button--primary:disabled { + background-color: #1274c4; + color: #fff; + border-color: transparent; } + +.Button--withIcon { + position: relative; + padding: 16px 24px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px rgba(18, 116, 196, 0); } + .Button--withIcon:focus { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0px 0px 0px 2px #1274c4; } + +.Button-icon { + position: absolute; + left: 24px; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + top: 50%; + display: inline-block; + margin-right: 16px; + fill: currentColor; + max-width: 40px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.Button-text { + display: block; + padding-left: 40px; } diff --git a/dist/components/Calendar.css b/dist/components/Calendar.css new file mode 100644 index 0000000..b39cb7d --- /dev/null +++ b/dist/components/Calendar.css @@ -0,0 +1,131 @@ +.Calendar { + font-size: 13px; + font-weight: 400; + text-align: center; + text-transform: capitalize; + background: #fff; + border: 1px solid #dae0e4; + border-radius: 4px; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05); } + .Calendar .Select { + border: none; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpolyline fill='none' stroke='%235a687b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' points='0 0 4 4 8 0' transform='translate(1 1)'/%3E%3C/svg%3E"); + background-size: 10px 6px; + background-position: calc(100% - 12px) 16px; + text-align: right; } + .Calendar .Select.Calendar-header-navItem { + padding-right: 24px !important; } + .Calendar .Calendar-header { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 15px 8px 0; + text-align: center; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + .Calendar .Calendar-header .Calendar-header-navItem { + width: auto; + text-align-last: right; + height: 36px; + min-width: auto; + line-height: 36px; + padding: 0 12px; + box-shadow: none; + border: none; + margin: 0; + background-color: transparent; } + .Calendar .Calendar-header .Calendar-header-navItem:hover { + background-color: #f9fafb; } + @media (max-width: 576px) { + .Calendar .Calendar-header .Calendar-header-navItem { + padding: 0; + font-size: 0.8rem; } } + .Calendar .Calendar-header .Icon--arrowLeft, + .Calendar .Calendar-header .Icon--arrowRight { + background-size: 16px auto; + width: 16px; + height: 16px; } + .Calendar .Calendar-header .Icon--arrowLeft { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M3.41425,5.00025 L6.70725,1.70725 C7.09825,1.31625 7.09825,0.68425 6.70725,0.29325 C6.31625,-0.09775 5.68425,-0.09775 5.29325,0.29325 L0.29325,5.29325 C-0.09775,5.68425 -0.09775,6.31625 0.29325,6.70725 L5.29325,11.70725 C5.48825,11.90225 5.74425,12.00025 6.00025,12.00025 C6.25625,12.00025 6.51225,11.90225 6.70725,11.70725 C7.09825,11.31625 7.09825,10.68425 6.70725,10.29325 L3.41425,7.00025 L15.00025,7.00025 C15.55325,7.00025 16.00025,6.55225 16.00025,6.00025 C16.00025,5.44825 15.55325,5.00025 15.00025,5.00025 L3.41425,5.00025 Z'/%3E%3C/svg%3E"); } + .Calendar .Calendar-header .Icon--arrowRight { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M15.00025,5.00025 L3.41425,5.00025 L6.70725,1.70725 C7.09825,1.31625 7.09825,0.68425 6.70725,0.29325 C6.31625,-0.09775 5.68425,-0.09775 5.29325,0.29325 L0.29325,5.29325 C-0.09775,5.68425 -0.09775,6.31625 0.29325,6.70725 L5.29325,11.70725 C5.48825,11.90225 5.74425,12.00025 6.00025,12.00025 C6.25625,12.00025 6.51225,11.90225 6.70725,11.70725 C7.09825,11.31625 7.09825,10.68425 6.70725,10.29325 L3.41425,7.00025 L15.00025,7.00025 C15.55325,7.00025 16.00025,6.55225 16.00025,6.00025 C16.00025,5.44825 15.55325,5.00025 15.00025,5.00025' transform='rotate(-180 8 6)'/%3E%3C/svg%3E"); } + +.Calendar-table { + width: 100%; + overflow: hidden; + table-layout: fixed; + border: 0; + margin: -2px auto 24px; } + @media (min-width: 576px) { + .Calendar-table { + width: calc(rem(40.5px) * 7); } } + +.Calendar-weekday, +.Calendar-day { + padding: 0; + width: 24px; + height: 24px; + -webkit-transition: all 200ms ease-in-out; + transition: all 200ms ease-in-out; + line-height: 1; } + @media (min-width: 576px) { + .Calendar-weekday, + .Calendar-day { + width: rem(40.5px); + height: rem(40.5px); } } + +.Calendar-weekday { + color: #1b2733; + text-align: center; + font-weight: 400; } + +.Calendar-day { + text-align: center; + cursor: pointer; + position: relative; } + .Calendar-day:before { + content: ''; + display: block; + width: 24px; + height: 24px; + position: absolute; + top: 0; + left: calc(50% - (24px / 2)); + border-radius: 100%; + background-color: rgba(20, 123, 209, 0); + z-index: -1; + -webkit-transition: background-color 0.1s ease-out; + transition: background-color 0.1s ease-out; } + @media (min-width: 576px) { + .Calendar-day:before { + width: rem(40.5px); + height: rem(40.5px); + top: 0; + left: 0; } } + .Calendar-day:hover:before { + background-color: #f9fafb; } + .Calendar-day.is-selected, .Calendar-day--selected { + font-weight: 500; + color: #fff; } + .Calendar-day.is-selected:before, .Calendar-day--selected:before { + background-color: rgba(20, 123, 209, 0.9); } + .Calendar-day.is-current, .Calendar-day--current { + color: rgba(20, 123, 209, 0.9); } + .Calendar-day.is-disabled, .Calendar-day--disabled { + color: rgba(90, 104, 123, 0.5); + cursor: auto; + background: #fafafa; } + .Calendar-day.is-current.is-selected { + color: #fff; } + tr .Calendar-day:first-child { + border-left: 0; } + tr .Calendar-day:last-child { + border-right: 0; } diff --git a/dist/components/Checkbox.css b/dist/components/Checkbox.css new file mode 100644 index 0000000..14d7ed6 --- /dev/null +++ b/dist/components/Checkbox.css @@ -0,0 +1,87 @@ +.Checkbox { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + position: relative; + margin: 0 0 16px 0; } + +.Checkbox-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 20px; + height: 20px; + display: inline-block; + border: 1px solid #dae0e4; + background-color: #fdfdfd; + border-radius: 2px; + margin: 0 8px 0 0; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.013L3.985 8 11 1' stroke='%23FFF' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; } + +.Checkbox-label { + margin: 0 0 8px 0; + font-size: 14px; + font-weight: 400; + line-height: 1.4; + color: #1b2733; + text-transform: none; + cursor: pointer; + margin: 0; + position: relative; + display: inline-block; + max-width: calc(100% - 2rem); + padding-left: 4px; + cursor: default; } + .Checkbox-label + .FormGroup-feedback { + width: 100%; } + +.Checkbox-input:active, +.Checkbox-input:checked, +.Checkbox-input:focus:checked { + outline: none; + background-color: #1274c4; + border-color: #1274c4; } + +.Checkbox-label:focus .Checkbox-input, +.Checkbox-input:focus { + border: 2px solid #1274c4; + background-color: #fff; + outline: none; } + +.Checkbox-input:disabled { + background-color: #eee; + border-color: #eee; + background-image: none; } + .Checkbox-input:disabled + .Checkbox-label { + pointer-events: none; } + +.Checkbox-input:checked:disabled { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.013L3.985 8 11 1' stroke='%23000' opacity='0.2' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } + +.has-error .Checkbox-input, +.has-error .Checkbox-input:focus { + border-color: #d63442; + background-color: #ffffff; + border: 2px solid #e3162b; + box-shadow: 0 0 4px 0 rgba(237, 41, 65, 0.5); + border-radius: 2px; + outline: none; } + +.has-error .Checkbox-input:active, +.has-error .Checkbox-input:checked { + box-shadow: none; + background-color: #1274c4; + border-color: #1274c4; } + +.MultipleCheckbox .Checkbox:last-child { + margin-bottom: 0; } diff --git a/dist/components/Datepicker.css b/dist/components/Datepicker.css new file mode 100644 index 0000000..3120af7 --- /dev/null +++ b/dist/components/Datepicker.css @@ -0,0 +1,79 @@ +.Datepicker { + position: relative; } + .Datepicker .Datepicker-input { + padding-right: 40px; } + +.Datepicker-calendar { + position: absolute; + top: calc(100% + 16px); + z-index: 2; + display: none; + max-width: 100%; + width: 100%; + right: 0; } + @media (min-width: 576px) { + .Datepicker-calendar { + max-width: 334px; } } + .Datepicker-calendar:before { + border-color: transparent; + border-width: 9px; + border-bottom-color: #dae0e4; + top: -9px; + right: 18px; } + .Datepicker-calendar:after { + border-color: transparent; + border-width: 8px; + border-bottom-color: #fff; + right: 19px; + top: -8px; } + .Datepicker-calendar:before, .Datepicker-calendar:after { + content: ''; + display: inline-block; + position: absolute; + border-style: solid; + border-top-width: 0; } + .Datepicker.is-open .Datepicker-calendar { + display: block; } + .Datepicker.is-reverse .Datepicker-calendar { + top: auto; + bottom: calc(100% + 16px); } + .Datepicker.is-reverse .Datepicker-calendar:before { + border: 9px solid transparent; + border-top-color: #dae0e4; + bottom: -9px; } + .Datepicker.is-reverse .Datepicker-calendar:after { + border: 8px solid transparent; + border-top-color: #fff; + bottom: -8px; } + .Datepicker.is-reverse .Datepicker-calendar:before, .Datepicker.is-reverse .Datepicker-calendar:after { + top: auto; + border-bottom-width: 0; } + +.Datepicker .InputGroup-context { + cursor: pointer; + width: 50px; + border-left: none; + position: absolute; + right: 0; + height: 100%; + top: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border: none; } + .Datepicker .InputGroup-context .Icon--calendar { + width: 20px; + height: 20px; } + +.is-readOnly .Datepicker .InputGroup-context, +.is-disabled .Datepicker .InputGroup-context { + background-color: transparent; } + +.has-error > .Datepicker > .InputGroup > input { + background-image: none !important; } diff --git a/dist/components/Dropdown.css b/dist/components/Dropdown.css new file mode 100644 index 0000000..040cda5 --- /dev/null +++ b/dist/components/Dropdown.css @@ -0,0 +1,89 @@ +.Dropdown-options--upwardRight, .Dropdown-options--upwardLeft { + top: auto; + bottom: calc(3.5rem - 100%); } + +.Dropdown { + position: relative; + font-size: 0.875rem; } + +.Dropdown-selectedOption { + border: 0; + padding-right: 30px; + display: inline-block; + background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='185 19 10 7'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M194.82 20.819l-.713-.68c-.198-.192-.518-.192-.714-.002L190 23.416l-3.423-3.303c-.2-.19-.518-.19-.716 0l-.713.68c-.196.186-.196.49 0 .678l4.494 4.33c.2.186.52.186.715 0l4.466-4.302c.2-.188.2-.492 0-.68z'/%3E%3C/svg%3E") no-repeat; + background-position: calc(100% - 0.8rem) center; + background-size: 0.8rem; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + .is-open .Dropdown-selectedOption { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='185 19 10 7'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M194.82 25.09l-.713.68c-.198.19-.518.19-.714 0L190 22.494l-3.423 3.304c-.2.19-.518.19-.716 0l-.713-.68c-.196-.186-.196-.49 0-.678l4.494-4.33c.2-.187.52-.187.715 0l4.466 4.3c.2.19.2.493 0 .68z'/%3E%3C/svg%3E"); } + +.Dropdown-options { + display: none; + background: #fff; + border: 1px solid #dae0e4; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05); + border-radius: 5px; + position: absolute; + right: 0; + margin-top: 12px; + padding: 0; + list-style-type: none; + width: 226px; + padding: 10px 0; + z-index: 1; } + .is-open .Dropdown-options { + display: block; + z-index: 2; } + .Dropdown-options::before { + border: 9px solid transparent; + border-bottom-color: #dae0e4; + top: -9px; + right: 9px; } + .Dropdown-options::after { + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #fff; + right: 10px; + top: -8px; } + .Dropdown-options::before, .Dropdown-options::after { + content: ''; + display: inline-block; + border-top-width: 0; + position: absolute; } + +.Dropdown-options--upwardRight, .Dropdown-options--upwardLeft { + left: auto; + right: 0; } + .Dropdown-options--upwardRight::before, .Dropdown-options--upwardLeft::before, .Dropdown-options--upwardRight::after, .Dropdown-options--upwardLeft::after { + top: auto; + border-bottom-width: 0; } + .Dropdown-options--upwardRight::before, .Dropdown-options--upwardLeft::before { + bottom: -9px; + border-top-width: 9px; + border-top-color: #dae0e4; } + .Dropdown-options--upwardRight::after, .Dropdown-options--upwardLeft::after { + bottom: -8px; + border-top: 8px solid white; } + +.Dropdown-options--upwardLeft { + left: 100%; + margin-left: -2.75rem; + right: auto; } + .Dropdown-options--upwardLeft::before { + right: auto; + left: 1rem; } + .Dropdown-options--upwardLeft::after { + right: auto; + left: calc(1rem + 1px); } + +.Dropdown-option { + padding: 10px 20px; } + .Dropdown-option:hover { + cursor: pointer; + background: #fafafa; } + .Dropdown-option.is-selected { + font-weight: 500; } + .Dropdown-option.is-active { + background: #fafafa; } diff --git a/dist/components/FormGroup.css b/dist/components/FormGroup.css new file mode 100644 index 0000000..8c4ecc5 --- /dev/null +++ b/dist/components/FormGroup.css @@ -0,0 +1,68 @@ +.FormGroup { + position: relative; + display: block; + margin: 0 0 32px 0; } + +.FormGroup--inline { + display: inline-block; } + +.FormGroup-hint { + margin: 0; + font-size: 12px; + font-weight: 500; + line-height: 1.4; + color: #5a687b; + max-height: 0; + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + will-change: transform, opacity, max-height, margin; + -webkit-transition: 200ms all; + transition: 200ms all; } + .FormGroup.is-focused .FormGroup-hint { + max-height: 100px; + margin: 8px 0 0 0; + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } + +.FormGroup-feedback { + display: none; + margin: 8px 0 0 0; + font-size: 12px; + font-weight: 500; + color: #5a687b; + font-size: 12px; + line-height: 1.4; + -webkit-animation-name: slideInUp; + animation-name: slideInUp; + -webkit-animation-duration: 200ms; + animation-duration: 200ms; + -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } + .has-error .FormGroup-feedback, .FormGroup-feedback--error { + display: block; + color: #d63442; } + .has-success .FormGroup-feedback, .FormGroup-feedback--success { + display: block; + color: #48b985; } + +@-webkit-keyframes slideInUp { + from { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); } + to { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes slideInUp { + from { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); } + to { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } diff --git a/dist/components/Icon.css b/dist/components/Icon.css new file mode 100644 index 0000000..e47c21a --- /dev/null +++ b/dist/components/Icon.css @@ -0,0 +1,95 @@ +.Icon { + display: inline-block; + vertical-align: middle; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + width: 22px; + height: 22px; } + +.Icon--xs { + width: 14px; + height: 14px; } + +.Icon--sm { + width: 18px; + height: 18px; } + +.Icon--md { + width: 22px; + height: 22px; } + +.Icon--lg { + width: 36px; + height: 36px; } + +.Icon--xl { + width: 48px; + height: 48px; } + +.Icon--xxl { + width: 64px; + height: 64px; } + +.Icon--calendar { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%231b2733' fill-rule='evenodd' d='M317.971246,22 L301.996805,22 L301.996805,18.971 C301.996805,18.435 302.43111,18 302.966254,18 L303.99361,18 L303.99361,20 L305.990415,20 L305.990415,18 L313.977636,18 L313.977636,20 L315.974441,20 L315.974441,18 L316.972843,18 C317.523962,18 317.971246,18.448 317.971246,19 L317.971246,22 Z M317.971246,31 C317.971246,31.55 317.521965,32 316.972843,32 L302.995208,32 C302.444089,32 301.996805,31.552 301.996805,31 L301.996805,24 L317.971246,24 L317.971246,31 Z M300.063898,31.761 C300.063898,32.865 301.021366,34 302.123602,34 L318.098043,34 C319.201278,34 320,32.979 320,31.761 C320,31.372 319.968051,19.36 319.968051,18.708 C319.968051,16.626 319.6875,16 315.974441,16 L315.974441,14 L313.977636,14 L313.977636,16 L305.990415,16 L305.990415,14 L303.99361,14 L303.99361,16 L301.996805,16 C300.898562,16 300,16.9 300,18 L300.063898,31.761 Z' transform='translate(-300 -14)'/%3E%3C/svg%3E"); } + +.Icon--calendarError { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23d63442' fill-rule='evenodd' d='M317.971246,22 L301.996805,22 L301.996805,18.971 C301.996805,18.435 302.43111,18 302.966254,18 L303.99361,18 L303.99361,20 L305.990415,20 L305.990415,18 L313.977636,18 L313.977636,20 L315.974441,20 L315.974441,18 L316.972843,18 C317.523962,18 317.971246,18.448 317.971246,19 L317.971246,22 Z M317.971246,31 C317.971246,31.55 317.521965,32 316.972843,32 L302.995208,32 C302.444089,32 301.996805,31.552 301.996805,31 L301.996805,24 L317.971246,24 L317.971246,31 Z M300.063898,31.761 C300.063898,32.865 301.021366,34 302.123602,34 L318.098043,34 C319.201278,34 320,32.979 320,31.761 C320,31.372 319.968051,19.36 319.968051,18.708 C319.968051,16.626 319.6875,16 315.974441,16 L315.974441,14 L313.977636,14 L313.977636,16 L305.990415,16 L305.990415,14 L303.99361,14 L303.99361,16 L301.996805,16 C300.898562,16 300,16.9 300,18 L300.063898,31.761 Z' transform='translate(-300 -14)'/%3E%3C/svg%3E"); } + +.Icon--arrowDown { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='185 19 10 7'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M194.82 20.819l-.713-.68c-.198-.192-.518-.192-.714-.002L190 23.416l-3.423-3.303c-.2-.19-.518-.19-.716 0l-.713.68c-.196.186-.196.49 0 .678l4.494 4.33c.2.186.52.186.715 0l4.466-4.302c.2-.188.2-.492 0-.68z'/%3E%3C/svg%3E"); } + +.Icon--arrowUp { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='185 19 10 7'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M194.82 25.09l-.713.68c-.198.19-.518.19-.714 0L190 22.494l-3.423 3.304c-.2.19-.518.19-.716 0l-.713-.68c-.196-.186-.196-.49 0-.678l4.494-4.33c.2-.187.52-.187.715 0l4.466 4.3c.2.19.2.493 0 .68z'/%3E%3C/svg%3E"); } + +.Icon--arrowLeft { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='9 7 9 15'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M15.152 20.97c.25.262.652.262.902 0l.9-.946c.253-.262.253-.686 0-.945l-4.345-4.495 4.38-4.53c.252-.266.252-.687 0-.95l-.902-.945c-.247-.26-.65-.26-.9 0l-5.74 5.95c-.247.263-.247.687 0 .946l5.704 5.914'/%3E%3C/svg%3E"); } + +.Icon--arrowRight { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='621 569 8 14'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M622.125 582.004l-.902-.946c-.252-.262-.252-.686 0-.945l4.347-4.494-4.38-4.532c-.253-.265-.253-.686 0-.948l.9-.945c.247-.26.65-.26.9 0l5.74 5.95c.248.262.248.686 0 .945l-5.703 5.914c-.25.262-.653.262-.902 0z'/%3E%3C/svg%3E"); } + +.Icon--card { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%231274C4' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' transform='translate(0 3)'%3E%3Crect width='22.5' height='16.5' x='.75' y='.75' rx='1.5'/%3E%3Cpath d='M.75 5.25L23.25 5.25M5.25 9.75L13.5 9.75M5.25 12.75L10.5 12.75'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--visa { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(0 4)'%3E%3Crect width='24' height='12' y='2' fill='%23FFF'/%3E%3Cpolygon fill='%23F1AD2B' points='.035 15.533 23.964 15.533 23.964 13.361 .035 13.361'/%3E%3Cpolygon fill='%23182E66' points='.035 2.617 23.964 2.617 23.964 .445 .035 .445'/%3E%3Cpath fill='%23182E66' d='M11.7933705,5.01024122 L10.5320479,10.9805924 L9.00645048,10.9805924 L10.2678876,5.01024122 L11.7933705,5.01024122 Z M18.2116067,8.86547176 L19.0147457,6.62329771 L19.4767111,8.86547176 L18.2116067,8.86547176 Z M19.9146098,10.9805924 L21.3251457,10.9805924 L20.0927032,5.01024122 L18.7914987,5.01024122 C18.4981146,5.01024122 18.2510302,5.18243053 18.1415841,5.4479084 L15.8523857,10.9805924 L17.4546527,10.9805924 L17.7726765,10.0890137 L19.7296403,10.0890137 L19.9146098,10.9805924 Z M15.9319203,9.03151145 C15.9385673,7.45593282 13.7805895,7.36856183 13.7949149,6.66448855 C13.7996137,6.45052824 14.001086,6.22276031 14.4418498,6.16451298 C14.6602835,6.13596947 15.2630962,6.11287939 15.9464749,6.43161527 L16.2137295,5.16502595 C15.846541,5.0306626 15.3742613,4.90117252 14.7866908,4.90117252 C13.278513,4.90117252 12.2175168,5.71222595 12.2090362,6.87461985 C12.1994095,7.73417405 12.9670216,8.21349618 13.5440486,8.49974351 C14.1389537,8.79225649 14.3383632,8.97999389 14.3354981,9.24141069 C14.3313724,9.64194809 13.8609263,9.81935878 13.4231422,9.82597252 C12.6556448,9.83815573 12.2108698,9.61607328 11.8562876,9.44864122 L11.5794063,10.7575817 C11.9363952,10.9229252 12.5943321,11.0670351 13.2754187,11.074345 C14.8787171,11.074345 15.9272216,10.2728061 15.9319203,9.03151145 L15.9319203,9.03151145 Z M9.61350349,5.01024122 L7.14162762,10.9805924 L5.52916095,10.9805924 L4.31264825,6.21579847 C4.23895841,5.9229374 4.17466603,5.81514504 3.95038762,5.69145649 C3.58354286,5.48956336 2.97786508,5.30089771 2.44541873,5.18359084 L2.48140413,5.01024122 L5.07739524,5.01024122 C5.40814,5.01024122 5.70553524,5.23301985 5.78117333,5.61870534 L6.42375333,9.07374656 L8.0107781,5.01024122 L9.61350349,5.01024122 L9.61350349,5.01024122 Z'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--mastercard { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' transform='translate(0 4)'%3E%3Cpolygon fill='%23FF5F00' points='8.859 2.084 15.102 2.084 15.102 13.195 8.859 13.195'/%3E%3Cpath fill='%23EB001B' d='M9.25512472,7.64041975 C9.25279061,5.47180769 10.2577164,3.42264434 11.9801814,2.08370487 C9.05491536,-0.193144469 4.85411601,0.138498327 2.32999223,2.84556362 C-0.194131541,5.5526289 -0.194131541,9.72624778 2.32999223,12.4333131 C4.85411601,15.1403784 9.05491536,15.4720212 11.9801814,13.1951718 C10.2582644,11.8566574 9.25339997,9.80834301 9.25512472,7.64041975 L9.25512472,7.64041975 Z'/%3E%3Cpath fill='%23F79E1B' d='M23.5245125,7.64041975 C23.5244488,10.3458353 21.9646743,12.8137292 19.5076313,13.9959774 C17.0505883,15.1782256 14.127643,14.8672689 11.9801814,13.1951718 C13.7013471,11.855521 14.7062872,9.80747898 14.7062872,7.63943834 C14.7062872,5.47139771 13.7013471,3.42335565 11.9801814,2.08370487 C14.127643,0.411607747 17.0505883,0.100651039 19.5076313,1.28289925 C21.9646743,2.46514747 23.5244488,4.93304137 23.5245125,7.63845694 L23.5245125,7.64041975 Z'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--amex { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23016FD0' d='M.222 1.221h22.667v3.67c-1.108.001-2.217-.003-3.324.002-.248.693-.49 1.388-.747 2.077-.274-.683-.505-1.384-.752-2.078-1.436-.003-2.872-.001-4.307 0-.001.925.008 1.85-.005 2.775-.43-.918-.831-1.85-1.247-2.775-1.16-.004-2.32 0-3.48-.001a8704.6 8704.6 0 0 0-3.615 8.137c.971.001 1.943-.001 2.914.001-.006 2.408.002 4.815-.005 7.222 3.011.006 6.022.005 9.032.001.465-.523.94-1.036 1.414-1.55.468.518.936 1.04 1.413 1.553l2.709-.001v3.525H.222V1.22z'/%3E%3Cpath fill='%23016FD0' fill-rule='nonzero' d='M9.649 5.8c.746-.007 1.491.001 2.237-.005.946 2.087 1.845 4.195 2.802 6.277.015-2.091.004-4.182.006-6.274.905 0 1.81-.002 2.714.002.468 1.3.93 2.602 1.406 3.9.5-1.291.95-2.601 1.424-3.901.884-.003 1.767 0 2.65-.002v6.33h-1.69c-.008-1.462.014-2.924-.01-4.385-.564 1.453-1.083 2.922-1.625 4.382-.508.003-1.015.006-1.523-.004-.543-1.46-1.076-2.923-1.62-4.382-.036 1.462-.005 2.926-.016 4.388-1.223-.007-2.446.015-3.668-.01a54.372 54.372 0 0 0-.53-1.26c-.974.004-1.947.001-2.92.001-.176.42-.354.84-.524 1.263-.638.012-1.276.004-1.914.006.932-2.11 1.875-4.213 2.8-6.325zm.238 3.634c.57.002 1.143 0 1.715 0-.272-.683-.565-1.359-.846-2.039-.322.665-.576 1.36-.87 2.039z'/%3E%3Cpath fill='%23016FD0' d='M9.281 13.032c1.767-.011 3.535.017 5.301-.015.044.042.086.085.129.128-.023.449-.016.898-.015 1.348-1.224 0-2.449-.004-3.674.002 0 .329 0 .657.005.985 1.193-.005 2.387-.007 3.58 0-.002.476-.002.95-.002 1.426h-3.583v.98h3.674v1.454c1-1.044 1.986-2.101 2.985-3.146-.959-1.011-1.904-2.037-2.882-3.028l-.071-.142c.75.016 1.5.001 2.25.009.61.676 1.22 1.35 1.838 2.018.61-.68 1.235-1.347 1.852-2.02.74-.002 1.48.002 2.22-.002v.03c-.996 1.038-1.996 2.073-2.986 3.117.996 1.053 2.004 2.096 2.987 3.161v.021c-.747.004-1.494 0-2.24.004a192.97 192.97 0 0 1-1.872-2.052c-.629.683-1.251 1.369-1.88 2.05-2.534-.002-5.069 0-7.603 0-.03-2.109-.004-4.219-.013-6.328z'/%3E%3Cpath fill='%23016FD0' d='M21.163 16.18c.564-.62 1.172-1.202 1.726-1.833v3.667a94.64 94.64 0 0 0-1.726-1.833z'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='M9.026 4.89c1.16.002 2.32-.002 3.481.002.416.925.816 1.857 1.246 2.775.014-.925.005-1.85.006-2.776 1.435 0 2.871-.002 4.307.001.247.694.477 1.394.752 2.078.257-.69.499-1.384.747-2.077 1.107-.005 2.216 0 3.324-.003v.907c-.884 0-1.768 0-2.651.002-.475 1.3-.925 2.61-1.424 3.9-.477-1.297-.938-2.6-1.406-3.9-.905-.004-1.81-.002-2.714-.001-.002 2.091.009 4.183-.006 6.273-.957-2.08-1.857-4.19-2.802-6.277-.746.007-1.491-.001-2.237.006-.926 2.112-1.87 4.216-2.8 6.326.637-.002 1.275.006 1.913-.006.17-.423.348-.843.523-1.263.974 0 1.947.002 2.92-.001.182.417.36.837.53 1.259 1.223.025 2.446.004 3.67.01.01-1.462-.021-2.926.015-4.387.544 1.459 1.077 2.922 1.62 4.382.508.01 1.015.007 1.523.004.541-1.46 1.06-2.93 1.624-4.382.025 1.46.003 2.922.011 4.384h1.69v.903c-.74.003-1.48 0-2.22.002-.617.673-1.242 1.34-1.852 2.02a229.04 229.04 0 0 1-1.839-2.019c-.75-.007-1.5.007-2.25-.008.019.035.054.105.072.141.978.992 1.923 2.018 2.882 3.029-.999 1.044-1.985 2.102-2.985 3.145v-1.454h-3.674v-.98h3.583c0-.474 0-.95.002-1.424a334.676 334.676 0 0 0-3.58-.001c-.005-.328-.005-.657-.005-.985 1.225-.006 2.45-.002 3.674-.003 0-.45-.008-.899.015-1.347-.043-.044-.085-.086-.129-.128-1.766.032-3.534.003-5.301.015.008 2.109-.016 4.22.013 6.328 2.534 0 5.069-.002 7.603 0 .629-.681 1.251-1.367 1.88-2.05.62.687 1.241 1.373 1.871 2.051.747-.003 1.494.001 2.24-.003v.895c-.903.002-1.805 0-2.708.001-.477-.513-.945-1.034-1.413-1.553-.473.515-.949 1.028-1.414 1.55-3.01.005-6.021.006-9.032 0 .007-2.407-.002-4.815.004-7.222-.97-.003-1.942 0-2.913 0C6.616 10.314 7.82 7.601 9.026 4.89z'/%3E%3Cpath d='M9.886 9.433c.294-.678.548-1.373.87-2.038.28.68.573 1.356.846 2.04-.572 0-1.144.001-1.716-.002zm10.016 6.743c.99-1.044 1.99-2.08 2.987-3.118v1.289c-.554.63-1.162 1.212-1.726 1.833a94.64 94.64 0 0 1 1.726 1.834v1.323c-.983-1.065-1.99-2.108-2.987-3.161z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--unionpay { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20'%3E%3Cg fill='none'%3E%3Cpath fill='%2301798A' d='M28.5052703,0.0503157895 L21.1305405,0.0483157895 L21.1285135,0.0483157895 C21.1227365,0.0483157895 21.1172635,0.0493684211 21.1116892,0.0493684211 C20.0985811,0.0815789474 18.8366554,0.925578947 18.6068919,1.96621053 L15.1192905,17.9938947 C14.8894257,19.0443158 15.5145608,19.8989474 16.5203716,19.9146316 L24.267973,19.9146316 C25.258277,19.8637895 26.2209122,19.0294737 26.446723,18.0006316 L29.934527,1.97284211 C30.1680405,0.911894737 29.5279054,0.0503157895 28.5052703,0.0503157895'/%3E%3Cpath fill='%23024381' d='M15.1193919,17.9937895 L18.6069932,1.96610526 C18.8367568,0.925473684 20.0986824,0.0814736842 21.1117905,0.0492631579 L18.1794932,0.0473684211 L12.8965541,0.0463157895 C11.8806081,0.0678947368 10.6023649,0.917789474 10.3726014,1.96621053 L6.88398649,17.9937895 C6.65331081,19.0442105 7.27945946,19.8988421 8.28456081,19.9145263 L16.520473,19.9145263 C15.5146622,19.8988421 14.889527,19.0442105 15.1193919,17.9937895'/%3E%3Cpath fill='%23DD0228' d='M6.88398649,17.9937895 L10.3726014,1.96610526 C10.6023649,0.917684211 11.8806081,0.0677894737 12.8965541,0.0462105263 L6.12881757,0.0444210526 C5.10719595,0.0444210526 3.79733108,0.904105263 3.56381757,1.96610526 L0.0752027027,17.9937895 C0.0540202703,18.0915789 0.0421621622,18.1874737 0.0351689189,18.2811579 L0.0351689189,18.5784211 C0.10347973,19.3441053 0.666486486,19.9016842 1.47577703,19.9144211 L8.28456081,19.9144211 C7.27945946,19.8988421 6.65331081,19.0442105 6.88398649,17.9937895'/%3E%3Cpath fill='%23FFF' d='M13.0392568,11.7251579 L13.1673649,11.7251579 C13.2850338,11.7251579 13.3641892,11.684 13.4013851,11.6028421 L13.734223,11.0855789 L14.6254054,11.0855789 L14.4396284,11.4257895 L15.5081757,11.4257895 L15.3725676,11.9471579 L14.1010135,11.9471579 C13.9545608,12.176 13.7742568,12.2834737 13.5575676,12.2707368 L12.8952365,12.2707368 L13.0392568,11.7251579 L13.0392568,11.7251579 Z M12.8929054,12.4722105 L15.234223,12.4722105 L15.0849324,13.0385263 L14.143277,13.0385263 L13.9996622,13.5850526 L14.9158784,13.5850526 L14.7666892,14.1513684 L13.850473,14.1513684 L13.6376351,14.9590526 C13.5849324,15.0941053 13.6542568,15.1547368 13.8443919,15.1410526 L14.5910473,15.1410526 L14.4527027,15.6673684 L13.0190878,15.6673684 C12.7473649,15.6673684 12.6541216,15.5058947 12.7393581,15.1822105 L13.0114865,14.1514737 L12.4258784,14.1514737 L12.5746622,13.5851579 L13.1603716,13.5851579 L13.3039865,13.0386316 L12.7441216,13.0386316 L12.8929054,12.4722105 L12.8929054,12.4722105 Z M16.6297297,11.0815789 L16.5929392,11.4131579 C16.5929392,11.4131579 17.034527,11.0688421 17.4355743,11.0688421 L18.9176351,11.0688421 L18.3508784,13.1997895 C18.3038514,13.4433684 18.1022635,13.5645263 17.7463176,13.5645263 L16.0664189,13.5645263 L15.672973,15.0608421 C15.6501689,15.1410526 15.6822973,15.1821053 15.767027,15.1821053 L16.0976351,15.1821053 L15.9761149,15.6466316 L15.1358108,15.6466316 C14.8133108,15.6466316 14.6791216,15.5458947 14.7323311,15.3434737 L15.8442568,11.0815789 L16.6297297,11.0815789 L16.6297297,11.0815789 Z M17.8848649,11.684 L16.5619257,11.684 L16.4036149,12.2590526 C16.4036149,12.2590526 16.6239527,12.0938947 16.9921622,12.088 C17.3593581,12.082 17.7784459,12.088 17.7784459,12.088 L17.8848649,11.684 Z M17.405473,13.0178947 C17.503277,13.0316842 17.5581081,12.9915789 17.5645946,12.8966316 L17.6455743,12.5935789 L16.3207095,12.5935789 L16.2096284,13.0178947 L17.405473,13.0178947 Z M16.5119595,13.7064211 L17.2756419,13.7064211 L17.2613514,14.0496842 L17.4646622,14.0496842 C17.5674324,14.0496842 17.6184122,14.0154737 17.6184122,13.948 L17.6786149,13.726 L18.3133784,13.726 L18.2286486,14.0496842 C18.1568919,14.3195789 17.9668581,14.4604211 17.6579392,14.4742105 L17.2511149,14.4742105 L17.2491892,15.0608421 C17.2417905,15.1548421 17.3234797,15.2027368 17.492027,15.2027368 L17.8743243,15.2027368 L17.7509797,15.6673684 L16.8338514,15.6673684 C16.576723,15.68 16.4506419,15.5528421 16.4533784,15.2829474 L16.5119595,13.7064211 L16.5119595,13.7064211 Z M7.25777027,8.24263158 C7.15418919,8.76978947 6.91408784,9.17463158 6.54162162,9.46210526 C6.1725,9.74473684 5.69655405,9.88652632 5.11368243,9.88652632 C4.56516892,9.88652632 4.16310811,9.74178947 3.90648649,9.45136842 C3.72851351,9.24505263 3.64003378,8.98294737 3.64003378,8.66610526 C3.64003378,8.53505263 3.65513514,8.39421053 3.68523649,8.24273684 L4.30621622,5.13294737 L5.24402027,5.13294737 L4.63165541,8.20736842 C4.61413874,8.28459004 4.60563166,8.36372012 4.60631757,8.44305263 C4.60530405,8.60052632 4.64300676,8.72957895 4.71922297,8.83031579 C4.83030405,8.98 5.01060811,9.05421053 5.26165541,9.05421053 C5.5502027,9.05421053 5.78797297,8.98094737 5.97253378,8.83315789 C6.15709459,8.68642105 6.27760135,8.47821053 6.33172297,8.20726316 L6.94611486,5.13263158 L7.87925676,5.13263158 L7.25777027,8.24263158 L7.25777027,8.24263158 Z M11.1964865,7.01915789 L11.9309797,7.01915789 L11.3556081,9.79463158 L10.6225338,9.79463158 L11.1964865,7.01915789 L11.1964865,7.01915789 Z M11.4276689,6.008 L12.16875,6.008 L12.0303041,6.68168421 L11.2893243,6.68168421 L11.4276689,6.008 L11.4276689,6.008 Z M12.5811486,9.58336842 C12.3889865,9.39263158 12.2919932,9.13547368 12.2910811,8.80884211 C12.2910811,8.75305263 12.2943243,8.68957895 12.3015203,8.62010526 C12.3086149,8.54968421 12.3175338,8.48126316 12.3302027,8.41768421 C12.4172635,7.96684211 12.6028378,7.60894737 12.8885473,7.34484211 C13.1738514,7.07978947 13.5180405,6.94684211 13.9211149,6.94684211 C14.2511149,6.94684211 14.5129054,7.04273684 14.7045608,7.23431579 C14.8961149,7.42705263 14.9920946,7.68705263 14.9920946,8.01768421 C14.9920946,8.07431579 14.9879392,8.13989474 14.9808446,8.21031579 C14.9726086,8.27973632 14.9624015,8.34888924 14.9502365,8.41768421 C14.8651014,8.86168421 14.6801351,9.21568421 14.3943243,9.47484211 C14.1085135,9.73589474 13.7652365,9.86589474 13.3651014,9.86589474 C13.0336824,9.866 12.7728041,9.77210526 12.5811486,9.58336842 L12.5811486,9.58336842 Z M13.9809122,9.03378947 C14.1104392,8.88810526 14.2030743,8.66705263 14.2596284,8.37273684 C14.2681419,8.32673684 14.2756419,8.27884211 14.2803041,8.23094737 C14.2849662,8.184 14.2868919,8.14 14.2868919,8.09989474 C14.2868919,7.92873684 14.2449324,7.79578947 14.1607095,7.70189474 C14.0769932,7.60705263 13.9579054,7.56010526 13.8039527,7.56010526 C13.6005405,7.56010526 13.4347297,7.63431579 13.3048986,7.78305263 C13.1739527,7.93178947 13.0811149,8.15663158 13.0227365,8.45589474 C13.0147297,8.50189474 13.0081419,8.54789474 13.0020608,8.59284211 C12.9973986,8.63884211 12.9959797,8.68178947 12.9968919,8.72094737 C12.9968919,8.89115789 13.0388514,9.02221053 13.1230743,9.11505263 C13.2068919,9.208 13.325473,9.25389474 13.4813514,9.25389474 C13.685777,9.25378947 13.8513851,9.18042105 13.9809122,9.03378947 L13.9809122,9.03378947 Z'/%3E%3Cpath fill='%23E02F41' d='M21.1286149,0.0484806913 L18.1794932,0.0473684211 L21.1117905,0.0497165472 C21.1172635,0.0497165472 21.1228378,0.0484806913 21.1286149,0.0484806913'/%3E%3Cpath fill='%232E4F7D' d='M18.1794932,0.047881449 L12.9370946,0.0444210526 C12.9239189,0.0444210526 12.9102365,0.0455333229 12.8965541,0.0466455932 L18.1794932,0.047881449'/%3E%3Cpath fill='%23FFF' d='M19.7576351,11.7485263 L19.9346959,11.1011579 L20.8302365,11.1011579 L20.7916216,11.3388421 C20.7916216,11.3388421 21.2491216,11.1011579 21.5787162,11.1011579 L22.6859797,11.1011579 L22.5100338,11.7485263 L22.3358108,11.7485263 L21.5005743,14.8017895 L21.6747973,14.8017895 L21.5090878,15.4081053 L21.3348649,15.4081053 L21.2623986,15.6711579 L20.3951351,15.6711579 L20.4675,15.4081053 L18.7566892,15.4081053 L18.9234122,14.8017895 L19.0947973,14.8017895 L19.9308446,11.7485263 L19.7576351,11.7485263 L19.7576351,11.7485263 Z M20.7238176,11.7485263 L20.4959797,12.5748421 C20.4959797,12.5748421 20.8859797,12.4193684 21.2220608,12.3753684 C21.29625,12.0869474 21.3932432,11.7485263 21.3932432,11.7485263 L20.7238176,11.7485263 Z M20.390473,12.9622105 L20.161723,13.8277895 C20.161723,13.8277895 20.5938851,13.6067368 20.8904392,13.5882105 C20.9760811,13.2536842 21.0618243,12.9623158 21.0618243,12.9623158 L20.390473,12.9623158 L20.390473,12.9622105 Z M20.5580068,14.8017895 L20.7292905,14.1738947 L20.0609797,14.1738947 L19.8885811,14.8017895 L20.5580068,14.8017895 Z M22.7236824,11.0610526 L23.5656081,11.0610526 L23.6013851,11.3836842 C23.5957095,11.4657895 23.6428378,11.5050526 23.7426689,11.5050526 L23.8914527,11.5050526 L23.7409459,12.0515789 L23.1221959,12.0515789 C22.8860473,12.0642105 22.764527,11.9704211 22.7531757,11.768 L22.7236824,11.0610526 Z M22.4769932,12.2336842 L25.2038514,12.2336842 L25.0438176,12.8205263 L24.1756419,12.8205263 L24.0267568,13.3661053 L24.894223,13.3661053 L24.7330743,13.9518947 L23.7670946,13.9518947 L23.5485811,14.2952632 L24.0214865,14.2952632 L24.1306419,14.9827368 C24.1436149,15.0511579 24.2019932,15.0844211 24.3019257,15.0844211 L24.4486824,15.0844211 L24.2944257,15.6505263 L23.7745946,15.6505263 C23.5052027,15.6643158 23.3660473,15.5704211 23.3545946,15.368 L23.2293243,14.7401053 L22.7990878,15.4081053 C22.6973311,15.5968421 22.5409459,15.6848421 22.3301351,15.6711579 L21.5363514,15.6711579 L21.6907095,15.1048421 L21.9384122,15.1048421 C22.0401689,15.1048421 22.1247973,15.058 22.2010135,14.9630526 L22.8744932,13.9518947 L22.0063176,13.9518947 L22.1672635,13.3661053 L23.1089189,13.3661053 L23.2586149,12.8205263 L22.3161486,12.8205263 L22.4769932,12.2336842 L22.4769932,12.2336842 Z M8.12168919,7.01821053 L8.78412162,7.01821053 L8.70831081,7.41915789 L8.80337838,7.30473684 C9.01814189,7.06610526 9.27891892,6.94778947 9.58682432,6.94778947 C9.86554054,6.94778947 10.0665203,7.03189474 10.1928041,7.20105263 C10.3170608,7.37021053 10.3510135,7.604 10.2921284,7.90421053 L9.92716216,9.79557895 L9.24638514,9.79557895 L9.57587838,8.08126316 C9.60983108,7.90421053 9.60040541,7.77221053 9.54810811,7.68705263 C9.49641892,7.602 9.3975,7.56 9.2547973,7.56 C9.07966216,7.56 8.9322973,7.61663158 8.81219595,7.72915789 C8.69168919,7.84263158 8.61212838,8.00010526 8.57300676,8.20052632 L8.26935811,9.79557895 L7.58716216,9.79557895 L8.12168919,7.01821053 L8.12168919,7.01821053 Z M15.7180743,7.01821053 L16.3811149,7.01821053 L16.3058108,7.41915789 L16.3997635,7.30473684 C16.6147297,7.06610526 16.8764189,6.94778947 17.1834122,6.94778947 C17.4621284,6.94778947 17.6634122,7.03189474 17.7887838,7.20105263 C17.9123311,7.37021053 17.9479054,7.604 17.8877027,7.90421053 L17.5241554,9.79557895 L16.8424662,9.79557895 L17.1721622,8.08126316 C17.2060135,7.90421053 17.1964865,7.77221053 17.1446959,7.68705263 C17.0909797,7.602 16.9939865,7.56 16.8518919,7.56 C16.6766554,7.56 16.5298986,7.61663158 16.4083784,7.72915789 C16.2878716,7.84263158 16.2078041,8.00010526 16.1702027,8.20052632 L15.8650338,9.79557895 L15.18375,9.79557895 L15.7180743,7.01821053 L15.7180743,7.01821053 Z M18.9950676,5.29694737 L20.9197297,5.29694737 C21.2896622,5.29694737 21.5759797,5.384 21.7727027,5.55505263 C21.9685135,5.72831579 22.0665203,5.97663158 22.0665203,6.30031579 L22.0665203,6.31010526 C22.0665203,6.37168421 22.0626689,6.44115789 22.0569932,6.51642105 C22.0471962,6.59284576 22.0346536,6.66886367 22.0193919,6.74431579 C21.9345608,7.17263158 21.7378378,7.51694737 21.4337838,7.778 C21.1285135,8.03810526 20.7670946,8.16915789 20.3509459,8.16915789 L19.3187838,8.16915789 L18.9996284,9.79547368 L18.1060135,9.79547368 L18.9950676,5.29694737 L18.9950676,5.29694737 Z M19.4760811,7.38694737 L20.3319932,7.38694737 C20.5550676,7.38694737 20.7321284,7.33305263 20.8613514,7.22652632 C20.9894595,7.11894737 21.0741892,6.95463158 21.1210135,6.73168421 C21.1285135,6.69052632 21.133277,6.65336842 21.1389527,6.61915789 C21.1417905,6.58694737 21.1455405,6.55452632 21.1455405,6.52336842 C21.1455405,6.36389474 21.0910135,6.24852632 20.9816554,6.17610526 C20.8725,6.10263158 20.7011149,6.06757895 20.4638514,6.06757895 L19.7369595,6.06757895 L19.4760811,7.38694737 L19.4760811,7.38694737 Z M26.0664527,10.3325263 C25.7838851,10.9564211 25.5146959,11.3201053 25.3565878,11.4892632 C25.198277,11.6566316 24.8846959,12.0457895 24.129527,12.0164211 L24.1946959,11.5403158 C24.8301689,11.3368421 25.17375,10.4204211 25.3697635,10.0146316 L25.1361486,7.026 L25.6277027,7.01915789 L26.0401014,7.01915789 L26.0844932,8.89389474 L26.8573986,7.01915789 L27.6400338,7.01915789 L26.0664527,10.3325263 L26.0664527,10.3325263 Z M23.878277,7.24505263 L23.5674324,7.46705263 C23.2426014,7.20305263 22.9460473,7.03968421 22.3736149,7.31547368 C21.5939189,7.69094737 20.9423311,10.5711579 23.0892568,9.62252632 L23.2115878,9.77315789 L24.05625,9.79568421 L24.6109459,7.17863158 L23.878277,7.24505263 L23.878277,7.24505263 Z M23.3978716,8.67578947 C23.2622635,9.09147368 22.959223,9.36621053 22.7218581,9.288 C22.4845946,9.21168421 22.3997635,8.81073684 22.5373986,8.39410526 C22.6730068,7.97747368 22.9780743,7.70368421 23.2134122,7.78189474 C23.4506757,7.85821053 23.5363176,8.25915789 23.3978716,8.67578947 L23.3978716,8.67578947 Z'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--danger { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='3' height='14' viewBox='0 0 3 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-8 -3)' fill='%23d63442' fill-rule='evenodd'%3E%3Cpath d='M8 3h3v7l-1 3H9l-1-3'/%3E%3Ccircle cx='9.5' cy='15.5' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--warning { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22' viewBox='-2 -1 24 22' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M1.6 17.5c-1.1 0-1.546-.773-.996-1.726l8.4-14.548c.55-.953 1.443-.953 1.992 0l8.4 14.548c.55.953.103 1.726-.997 1.726H1.6z'/%3E%3Cmask id='b' width='22.263' height='19.989' x='-1.5' y='-1.5'%3E%3Cpath fill='%23fff' d='M-1.13-.99H21.13V19H-1.13z'/%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(0 .5)'%3E%3Cuse stroke='%23edc200' stroke-width='3' mask='url(%23b)' xlink:href='%23a'/%3E%3Cpath fill='%23edc200' d='M9.173 6h1.654v4.165l-.32 2.063H9.493l-.32-2.063V6zM9 14.025c0-.295.09-.53.272-.702.18-.173.42-.26.716-.26.312 0 .56.087.74.26.18.173.272.407.272.702 0 .296-.09.532-.272.71-.18.176-.428.265-.74.265-.297 0-.535-.09-.716-.266-.18-.177-.272-.413-.272-.71z'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--success { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='200 41 16 13'%3E%3Cpath fill='none' stroke='%2348b985' stroke-width='2' d='M214.595 42.493L205 52l-3.877-3.97' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } + +.Icon--info { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 2 8 16'%3E%3Cpath fill='%23008bff' fill-rule='evenodd' d='M5.03 2c-.545 0-1.01.17-1.4.514-.388.343-.583.757-.583 1.238 0 .484.195.894.584 1.234.39.34.855.51 1.4.51.542 0 1.006-.17 1.392-.51.386-.34.578-.75.578-1.234 0-.48-.192-.895-.578-1.238C6.036 2.17 5.572 2 5.03 2zm.523 13.658c-.428 0-.73-.067-.904-.2-.174-.134-.262-.385-.262-.753 0-.146.027-.362.08-.648.054-.285.115-.54.183-.76l.828-2.773c.08-.254.136-.533.166-.837.03-.306.045-.518.045-.64 0-.583-.218-1.057-.65-1.423-.434-.365-1.05-.547-1.848-.547-.443 0-.913.074-1.41.223-.497.15-1.017.33-1.56.538L0 8.696c.16-.058.354-.118.58-.182.225-.063.445-.095.66-.095.438 0 .733.07.888.21.154.14.232.386.232.742 0 .197-.025.414-.076.652-.05.237-.112.49-.187.757l-.83 2.782c-.074.292-.128.555-.16.786-.034.232-.05.46-.05.68 0 .573.222 1.044.667 1.416.447.37 1.072.556 1.877.556.524 0 .983-.065 1.378-.195.396-.13.926-.32 1.59-.567l.22-.857c-.113.052-.297.11-.552.178-.254.066-.482.1-.683.1z'/%3E%3C/svg%3E"); } + +.Icon--alertSuccess { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m2.293-10.707L9 10.586 7.707 9.293c-.39-.39-1.023-.39-1.414 0-.39.39-.39 1.023 0 1.414l2 2c.195.195.45.293.707.293.256 0 .512-.098.707-.293l4-4c.39-.39.39-1.023 0-1.414-.39-.39-1.023-.39-1.414 0' id='a'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='10' cy='10' r='9'/%3E%3Cuse fill='%2348b985' xlink:href='%23a'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--alertDanger { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='10' cy='10' r='9'/%3E%3Cpath d='M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8' fill='%23d63442'/%3E%3Cpath d='M10.707 10l2.146-2.146c.196-.196.196-.512 0-.707-.195-.196-.51-.196-.707 0L10 9.293 7.854 7.147c-.196-.196-.512-.196-.707 0-.196.195-.196.51 0 .707L9.293 10l-2.146 2.147c-.196.195-.196.51 0 .707.097.097.225.146.353.146.128 0 .256-.05.354-.146L10 10.707l2.146 2.147c.098.097.226.146.354.146.128 0 .256-.05.353-.146.196-.196.196-.512 0-.707L10.707 10z' stroke='%23d63442' fill='%23d63442'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--alertInfo { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='10' cy='10' r='9'/%3E%3Cpath d='M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8' fill='%23008bff'/%3E%3Cpath d='M10.874 5c-.31 0-.577.103-.8.31-.222.204-.333.452-.333.74 0 .29.112.538.335.74.222.205.488.307.8.307.31 0 .574-.102.795-.306.22-.202.33-.45.33-.74 0-.288-.11-.536-.33-.74-.22-.207-.486-.31-.796-.31zm.3 8.195c-.245 0-.418-.04-.517-.12-.1-.08-.15-.23-.15-.452 0-.088.016-.217.047-.39.03-.17.065-.322.103-.456l.473-1.663c.046-.152.078-.32.095-.502.017-.183.026-.31.026-.383 0-.352-.123-.636-.37-.856-.248-.22-.6-.328-1.056-.328-.253 0-.522.045-.806.134-.284.09-.58.197-.892.323L8 9.017c.092-.034.202-.07.332-.108.128-.04.254-.058.377-.058.25 0 .417.042.506.125.088.084.133.233.133.446 0 .118-.016.25-.045.39-.028.144-.064.296-.106.456l-.476 1.667c-.042.175-.073.333-.092.472-.02.138-.03.274-.03.407 0 .343.13.626.383.85.256.222.613.333 1.073.333.298 0 .56-.04.787-.117.226-.078.53-.192.908-.34l.126-.514c-.066.03-.17.064-.316.105-.146.04-.276.06-.39.06z' fill='%23008bff'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--alertWarning { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='10' cy='10' r='9'/%3E%3Cpath d='M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8' fill='%23edc200'/%3E%3Cpath fill='%23edc200' d='M9 5h2v6H9z'/%3E%3Ccircle fill='%23edc200' cx='10' cy='13' r='1'/%3E%3C/g%3E%3C/svg%3E"); } + +.Icon--close { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.414 6l4.293-4.293A.999.999 0 1 0 10.293.293L6 4.586 1.707.293A.999.999 0 1 0 .293 1.707L4.586 6 .293 10.293a.999.999 0 1 0 1.414 1.414L6 7.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L7.414 6z' fill='%235a687b' fill-rule='evenodd'/%3E%3C/svg%3E"); } + +.Icon--checkmark { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10,0 C4.486,0 0,4.486 0,10 C0,15.514 4.486,20 10,20 C15.514,20 20,15.514 20,10 C20,4.486 15.514,0 10,0 M10,18 C5.589,18 2,14.411 2,10 C2,5.589 5.589,2 10,2 C14.411,2 18,5.589 18,10 C18,14.411 14.411,18 10,18 M12.293,7.293 L9,10.586 L7.707,9.293 C7.316,8.902 6.684,8.902 6.293,9.293 C5.902,9.684 5.902,10.316 6.293,10.707 L8.293,12.707 C8.488,12.902 8.744,13 9,13 C9.256,13 9.512,12.902 9.707,12.707 L13.707,8.707 C14.098,8.316 14.098,7.684 13.707,7.293 C13.316,6.902 12.684,6.902 12.293,7.293' fill='%2348b985' fill-rule='evenodd'/%3E%3C/svg%3E"); } diff --git a/dist/components/Input.css b/dist/components/Input.css new file mode 100644 index 0000000..2405eab --- /dev/null +++ b/dist/components/Input.css @@ -0,0 +1,74 @@ +.Input { + display: block; + width: 100%; + font-family: "Rubik", "Open Sans", "Lucida Grande", Verdana, Arial, sans-serif; + font-size: 14px; + color: #1b2733; + background-color: #fdfdfd; + border: 1px solid #dae0e4; + border-radius: 2px; + outline: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-transition: 200ms border, background, box-shadow, color ease-in-out; + transition: 200ms border, background, box-shadow, color ease-in-out; + will-change: border, background, color; + height: 48px; + padding: 0 9.6px; + line-height: normal; + font-size: 14px; } + .Input:hover { + border: 1px solid #bdc7ce; + box-shadow: inset 0 0 0 1px transparent; } + .Input:focus { + border: 1px solid #1274c4; + box-shadow: inset 0 0 0 1px #1274c4; } + .Input::-webkit-input-placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Input:-ms-input-placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Input::placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Input:disabled { + color: rgba(27, 39, 51, 0.5); + border-color: #eaeef1; + background-color: #f8f9f9; + cursor: not-allowed; } + .Input[readonly] { + color: inherit; + border-color: #dae0e4; + background-color: #f4f5f6; + cursor: not-allowed; } + .FormGroup--floatingLabel .Input { + padding-top: 15px; + font-size: 0.9375rem; } + .FormGroup--floatingLabel .Input::-webkit-input-placeholder { + color: transparent; } + .FormGroup--floatingLabel .Input:-ms-input-placeholder { + color: transparent; } + .FormGroup--floatingLabel .Input::placeholder { + color: transparent; } + .Input::-ms-clear { + display: none; } + .Input:invalid { + box-shadow: none; } + +.has-error .Input, .Input--error { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='3' height='14' viewBox='0 0 3 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-8 -3)' fill='%23d63442' fill-rule='evenodd'%3E%3Cpath d='M8 3h3v7l-1 3H9l-1-3'/%3E%3Ccircle cx='9.5' cy='15.5' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + background-size: 3px 14px; + box-shadow: inset 0 0 0 1px #d63442, 0 0 4px 0 rgba(214, 52, 66, 0.5); + border: 1px solid #d63442; } + +.has-success .Input, .Input--success { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='200 41 16 13'%3E%3Cpath fill='none' stroke='%2348b985' stroke-width='2' d='M214.595 42.493L205 52l-3.877-3.97' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + background-size: 16px 13px; + box-shadow: inset 0 0 0 1px #48b985, 0 0 4px 0 rgba(72, 185, 133, 0.5); + border: 1px solid #48b985; } diff --git a/dist/components/InputGroup.css b/dist/components/InputGroup.css new file mode 100644 index 0000000..4217ef2 --- /dev/null +++ b/dist/components/InputGroup.css @@ -0,0 +1,52 @@ +.InputGroup { + display: table; + width: 100%; + border-collapse: separate; } + +.InputGroup-input { + display: table-cell; + margin: 0; + white-space: nowrap; + vertical-align: middle; } + .InputGroup .InputGroup-input:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .InputGroup .InputGroup-input:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .InputGroup .InputGroup-input:not(:first-child):not(:last-child) { + border-radius: 0; } + .InputGroup-input:hover .InputGroup-input, + .InputGroup-input:hover .InputGroup-context { + border: 1px solid #bdc7ce; } + +.InputGroup-context { + display: table-cell; + width: 1%; + height: 100%; + padding: 0 16px; + color: #1b2733; + text-align: center; + white-space: nowrap; + vertical-align: middle; + background: #fdfdfd; + border: 1px solid #dae0e4; + font-size: 14px; } + .InputGroup .InputGroup-context:last-child { + border-left: 0; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } + .InputGroup .InputGroup-context:first-child { + border-right: 0; + padding: 0; + width: 64px; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; } + .is-disabled .InputGroup-context { + color: rgba(27, 39, 51, 0.5); + background-color: #f8f9f9; + border-color: #eaeef1; } + .is-readOnly .InputGroup-context { + color: inherit; + background-color: #f4f5f6; + border-color: #dae0e4; } diff --git a/dist/components/Label.css b/dist/components/Label.css new file mode 100644 index 0000000..c031c3b --- /dev/null +++ b/dist/components/Label.css @@ -0,0 +1,46 @@ +.Label { + margin: 0 0 8px 0; + font-size: 14px; + font-weight: 400; + line-height: 1.4; + color: #1b2733; + text-transform: none; + cursor: pointer; } + +.FormGroup--floatingLabel .Label { + position: absolute; + top: 16px; + left: 0; + z-index: 1; + width: 100%; + padding: 0 10px; + text-transform: none; + font-size: 14px; + color: #5a687b; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + will-change: font-size, transform; + -webkit-transition: 200ms all cubic-bezier(0.4, 0, 0.2, 1); + transition: 200ms all cubic-bezier(0.4, 0, 0.2, 1); } + +.FormGroup--floatingLabel.is-focused .Label, +.FormGroup--floatingLabel.has-value .Label, +.FormGroup--floatingLabel .Input:focus + .Label, +.FormGroup--floatingLabel .Select:focus + .Label, +.FormGroup--floatingLabel .Textarea:focus + .Label, +.FormGroup--floatingLabel .Autocomplete.is-searching + .Label { + font-size: 12px; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); } + +.FormGroup--floatingLabel.FormGroup--hasSuffix .Label, +.FormGroup--floatingLabel.FormGroup--hasPrefix .Label { + width: calc(100% - 64px); } + +.FormGroup--floatingLabel.FormGroup--hasPrefix .Label { + position: absolute; + left: 64px; } + +.FormGroup--floatingLabel.FormGroup--hasSuffix.FormGroup--hasPrefix .Label { + width: calc( 100% - 128px - 20px); } diff --git a/dist/components/Modal.css b/dist/components/Modal.css new file mode 100644 index 0000000..bf02564 --- /dev/null +++ b/dist/components/Modal.css @@ -0,0 +1,67 @@ +.Modal { + position: fixed; + top: 0; + left: 0; + z-index: 101; + outline: 0; + background-color: rgba(69, 79, 91, 0.6); + overflow-x: hidden; + overflow-y: auto; + display: block; + height: 100vh; + width: 100vw; + padding: 40px 0; } + +.Modal-dialog { + position: relative; + width: auto; + margin: 24px auto; + -webkit-animation: bounceIn 500ms cubic-bezier(0, 0.405, 0, 1.285); + animation: bounceIn 500ms cubic-bezier(0, 0.405, 0, 1.285); } + .Modal--medium .Modal-dialog { + max-width: 528px; } + .Modal--small .Modal-dialog { + max-width: 400px; } + .Modal--large .Modal-dialog { + max-width: 740px; } + @media (min-width: 576px) { + .Modal-dialog { + max-width: 400px; } } + +.Modal-content { + position: relative; + padding: 40px; + border-radius: 6px; + background-color: #fff; + box-shadow: 0 31px 41px 0 rgba(0, 0, 0, 0.18), 0 9px 28px 0 rgba(0, 0, 0, 0.05); } + +.Modal-closeButton { + position: absolute; + right: 20px; + top: 20px; + z-index: 1; + border: none; + background: none; + cursor: pointer; } + .Modal-closeButton:hover { + opacity: 0.6; } + +@-webkit-keyframes bounceIn { + from { + opacity: 0; + -webkit-transform: translate(0, -25%); + transform: translate(0, -25%); } + to { + opacity: 1; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } } + +@keyframes bounceIn { + from { + opacity: 0; + -webkit-transform: translate(0, -25%); + transform: translate(0, -25%); } + to { + opacity: 1; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } } diff --git a/dist/components/PhoneNumber.css b/dist/components/PhoneNumber.css new file mode 100644 index 0000000..289b7f1 --- /dev/null +++ b/dist/components/PhoneNumber.css @@ -0,0 +1,175 @@ +.PhoneNumber-field { + display: block; + width: 100%; } + +.PhoneNumber-field { + display: table; + width: 100%; } + +.PhoneNumber-input { + display: table-cell; + vertical-align: top; } + +.PhoneNumber-input-inner, +.PhoneNumber-input-inner.Input { + border-left-width: 0 !important; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.PhoneNumber-input-inner:focus, +.PhoneNumber-input-inner.Input:focus { + border-left-width: 1px !important; } + +.PhoneNumber-menu { + display: table-cell; + width: 96px; + vertical-align: top; } + .PhoneNumber-menu.is-searching { + position: absolute; + width: 100%; + z-index: 5; } + +.PhoneNumber-menu { + display: table-cell; + width: 96px; + vertical-align: top; } + .is-searching .PhoneNumber-menu { + position: absolute; + width: 100%; + z-index: 2; } + +.PhoneNumber-menu-options { + top: calc(100% - 1px); + width: 100%; } + +.PhoneNumber-option-dial { + color: rgba(27, 39, 51, 0.5); } + .is-active .PhoneNumber-option-dial { + color: rgba(255, 255, 255, 0.5); } + +.PhoneNumber-option-flag, +.PhoneNumber-option-country { + margin-right: 0.5rem; } + +.PhoneNumber-option { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.PhoneNumber-option-flag { + min-width: 21px; } + +.PhoneNumber-option-flag, +.PhoneNumber-option-country { + margin-right: 0.5rem; } + +.PhoneNumber-option-country { + line-height: 1.2; + max-width: calc(100% - 3rem); + white-space: normal; } + +.PhoneNumber-menu-options { + -webkit-transition: none; + transition: none; } + +.PhoneNumber-menu-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + position: relative; + z-index: 3; + padding: 0 0 0 8px; + background-image: none; + width: 96px; } + .is-searching .PhoneNumber-menu-input { + border-bottom-left-radius: 0; + background-image: none; } + .is-searching .PhoneNumber-menu-input:before { + content: ''; + display: block; + position: absolute; + width: calc(100% - 2px); + height: 3px; + left: 1px; + bottom: -2px; + background-color: #fff; } + .PhoneNumber-menu-input:after { + content: ''; + display: inline-block; + width: 16px; + height: 8px; + margin: 0 8px; + background-position: 0 0; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='185 19 10 7'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M194.82 20.819l-.713-.68c-.198-.192-.518-.192-.714-.002L190 23.416l-3.423-3.303c-.2-.19-.518-.19-.716 0l-.713.68c-.196.186-.196.49 0 .678l4.494 4.33c.2.186.52.186.715 0l4.466-4.302c.2-.188.2-.492 0-.68z'/%3E%3C/svg%3E"); } + .is-searching .PhoneNumber-menu-input:after { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + -webkit-transform-origin: 5px 3px; + transform-origin: 5px 3px; + opacity: 0.8; } + .PhoneNumber-menu-input:empty { + text-align: right; + padding-right: 16px; } + .FormGroup--floatingLabel .PhoneNumber-menu-input { + padding: 0 0 0 8px; } + .is-disabled .PhoneNumber-menu-input { + background-color: #f8f9f9; + border-color: #eaeef1; } + .is-readOnly .PhoneNumber-menu-input { + background-color: #f4f5f6; + border-color: #dae0e4; } + +.PhoneNumber .is-searching .Autocomplete-options { + border-top: 2px solid #1274c4 !important; + overflow-y: auto; } + +.PhoneNumber .is-searching + .PhoneNumber-input .PhoneNumber-input-inner { + padding-left: 104px; } + +.PhoneNumber .FormGroup--floatingLabel .Label { + left: 96px; + top: 14px; } + +.PhoneNumber.width-3 .PhoneNumber-menu, .PhoneNumber.width-3 .PhoneNumber-menu-input { + width: 88px; } + +.PhoneNumber.width-3 .PhoneNumber-menu.is-searching { + width: 100%; } + +.PhoneNumber.width-3 .is-searching + .PhoneNumber-input .PhoneNumber-input-inner { + padding-left: 100px; } + +.PhoneNumber.width-3 .FormGroup--floatingLabel .Label { + left: 88px; + max-width: calc(100% - 88px); } + +.PhoneNumber.width-2 .PhoneNumber-menu, .PhoneNumber.width-2 .PhoneNumber-menu-input { + width: 80px; } + +.PhoneNumber.width-2 .PhoneNumber-menu.is-searching { + width: 100%; } + +.PhoneNumber.width-2 .is-searching + .PhoneNumber-input .PhoneNumber-input-inner { + padding-left: 92px; } + +.PhoneNumber.width-2 .FormGroup--floatingLabel .Label { + left: 80px; + max-width: calc(100% - 80px); } + +.PhoneNumber.width-1 .PhoneNumber-menu, .PhoneNumber.width-1 .PhoneNumber-menu-input { + width: 72px; } + +.PhoneNumber.width-1 .PhoneNumber-menu.is-searching { + width: 100%; } + +.PhoneNumber.width-1 .is-searching + .PhoneNumber-input .PhoneNumber-input-inner { + padding-left: 84px; } + +.PhoneNumber.width-1 .FormGroup--floatingLabel .Label { + left: 72px; + max-width: calc(100% - 72px); } diff --git a/dist/components/Radio.css b/dist/components/Radio.css new file mode 100644 index 0000000..9a1e4e4 --- /dev/null +++ b/dist/components/Radio.css @@ -0,0 +1,80 @@ +.Radio { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + margin: 0 0 16px 0; + position: relative; } + +.Radio-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 20px; + height: 20px; + display: inline-block; + border: 1px solid #dae0e4; + background-color: #fdfdfd; + border-radius: 100%; + margin: 0 8px 0 0; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4' fill='white' /%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; } + +.Radio-label { + margin: 0 0 8px 0; + font-size: 14px; + font-weight: 400; + line-height: 1.4; + color: #1b2733; + text-transform: none; + cursor: pointer; + margin: 0; + position: relative; + display: inline-block; + max-width: calc(100% - 2rem); + padding-left: 4px; + cursor: default; } + .Radio-label + .FormGroup-feedback { + width: 100%; } + +.Radio-input:checked, +.Radio-input:focus:checked { + outline: none; + background-color: #1274c4; + border-color: #1274c4; } + +.Radio-label:focus .Radio-input, +.Radio-input:focus { + border: 2px solid #1274c4; + background-color: #fff; + outline: none; } + +.Radio-input:disabled { + border-color: #eee; + background-color: #eee; + background-image: none; } + +.has-error .Radio-input, +.has-error .Radio-input:focus { + border-color: #d63442; + background-color: #ffffff; + border: 2px solid #e3162b; + box-shadow: 0 0 4px 0 rgba(237, 41, 65, 0.5); + outline: none; } + +.has-error .Radio-input:active, +.has-error .Radio-input:checked { + box-shadow: none; + background-color: #1274c4; + border-color: #1274c4; } + +.MultipleRadio .Radio:last-child { + margin-bottom: 0; } diff --git a/dist/components/Select.css b/dist/components/Select.css new file mode 100644 index 0000000..796bb29 --- /dev/null +++ b/dist/components/Select.css @@ -0,0 +1,99 @@ +.Select { + display: block; + width: 100%; + font-family: "Rubik", "Open Sans", "Lucida Grande", Verdana, Arial, sans-serif; + font-size: 14px; + color: #1b2733; + background-color: #fdfdfd; + border: 1px solid #dae0e4; + border-radius: 2px; + outline: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-transition: 200ms border, background, box-shadow, color ease-in-out; + transition: 200ms border, background, box-shadow, color ease-in-out; + will-change: border, background, color; + padding-right: 32px; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='185 19 10 7'%3E%3Cpath fill='%235a687b' fill-rule='evenodd' d='M194.82 20.819l-.713-.68c-.198-.192-.518-.192-.714-.002L190 23.416l-3.423-3.303c-.2-.19-.518-.19-.716 0l-.713.68c-.196.186-.196.49 0 .678l4.494 4.33c.2.186.52.186.715 0l4.466-4.302c.2-.188.2-.492 0-.68z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: calc(100% - 0.8rem) center; + background-size: 0.8rem; + appearance: none; + text-indent: 1px; + text-overflow: ''; + height: 48px; + padding: 0 9.6px; + line-height: normal; + font-size: 14px; } + .Select:hover { + border: 1px solid #bdc7ce; + box-shadow: inset 0 0 0 1px transparent; } + .Select:focus { + border: 1px solid #1274c4; + box-shadow: inset 0 0 0 1px #1274c4; } + .Select::-webkit-input-placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Select:-ms-input-placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Select::placeholder { + color: rgba(90, 104, 123, 0.6); + opacity: 1; } + .Select:disabled { + color: rgba(27, 39, 51, 0.5); + border-color: #eaeef1; + background-color: #f8f9f9; + cursor: not-allowed; } + .Select[readonly] { + color: inherit; + border-color: #dae0e4; + background-color: #f4f5f6; + cursor: not-allowed; } + .FormGroup--floatingLabel .Select { + padding-top: 15px; + font-size: 0.9375rem; } + .FormGroup--floatingLabel .Select::-webkit-input-placeholder { + color: transparent; } + .FormGroup--floatingLabel .Select:-ms-input-placeholder { + color: transparent; } + .FormGroup--floatingLabel .Select::placeholder { + color: transparent; } + .Select::-ms-clear { + display: none; } + .Select:invalid { + box-shadow: none; } + +select.Select::-ms-expand { + display: none; } + +@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) { + select.Select { + padding-right: 0 !important; + text-indent: 0; + background-image: none !important; } } + +select.Select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; } + +select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; } + +option:not(:checked) { + color: black; + /* prevent