// Mixins
@mixin input-border {
border-color: $slate; border-width: 2px; border-style: solid; border-radius: 8px; background-color: $white;
}
@mixin input-border-focus {
border-color: $bright-blue; box-shadow: inset 0 0 0 2px $bright-blue; outline: none;
}
// Cross-browser consistency / bug fixes
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button, input::-webkit-calendar-picker-indicator {
-webkit-appearance: none; margin: 0;
}
input {
-moz-appearance: textfield;
}
input {
-webkit-appearance: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba($slate, 0.6);
} ::-moz-placeholder { /* Firefox 19+ */
color: rgba($slate, 0.6);
} :-ms-input-placeholder { /* IE 10+ */
color: rgba($slate, 0.6);
} :-moz-placeholder { /* Firefox 18- */
color: rgba($slate, 0.6);
}
button, input {
-webkit-appearance: none; -moz-appearance: none;
}
// Fix styling inconsistencies with // date and time inputs on iOS -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 3rem;
}
input {
border: none; padding: 0;
}
fieldset {
border: 0; margin: 0; padding: 0;
}
select:-moz-focusring {
color: transparent; text-shadow: 0 0 0 $bright-blue;
}
select::-ms-expand {
// Hide browser-standard chevron on IE display: none;
}
option:not(:checked) {
color: $black;
}
// Layout
form {
max-width: 38rem;
}
legend {
margin-bottom: 0.75rem;
}
.form-group {
position: relative; margin-bottom: 2.5rem; p + &, ul + &, h1 + &, h2 + &, h3 + & { margin-top: 2rem; }
}
.form-section {
@include contain-1090;
}
// Base styles
input, textarea, select, button {
@include rubik; @include body-short; color: $slate; font-weight: $fw-regular;
}
input, textarea, select {
width: 100%; @include input-border; border-radius: 8px; &:focus { @include input-border-focus; }
}
input, input, input + label, input + label {
margin: 0 0 1rem;
}
margin-right: 1rem;
}
input, input, input, input, input, input, input, input, input, textarea {
display: block; padding: 0.64rem 1rem;
}
select {
padding: 0.64rem 1rem;
}
label, legend {
@include rubik; color: $slate; font-weight: $fw-regular; @include font-size-to-rem(24); letter-spacing: -0.016em; line-height: 1.5; @include antialiasing; margin-bottom: 0.5rem; display: block;
}
// Field-specific styles
// Number .field-d06 {
input, .units { display: inline-block; } .units { margin-left: 0.5rem; }
}
// Price .field-d08 {
input { width: 10rem; } input, .dollar { display: inline-block; } .dollar { font-weight: $fw-light; @include font-size-to-rem(51); line-height: 1; position: relative; top: 0.75rem; margin-right: 0.5rem; color: $slate; }
}
.field-address {
.form-group { margin-bottom: 0; } label { @include small-text; margin: 0 0 0.25rem; } input { margin-bottom: 0.75rem; }
}
@media screen and (min-width: 48rem) {
.field-address-state, .field-address-zip { float: left; } .field-address fieldset { @include clearfix; } .field-address-state { margin-right: 0.75rem; }
}
.field-m13 {
label { position: relative; cursor: pointer; height: 6.5rem; } input { min-width: 14rem; margin: 0; filter: alpha(opacity=0); opacity: 0; } .file-custom { font-size: 1rem; position: absolute; padding-top: 2.75rem; top: 0; right: 0; left: 0; z-index: 5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; &::after { content: attr(data-filename); } &::before { @extend button; z-index: 6; content: "Choose a file"; background-color: $white; color: $bright-blue; font-weight: $fw-medium; } &:hover, &:focus, &:active { &::before { box-shadow: inset 0 0 0 2px darken($bright-blue, 10%); color: darken($bright-blue, 10%); background-color: rgba($bright-blue, 0.05); color: $bright-blue; } } }
}
// Form field length
@for $i from 1 to 16 {
.length-#{$i} { width: 2.5rem + (0.65rem * $i); }
}
// Checkbox and radio button styles
$rc-size: 3rem;
.field-s06, .field-s08 {
label { position: relative; padding-left: $rc-size + 0.75rem; margin-bottom: 1rem; min-height: $rc-size; } input, .inline-label::before { position: absolute; top: 0; left: 0; width: $rc-size; height: $rc-size; } input { -webkit-appearance: none; -moz-appearance: none; opacity: 0; padding: 0; margin: 0; &:focus + .inline-label:before { @include input-border-focus; } } .inline-label { display: block; font-size: initial; padding-top: 0.75rem; &::before { content: ''; @include input-border; } }
}
// Radio buttons .field-s08 {
.inline-label::before, .inline-label::after { border-radius: 50%; } .inline-label::after { content: ''; width: $rc-size * 0.625; height: $rc-size * 0.625; top: $rc-size * 0.1875; left: $rc-size * 0.1875; z-index: 2; position: absolute; } input:checked { + .inline-label::after { background: $slate; } &:focus + .inline-label:after { background: $bright-blue; } } input:focus + .inline-label:before { background: $white; }
}
// Checkboxes .field-s06 input:checked {
+ .inline-label::before { background-size: 50% 40%; background-repeat: no-repeat; background-position: center; background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS43NTAwOSAxNi43NTVDNS41ODU3OSAxNi43NTU2IDUuNDIzIDE2LjcyMzYgNS4yNzExMSAxNi42NjFDNS4xMTkyMSAxNi41OTg0IDQuOTgxMjIgMTYuNTA2MyA0Ljg2NTA5IDE2LjM5TDAuMzY1MDkgMTEuODlDMC4yNDU4NzYgMTEuNzc0NiAwLjE1MDg1NCAxMS42MzY1IDAuMDg1NTY3OCAxMS40ODM5QzAuMDIwMjgxMyAxMS4zMzEzIC0wLjAxMzk2MjMgMTEuMTY3MiAtMC4wMTUxNjQ5IDExLjAwMTNDLTAuMDE2MzY3NiAxMC44MzUzIDAuMDE1NDk0NyAxMC42NzA3IDAuMDc4NTYyOSAxMC41MTcyQzAuMTQxNjMxIDEwLjM2MzcgMC4yMzQ2NDIgMTAuMjI0MyAwLjM1MjE3IDEwLjEwNzFDMC40Njk2OTcgOS45ODk4OCAwLjYwOTM4OCA5Ljg5NzI2IDAuNzYzMDkgOS44MzQ2M0MwLjkxNjc5MyA5Ljc3MiAxLjA4MTQzIDkuNzQwNiAxLjI0NzQgOS43NDIyN0MxLjQxMzM2IDkuNzQzOTQgMS41NzczMyA5Ljc3ODY1IDEuNzI5NzQgOS44NDQzN0MxLjg4MjE1IDkuOTEwMDkgMi4wMTk5NSAxMC4wMDU1IDIuMTM1MDkgMTAuMTI1TDUuNzUwMDkgMTMuNzRMMTcuODcwMSAxLjYyMDA0QzE4LjEwNjIgMS4zOTI2NSAxOC40MjIxIDEuMjY3MDkgMTguNzQ5OSAxLjI3MDM5QzE5LjA3NzYgMS4yNzM2OSAxOS4zOTA5IDEuNDA1NiAxOS42MjI0IDEuNjM3NjlDMTkuODUzOCAxLjg2OTc5IDE5Ljk4NDkgMi4xODM1MSAxOS45ODcyIDIuNTExMjdDMTkuOTg5NiAyLjgzOTAzIDE5Ljg2MzEgMy4xNTQ2MSAxOS42MzUxIDMuMzkwMDRMNi42MzUwOSAxNi4zOUM2LjUxODk2IDE2LjUwNjMgNi4zODA5NyAxNi41OTg0IDYuMjI5MDcgMTYuNjYxQzYuMDc3MTggMTYuNzIzNiA1LjkxNDM5IDE2Ljc1NTYgNS43NTAwOSAxNi43NTVaIiBmaWxsPSIjMUMzRTU3Ii8+Cjwvc3ZnPg=='); } &:focus + .inline-label::before { background-color: $bright-blue; background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS43NTAwOSAxNi43NTVDNS41ODU3OSAxNi43NTU2IDUuNDIzIDE2LjcyMzYgNS4yNzExMSAxNi42NjFDNS4xMTkyMSAxNi41OTg0IDQuOTgxMjIgMTYuNTA2MyA0Ljg2NTA5IDE2LjM5TDAuMzY1MDkgMTEuODlDMC4yNDU4NzYgMTEuNzc0NiAwLjE1MDg1NCAxMS42MzY1IDAuMDg1NTY3OCAxMS40ODM5QzAuMDIwMjgxMyAxMS4zMzEzIC0wLjAxMzk2MjMgMTEuMTY3MiAtMC4wMTUxNjQ5IDExLjAwMTNDLTAuMDE2MzY3NiAxMC44MzUzIDAuMDE1NDk0NyAxMC42NzA3IDAuMDc4NTYyOSAxMC41MTcyQzAuMTQxNjMxIDEwLjM2MzcgMC4yMzQ2NDIgMTAuMjI0MyAwLjM1MjE3IDEwLjEwNzFDMC40Njk2OTcgOS45ODk4OCAwLjYwOTM4OCA5Ljg5NzI2IDAuNzYzMDkgOS44MzQ2M0MwLjkxNjc5MyA5Ljc3MiAxLjA4MTQzIDkuNzQwNiAxLjI0NzQgOS43NDIyN0MxLjQxMzM2IDkuNzQzOTQgMS41NzczMyA5Ljc3ODY1IDEuNzI5NzQgOS44NDQzN0MxLjg4MjE1IDkuOTEwMDkgMi4wMTk5NSAxMC4wMDU1IDIuMTM1MDkgMTAuMTI1TDUuNzUwMDkgMTMuNzRMMTcuODcwMSAxLjYyMDA0QzE4LjEwNjIgMS4zOTI2NSAxOC40MjIxIDEuMjY3MDkgMTguNzQ5OSAxLjI3MDM5QzE5LjA3NzYgMS4yNzM2OSAxOS4zOTA5IDEuNDA1NiAxOS42MjI0IDEuNjM3NjlDMTkuODUzOCAxLjg2OTc5IDE5Ljk4NDkgMi4xODM1MSAxOS45ODcyIDIuNTExMjdDMTkuOTg5NiAyLjgzOTAzIDE5Ljg2MzEgMy4xNTQ2MSAxOS42MzUxIDMuMzkwMDRMNi42MzUwOSAxNi4zOUM2LjUxODk2IDE2LjUwNjMgNi4zODA5NyAxNi41OTg0IDYuMjI5MDcgMTYuNjYxQzYuMDc3MTggMTYuNzIzNiA1LjkxNDM5IDE2Ljc1NTYgNS43NTAwOSAxNi43NTVaIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPg=='); }
}
// Buttons
button, input, .btn {
border-radius: $radius; font-weight: $fw-medium; padding: 0.75rem 1.5rem; display: inline-block; text-decoration: none; margin: 0 0.4375rem 0.875rem 0; cursor: pointer;
}
button, input {
border: 3px solid $bright-blue; background-color: $bright-blue; color: $white; line-height: 1.75; &:hover, &:focus { background-color: darken($bright-blue, 10%); border-color: darken($bright-blue, 10%); } &:active { background-color: darken($bright-blue, 15%); border-color: darken($bright-blue, 15%); } &:hover, &:active, &:focus, &:visited { color: $white; text-decoration: none; }
}
// Dropdowns
select {
display: block; background-repeat: no-repeat; -moz-appearance: none; -webkit-appearance: none; // Background gradient needed for <= IE9 // See https://www.filamentgroup.com/lab/select-css.html background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTYwMDggMTAuNzU1QzguNzk1NzcgMTAuNzU1NiA4LjYzMjk4IDEwLjcyMzYgOC40ODEwOSAxMC42NjFDOC4zMjkyIDEwLjU5ODMgOC4xOTEyMSAxMC41MDYyIDguMDc1MDggMTAuMzlMMC41NzUwNzUgMi44OUMwLjM0MDM1OSAyLjY1NTI4IDAuMjA4NDk2IDIuMzM2OTQgMC4yMDg0OTYgMi4wMDVDMC4yMDg0OTYgMS42NzMwNiAwLjM0MDM1OSAxLjM1NDcxIDAuNTc1MDc1IDEuMTJDMC44MDk3OTIgMC44ODUyOCAxLjEyODE0IDAuNzUzNDE4IDEuNDYwMDggMC43NTM0MThDMS43OTIwMSAwLjc1MzQxOCAyLjExMDM2IDAuODg1MjggMi4zNDUwOCAxLjEyTDguOTYwMDggNy43NEwxNS41NzUxIDEuMTJDMTUuODA5OCAwLjg4NTI4IDE2LjEyODEgMC43NTM0MTggMTYuNDYwMSAwLjc1MzQxOEMxNi43OTIgMC43NTM0MTggMTcuMTEwNCAwLjg4NTI4IDE3LjM0NTEgMS4xMkMxNy41Nzk4IDEuMzU0NzEgMTcuNzExNyAxLjY3MzA2IDE3LjcxMTcgMi4wMDVDMTcuNzExNyAyLjMzNjk0IDE3LjU3OTggMi42NTUyOCAxNy4zNDUxIDIuODlMOS44NDUwOCAxMC4zOUM5LjcyODk0IDEwLjUwNjIgOS41OTA5NSAxMC41OTgzIDkuNDM5MDYgMTAuNjYxQzkuMjg3MTcgMTAuNzIzNiA5LjEyNDM4IDEwLjc1NTYgOC45NjAwOCAxMC43NTVaIiBmaWxsPSIjMUMzRTU3Ii8+Cjwvc3ZnPgo='), linear-gradient(#fff, #fff); &:focus { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTYwMDggMTAuNzU1QzguNzk1NzcgMTAuNzU1NiA4LjYzMjk4IDEwLjcyMzYgOC40ODEwOSAxMC42NjFDOC4zMjkyIDEwLjU5ODMgOC4xOTEyMSAxMC41MDYyIDguMDc1MDggMTAuMzlMMC41NzUwNzUgMi44OUMwLjM0MDM1OSAyLjY1NTI4IDAuMjA4NDk2IDIuMzM2OTQgMC4yMDg0OTYgMi4wMDVDMC4yMDg0OTYgMS42NzMwNiAwLjM0MDM1OSAxLjM1NDcxIDAuNTc1MDc1IDEuMTJDMC44MDk3OTIgMC44ODUyOCAxLjEyODE0IDAuNzUzNDE4IDEuNDYwMDggMC43NTM0MThDMS43OTIwMSAwLjc1MzQxOCAyLjExMDM2IDAuODg1MjggMi4zNDUwOCAxLjEyTDguOTYwMDggNy43NEwxNS41NzUxIDEuMTJDMTUuODA5OCAwLjg4NTI4IDE2LjEyODEgMC43NTM0MTggMTYuNDYwMSAwLjc1MzQxOEMxNi43OTIgMC43NTM0MTggMTcuMTEwNCAwLjg4NTI4IDE3LjM0NTEgMS4xMkMxNy41Nzk4IDEuMzU0NzEgMTcuNzExNyAxLjY3MzA2IDE3LjcxMTcgMi4wMDVDMTcuNzExNyAyLjMzNjk0IDE3LjU3OTggMi42NTUyOCAxNy4zNDUxIDIuODlMOS44NDUwOCAxMC4zOUM5LjcyODk0IDEwLjUwNjIgOS41OTA5NSAxMC41OTgzIDkuNDM5MDYgMTAuNjYxQzkuMjg3MTcgMTAuNzIzNiA5LjEyNDM4IDEwLjc1NTYgOC45NjAwOCAxMC43NTVaIiBmaWxsPSIjNEY2NkVFIi8+Cjwvc3ZnPgo='), linear-gradient(#fff, #fff); } background-size: 18px 11px; background-position: right 1rem top 50%; padding-right: 3rem; border: 2px solid $slate; option { font-weight: normal; font-size: 100%; }
}
// Optional label
.optional {
opacity: 0.8;
}
// Help text
.help-text {
margin: 0.5rem 0 0;
}
// Error messages // (The formbuilder uses 1000hz-bootstrap-validator, // which requires the .help-block class)
.help-block {
margin-top: 0.5rem; &:empty { margin-top: 0; } &.with-errors { display: block; color: $white; ul { font-size: 1rem; background: $red-4; color: $white; padding: 0.25rem 0.75rem; border-radius: $radius; display: inline-block; @include antialiasing; margin: 0; } li { list-style-type: none; } } &.with-errors-inline ul { @include small-text; padding: 0; background: transparent; color: $red-4; position: relative; top: -0.25rem; margin: 0; }
}