mirror of
https://github.com/ipdb/website.git
synced 2024-12-28 15:47:44 +01:00
form & code styles, new failure color
This commit is contained in:
parent
a1843ec452
commit
94bc46828e
GPG Key ID:
606EEEF3C479A91F
@ -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)
|
||||
}
|
||||
})
|
||||
|
||||
19
_src/_assets/scss/_code.scss
Normal file
19
_src/_assets/scss/_code.scss
Normal file
@ -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;
|
||||
}
|
||||
120
_src/_assets/scss/_forms.scss
Normal file
120
_src/_assets/scss/_forms.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
// Components
|
||||
@import 'grid';
|
||||
@import 'buttons';
|
||||
@import 'forms';
|
||||
@import 'code';
|
||||
@import 'media';
|
||||
@import 'sections';
|
||||
@import 'header';
|
||||
|
||||
@ -21,3 +21,6 @@
|
||||
|
||||
- name: "brand-success"
|
||||
hex: "6bcc74"
|
||||
|
||||
- name: "brand-failure"
|
||||
hex: "cc6b72"
|
||||
|
||||
@ -84,21 +84,27 @@ Logo can be used with a base class and modifier classes for size & color:
|
||||
|
||||
## Forms
|
||||
|
||||
<form class="form js-parsley" action="#">
|
||||
<div class="form-group">
|
||||
<input class="form-control" type="text" id="name" name="name" required>
|
||||
<label class="form-label" for="name">Your Name</label>
|
||||
All `form__control` elements require an empty placeholder to make browser validation look properly.
|
||||
|
||||
<form class="form" action="#">
|
||||
<div class="form__group required">
|
||||
<label class="form__label" for="name">Your Name</label>
|
||||
<input class="form__control" type="text" id="name" name="name" required placeholder=" ">
|
||||
<span class="form__help">
|
||||
You know your name, I suppose.
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control" type="email" id="email" name="email">
|
||||
<label class="form-label" for="email">Your Email</label>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="email">Your Email</label>
|
||||
<input class="form__control" type="email" id="email" name="email" placeholder=" ">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control" type="tel" id="phone" name="phone">
|
||||
<label class="form-label" for="phone">Your Phone</label>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="phone">Your Phone</label>
|
||||
<input class="form__control" type="tel" id="phone" name="phone" placeholder=" ">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select class="form-control" id="select" name="select" required data-required="true">
|
||||
<div class="form__group required">
|
||||
<label class="form__label" for="industry">Industry</label>
|
||||
<select class="form__control" id="select" name="select" required data-required="true">
|
||||
<option value=""> </option>
|
||||
<option value="Automotive">Automotive</option>
|
||||
<option value="Banking">Banking</option>
|
||||
@ -113,17 +119,16 @@ Logo can be used with a base class and modifier classes for size & color:
|
||||
<option value="Consulting">Consulting</option>
|
||||
<option value="Data">Data</option>
|
||||
</select>
|
||||
<label class="form-label" for="industry">Industry</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
|
||||
<label class="form-label" for="comment">Autogrowing textarea</label>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="comment">Autogrowing textarea</label>
|
||||
<textarea class="form__control" id="comment" name="comment" rows="1" placeholder=" "></textarea>
|
||||
</div>
|
||||
<p class="form-group text-dimmed mini">
|
||||
Fields marked with an <span class="required"></span> are required.
|
||||
<p class="form__group form__help">
|
||||
Fields marked with an <span class="required">*</span> are required.
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
<div class="form__group">
|
||||
<input class="button button-primary" type="submit" value="Submit">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user