diff --git a/Gruntfile.js b/Gruntfile.js index af9503f..01f3b0c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -121,17 +121,7 @@ module.exports = function(grunt) { } } }, - 'polymer-css-compiler': { - default: { - files: [{ - expand: true, - cwd: '.', - dest: '../', - src: 'css/px-partials.css', - ext: '.html' - }] - } - }, + htmlmin: { dist: { options: { @@ -159,6 +149,21 @@ module.exports = function(grunt) { 'px-partials.min.html': 'px-partials.html' } } + }, + cssmin: { + target: { + files: { + 'css/<%= pkg.name %>.min.css': ['css/<%= pkg.name %>.css'] + } + } + }, + 'polymer-css-compiler': { + target: { + filename: '-styles', + files: { + './<%= pkg.name %>.html': ['css/<%= pkg.name %>.min.css'] + } + } } }); grunt.loadNpmTasks('web-component-tester'); @@ -174,10 +179,14 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concurrent'); grunt.loadNpmTasks('polymer-css-compiler'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('polymer-css-compiler'); // Default task. grunt.registerTask('default', 'Basic build', [ 'sass', - 'autoprefixer' + 'autoprefixer', + 'cssmin', + 'polymer-css-compiler' ]); grunt.registerTask('devmode', 'Development Mode', [ diff --git a/assets/predix-word.svg b/assets/predix-word.svg new file mode 100644 index 0000000..28cac5e --- /dev/null +++ b/assets/predix-word.svg @@ -0,0 +1,17 @@ + + + + Created with Sketch. + + + + + + + + + + + + + diff --git a/assets/predix-x.svg b/assets/predix-x.svg new file mode 100644 index 0000000..a463c26 --- /dev/null +++ b/assets/predix-x.svg @@ -0,0 +1,9 @@ + + + Created with Sketch. + + + + + + diff --git a/bower.json b/bower.json index 553cd93..1434fc7 100644 --- a/bower.json +++ b/bower.json @@ -3,26 +3,33 @@ "version": "0.0.1", "homepage": "https://github.com/PredixDev/px-partials", "authors": [ - "Jonnie Spratley " - ], + "Jonnie Spratley " + ], "description": "HTML Partials", "main": "px-partials.html", "moduleType": [], "license": "MIT", "ignore": [ - "**/.*", - "OSS_Notice.pdf", - "scripts", - "node_modules", - "bower_components", - "test", - "tests" - ], + "**/.*", + "OSS_Notice.pdf", + "scripts", + "node_modules", + "bower_components", + "test", + "tests" + ], "dependencies": { "polymer": "~1.5.0", "iron-selector": "*", "px-theme": "*", - "polymer-font-awesome": "https://github.com/PredixDev/polymer-font-awesome.git#master" + "polymer-font-awesome": "https://github.com/PredixDev/polymer-font-awesome.git#master", + "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.6", + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.16", + "px-forms-design": "https://github.com/PredixDev/px-forms-design.git#^0.3.16", + "iron-label": "PolymerElements/iron-label#^1.0.2", + "iron-form": "^1.1.0", + "px-input-group-design": "https://github.com/PredixDev/px-input-group-design.git#^0.2.12", + "paper-input": "PolymerElements/paper-input#^1.1.14" }, "devDependencies": { "px-mobile-design": "*", @@ -44,6 +51,9 @@ "px-headings-design": "~0.2.13" }, "resolutions": { - "polymer": "~1.5.0" + "polymer": "~1.5.0", + "px-theme": "~0.8.0", + "polymer-font-awesome": "master", + "px-layout": "*" } } diff --git a/css/px-partials-sketch.css b/css/px-partials-sketch.css index d680d2a..426d063 100644 --- a/css/px-partials-sketch.css +++ b/css/px-partials-sketch.css @@ -193,6 +193,219 @@ Predix branding rules go in px-partials-predix.scss, not in this file. -ms-flex-item-align: baseline; align-self: baseline; } +fieldset { + margin: 0; } + fieldset, fieldset legend { + border: 0; + padding: 0; } + +legend { + margin-bottom: 1.3333333333rem; + font-weight: bold; } + +.form-field { + margin-bottom: 1.3333333333rem; } + .form-field:last-child { + margin-bottom: 2.6666666667rem; } + +label { + display: block; + margin-bottom: 0.3333333333rem; + cursor: pointer; } + +.label--inline { + display: inline-block; + margin-bottom: 0; + line-height: 1; } + .label--inline + .text-input { + margin-left: 0.6666666667rem; } + +.text-input, +textarea, select { + margin: 0; + border: 1px solid #b1b1bc; + font: inherit; + outline: 0; + -webkit-appearance: none; + -moz-appearance: none; } + .text-input:disabled, + textarea:disabled, select:disabled { + cursor: not-allowed; } + +.text-input, +textarea { + width: 100%; + padding: 0 0.6666666667rem; + box-shadow: inset 0 0 0 1px #e4e4ea; + background-color: #efeff4; + color: black; } + .text-input[readonly], .text-input[disabled], + textarea[readonly], + textarea[disabled] { + box-shadow: none; } + .text-input[readonly], + textarea[readonly] { + border: 1px solid #e4e4ea; + background-color: white; + color: #b1b1bc; } + .text-input:disabled, + textarea:disabled { + border: 1px solid #e4e4ea; + box-shadow: none; + background-color: #f7f7fc; + color: #b1b1bc; } + .text-input:focus, + textarea:focus { + border-color: #0a9ec1; + box-shadow: inset 0 0 0 1px #d1d0d8; } + .text-input::-webkit-input-placeholder, + textarea::-webkit-input-placeholder { + color: #b1b1bc; } + .text-input:-moz-placeholder, + textarea:-moz-placeholder { + color: #b1b1bc; } + +select { + border-radius: 3px; + padding: 0 3em 0 1em; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + line-height: calc(2em - 2px); + cursor: pointer; + background-color: #e4e4ea; + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%233b3b3f%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-position: calc(100% - 0.6666666667rem) 37.5%; + color: #3b3b3f; } + select:hover, select:focus { + border: 1px solid #9999a3; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + background-color: #b1b1bc; } + select:active { + border: 1px solid #7c7c84; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + background-color: #9999a3; } + select:disabled { + border: 1px solid #d1d0d8; + box-shadow: none; + background-color: white; + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%23d1d0d8%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E"); + color: #d1d0d8; } + select[multiple] { + border: 1px solid #b1b1bc; + padding: 0.3333333333rem; + cursor: pointer; + background: #f7f7fc; } + +select::-ms-expand { + display: none; } + +@-moz-document url-prefix() { + select { + padding-top: .4em; + padding-bottom: .4em; } } + +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + select { + padding-top: .4em; + padding-bottom: .4em; } } + +.text-input { + height: 2em; + line-height: 1; } + .text-input + [type=checkbox], .text-input + [type=radio] { + margin-left: 1.3333333333rem; } + .text-input + .label--inline { + margin-left: 0.6666666667rem; } + .text-input[type=search] { + -webkit-appearance: none; + padding: 0; } + .text-input::-webkit-input-placeholder { + padding-top: 1px; } + .text-input:-moz-placeholder { + padding-top: 1px; } + +.text-input + [type=submit], .text-input [type=cancel], +.label--inline + [type=submit], +.label--inline [type=cancel] { + margin-left: 1.3333333333rem; } + +textarea { + overflow: auto; + min-height: calc(120px + 0.6666666667rem); + padding: 0.3333333333rem 0.6666666667rem; + resize: vertical; } + +[type=checkbox], [type=radio] { + margin: 0; + padding: 0; + font-size: 1.05em; + cursor: pointer; } + [type=checkbox][disabled], [type=radio][disabled] { + cursor: not-allowed; } + [type=checkbox][disabled] + .label--inline, [type=radio][disabled] + .label--inline { + cursor: not-allowed; } + +[type=checkbox] + .label--inline { + padding-left: 5px; } + +[type=radio] + .label--inline { + padding-left: 3px; } + +.form-field__help { + display: inline-block; + margin-top: 0.3333333333rem; + font-size: 1rem; + line-height: inherit; + color: #7c7c84; } + +.input--tiny { + max-width: 7.0666666667rem; } + +.input--small { + max-width: 14.1333333333rem; } + +.input--regular { + max-width: 21.2rem; } + +.input--large { + max-width: 28.2666666667rem; } + +.input--huge { + max-width: 35.3333333333rem; } + +/** + * Styles for one line forms. + */ +.form-field--inline:last-child { + margin-bottom: 1.3333333333rem; } + +.form-field--inline .text-input { + margin-bottom: 1.3333333333rem; } + +/** + * Styles for validation states + */ +.validation-warning { + color: #dd6b1f; } + +.validation-error { + color: #e53838; } + +.validation-success { + color: #46ad00; } + +.text-input.validation-warning { + border-color: #dd6b1f; + color: inherit; } + +.text-input.validation-error { + border-color: #e53838; + color: inherit; } + +.text-input.validation-success { + border-color: #46ad00; + color: inherit; } + .btn { display: inline-block; overflow: visible; @@ -2549,3 +2762,43 @@ html, body { .is-hidden\@xl- { display: none !important; } + +.input-group { + display: -ms-flexbox; + display: flex; } + .input-group .text-input { + -ms-flex: 1; + flex: 1; + z-index: 2; } + .input-group .text-input:first-child { + margin-right: -1px; } + .input-group .text-input:last-child { + margin-left: -1px; } + .input-group .btn + .btn { + margin-left: -1px; } + +.input-group__addon { + padding-right: 0.6666666667rem; + padding-left: 0.6666666667rem; } + .input-group__addon.btn { + border-radius: 0; + box-shadow: none; } + .input-group__addon:not(.btn) { + height: 2em; + border: 1px solid #b1b1bc; + box-shadow: inset 0 0 0 1px #e4e4ea; + line-height: 2; + background-color: #efeff4; + color: #b1b1bc; } + .input-group__addon:first-child { + border-right-width: 0; } + .input-group__addon:first-child.btn { + border-width: 1px; + border-radius: 3px 0 0 3px; } + .input-group__addon:last-child { + border-left-width: 0; } + .input-group__addon:last-child.btn { + border-width: 1px; + border-radius: 0 3px 3px 0; } + .input-group__addon .fa { + color: #7c7c84; } diff --git a/css/px-partials.css b/css/px-partials.css index 43dfa8b..013c81a 100644 --- a/css/px-partials.css +++ b/css/px-partials.css @@ -206,6 +206,219 @@ Predix branding rules go in px-partials-predix.scss, not in this file. -ms-flex-item-align: baseline; align-self: baseline; } +fieldset { + margin: 0; } + fieldset, fieldset legend { + border: 0; + padding: 0; } + +legend { + margin-bottom: 1.3333333333rem; + font-weight: bold; } + +.form-field { + margin-bottom: 1.3333333333rem; } + .form-field:last-child { + margin-bottom: 2.6666666667rem; } + +label { + display: block; + margin-bottom: 0.3333333333rem; + cursor: pointer; } + +.label--inline { + display: inline-block; + margin-bottom: 0; + line-height: 1; } + .label--inline + .text-input { + margin-left: 0.6666666667rem; } + +.text-input, +textarea, select { + margin: 0; + border: 1px solid #b1b1bc; + font: inherit; + outline: 0; + -webkit-appearance: none; + -moz-appearance: none; } + .text-input:disabled, + textarea:disabled, select:disabled { + cursor: not-allowed; } + +.text-input, +textarea { + width: 100%; + padding: 0 0.6666666667rem; + box-shadow: inset 0 0 0 1px #e4e4ea; + background-color: #efeff4; + color: black; } + .text-input[readonly], .text-input[disabled], + textarea[readonly], + textarea[disabled] { + box-shadow: none; } + .text-input[readonly], + textarea[readonly] { + border: 1px solid #e4e4ea; + background-color: white; + color: #b1b1bc; } + .text-input:disabled, + textarea:disabled { + border: 1px solid #e4e4ea; + box-shadow: none; + background-color: #f7f7fc; + color: #b1b1bc; } + .text-input:focus, + textarea:focus { + border-color: #0a9ec1; + box-shadow: inset 0 0 0 1px #d1d0d8; } + .text-input::-webkit-input-placeholder, + textarea::-webkit-input-placeholder { + color: #b1b1bc; } + .text-input:-moz-placeholder, + textarea:-moz-placeholder { + color: #b1b1bc; } + +select { + border-radius: 3px; + padding: 0 3em 0 1em; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + line-height: calc(2em - 2px); + cursor: pointer; + background-color: #e4e4ea; + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%233b3b3f%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-position: calc(100% - 0.6666666667rem) 37.5%; + color: #3b3b3f; } + select:hover, select:focus { + border: 1px solid #9999a3; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + background-color: #b1b1bc; } + select:active { + border: 1px solid #7c7c84; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + background-color: #9999a3; } + select:disabled { + border: 1px solid #d1d0d8; + box-shadow: none; + background-color: white; + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%23d1d0d8%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E"); + color: #d1d0d8; } + select[multiple] { + border: 1px solid #b1b1bc; + padding: 0.3333333333rem; + cursor: pointer; + background: #f7f7fc; } + +select::-ms-expand { + display: none; } + +@-moz-document url-prefix() { + select { + padding-top: .4em; + padding-bottom: .4em; } } + +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + select { + padding-top: .4em; + padding-bottom: .4em; } } + +.text-input { + height: 2em; + line-height: 1; } + .text-input + [type=checkbox], .text-input + [type=radio] { + margin-left: 1.3333333333rem; } + .text-input + .label--inline { + margin-left: 0.6666666667rem; } + .text-input[type=search] { + -webkit-appearance: none; + padding: 0; } + .text-input::-webkit-input-placeholder { + padding-top: 1px; } + .text-input:-moz-placeholder { + padding-top: 1px; } + +.text-input + [type=submit], .text-input [type=cancel], +.label--inline + [type=submit], +.label--inline [type=cancel] { + margin-left: 1.3333333333rem; } + +textarea { + overflow: auto; + min-height: calc(120px + 0.6666666667rem); + padding: 0.3333333333rem 0.6666666667rem; + resize: vertical; } + +[type=checkbox], [type=radio] { + margin: 0; + padding: 0; + font-size: 1.05em; + cursor: pointer; } + [type=checkbox][disabled], [type=radio][disabled] { + cursor: not-allowed; } + [type=checkbox][disabled] + .label--inline, [type=radio][disabled] + .label--inline { + cursor: not-allowed; } + +[type=checkbox] + .label--inline { + padding-left: 5px; } + +[type=radio] + .label--inline { + padding-left: 3px; } + +.form-field__help { + display: inline-block; + margin-top: 0.3333333333rem; + font-size: 1rem; + line-height: inherit; + color: #7c7c84; } + +.input--tiny { + max-width: 7.0666666667rem; } + +.input--small { + max-width: 14.1333333333rem; } + +.input--regular { + max-width: 21.2rem; } + +.input--large { + max-width: 28.2666666667rem; } + +.input--huge { + max-width: 35.3333333333rem; } + +/** + * Styles for one line forms. + */ +.form-field--inline:last-child { + margin-bottom: 1.3333333333rem; } + +.form-field--inline .text-input { + margin-bottom: 1.3333333333rem; } + +/** + * Styles for validation states + */ +.validation-warning { + color: #dd6b1f; } + +.validation-error { + color: #e53838; } + +.validation-success { + color: #46ad00; } + +.text-input.validation-warning { + border-color: #dd6b1f; + color: inherit; } + +.text-input.validation-error { + border-color: #e53838; + color: inherit; } + +.text-input.validation-success { + border-color: #46ad00; + color: inherit; } + .btn { display: inline-block; overflow: visible; @@ -2562,3 +2775,43 @@ html, body { .is-hidden\@xl- { display: none !important; } + +.input-group { + display: -ms-flexbox; + display: flex; } + .input-group .text-input { + -ms-flex: 1; + flex: 1; + z-index: 2; } + .input-group .text-input:first-child { + margin-right: -1px; } + .input-group .text-input:last-child { + margin-left: -1px; } + .input-group .btn + .btn { + margin-left: -1px; } + +.input-group__addon { + padding-right: 0.6666666667rem; + padding-left: 0.6666666667rem; } + .input-group__addon.btn { + border-radius: 0; + box-shadow: none; } + .input-group__addon:not(.btn) { + height: 2em; + border: 1px solid #b1b1bc; + box-shadow: inset 0 0 0 1px #e4e4ea; + line-height: 2; + background-color: #efeff4; + color: #b1b1bc; } + .input-group__addon:first-child { + border-right-width: 0; } + .input-group__addon:first-child.btn { + border-width: 1px; + border-radius: 3px 0 0 3px; } + .input-group__addon:last-child { + border-left-width: 0; } + .input-group__addon:last-child.btn { + border-width: 1px; + border-radius: 0 3px 3px 0; } + .input-group__addon .fa { + color: #7c7c84; } diff --git a/css/px-partials.min.css b/css/px-partials.min.css new file mode 100644 index 0000000..3c3693f --- /dev/null +++ b/css/px-partials.min.css @@ -0,0 +1 @@ +@charset "UTF-8";.btn,.text-input,select,textarea{-webkit-appearance:none;-moz-appearance:none;outline:0}.btn,.c-header__link,.c-header__title,.title-bar h3{white-space:nowrap}.alpha{font-size:5rem;line-height:1.0666666667}.beta{font-size:4rem;line-height:1}.delta,.gamma{line-height:1.3333333333}.gamma{font-size:3rem}.delta{font-size:2rem}.epsilon{font-size:1.3333333333rem;line-height:1}.zeta{font-size:.8rem;line-height:1.6666666667}.flex{display:-ms-flexbox;display:flex}.flex--row{-ms-flex-direction:row;flex-direction:row}.flex--row--rev{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex--col{-ms-flex-direction:column;flex-direction:column}.flex--col--rev{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex--nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex--wrap--rev{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex--left{-ms-flex-pack:start;justify-content:flex-start}.flex--center{-ms-flex-pack:center;justify-content:center}.flex--right{-ms-flex-pack:end;justify-content:flex-end}.flex--justify{-ms-flex-pack:justify;justify-content:space-between}.flex--spaced{-ms-flex-pack:distribute;justify-content:space-around}.flex--top{-ms-flex-align:start;align-items:flex-start}.flex--middle{-ms-flex-align:center;align-items:center}.flex--bottom{-ms-flex-align:end;align-items:flex-end}.flex--stretch{-ms-flex-align:stretch;align-items:stretch}.flex--baseline{-ms-flex-align:baseline;align-items:baseline}.flex--top--multi{-ms-flex-line-pack:start;align-content:flex-start}.flex--middle--multi{-ms-flex-line-pack:center;align-content:center}.flex--bottom--multi{-ms-flex-line-pack:end;align-content:flex-end}.flex--stretch--multi{-ms-flex-line-pack:stretch;align-content:stretch}.flex--justify--multi{-ms-flex-line-pack:justify;align-content:space-between}.flex--spaced--multi{-ms-flex-line-pack:distribute;align-content:space-around}.flex__item{-ms-flex:1;flex:1}.flex__item--top{-ms-flex-item-align:start;align-self:flex-start}.flex__item--middle{-ms-flex-item-align:center;align-self:center}.flex__item--bottom{-ms-flex-item-align:end;align-self:flex-end}.flex__item--baseline{-ms-flex-item-align:baseline;align-self:baseline}fieldset{margin:0}.form-field,legend{margin-bottom:1.3333333333rem}fieldset,fieldset legend{border:0;padding:0}legend{font-weight:700}.form-field:last-child{margin-bottom:2.6666666667rem}label{display:block;margin-bottom:.3333333333rem;cursor:pointer}.label--inline{display:inline-block;margin-bottom:0;line-height:1}.label--inline+.text-input{margin-left:.6666666667rem}.text-input,select,textarea{margin:0;border:1px solid #b1b1bc;font:inherit}.text-input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}.text-input,textarea{width:100%;padding:0 .6666666667rem;box-shadow:inset 0 0 0 1px #e4e4ea;background-color:#efeff4;color:#000}.text-input[disabled],.text-input[readonly],textarea[disabled],textarea[readonly]{box-shadow:none}.text-input[readonly],textarea[readonly]{border:1px solid #e4e4ea;background-color:#fff;color:#b1b1bc}.text-input:disabled,textarea:disabled{border:1px solid #e4e4ea;box-shadow:none;background-color:#f7f7fc;color:#b1b1bc}.text-input:focus,textarea:focus{border-color:#0a9ec1;box-shadow:inset 0 0 0 1px #d1d0d8}select,select:active,select:focus,select:hover{box-shadow:0 1px 0 rgba(0,0,0,.1)}.text-input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#b1b1bc}.text-input:-moz-placeholder,textarea:-moz-placeholder{color:#b1b1bc}select{border-radius:3px;padding:0 3em 0 1em;line-height:calc(2em - 2px);cursor:pointer;background-color:#e4e4ea;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%233b3b3f%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:calc(100% - .6666666667rem) 37.5%;color:#3b3b3f}select:focus,select:hover{border:1px solid #9999a3;background-color:#b1b1bc}select:active{border:1px solid #7c7c84;background-color:#9999a3}select:disabled{border:1px solid #d1d0d8;box-shadow:none;background-color:#fff;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%23d1d0d8%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E");color:#d1d0d8}select[multiple]{border:1px solid #b1b1bc;padding:.3333333333rem;cursor:pointer;background:#f7f7fc}select::-ms-expand{display:none}@-moz-document url-prefix(){select{padding-top:.4em;padding-bottom:.4em}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){select{padding-top:.4em;padding-bottom:.4em}}.text-input{height:2em;line-height:1}.text-input+[type=checkbox],.text-input+[type=radio]{margin-left:1.3333333333rem}.text-input+.label--inline{margin-left:.6666666667rem}.text-input[type=search]{-webkit-appearance:none;padding:0}.text-input::-webkit-input-placeholder{padding-top:1px}.text-input:-moz-placeholder{padding-top:1px}.label--inline [type=cancel],.label--inline+[type=submit],.text-input [type=cancel],.text-input+[type=submit]{margin-left:1.3333333333rem}textarea{overflow:auto;min-height:calc(120px + .6666666667rem);padding:.3333333333rem .6666666667rem;resize:vertical}[type=checkbox],[type=radio]{margin:0;padding:0;font-size:1.05em;cursor:pointer}[type=checkbox][disabled],[type=checkbox][disabled]+.label--inline,[type=radio][disabled],[type=radio][disabled]+.label--inline{cursor:not-allowed}[type=checkbox]+.label--inline{padding-left:5px}[type=radio]+.label--inline{padding-left:3px}.form-field__help{display:inline-block;margin-top:.3333333333rem;font-size:1rem;line-height:inherit;color:#7c7c84}.input--tiny{max-width:7.0666666667rem}.input--small{max-width:14.1333333333rem}.input--regular{max-width:21.2rem}.input--large{max-width:28.2666666667rem}.input--huge{max-width:35.3333333333rem}.form-field--inline .text-input,.form-field--inline:last-child{margin-bottom:1.3333333333rem}.validation-warning{color:#dd6b1f}.validation-error{color:#e53838}.validation-success{color:#46ad00}.text-input.validation-warning{border-color:#dd6b1f;color:inherit}.text-input.validation-error{border-color:#e53838;color:inherit}.text-input.validation-success{border-color:#46ad00;color:inherit}.btn{display:inline-block;overflow:visible;height:2em;margin:0;border:1px solid #b1b1bc;border-radius:3px;padding:0 1em;box-shadow:0 1px 0 rgba(0,0,0,.1);font:inherit;line-height:calc(2em - 2px);-webkit-font-smoothing:antialiased;cursor:pointer;text-align:center;text-decoration:none;text-transform:none;background-color:#e4e4ea}.caps,.u-text--uppercase{text-transform:uppercase!important}.btn,.btn:active,.btn:hover,.btn:link,.btn:visited{color:#000}.btn:hover{border-color:#9999a3;box-shadow:0 1px 0 rgba(0,0,0,.15);background-color:#b1b1bc}.btn:active{border-color:#7c7c84;box-shadow:none;background-color:#9999a3;outline:0}@-moz-document url-prefix(){.btn:not(button){line-height:1.8em}}button.btn{-webkit-appearance:button}.btn+.btn{margin-left:.6666666667rem}.btn--bare{height:auto;border:0;border-radius:0;padding:0;line-height:inherit}.btn--bare,.btn--bare:active,.btn--bare:focus,.btn--bare:hover,.btn--bare:link,.btn--bare:visited{box-shadow:none;background:0 0;color:inherit}.btn--primary{border-color:#2b5ea2;box-shadow:0 1px 0 rgba(0,0,0,.15);background-color:#3e87e8}.btn--primary,.btn--primary:active,.btn--primary:hover,.btn--primary:link,.btn--primary:visited{color:#fff}.btn--primary:hover{border-color:transparent;background-color:#3573c5}.btn--primary:active{border-color:transparent;background-color:#2b5ea2}.btn--tertiary{border-color:#b1b1bc;box-shadow:none;background-color:#fff}.btn--tertiary,.btn--tertiary:active,.btn--tertiary:hover,.btn--tertiary:link,.btn--tertiary:visited{color:#3e87e8}.btn--tertiary:hover{border-color:#9999a3;box-shadow:none;background-color:#e4e4ea}.btn--tertiary:active{border-color:#7c7c84;box-shadow:none;background-color:#b1b1bc}.btn--disabled,.btn--disabled:active,.btn--disabled:hover,.btn--disabled:link,.btn--disabled:visited,.btn[disabled],.btn[disabled]:active,.btn[disabled]:hover,.btn[disabled]:link,.btn[disabled]:visited{border-color:#d1d0d8;box-shadow:none;cursor:not-allowed;background-color:#fff;color:#d1d0d8}.btn--small{height:1.6666666667em;font-size:.8rem;line-height:calc($inuit-btn-height--small - 2px)}.btn--large{font-size:1.3333333333rem}.btn--huge{font-size:2rem}.btn--full{width:100%;padding-right:0;padding-left:0}.btn--icon{width:2em;border-radius:6.6666666667em;padding:1px 0 0 1px}@-moz-document url-prefix(){.btn--small{line-height:1.4em}.btn--icon{line-height:1.8em}}/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-size:.9375em;line-height:1.3333333333;background-color:#fff;color:#000;overflow-y:scroll;min-height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}.hidden,.u-display--none{display:none!important}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}pre{overflow:auto}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:link,a:visited{color:#3e87e8}a:hover{color:#3573c5}a:active{color:#2b5ea2}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.muted{opacity:.5!important}.hidden{visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.visuallyhidden-desk{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:21.3333333333rem){.a11y-xs,.visuallyhidden-xs{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:22rem) and (max-width:49.0666666667rem){.a11y-sm,.visuallyhidden-sm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:51.2rem) and (max-width:68.2rem){.a11y-md,.visuallyhidden-md{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:68.2666666667rem) and (max-width:80rem){.a11y-lg,.visuallyhidden-lg{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:85.3333333333rem){.a11y-xl,.visuallyhidden-xl{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.u-mt,.u-mv{margin-top:1rem!important}.u-mb,.u-mv{margin-bottom:1rem!important}.u-round,img.round{border-radius:50%}.u-ph,.u-pr{padding-right:1rem!important}.u-ph,.u-pl{padding-left:1rem!important}.u-pt,.u-pv{padding-top:1rem!important}.u-pb,.u-pv{padding-bottom:1rem!important}.invisible{visibility:hidden!important}.viewport{width:100%;max-width:90rem;margin-right:auto;margin-left:auto}.u-mh,.u-mr{margin-right:1rem!important}.u-mh,.u-ml{margin-left:1rem!important}.viewport--full-height{min-height:100vh}.u-m{margin:1rem!important}.u-mh0,.u-mr0{margin-right:0!important}.u-mh0,.u-ml0{margin-left:0!important}.u-mt0,.u-mv0{margin-top:0!important}.u-mb0,.u-mv0{margin-bottom:0!important}.u-m0{margin:0!important}.u-p{padding:1rem!important}.u-1\/1{width:100%!important}.u-1\/2{width:50%!important;-ms-flex:none!important;flex:none!important}.u-1\/3{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-1\/4,.u-2\/3{-ms-flex:none!important}.u-2\/3{width:66.6666666667%!important;flex:none!important}.u-1\/4{width:25%!important;flex:none!important}.u-2\/4,.u-3\/4{-ms-flex:none!important}.u-2\/4{width:50%!important;flex:none!important}.u-3\/4{width:75%!important;flex:none!important}.u-1\/6,.u-2\/6{-ms-flex:none!important}.u-1\/6{width:16.6666666667%!important;flex:none!important}.u-2\/6{width:33.3333333333%!important;flex:none!important}.u-3\/6,.u-4\/6{-ms-flex:none!important}.u-3\/6{width:50%!important;flex:none!important}.u-4\/6{width:66.6666666667%!important;flex:none!important}.u-5\/6{width:83.3333333333%!important;-ms-flex:none!important;flex:none!important}@media screen and (max-width:47.9rem){.u-palm-mh,.u-palm-mr{margin-right:1rem!important}.u-palm-mh,.u-palm-ml{margin-left:1rem!important}.u-palm-mt,.u-palm-mv{margin-top:1rem!important}.u-palm-mb,.u-palm-mv{margin-bottom:1rem!important}.u-palm-m{margin:1rem!important}.u-1\/1-palm{width:100%!important}.u-1\/2-palm{width:50%!important;-ms-flex:none!important;flex:none!important}.u-1\/3-palm{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-2\/3-palm{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-1\/4-palm{width:25%!important;-ms-flex:none!important;flex:none!important}.u-2\/4-palm{width:50%!important;-ms-flex:none!important;flex:none!important}.u-3\/4-palm{width:75%!important;-ms-flex:none!important;flex:none!important}.u-1\/6-palm{width:16.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-2\/6-palm{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-3\/6-palm{width:50%!important;-ms-flex:none!important;flex:none!important}.u-4\/6-palm{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-5\/6-palm{width:83.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-1\/7-palm{width:14.2857142857%!important;-ms-flex:none!important;flex:none!important}.u-2\/7-palm{width:28.5714285714%!important;-ms-flex:none!important;flex:none!important}.u-3\/7-palm{width:42.8571428571%!important;-ms-flex:none!important;flex:none!important}.u-4\/7-palm{width:57.1428571429%!important;-ms-flex:none!important;flex:none!important}.u-5\/7-palm{width:71.4285714286%!important;-ms-flex:none!important;flex:none!important}.u-6\/7-palm{width:85.7142857143%!important;-ms-flex:none!important;flex:none!important}.u-1\/8-palm{width:12.5%!important;-ms-flex:none!important;flex:none!important}.u-2\/8-palm{width:25%!important;-ms-flex:none!important;flex:none!important}.u-3\/8-palm{width:37.5%!important;-ms-flex:none!important;flex:none!important}.u-4\/8-palm{width:50%!important;-ms-flex:none!important;flex:none!important}.u-5\/8-palm{width:62.5%!important;-ms-flex:none!important;flex:none!important}.u-6\/8-palm{width:75%!important;-ms-flex:none!important;flex:none!important}.u-7\/8-palm{width:87.5%!important;-ms-flex:none!important;flex:none!important}}@media screen and (min-width:48rem) and (max-width:63.9rem){.u-lap-mh,.u-lap-mr{margin-right:1rem!important}.u-lap-mh,.u-lap-ml{margin-left:1rem!important}.u-lap-mt,.u-lap-mv{margin-top:1rem!important}.u-lap-mb,.u-lap-mv{margin-bottom:1rem!important}.u-lap-m{margin:1rem!important}.u-1\/1-lap{width:100%!important}.u-1\/2-lap{width:50%!important;-ms-flex:none!important;flex:none!important}.u-1\/3-lap,.u-2\/3-lap{-ms-flex:none!important}.u-1\/3-lap{width:33.3333333333%!important;flex:none!important}.u-2\/3-lap{width:66.6666666667%!important;flex:none!important}.u-1\/4-lap,.u-2\/4-lap{-ms-flex:none!important}.u-1\/4-lap{width:25%!important;flex:none!important}.u-2\/4-lap{width:50%!important;flex:none!important}.u-1\/6-lap,.u-3\/4-lap{-ms-flex:none!important}.u-3\/4-lap{width:75%!important;flex:none!important}.u-1\/6-lap{width:16.6666666667%!important;flex:none!important}.u-2\/6-lap,.u-3\/6-lap{-ms-flex:none!important}.u-2\/6-lap{width:33.3333333333%!important;flex:none!important}.u-3\/6-lap{width:50%!important;flex:none!important}.u-4\/6-lap,.u-5\/6-lap{-ms-flex:none!important}.u-4\/6-lap{width:66.6666666667%!important;flex:none!important}.u-5\/6-lap{width:83.3333333333%!important;flex:none!important}.u-1\/7-lap,.u-2\/7-lap{-ms-flex:none!important}.u-1\/7-lap{width:14.2857142857%!important;flex:none!important}.u-2\/7-lap{width:28.5714285714%!important;flex:none!important}.u-3\/7-lap,.u-4\/7-lap{-ms-flex:none!important}.u-3\/7-lap{width:42.8571428571%!important;flex:none!important}.u-4\/7-lap{width:57.1428571429%!important;flex:none!important}.u-5\/7-lap,.u-6\/7-lap{-ms-flex:none!important}.u-5\/7-lap{width:71.4285714286%!important;flex:none!important}.u-6\/7-lap{width:85.7142857143%!important;flex:none!important}.u-1\/8-lap,.u-2\/8-lap{-ms-flex:none!important}.u-1\/8-lap{width:12.5%!important;flex:none!important}.u-2\/8-lap{width:25%!important;flex:none!important}.u-3\/8-lap,.u-4\/8-lap{-ms-flex:none!important}.u-3\/8-lap{width:37.5%!important;flex:none!important}.u-4\/8-lap{width:50%!important;flex:none!important}.u-5\/8-lap,.u-6\/8-lap{-ms-flex:none!important}.u-5\/8-lap{width:62.5%!important;flex:none!important}.u-6\/8-lap{width:75%!important;flex:none!important}.u-7\/8-lap{width:87.5%!important;-ms-flex:none!important;flex:none!important}}@media screen and (min-width:48rem){.u-lap-and-up-mh,.u-lap-and-up-mr{margin-right:1rem!important}.u-lap-and-up-mh,.u-lap-and-up-ml{margin-left:1rem!important}.u-lap-and-up-mt,.u-lap-and-up-mv{margin-top:1rem!important}.u-lap-and-up-mb,.u-lap-and-up-mv{margin-bottom:1rem!important}.u-lap-and-up-m{margin:1rem!important}.u-1\/1-lap-and-up{width:100%!important}.u-1\/2-lap-and-up{width:50%!important;-ms-flex:none!important;flex:none!important}.u-1\/3-lap-and-up{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-2\/3-lap-and-up{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-1\/4-lap-and-up{width:25%!important;-ms-flex:none!important;flex:none!important}.u-2\/4-lap-and-up{width:50%!important;-ms-flex:none!important;flex:none!important}.u-3\/4-lap-and-up{width:75%!important;-ms-flex:none!important;flex:none!important}.u-1\/6-lap-and-up{width:16.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-2\/6-lap-and-up{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-3\/6-lap-and-up{width:50%!important;-ms-flex:none!important;flex:none!important}.u-4\/6-lap-and-up{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-5\/6-lap-and-up{width:83.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-1\/7-lap-and-up{width:14.2857142857%!important;-ms-flex:none!important;flex:none!important}.u-2\/7-lap-and-up{width:28.5714285714%!important;-ms-flex:none!important;flex:none!important}.u-3\/7-lap-and-up{width:42.8571428571%!important;-ms-flex:none!important;flex:none!important}.u-4\/7-lap-and-up{width:57.1428571429%!important;-ms-flex:none!important;flex:none!important}.u-5\/7-lap-and-up{width:71.4285714286%!important;-ms-flex:none!important;flex:none!important}.u-6\/7-lap-and-up{width:85.7142857143%!important;-ms-flex:none!important;flex:none!important}.u-1\/8-lap-and-up{width:12.5%!important;-ms-flex:none!important;flex:none!important}.u-2\/8-lap-and-up{width:25%!important;-ms-flex:none!important;flex:none!important}.u-3\/8-lap-and-up{width:37.5%!important;-ms-flex:none!important;flex:none!important}.u-4\/8-lap-and-up{width:50%!important;-ms-flex:none!important;flex:none!important}.u-5\/8-lap-and-up{width:62.5%!important;-ms-flex:none!important;flex:none!important}.u-6\/8-lap-and-up{width:75%!important;-ms-flex:none!important;flex:none!important}.u-7\/8-lap-and-up{width:87.5%!important;-ms-flex:none!important;flex:none!important}}@media screen and (max-width:63.9rem){.u-portable-mh,.u-portable-mr{margin-right:1rem!important}.u-portable-mh,.u-portable-ml{margin-left:1rem!important}.u-portable-mt,.u-portable-mv{margin-top:1rem!important}.u-portable-mb,.u-portable-mv{margin-bottom:1rem!important}.u-portable-m{margin:1rem!important}.u-1\/1-portable{width:100%!important}.u-1\/2-portable{width:50%!important;-ms-flex:none!important;flex:none!important}.u-1\/3-portable{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-2\/3-portable{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-1\/4-portable{width:25%!important;-ms-flex:none!important;flex:none!important}.u-2\/4-portable{width:50%!important;-ms-flex:none!important;flex:none!important}.u-3\/4-portable{width:75%!important;-ms-flex:none!important;flex:none!important}.u-1\/6-portable{width:16.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-2\/6-portable{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-3\/6-portable{width:50%!important;-ms-flex:none!important;flex:none!important}.u-4\/6-portable{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-5\/6-portable{width:83.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-1\/7-portable{width:14.2857142857%!important;-ms-flex:none!important;flex:none!important}.u-2\/7-portable{width:28.5714285714%!important;-ms-flex:none!important;flex:none!important}.u-3\/7-portable{width:42.8571428571%!important;-ms-flex:none!important;flex:none!important}.u-4\/7-portable{width:57.1428571429%!important;-ms-flex:none!important;flex:none!important}.u-5\/7-portable{width:71.4285714286%!important;-ms-flex:none!important;flex:none!important}.u-6\/7-portable{width:85.7142857143%!important;-ms-flex:none!important;flex:none!important}.u-1\/8-portable{width:12.5%!important;-ms-flex:none!important;flex:none!important}.u-2\/8-portable{width:25%!important;-ms-flex:none!important;flex:none!important}.u-3\/8-portable{width:37.5%!important;-ms-flex:none!important;flex:none!important}.u-4\/8-portable{width:50%!important;-ms-flex:none!important;flex:none!important}.u-5\/8-portable{width:62.5%!important;-ms-flex:none!important;flex:none!important}.u-6\/8-portable{width:75%!important;-ms-flex:none!important;flex:none!important}.u-7\/8-portable{width:87.5%!important;-ms-flex:none!important;flex:none!important}}@media screen and (min-width:63.9rem){.u-desk-mh,.u-desk-mr{margin-right:1rem!important}.u-desk-mh,.u-desk-ml{margin-left:1rem!important}.u-desk-mt,.u-desk-mv{margin-top:1rem!important}.u-desk-mb,.u-desk-mv{margin-bottom:1rem!important}.u-desk-m{margin:1rem!important}.u-1\/1-desk{width:100%!important}.u-1\/2-desk{width:50%!important;-ms-flex:none!important;flex:none!important}.u-1\/3-desk{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-2\/3-desk{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-1\/4-desk{width:25%!important;-ms-flex:none!important;flex:none!important}.u-2\/4-desk{width:50%!important;-ms-flex:none!important;flex:none!important}.u-3\/4-desk{width:75%!important;-ms-flex:none!important;flex:none!important}.u-1\/6-desk{width:16.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-2\/6-desk{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-3\/6-desk{width:50%!important;-ms-flex:none!important;flex:none!important}.u-4\/6-desk{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-5\/6-desk{width:83.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-1\/7-desk{width:14.2857142857%!important;-ms-flex:none!important;flex:none!important}.u-2\/7-desk{width:28.5714285714%!important;-ms-flex:none!important;flex:none!important}.u-3\/7-desk{width:42.8571428571%!important;-ms-flex:none!important;flex:none!important}.u-4\/7-desk{width:57.1428571429%!important;-ms-flex:none!important;flex:none!important}.u-5\/7-desk{width:71.4285714286%!important;-ms-flex:none!important;flex:none!important}.u-6\/7-desk{width:85.7142857143%!important;-ms-flex:none!important;flex:none!important}.u-1\/8-desk{width:12.5%!important;-ms-flex:none!important;flex:none!important}.u-2\/8-desk{width:25%!important;-ms-flex:none!important;flex:none!important}.u-3\/8-desk{width:37.5%!important;-ms-flex:none!important;flex:none!important}.u-4\/8-desk{width:50%!important;-ms-flex:none!important;flex:none!important}.u-5\/8-desk{width:62.5%!important;-ms-flex:none!important;flex:none!important}.u-6\/8-desk{width:75%!important;-ms-flex:none!important;flex:none!important}.u-7\/8-desk{width:87.5%!important;-ms-flex:none!important;flex:none!important}}@media screen and (min-width:100%){.u-desk-wide-mh,.u-desk-wide-mr{margin-right:1rem!important}.u-desk-wide-mh,.u-desk-wide-ml{margin-left:1rem!important}.u-desk-wide-mt,.u-desk-wide-mv{margin-top:1rem!important}.u-desk-wide-mb,.u-desk-wide-mv{margin-bottom:1rem!important}.u-desk-wide-m{margin:1rem!important}.u-1\/1-desk-wide{width:100%!important}.u-1\/2-desk-wide{width:50%!important;-ms-flex:none!important;flex:none!important}.u-1\/3-desk-wide{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-2\/3-desk-wide{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-1\/4-desk-wide{width:25%!important;-ms-flex:none!important;flex:none!important}.u-2\/4-desk-wide{width:50%!important;-ms-flex:none!important;flex:none!important}.u-3\/4-desk-wide{width:75%!important;-ms-flex:none!important;flex:none!important}.u-1\/6-desk-wide{width:16.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-2\/6-desk-wide{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-3\/6-desk-wide{width:50%!important;-ms-flex:none!important;flex:none!important}.u-4\/6-desk-wide{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-5\/6-desk-wide{width:83.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-1\/7-desk-wide{width:14.2857142857%!important;-ms-flex:none!important;flex:none!important}.u-2\/7-desk-wide{width:28.5714285714%!important;-ms-flex:none!important;flex:none!important}.u-3\/7-desk-wide{width:42.8571428571%!important;-ms-flex:none!important;flex:none!important}.u-4\/7-desk-wide{width:57.1428571429%!important;-ms-flex:none!important;flex:none!important}.u-5\/7-desk-wide{width:71.4285714286%!important;-ms-flex:none!important;flex:none!important}.u-6\/7-desk-wide{width:85.7142857143%!important;-ms-flex:none!important;flex:none!important}.u-1\/8-desk-wide{width:12.5%!important;-ms-flex:none!important;flex:none!important}.u-2\/8-desk-wide{width:25%!important;-ms-flex:none!important;flex:none!important}.u-3\/8-desk-wide{width:37.5%!important;-ms-flex:none!important;flex:none!important}.u-4\/8-desk-wide{width:50%!important;-ms-flex:none!important;flex:none!important}.u-5\/8-desk-wide{width:62.5%!important;-ms-flex:none!important;flex:none!important}.u-6\/8-desk-wide{width:75%!important;-ms-flex:none!important;flex:none!important}.u-7\/8-desk-wide{width:87.5%!important;-ms-flex:none!important;flex:none!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.u-1\/1-retina{width:100%!important}.u-1\/2-retina{width:50%!important;-ms-flex:none!important;flex:none!important}.u-1\/3-retina{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-2\/3-retina{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-1\/4-retina{width:25%!important;-ms-flex:none!important;flex:none!important}.u-2\/4-retina{width:50%!important;-ms-flex:none!important;flex:none!important}.u-3\/4-retina{width:75%!important;-ms-flex:none!important;flex:none!important}.u-1\/6-retina{width:16.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-2\/6-retina{width:33.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-3\/6-retina{width:50%!important;-ms-flex:none!important;flex:none!important}.u-4\/6-retina{width:66.6666666667%!important;-ms-flex:none!important;flex:none!important}.u-5\/6-retina{width:83.3333333333%!important;-ms-flex:none!important;flex:none!important}.u-1\/7-retina{width:14.2857142857%!important;-ms-flex:none!important;flex:none!important}.u-2\/7-retina{width:28.5714285714%!important;-ms-flex:none!important;flex:none!important}.u-3\/7-retina{width:42.8571428571%!important;-ms-flex:none!important;flex:none!important}.u-4\/7-retina{width:57.1428571429%!important;-ms-flex:none!important;flex:none!important}.u-5\/7-retina{width:71.4285714286%!important;-ms-flex:none!important;flex:none!important}.u-6\/7-retina{width:85.7142857143%!important;-ms-flex:none!important;flex:none!important}.u-1\/8-retina{width:12.5%!important;-ms-flex:none!important;flex:none!important}.u-2\/8-retina{width:25%!important;-ms-flex:none!important;flex:none!important}.u-3\/8-retina{width:37.5%!important;-ms-flex:none!important;flex:none!important}.u-4\/8-retina{width:50%!important;-ms-flex:none!important;flex:none!important}.u-5\/8-retina{width:62.5%!important;-ms-flex:none!important;flex:none!important}.u-6\/8-retina{width:75%!important;-ms-flex:none!important;flex:none!important}.u-7\/8-retina{width:87.5%!important;-ms-flex:none!important;flex:none!important}}.u-fluid,.u-full,.u-full-width,.u-w--full,img.responsive{width:100%}.u-h--full{height:100%}.visible{visibility:visible}.u-pos--center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.u-fixed,.u-fixed--top{position:fixed}.u-fixed--top{top:0;left:0;right:0}.u-fixed--bottom{bottom:0;left:0;right:0;position:fixed}.u-absolute,.u-absolute--top{position:absolute}.u-absolute--bottom{bottom:0;left:0;right:0;position:absolute}.u-absolute--top{top:0;left:0;right:0}.u-display--block{display:block!important}.u-display--inline-block{display:inline-block!important}.u-display--inline{display:inline!important}.u-display--flex{display:-ms-flexbox!important;display:flex!important}.u-position--fixed{position:fixed!important}.u-position--relative{position:relative!important}.u-position--absolute{position:absolute!important}.u-position--static{position:static!important}.u-zindex---1{z-index:-1!important}.u-zindex--1{z-index:1!important}.u-zindex--2{z-index:2!important}.u-zindex--3{z-index:3!important}.u-zindex--4{z-index:4!important}.u-zindex--5{z-index:5!important}.u-zindex--6{z-index:6!important}.u-zindex--7{z-index:7!important}.u-zindex--8{z-index:8!important}.u-zindex--9{z-index:9!important}.u-zindex--10{z-index:10!important}.u-zindex--9999{z-index:9999!important}.u-text--lowercase{text-transform:lowercase!important}.u-text--capitalize{text-transform:capitalize!important}.u-text--left{text-align:left!important}.u-text--center{text-align:center!important}.u-text--right{text-align:right!important}.u-text--justify{text-align:justify!important}.u-font--italic{font-weight:italic!important}.u-font--oblique{font-weight:oblique!important}.u-font--normal{font-weight:400!important}.u-font--bold{font-weight:700!important}.u-font--bolder{font-weight:bolder!important}.u-font--lighter{font-weight:lighter!important}.u-overflow--none{overflow:none!important}.u-overflow--auto{overflow:auto!important}.u-overflow--scroll{overflow:scroll!important}.u-overflow--scroll-x{overflow:scroll-x!important}.u-overflow--scroll-y{overflow:scroll-y!important}.u-overflow--inherit{overflow:inherit!important}.u-overflow--hidden{overflow:hidden!important}.u-overflow--visible{overflow:visible!important}.u-transition--background{transition-property:background!important}.u-transition--color{transition-property:color!important}.u-transition--opacity{transition-property:opacity!important}.u-transition--transform{transition-property:transform!important}.u-transition--all{transition-property:all!important}.u-cursor--pointer{cursor:pointer!important}.u-cursor--default{cursor:default!important}.u-cursor--auto{cursor:auto!important}.u-cursor--none{cursor:none!important}.u-cursor--not-allowed{cursor:not-allowed!important}.u-cursor--help{cursor:help!important}.u-cursor--progress{cursor:progress!important}.u-cursor--cell{cursor:cell!important}.u-cursor--wait{cursor:wait!important}.u-cursor--text{cursor:text!important}.u-cursor--copy{cursor:copy!important}.u-cursor--move{cursor:move!important}.u-cursor--no-drop{cursor:no-drop!important}.u-cursor--col-resize{cursor:col-resize!important}.u-cursor--context-menu{cursor:context-menu!important}.u-cursor--row-resize{cursor:row-resize!important}.u-cursor--n-resize{cursor:n-resize!important}.u-cursor--e-resize{cursor:e-resize!important}.u-cursor--s-resize{cursor:s-resize!important}.u-cursor--w-resize{cursor:w-resize!important}.u-cursor--grab{cursor:grab!important}.u-cursor--grabbing{cursor:grabbing!important}.u-cursor--zoom-in{cursor:zoom-in!important}.u-cursor--zoom-out{cursor:zoom-out!important}.clearfix:after,.clearfix:before,.u-clearfix:after,.u-clearfix:before{display:table;content:' '}.clearfix:after,.u-clearfix:after{clear:both}.u-scroll--x,.u-scroll--y{-webkit-overflow-scrolling:touch}.u-scroll--x{overflow-x:auto}.u-scroll--y{overflow-y:auto}.u-float.right{float:right!important}.u-float.left{float:left!important}img.u-full-width{width:100%;max-width:100%}img.responsive{height:auto;max-width:100%}.u-no-border{border:0!important}.t-d-u,.text-decoration--underline{text-decoration:underline}.t-d-s,.text-decoration--strike{text-decoration:line-through}.c-header__left a,.c-header__right a,.text-decoration--none{text-decoration:none}.u-color--primary,a.u-color--primary{color:#3e87e8!important}.u-color--alt,a.u-color--alt{color:#b1b1bc!important}.u-color--dark,a.u-color--dark{color:#3b3b3f!important}.u-color--light,a.u-color--light{color:#efeff4!important}.u-color--green,a.u-color--green{color:#46ad00!important}.u-color--red,a.u-color--red{color:#e32533!important}.u-color--blue,a.u-color--blue{color:#005cb9}.u-color--yellow,a.u-color--yellow{color:#ffed45}.u-color--white,a.u-color--white{color:#fff!important}.u-hover-btn-outline:hover{background:0 0;border:1px solid}.u-hover-btn-outline-reverse:hover{background:auto;border:1px solid transparent}.u-hover-opacity-0:hover{opacity:0}.u-hover-opacity-25:hover{opacity:.25}.u-hover-opacity-50:hover{opacity:.5}.u-hover-opacity-75:hover{opacity:.75}.u-hover-opacity-100:hover{opacity:1}.u-hover-scale-0:hover{transform:scale(0)}.u-hover-scale-25:hover{transform:scale(.25)}.u-hover-scale-50:hover{transform:scale(.5)}.u-hover-scale-100:hover{transform:scale(1)}.u-hover-scale-105:hover{transform:scale(1.05)}.u-hover-scale-125:hover{transform:scale(1.25)}.sr-only{height:1px;width:1px;position:absolute;overflow:hidden;margin:-1px;clip:rect(0,0,0,0);border:0}[aria-hidden=true]{display:none}body,html{padding:0;margin:0}.btn{appearance:none}.btn--transparent{border:1px solid transparent;background-color:transparent;box-shadow:none}.btn--transparent:active{border-color:transparent;box-shadow:none;background-color:rgba(0,0,0,.4)}.btn--transparent:hover{border-color:transparent;box-shadow:none;background-color:rgba(0,0,0,.2)}.box-section--active>.box-section__tab{background:#efeff4}.box-section--active>.box-section__tab:after{content:"-"}@media (max-width:68.2rem){.box-section--active>.box-section__panel{max-height:99vh}.is-hidden\@md-{display:none!important}}.box-section--active>.box-section__panel>.box-section__tab{background:#f7f7fc}.box-section__spacer{width:100%;height:1px;display:block;border-bottom:2px dotted #b1b1bc;margin-left:.3333333333rem;margin-right:.3333333333rem}.box-section__tab{-webkit-touch-callout:none;-khtml-user-select:none;padding:1rem .6666666667rem;margin:0;position:relative;cursor:pointer;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:uppercase;border-bottom:1px solid #b1b1bc}.c-header__subtitle,.c-header__title{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-khtml-user-select:none}@media (min-width:51.2rem){.box-section--active>.box-section__tab:after{content:''}.box-section__tab{cursor:default;background:0 0!important}}.box-section__tab:after{transform:translateY(-50%);font-style:normal;font-weight:400;position:absolute;right:12px;top:50%;line-height:28px;height:28px;font-size:28px;font-family:FontAwesome;color:#9999a3;content:"+"}.box-section__panel{transition:none;overflow:hidden;max-height:0}@media (min-width:51.2rem){.box-section__tab:after{content:''}.box-section__panel{max-height:none}.is-hidden\@md\+{display:none!important}}.box-section__panel:last-child{margin:0}.title-bar{padding:.3333333333rem}.title-bar .title-bar__spacer{width:100%;height:1px;display:block;border-bottom:2px dotted #b1b1bc;margin-left:.6666666667rem;margin-right:.6666666667rem}.title-bar h3{text-transform:uppercase;font-weight:700;color:#3b3b3f}.title-bar .title-bar__actions .btn{margin-right:.3333333333rem}.title-bar .title-bar__actions .btn:last-child{margin-right:0}.c-header{font-size:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:.6666666667rem}.c-header__title{-ms-flex:1;flex:1;color:var(--px-header-title-color,#d1d0d8);text-align:left;user-select:none}.c-header__brand{display:-ms-flexbox;display:flex;color:var(--px-header-brand-color,#d1d0d8);margin-right:.3333333333rem}.c-header__subtitle{user-select:none;color:var(--px-header-subtitle-color,#9999a3)}.c-header__powered{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-item-align:stretch;align-self:stretch;color:var(--px-header-powered-color,#9999a3)}.c-header__seperator{-ms-flex:1;flex:1;max-height:20px;height:100%;width:1px;background-color:var(--px-header-seperator-color,#9999a3);margin-right:.6666666667rem;margin-left:.6666666667rem}.c-header__content{position:relative}.c-header__left{display:-ms-flexbox;display:flex;text-align:left;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;-ms-flex-order:1;order:1}.c-header__right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;text-align:right;-ms-flex-order:4;order:4;-ms-flex:1;flex:1;-ms-flex-item-align:center;align-self:center;-ms-flex-pack:end;justify-content:flex-end}.c-header__circle{border-radius:50%;background-color:var(--px-header-circle-background-color,#9999a3);color:var(--px-header-circle-color,#d1d0d8);padding:.3333333333rem;margin-right:.3333333333rem;text-align:center;display:-ms-flexbox;display:flex}.c-header ::content nav,.c-header nav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:1;flex:1;margin-left:1rem}.c-header ::content nav>*,.c-header nav>*{display:-ms-flexbox;display:flex}.c-header ::content nav a,.c-header nav a{text-decoration:none}.c-header__link{box-sizing:border-box;margin-left:.3333333333rem;padding:.3333333333rem .6666666667rem;border-radius:var(--px-header-link-border-radius,2px);color:var(--px-header-link-color,#9999a3);border:1px solid transparent;cursor:pointer;outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--px-header-link-background-color,transparent);display:-ms-flexbox;display:flex;-ms-flex-line-pack:justify;align-content:space-between;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.c-header__link--selected,.c-header__link:active{background-color:var(--px-header-link-active-background-color,rgba(0,0,0,.4))}.c-header__username{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-item-align:center;align-self:center}.is-invisible{visibility:hidden!important}@media (min-width:21.3333333333rem){.is-hidden\@xs\+{display:none!important}}@media (max-width:31.9333333333rem){.is-hidden\@xs-{display:none!important}}@media (min-width:32rem){.is-hidden\@sm\+{display:none!important}}@media (max-width:51.1333333333rem){.is-hidden\@sm-{display:none!important}}@media (min-width:68.2666666667rem){.is-hidden\@lg\+{display:none!important}}@media (max-width:79.9333333333rem){.is-hidden\@lg-{display:none!important}}@media (min-width:80rem){.is-hidden\@xl\+{display:none!important}}.is-hidden\@xl-{display:none!important}.input-group{display:-ms-flexbox;display:flex}.input-group .text-input{-ms-flex:1;flex:1;z-index:2}.input-group .text-input:first-child{margin-right:-1px}.input-group .btn+.btn,.input-group .text-input:last-child{margin-left:-1px}.input-group__addon{padding-right:.6666666667rem;padding-left:.6666666667rem}.input-group__addon.btn{border-radius:0;box-shadow:none}.input-group__addon:not(.btn){height:2em;border:1px solid #b1b1bc;box-shadow:inset 0 0 0 1px #e4e4ea;line-height:2;background-color:#efeff4;color:#b1b1bc}.input-group__addon:first-child{border-right-width:0}.input-group__addon:first-child.btn{border-width:1px;border-radius:3px 0 0 3px}.input-group__addon:last-child{border-left-width:0}.input-group__addon:last-child.btn{border-width:1px;border-radius:0 3px 3px 0}.input-group__addon .fa{color:#7c7c84} \ No newline at end of file diff --git a/demo.html b/demo.html index 9f27e60..e2691ce 100755 --- a/demo.html +++ b/demo.html @@ -5,6 +5,9 @@ + + + px-partials demo - - - + diff --git a/package.json b/package.json index 4135d82..c7ac170 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "grunt-autoprefixer": "^3.0.3", "grunt-concurrent": "^2.0.1", "grunt-contrib-clean": "~v0.6.0", + "grunt-contrib-cssmin": "^1.0.1", "grunt-contrib-htmlmin": "^1.4.0", "grunt-contrib-jshint": "~v0.10.0", "grunt-contrib-watch": "~v0.6.1", @@ -31,7 +32,7 @@ "grunt-vulcanize": "^1.0.0", "istanbul-coveralls": "^1.0.3", "node-sass-import-once": "^1.2.0", - "polymer-css-compiler": "^1.0.2", + "polymer-css-compiler": "git+https://github.com/jonniespratley/polymer-css-compiler.git", "web-component-tester": "*", "web-component-tester-istanbul": "https://github.com/t2ym/web-component-tester-istanbul/tarball/0.10.1" } diff --git a/px-brand/demo.html b/px-brand/demo.html index 5accfb7..43b8ea1 100644 --- a/px-brand/demo.html +++ b/px-brand/demo.html @@ -100,7 +100,7 @@

