From 52c2180c054ce711e8ec029df852695fa44c5945 Mon Sep 17 00:00:00 2001 From: Jonnie Spratley Date: Fri, 8 Jul 2016 16:08:37 -0700 Subject: [PATCH 1/7] fix: added px input, implement iron input provide error message styling --- bower.json | 24 +++++---- px-button/px-button.html | 14 ++++- px-input/demo.html | 60 +++++++++++++++++++++ px-input/px-input.html | 114 +++++++++++++++++++++++++++++++++++++++ px-partials.html | 1 + 5 files changed, 200 insertions(+), 13 deletions(-) create mode 100644 px-input/demo.html create mode 100644 px-input/px-input.html diff --git a/bower.json b/bower.json index 553cd93..999c309 100644 --- a/bower.json +++ b/bower.json @@ -3,26 +3,28 @@ "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" }, "devDependencies": { "px-mobile-design": "*", diff --git a/px-button/px-button.html b/px-button/px-button.html index 3ef6755..000857e 100644 --- a/px-button/px-button.html +++ b/px-button/px-button.html @@ -10,7 +10,7 @@ */ --> - + + + + + + + + + + + +
+

px-input

+

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

+
    + + + +

    Default example

    + + + + +
    + + diff --git a/px-input/px-input.html b/px-input/px-input.html new file mode 100644 index 0000000..a1eef88 --- /dev/null +++ b/px-input/px-input.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + + 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 @@ + From ce6f100f5d03d2fd9396cbe30c904a2d5816d587 Mon Sep 17 00:00:00 2001 From: Jonnie Spratley Date: Mon, 11 Jul 2016 08:26:13 -0700 Subject: [PATCH 2/7] fix: updated px-brand --- assets/predix-word.svg | 17 +++ assets/predix-x.svg | 9 ++ bower.json | 4 +- css/px-partials-sketch.css | 260 +++++++++++++++++++++++++++++++++++ css/px-partials.css | 260 +++++++++++++++++++++++++++++++++++ px-brand/demo.html | 16 +-- px-brand/px-brand.html | 68 ++++----- px-input/px-input.html | 21 ++- sass/px-partials-sketch.scss | 15 ++ 9 files changed, 625 insertions(+), 45 deletions(-) create mode 100644 assets/predix-word.svg create mode 100644 assets/predix-x.svg 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 999c309..c1c0e84 100644 --- a/bower.json +++ b/bower.json @@ -24,7 +24,9 @@ "px-theme": "*", "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" + "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" }, "devDependencies": { "px-mobile-design": "*", diff --git a/css/px-partials-sketch.css b/css/px-partials-sketch.css index d680d2a..7c84f60 100644 --- a/css/px-partials-sketch.css +++ b/css/px-partials-sketch.css @@ -193,6 +193,266 @@ Predix branding rules go in px-partials-predix.scss, not in this file. -ms-flex-item-align: baseline; align-self: baseline; } +:root ::content, +:root { + /** + * Styles for one line forms. + */ + /** + * Styles for validation states + */ } + :root ::content fieldset, + :root fieldset { + margin: 0; } + :root ::content fieldset, :root ::content fieldset legend, + :root fieldset, + :root fieldset legend { + border: 0; + padding: 0; } + :root ::content legend, + :root legend { + margin-bottom: 1.3333333333rem; + font-weight: bold; } + :root ::content .form-field, + :root .form-field { + margin-bottom: 1.3333333333rem; } + :root ::content .form-field:last-child, + :root .form-field:last-child { + margin-bottom: 2.6666666667rem; } + :root ::content label, + :root label { + display: block; + margin-bottom: 0.3333333333rem; + cursor: pointer; } + :root ::content .label--inline, + :root .label--inline { + display: inline-block; + margin-bottom: 0; + line-height: 1; } + :root ::content .label--inline + .text-input, + :root .label--inline + .text-input { + margin-left: 0.6666666667rem; } + :root ::content .text-input, + :root ::content textarea, :root ::content select, + :root .text-input, + :root textarea, + :root select { + margin: 0; + border: 1px solid #b1b1bc; + font: inherit; + outline: 0; + -webkit-appearance: none; + -moz-appearance: none; } + :root ::content .text-input:disabled, + :root ::content textarea:disabled, :root ::content select:disabled, + :root .text-input:disabled, + :root textarea:disabled, + :root select:disabled { + cursor: not-allowed; } + :root ::content .text-input, + :root ::content textarea, + :root .text-input, + :root textarea { + width: 100%; + padding: 0 0.6666666667rem; + box-shadow: inset 0 0 0 1px #e4e4ea; + background-color: #efeff4; + color: black; } + :root ::content .text-input[readonly], :root ::content .text-input[disabled], + :root ::content textarea[readonly], + :root ::content textarea[disabled], + :root .text-input[readonly], + :root .text-input[disabled], + :root textarea[readonly], + :root textarea[disabled] { + box-shadow: none; } + :root ::content .text-input[readonly], + :root ::content textarea[readonly], + :root .text-input[readonly], + :root textarea[readonly] { + border: 1px solid #e4e4ea; + background-color: white; + color: #b1b1bc; } + :root ::content .text-input:disabled, + :root ::content textarea:disabled, + :root .text-input:disabled, + :root textarea:disabled { + border: 1px solid #e4e4ea; + box-shadow: none; + background-color: #f7f7fc; + color: #b1b1bc; } + :root ::content .text-input:focus, + :root ::content textarea:focus, + :root .text-input:focus, + :root textarea:focus { + border-color: #0a9ec1; + box-shadow: inset 0 0 0 1px #d1d0d8; } + :root ::content .text-input::-webkit-input-placeholder, + :root ::content textarea::-webkit-input-placeholder, + :root .text-input::-webkit-input-placeholder, + :root textarea::-webkit-input-placeholder { + color: #b1b1bc; } + :root ::content .text-input:-moz-placeholder, + :root ::content textarea:-moz-placeholder, + :root .text-input:-moz-placeholder, + :root textarea:-moz-placeholder { + color: #b1b1bc; } + :root ::content select, + :root 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; } + :root ::content select:hover, :root ::content select:focus, + :root select:hover, + :root select:focus { + border: 1px solid #9999a3; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + background-color: #b1b1bc; } + :root ::content select:active, + :root select:active { + border: 1px solid #7c7c84; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + background-color: #9999a3; } + :root ::content select:disabled, + :root 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; } + :root ::content select[multiple], + :root select[multiple] { + border: 1px solid #b1b1bc; + padding: 0.3333333333rem; + cursor: pointer; + background: #f7f7fc; } + :root ::content select::-ms-expand, + :root select::-ms-expand { + display: none; } + +@-moz-document url-prefix() { + :root ::content select, + :root select { + padding-top: .4em; + padding-bottom: .4em; } } + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + :root ::content select, + :root select { + padding-top: .4em; + padding-bottom: .4em; } } + :root ::content .text-input, + :root .text-input { + height: 2em; + line-height: 1; } + :root ::content .text-input + [type=checkbox], :root ::content .text-input + [type=radio], + :root .text-input + [type=checkbox], + :root .text-input + [type=radio] { + margin-left: 1.3333333333rem; } + :root ::content .text-input + .label--inline, + :root .text-input + .label--inline { + margin-left: 0.6666666667rem; } + :root ::content .text-input[type=search], + :root .text-input[type=search] { + -webkit-appearance: none; + padding: 0; } + :root ::content .text-input::-webkit-input-placeholder, + :root .text-input::-webkit-input-placeholder { + padding-top: 1px; } + :root ::content .text-input:-moz-placeholder, + :root .text-input:-moz-placeholder { + padding-top: 1px; } + :root ::content .text-input + [type=submit], :root ::content .text-input [type=cancel], + :root ::content .label--inline + [type=submit], + :root ::content .label--inline [type=cancel], + :root .text-input + [type=submit], + :root .text-input [type=cancel], + :root .label--inline + [type=submit], + :root .label--inline [type=cancel] { + margin-left: 1.3333333333rem; } + :root ::content textarea, + :root textarea { + overflow: auto; + min-height: calc(120px + 0.6666666667rem); + padding: 0.3333333333rem 0.6666666667rem; + resize: vertical; } + :root ::content [type=checkbox], :root ::content [type=radio], + :root [type=checkbox], + :root [type=radio] { + margin: 0; + padding: 0; + font-size: 1.05em; + cursor: pointer; } + :root ::content [type=checkbox][disabled], :root ::content [type=radio][disabled], + :root [type=checkbox][disabled], + :root [type=radio][disabled] { + cursor: not-allowed; } + :root ::content [type=checkbox][disabled] + .label--inline, :root ::content [type=radio][disabled] + .label--inline, + :root [type=checkbox][disabled] + .label--inline, + :root [type=radio][disabled] + .label--inline { + cursor: not-allowed; } + :root ::content [type=checkbox] + .label--inline, + :root [type=checkbox] + .label--inline { + padding-left: 5px; } + :root ::content [type=radio] + .label--inline, + :root [type=radio] + .label--inline { + padding-left: 3px; } + :root ::content .form-field__help, + :root .form-field__help { + display: inline-block; + margin-top: 0.3333333333rem; + font-size: 1rem; + line-height: inherit; + color: #7c7c84; } + :root ::content .input--tiny, + :root .input--tiny { + max-width: 7.0666666667rem; } + :root ::content .input--small, + :root .input--small { + max-width: 14.1333333333rem; } + :root ::content .input--regular, + :root .input--regular { + max-width: 21.2rem; } + :root ::content .input--large, + :root .input--large { + max-width: 28.2666666667rem; } + :root ::content .input--huge, + :root .input--huge { + max-width: 35.3333333333rem; } + :root ::content .form-field--inline:last-child, + :root .form-field--inline:last-child { + margin-bottom: 1.3333333333rem; } + :root ::content .form-field--inline .text-input, + :root .form-field--inline .text-input { + margin-bottom: 1.3333333333rem; } + :root ::content .validation-warning, + :root .validation-warning { + color: #dd6b1f; } + :root ::content .validation-error, + :root .validation-error { + color: #e53838; } + :root ::content .validation-success, + :root .validation-success { + color: #46ad00; } + :root ::content .text-input.validation-warning, + :root .text-input.validation-warning { + border-color: #dd6b1f; + color: inherit; } + :root ::content .text-input.validation-error, + :root .text-input.validation-error { + border-color: #e53838; + color: inherit; } + :root ::content .text-input.validation-success, + :root .text-input.validation-success { + border-color: #46ad00; + color: inherit; } + .btn { display: inline-block; overflow: visible; diff --git a/css/px-partials.css b/css/px-partials.css index 43dfa8b..8eec3e2 100644 --- a/css/px-partials.css +++ b/css/px-partials.css @@ -206,6 +206,266 @@ Predix branding rules go in px-partials-predix.scss, not in this file. -ms-flex-item-align: baseline; align-self: baseline; } +:root ::content, +:root { + /** + * Styles for one line forms. + */ + /** + * Styles for validation states + */ } + :root ::content fieldset, + :root fieldset { + margin: 0; } + :root ::content fieldset, :root ::content fieldset legend, + :root fieldset, + :root fieldset legend { + border: 0; + padding: 0; } + :root ::content legend, + :root legend { + margin-bottom: 1.3333333333rem; + font-weight: bold; } + :root ::content .form-field, + :root .form-field { + margin-bottom: 1.3333333333rem; } + :root ::content .form-field:last-child, + :root .form-field:last-child { + margin-bottom: 2.6666666667rem; } + :root ::content label, + :root label { + display: block; + margin-bottom: 0.3333333333rem; + cursor: pointer; } + :root ::content .label--inline, + :root .label--inline { + display: inline-block; + margin-bottom: 0; + line-height: 1; } + :root ::content .label--inline + .text-input, + :root .label--inline + .text-input { + margin-left: 0.6666666667rem; } + :root ::content .text-input, + :root ::content textarea, :root ::content select, + :root .text-input, + :root textarea, + :root select { + margin: 0; + border: 1px solid #b1b1bc; + font: inherit; + outline: 0; + -webkit-appearance: none; + -moz-appearance: none; } + :root ::content .text-input:disabled, + :root ::content textarea:disabled, :root ::content select:disabled, + :root .text-input:disabled, + :root textarea:disabled, + :root select:disabled { + cursor: not-allowed; } + :root ::content .text-input, + :root ::content textarea, + :root .text-input, + :root textarea { + width: 100%; + padding: 0 0.6666666667rem; + box-shadow: inset 0 0 0 1px #e4e4ea; + background-color: #efeff4; + color: black; } + :root ::content .text-input[readonly], :root ::content .text-input[disabled], + :root ::content textarea[readonly], + :root ::content textarea[disabled], + :root .text-input[readonly], + :root .text-input[disabled], + :root textarea[readonly], + :root textarea[disabled] { + box-shadow: none; } + :root ::content .text-input[readonly], + :root ::content textarea[readonly], + :root .text-input[readonly], + :root textarea[readonly] { + border: 1px solid #e4e4ea; + background-color: white; + color: #b1b1bc; } + :root ::content .text-input:disabled, + :root ::content textarea:disabled, + :root .text-input:disabled, + :root textarea:disabled { + border: 1px solid #e4e4ea; + box-shadow: none; + background-color: #f7f7fc; + color: #b1b1bc; } + :root ::content .text-input:focus, + :root ::content textarea:focus, + :root .text-input:focus, + :root textarea:focus { + border-color: #0a9ec1; + box-shadow: inset 0 0 0 1px #d1d0d8; } + :root ::content .text-input::-webkit-input-placeholder, + :root ::content textarea::-webkit-input-placeholder, + :root .text-input::-webkit-input-placeholder, + :root textarea::-webkit-input-placeholder { + color: #b1b1bc; } + :root ::content .text-input:-moz-placeholder, + :root ::content textarea:-moz-placeholder, + :root .text-input:-moz-placeholder, + :root textarea:-moz-placeholder { + color: #b1b1bc; } + :root ::content select, + :root 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; } + :root ::content select:hover, :root ::content select:focus, + :root select:hover, + :root select:focus { + border: 1px solid #9999a3; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + background-color: #b1b1bc; } + :root ::content select:active, + :root select:active { + border: 1px solid #7c7c84; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + background-color: #9999a3; } + :root ::content select:disabled, + :root 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; } + :root ::content select[multiple], + :root select[multiple] { + border: 1px solid #b1b1bc; + padding: 0.3333333333rem; + cursor: pointer; + background: #f7f7fc; } + :root ::content select::-ms-expand, + :root select::-ms-expand { + display: none; } + +@-moz-document url-prefix() { + :root ::content select, + :root select { + padding-top: .4em; + padding-bottom: .4em; } } + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + :root ::content select, + :root select { + padding-top: .4em; + padding-bottom: .4em; } } + :root ::content .text-input, + :root .text-input { + height: 2em; + line-height: 1; } + :root ::content .text-input + [type=checkbox], :root ::content .text-input + [type=radio], + :root .text-input + [type=checkbox], + :root .text-input + [type=radio] { + margin-left: 1.3333333333rem; } + :root ::content .text-input + .label--inline, + :root .text-input + .label--inline { + margin-left: 0.6666666667rem; } + :root ::content .text-input[type=search], + :root .text-input[type=search] { + -webkit-appearance: none; + padding: 0; } + :root ::content .text-input::-webkit-input-placeholder, + :root .text-input::-webkit-input-placeholder { + padding-top: 1px; } + :root ::content .text-input:-moz-placeholder, + :root .text-input:-moz-placeholder { + padding-top: 1px; } + :root ::content .text-input + [type=submit], :root ::content .text-input [type=cancel], + :root ::content .label--inline + [type=submit], + :root ::content .label--inline [type=cancel], + :root .text-input + [type=submit], + :root .text-input [type=cancel], + :root .label--inline + [type=submit], + :root .label--inline [type=cancel] { + margin-left: 1.3333333333rem; } + :root ::content textarea, + :root textarea { + overflow: auto; + min-height: calc(120px + 0.6666666667rem); + padding: 0.3333333333rem 0.6666666667rem; + resize: vertical; } + :root ::content [type=checkbox], :root ::content [type=radio], + :root [type=checkbox], + :root [type=radio] { + margin: 0; + padding: 0; + font-size: 1.05em; + cursor: pointer; } + :root ::content [type=checkbox][disabled], :root ::content [type=radio][disabled], + :root [type=checkbox][disabled], + :root [type=radio][disabled] { + cursor: not-allowed; } + :root ::content [type=checkbox][disabled] + .label--inline, :root ::content [type=radio][disabled] + .label--inline, + :root [type=checkbox][disabled] + .label--inline, + :root [type=radio][disabled] + .label--inline { + cursor: not-allowed; } + :root ::content [type=checkbox] + .label--inline, + :root [type=checkbox] + .label--inline { + padding-left: 5px; } + :root ::content [type=radio] + .label--inline, + :root [type=radio] + .label--inline { + padding-left: 3px; } + :root ::content .form-field__help, + :root .form-field__help { + display: inline-block; + margin-top: 0.3333333333rem; + font-size: 1rem; + line-height: inherit; + color: #7c7c84; } + :root ::content .input--tiny, + :root .input--tiny { + max-width: 7.0666666667rem; } + :root ::content .input--small, + :root .input--small { + max-width: 14.1333333333rem; } + :root ::content .input--regular, + :root .input--regular { + max-width: 21.2rem; } + :root ::content .input--large, + :root .input--large { + max-width: 28.2666666667rem; } + :root ::content .input--huge, + :root .input--huge { + max-width: 35.3333333333rem; } + :root ::content .form-field--inline:last-child, + :root .form-field--inline:last-child { + margin-bottom: 1.3333333333rem; } + :root ::content .form-field--inline .text-input, + :root .form-field--inline .text-input { + margin-bottom: 1.3333333333rem; } + :root ::content .validation-warning, + :root .validation-warning { + color: #dd6b1f; } + :root ::content .validation-error, + :root .validation-error { + color: #e53838; } + :root ::content .validation-success, + :root .validation-success { + color: #46ad00; } + :root ::content .text-input.validation-warning, + :root .text-input.validation-warning { + border-color: #dd6b1f; + color: inherit; } + :root ::content .text-input.validation-error, + :root .text-input.validation-error { + border-color: #e53838; + color: inherit; } + :root ::content .text-input.validation-success, + :root .text-input.validation-success { + border-color: #46ad00; + color: inherit; } + .btn { display: inline-block; overflow: visible; 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.html b/px-brand/px-brand.html index 8706f5b..236d93f 100644 --- a/px-brand/px-brand.html +++ b/px-brand/px-brand.html @@ -54,37 +54,41 @@ 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"/> - + + + + @@ -107,9 +111,9 @@ + + + px-partials demo - - - + diff --git a/px-input/demo.html b/px-input/demo.html index 06ee6c1..4bf4ab8 100644 --- a/px-input/demo.html +++ b/px-input/demo.html @@ -5,12 +5,14 @@ - + + + - - - {{label}} - - {{errorMessage}} - - +
    + + + + [[errorMessage]] + + +
    diff --git a/px-input/px-input.html b/px-input/px-input.html index fb73497..335e1a4 100644 --- a/px-input/px-input.html +++ b/px-input/px-input.html @@ -10,12 +10,11 @@ */ --> - - - - - + + + + -