From 94bc46828e40b5096e887ba740332c573cf62906 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 30 Aug 2017 15:58:38 +0200 Subject: [PATCH] form & code styles, new failure color --- _src/_assets/js/ipdb.js | 14 ++++ _src/_assets/scss/_code.scss | 19 +++++ _src/_assets/scss/_forms.scss | 120 ++++++++++++++++++++++++++++++ _src/_assets/scss/_variables.scss | 1 + _src/_assets/scss/ipdb.scss | 2 + _src/_data/colors.yml | 3 + _src/styleguide.md | 45 ++++++----- package.json | 3 +- 8 files changed, 186 insertions(+), 21 deletions(-) create mode 100644 _src/_assets/scss/_code.scss create mode 100644 _src/_assets/scss/_forms.scss diff --git a/_src/_assets/js/ipdb.js b/_src/_assets/js/ipdb.js index 80fdd33..b14fd99 100644 --- a/_src/_assets/js/ipdb.js +++ b/_src/_assets/js/ipdb.js @@ -1,10 +1,24 @@ /* global SmoothScroll */ +/* global Autogrow */ // =include _dnt.js // =include smooth-scroll/dist/js/smooth-scroll.js +// =include textarea-autogrow/textarea-autogrow.js document.addEventListener('DOMContentLoaded', () => { + // + // init smooth scroll + // const scroll = new SmoothScroll('a[data-scroll]', { easing: 'easeOutQuint' }) + + // + // init textarea autogrow + // + const textarea = document.querySelector('textarea') + + if (textarea) { + const growingTextarea = new Autogrow(textarea) + } }) diff --git a/_src/_assets/scss/_code.scss b/_src/_assets/scss/_code.scss new file mode 100644 index 0000000..0741e4e --- /dev/null +++ b/_src/_assets/scss/_code.scss @@ -0,0 +1,19 @@ +// +// Code (inline and block) +// -------------- +// ipdb.io +// +code, +kbd, +pre, +samp { + font-family: $font-family-monospace; + font-size: $font-size-small; + hyphens: none; +} + +// Inline code +code { + color: $brand-04; + opacity: .85; +} diff --git a/_src/_assets/scss/_forms.scss b/_src/_assets/scss/_forms.scss new file mode 100644 index 0000000..4252143 --- /dev/null +++ b/_src/_assets/scss/_forms.scss @@ -0,0 +1,120 @@ +// +// Forms +// --- +// ipdb.io +// + +@import 'variables'; + +.form { + margin-bottom: $spacer; +} + +.form__group { + margin-bottom: $spacer / $line-height; +} + +.form__label { + user-select: none; + display: block; + font-size: $font-size-small; + text-transform: uppercase; + color: $brand-04; + margin-bottom: $spacer / 4; + + .required & { + &:after { + content: '*'; + color: $brand-01; + padding-left: .1rem; + padding-right: .1rem; + } + } +} + +.form__control { + display: block; + width: 100%; + max-width: 100%; + appearance: none; + padding: $spacer / 3 $spacer / 2; + font-family: $font-family-base; + font-size: $font-size-base; + font-weight: $font-weight-bold; + box-shadow: none; + border: 1.5px solid darken($brand-05, 10%); + border-radius: $border-radius / 2; + color: $brand-03; + background: lighten($brand-05, 4%); + transition: .15s ease-out; + + @media ($screen-sm) { + max-width: 30rem; + } + + &:focus { + outline: 0; + border-color: $brand-02; + background: $brand-05; + } + + // Placeholder + &::placeholder { + color: $brand-02; + + // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. + opacity: 1; + } + + &:disabled, + &[readonly] { + cursor: disabled; + + // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. + opacity: 1; + } + + // + // Form Validation States + // + // Success style + &:valid:not(:focus):not(:placeholder-shown) { + &, + &:focus { + border-color: $brand-success; + } + } + + // Error style + &:invalid:not(:focus):not(:placeholder-shown):not(select) { + &, + &:focus { + border-color: $brand-failure; + } + } +} + +textarea { + // for textarea-autogrow + resize: none; + box-sizing: content-box; +} + +.form__help { + font-size: $font-size-small; + color: $brand-02; + + input + & { + margin-left: $spacer / 2; + } +} + + +// +// required indicator +// +.required { + color: $brand-01; + padding-left: .1rem; + padding-right: .1rem; +} diff --git a/_src/_assets/scss/_variables.scss b/_src/_assets/scss/_variables.scss index 4f1ae8e..51ca27d 100644 --- a/_src/_assets/scss/_variables.scss +++ b/_src/_assets/scss/_variables.scss @@ -10,6 +10,7 @@ $brand-06: #444 !default; $brand-07: #0e475d !default; $brand-success: #6bcc74 !default; // adjust-hue($brand-01, 170%) +$brand-failure: #cc6b72 !default; // adjust-hue($brand-01, 40%) // // Typography diff --git a/_src/_assets/scss/ipdb.scss b/_src/_assets/scss/ipdb.scss index e853832..e546706 100644 --- a/_src/_assets/scss/ipdb.scss +++ b/_src/_assets/scss/ipdb.scss @@ -5,6 +5,8 @@ // Components @import 'grid'; @import 'buttons'; +@import 'forms'; +@import 'code'; @import 'media'; @import 'sections'; @import 'header'; diff --git a/_src/_data/colors.yml b/_src/_data/colors.yml index 6acc9cc..9f740b5 100644 --- a/_src/_data/colors.yml +++ b/_src/_data/colors.yml @@ -21,3 +21,6 @@ - name: "brand-success" hex: "6bcc74" + +- name: "brand-failure" + hex: "cc6b72" diff --git a/_src/styleguide.md b/_src/styleguide.md index 8268c54..3ecd269 100644 --- a/_src/styleguide.md +++ b/_src/styleguide.md @@ -84,21 +84,27 @@ Logo can be used with a base class and modifier classes for size & color: ## Forms -
-
- - +All `form__control` elements require an empty placeholder to make browser validation look properly. + + +
+ + + + You know your name, I suppose. +
-
- - +
+ +
-
- - +
+ +
-
- @@ -113,17 +119,16 @@ Logo can be used with a base class and modifier classes for size & color: -
-
- - +
+ +
-

- Fields marked with an are required. +

+ Fields marked with an * are required.

-
- +
+
diff --git a/package.json b/package.json index e8df351..71465b0 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "ie >= 10" ], "dependencies": { - "smooth-scroll": "^12.1.4" + "smooth-scroll": "^12.1.4", + "textarea-autogrow": "^1.0.0" }, "devDependencies": { "babel-core": "^6.25.0",