Brand w/ Monogram wordmark

-

Brand w/ Predix

+

Brand w/ Predix Icon

-

Brand w/ Halo wordmark

+

Brand w/ Predix wordmark

diff --git a/px-brand/px-brand-iconset.html b/px-brand/px-brand-iconset.html index 18e85e5..a3648cd 100644 --- a/px-brand/px-brand-iconset.html +++ b/px-brand/px-brand-iconset.html @@ -1,64 +1,23 @@ - - - - - + + d="M21.618 43.233c-11.918 0-21.618-9.642-21.618-21.618 0-11.915 9.7-21.615 21.618-21.615 11.914 0 21.616 9.7 21.616 21.615 0 11.976-9.702 21.618-21.616 21.618zm0-42.217c-11.378 0-20.601 9.223-20.601 20.599 0 11.377 9.223 20.599 20.601 20.599 11.376 0 20.597-9.222 20.597-20.599 0-11.316-9.22-20.599-20.597-20.599zm18.318 26.762l-.112 .023-.063-.078c.004-.034 .726-2.165 .72-4.611-.009-2.635-1.079-4.251-2.456-4.251-.838 0-1.436 .6-1.436 1.497 0 1.617 1.976 1.737 1.976 5.27 0 1.438-.299 2.812-.778 4.311-2.216 7.483-9.283 10.956-16.167 10.956-3.175 0-5.43-.652-6.102-.953-.027-.014-.05-.067-.029-.12l.087-.061c.272 .108 2.209 .716 4.605 .716 2.635 0 4.192-1.077 4.192-2.397 0-.835-.659-1.494-1.498-1.494-1.617 0-1.737 2.035-5.209 2.035-1.497 0-2.813-.299-4.372-.778-7.426-2.274-10.965-9.282-10.959-16.228 .003-3.382 .95-6.075 .966-6.102l.107-.018 .063 .078c-.087 .28-.716 2.212-.716 4.606 0 2.635 1.077 4.191 2.454 4.191 .779 0 1.439-.598 1.439-1.437 0-1.617-1.977-1.796-1.977-5.27 0-1.497 .299-2.814 .778-4.371 2.276-7.424 9.282-10.905 16.169-10.958 3.2-.024 6.001 .934 6.106 1.018l.019 .108-.079 .06c-.033-.004-1.854-.766-4.61-.766-2.575-.001-4.191 1.077-4.191 2.455 0 .779 .599 1.438 1.497 1.438 1.617 0 1.737-1.977 5.209-1.977 1.497 0 2.814 .299 4.372 .779 7.485 2.275 10.896 9.342 10.957 16.167 .034 3.497-.952 6.143-.962 6.162zm-10.295-5.143c-2.035 0-3.593 1.498-3.593 3.293 0 1.497 .897 2.693 2.096 2.693 .42 0 .838-.24 .838-.778 0-.777-1.032-.968-.952-2.132 .051-.768 .774-1.281 1.491-1.281 1.438 0 2.11 1.393 2.11 2.829-.061 2.216-1.69 3.758-3.606 3.758-2.517 0-4.131-2.396-4.131-4.97 0-3.833 2.514-5.33 3.831-5.688 .014-.001 3.444 .612 3.337-.9-.047-.664-1.036-.92-1.754-.949-.794-.031-1.594 .255-1.594 .255-.419-.211-.708-.623-.886-1.101 2.455-1.856 4.19-3.652 4.19-5.688 0-1.078-.719-2.037-2.096-2.037-2.455 0-4.312 3.114-4.312 5.928 0 .479 0 .958 .121 1.379-1.558 1.137-2.715 1.843-4.812 3.101 0-.263 .055-.938 .23-1.816 .719-.779 1.705-1.944 1.705-2.842 0-.419-.238-.779-.719-.779-1.197 0-2.096 1.797-2.334 3.054-.54 .659-1.617 1.499-2.516 1.499-.719 0-.957-.66-1.019-.898 2.276-.78 5.091-3.894 5.091-6.708 0-.599-.239-1.916-2.036-1.916-2.695 0-4.971 4.012-4.971 7.125-.958 0-1.317-1.018-1.317-1.795 0-.779 .299-1.558 .299-1.796 0-.241-.12-.54-.479-.54-.899 0-1.438 1.197-1.438 2.575 .061 1.917 1.318 3.114 2.995 3.234 .238 1.138 1.257 2.215 2.514 2.215 .779 0 1.737-.239 2.396-.837-.061 .419-.12 .778-.18 1.137-2.635 1.378-4.551 2.336-6.288 3.892-1.373 1.256-2.152 2.932-2.152 4.25 0 1.796 1.139 3.472 3.474 3.472 2.754 0 4.851-2.216 5.868-5.269 .481-1.437 .672-3.528 .792-5.445 2.754-1.556 4.06-2.458 5.496-3.477 .179 .299 .361 .54 .6 .719-1.258 .659-4.251 2.515-4.251 6.886 0 3.115 2.097 6.586 6.227 6.586 3.414 0 5.749-2.813 5.749-5.507-.002-2.456-1.38-4.731-4.014-4.731zm-16.467 8.382c-.898 .041-1.496-.533-1.496-1.49 0-2.575 3.569-5.032 6.264-6.351-.479 3.594-1.692 7.7-4.768 7.841zm1.976-14.131c0-1.977 1.95-5.733 3.143-5.336 1.407 .469-1.167 4.258-3.143 5.336zm11.318-.899c0-2.455 1.662-4.843 2.57-4.389 1.034 .518-.773 2.832-2.57 4.389z"/> + + + + - - - - - - - - - - - - - - + + - - + + diff --git a/px-brand/px-brand.html b/px-brand/px-brand.html index 8706f5b..171ba10 100644 --- a/px-brand/px-brand.html +++ b/px-brand/px-brand.html @@ -46,70 +46,57 @@ --> - - - - - - - - - - - - - - - - - - + - - +
+

px-input

+

+ The + px-input + element provides a way to use Predix Design inputs. + + +

+
    + + + +

    Default example

    + + + + +

    Default Inputs

    + + + + +

    Default w/ Table View

    + + + + +
    + + diff --git a/px-input/px-input-behavior.html b/px-input/px-input-behavior.html new file mode 100644 index 0000000..b24ae2f --- /dev/null +++ b/px-input/px-input-behavior.html @@ -0,0 +1,28 @@ + + + + diff --git a/px-input/px-input.html b/px-input/px-input.html new file mode 100644 index 0000000..335e1a4 --- /dev/null +++ b/px-input/px-input.html @@ -0,0 +1,158 @@ + + + + + + + + + + + + + diff --git a/px-partials-styles.html b/px-partials-styles.html index da8a8cd..0f05e26 100644 --- a/px-partials-styles.html +++ b/px-partials-styles.html @@ -1,1650 +1,7 @@ - + diff --git a/px-partials.html b/px-partials.html index 96ccba6..aeb4ad5 100755 --- a/px-partials.html +++ b/px-partials.html @@ -28,6 +28,7 @@ + diff --git a/sass/px-partials-sketch.scss b/sass/px-partials-sketch.scss index 4690eda..f3562fd 100644 --- a/sass/px-partials-sketch.scss +++ b/sass/px-partials-sketch.scss @@ -27,6 +27,16 @@ Predix branding rules go in px-partials-predix.scss, not in this file. @import "px-headings-design/_base.headings.scss"; @import "px-flexbox-design/_base.flexbox.scss"; +$inuit-enable-validation-states : true; +$inuit-enable-inline-fields : true; +$inuit-enable-input--tiny : true; +$inuit-enable-input--small : true; +$inuit-enable-input--regular : true; +$inuit-enable-input--large : true; +$inuit-enable-input--huge : true; +$inuit-enable-validation-states : true; +@import "px-forms-design/_base.forms.scss"; + $inuit-enable-btn--primary: true; $inuit-enable-btn--tertiary: true; $inuit-enable-btn--small: true; @@ -38,7 +48,9 @@ $inuit-enable-btn--bare: true; $inuit-enable-btn--disabled: true; @import "px-buttons-design/_objects.buttons.scss"; + @import 'px-mobile-design/index.scss'; +@import 'px-mobile-design/sass/_mixins.scss'; .btn{ outline: none; appearance: none; @@ -110,6 +122,7 @@ $inuit-enable-responsive-margins--negative-huge: true; @import "px-box-sizing-design/_generic.box-sizing.scss"; @import "px-helpers-design/_generic.helpers.scss"; + /// Component @import '_px-box-section.scss'; @import '_px-title-bar.scss'; @@ -117,3 +130,6 @@ $inuit-enable-responsive-margins--negative-huge: true; @debug "Breakpoints - #{$breakpoints}"; @include responsive-utils(); + +@import "px-input-group-design/_objects.input-group.scss"; +@import "px-forms-design/_base.forms.scss";