// Styles for Forms - Managed in /theme/sass/snippets/_forms.scss
form {
margin-bottom: 2rem;
}
input, input:focus {
outline: 0px !important; -webkit-appearance: none;
}
.form-options-bar {
background-color: $neutral1; padding: 10px 20px 0px 20px; margin-bottom: 20px; .option { display: inline-block; float: left; margin-right: 15px; margin-top: 10px; }
}
.title-bar {
margin: 15px 0 25px 0; border-bottom: 2px solid $neutral1;
}
.title-enabler {
margin: 15px 0 25px 0; border-bottom: 2px solid $neutral1; h4 { margin: 0; width: auto; float: left; display: inline-block; } .enabler { float: right; display: inline-block; }
}
.form-inline {
display: inline-block; margin-bottom: 0; vertical-align: middle;
}
.field-group {
display: block; margin-bottom: 1rem; position: relative;
}
.field-group.hidden {
display: none;
}
.field-help {
@extend .text-muted;
}
input, input, input, input, input, input, input, input, textarea {
width: 100%; @include primary_font; font-size: 1.125em; border: 1px solid #D8D5D0; padding: 15px; margin: 2px 0; &.date { background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAEdCAYAAAAl2nqzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REVFOTZCNzlENThBMTFFNEFEN0RDMzU4RUYyNEFDREIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REVFOTZCN0FENThBMTFFNEFEN0RDMzU4RUYyNEFDREIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERUU5NkI3N0Q1OEExMUU0QUQ3REMzNThFRjI0QUNEQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpERUU5NkI3OEQ1OEExMUU0QUQ3REMzNThFRjI0QUNEQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiiWCQ4AABiCSURBVHja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") no-repeat 96% 50%; background-size: auto 40%; } &:focus { outline: 1px solid #89B4D9; } &.invalid, .field-group.invalid & { border-color: $red;} &.warning, .field-group.warning & { border-color: $orange;} &.success, .field-group.success & { border-color: $green;}
}
input {
display: none;
}
textarea:focus {
outline: 1px solid #89B4D9;
}
label {
font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: $light-grey;
}
.select-style {
border: 1px solid #D8D5D0; width: 100%; overflow: hidden; margin: 10px 0 15px 0; background: #fff url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==") no-repeat 98% 50%; &.multiple { background-position: 99% 10px; } &.invalid, .field-group.invalid & { border-color: $red; } &.warning, .field-group.warning & { border-color: $orange; } &.success, .field-group.success & { border-color: $green; }
}
.select-style select {
appearance: none; padding: 15px; width: 130%; font-size: 1.125em; border: none; box-shadow: none; background: transparent; background-image: none;
}
.select-style select:focus {
outline: none;
}
/*===========================================
Checkbox Styles
*/¶ ↑
.checkbox-heading {
margin-bottom: 5px;
}
input {
display: none;
}
input.checkbox {
position: absolute; z-index: -1000; top: -1000px;
}
input.checkbox + label.checkbox-label, input.checkbox + label.checkbox-label.clr, .checkbox > input + label {
padding-left: 30px; height: 20px; display: inline-block; line-height: 20px; background-repeat: no-repeat; background-position: 0 0; font-size: 14px; vertical-align: middle; cursor: pointer; margin-bottom: 15px;
}
input.checkbox:checked + label.checkbox-label, input.checkbox + label.checkbox-label.chk, .checkbox > input:checked + label {
background-position: 0 -20px;
}
label.checkbox-label, .checkbox > label {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjNDRDczQ0QyN0Q4MTFFNDk4ODhFODQwREY0N0VBMDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjNDRDczQ0UyN0Q4MTFFNDk4ODhFODQwREY0N0VBMDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyM0NENzNDQjI3RDgxMUU0OTg4OEU4NDBERjQ3RUEwNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyM0NENzNDQzI3RDgxMUU0OTg4OEU4NDBERjQ3RUEwNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph5IanUAAAHjSURBVHjaYvz//z8DNQETA5UBC4yxY8cOZiBVDsR5rKys4sRo/vPnz0ugDycDmR0eHh5/UQwEggYxMbEaHR0dBjY2NqJc8/v3b/HLly+3vHr1ihPIrUH3cjophoEA0CcMID1AkIYRhiwsLKKkGAYDID0gvTSLlFEDRw0cVAb+/fv3DTBvkmwASA9Q71sMA4GlxswrV64wkGIoSC1ID1DvbIziCwjqX758yQIsOZKBeVOEyOLrDdCwuUBmLUyMcWiU2G8afKlimEjDZtqmQ1Cd0gbEr0GRTiR+DdXDjC2WG4G4klRfQvWADK9Gd2EaBT5NxeZlUWJ0MnIJMnDax6ILk1+n8AaXMnA7hjGwyOpSng5Z1awY2JR1GX7dvczw5/FlygwEeZXXJ4Ph/8/vDF+3zyQ9p7DpuYMxDHDahDMw8QkyfDu2meHvm4eE2zbogEPfHuy9jz8+M/z//pmBy8qb4c/rZwzfDy4mrrGEDr4dWM7AKqPCwBdcADToKVjs6+6F5BcOoED/um8FAyM7J9jg7+f2M/y+dYyy0ubHyXUMP6+dBEfEtz3zSWsf4gKfV7WQXTi8piDrvcZm4CwKDJyFtU4BRS4Q5wOxGJEGvQLiSaAmMTYD/0LLtjZKCliqV1IAAQYAHk6wOWgIxVkAAAAASUVORK5CYII=); letter-spacing: normal; text-transform: none; color: $text; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
/*===========================================
Radio Button Styles
*/¶ ↑
// custom styles with radio buttons work by hiding the browser default radio // circle, and instead adding a background image to the radio label. basically // faking the effect of checking a radio button
.radio-heading {
margin-bottom: 5px;
}
// hide the default radio circle icon input.radio {
position:absolute; z-index:-1000; top:-1000px;
}
// basic radio styles input.radio + label.radio-label, input.radio + label.radio-label.clr, .radio > input + label {
padding-left: 25px; height: 20px; display: inline-block; line-height: 20px; background-repeat: no-repeat; background-position: 0 0; font-size: 14px; vertical-align: middle; cursor: pointer; margin: .5rem 0;
}
// reposition the faux radio circle when a button is :checked input.radio:checked + label.radio-label, input.radio + label.radio-label.chk, .radio > input:checked + label {
background-position: 0 -20px;
}
// Inline Radio Buttons // ——————– // add the .radio-inline class to the .field-group surrounding // all radio buttons to make them display inline instead of stacked .field-group.radio-inline {
// Radio Button Wrapper // -------------------- // all readio buttons should have a div.radio wrapper. for inline // radio buttons we make that wrapper display inline-block and // add extra margins to give the buttons plenty of breathing room div.radio { display: inline-block; margin: 1rem 1rem 1rem 0; } // for inline radio button groups, we make the immediate label // (the name of the field group, not radio selectors), display // as a block element. this ensures the inline radio buttons // don't break up into the label area > label { display: block; margin-bottom: 1.5rem; }
}
// Custom Radio Circle // ——————- label.radio-label, .radio > label {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjNDRDczQzkyN0Q4MTFFNDk4ODhFODQwREY0N0VBMDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjNDRDczQ0EyN0Q4MTFFNDk4ODhFODQwREY0N0VBMDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyM0NENzNDNzI3RDgxMUU0OTg4OEU4NDBERjQ3RUEwNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyM0NENzNDODI3RDgxMUU0OTg4OEU4NDBERjQ3RUEwNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PurLeE0AAAI4SURBVHja7FVNS2pRFD3V5YI4VqlATF7RBxLOsoGDiPCNev2FqEEfE/9IjWrSx1+oBqFENnBQjZSw93j0HmFChTpWQa/ZXqdT1PXcPJeMgtpwOHD3Pou97157r45Go8HaaZ2szaZZOeLx+DBdc3R+0ukTny/horMZiUT+yN51mEsmIJ2uFV3XF3w+X6fL5WJOp5P7SqUSKxaLLJvN3lWr1Q36FCXgiiWgANv3eDyTgUCAaZq8AMMwWCaTYfl8/ggVEGjV6h+uAiwYDFqC8f9EPsRQ7ASqeeFEhjixWGwkkUgYtVqtoWqIxRu8fcR5nuGc1+vtei0zWab0n7tE85pKjlAJtmmCpuGtDND/2E07Jt7420ZswRJply/BM7tWLpdxXckA48Qr24AgOtmhDHArl8vVQVpVQyxNTR2j2MRDwcW1VCqlzEPE4s1zDHNTolT2YTqdZq9lCh9ixOhFbS0Ht9vNqYE4NKBQKKgvBxPwCF3zgrR+QY2saADW17nS+vp0G/vzA35BTdGsNIXvpL+nrHKyx4ybi4fgngHmCE0zfXCMawpNywSBQlOWmzIEkanMs3A4zGWgdLDNKsc70gwd4zPMOTXLM00mk3Uqf5Sy/G3u8pOm8MwswGDwIUZZU1BmK6uc7KprinF90XoXXv/7QE3RevtbT4SIUdIUR+hXS0DH2LS6poBn4JslGLg4FJJqinlS1qjTiy+ITRQxbv8/lNn9g2cPMJiQgXXi4NK7jd63przd7gUYAPvXBJYBhAIvAAAAAElFTkSuQmCC); letter-spacing: normal; text-transform: none; color: $text; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
/*===========================================
Infield Form Styles
*/¶ ↑
//TODO abstract input and form styles into variables
// infield forms have a top left aligned label element // inside the form, providing a larger click area and // strongly grouped association of the field and label
// to turn a standard form into an Infield Form add // the `.infield-form` class to the `form` element
.infield-form {
border: 1px solid #ccc; border-bottom: none; border-right: none; @include clearfix(); // all input/labels should be wrapped in a div.field-group .field-group { margin: 0; padding: 0; position: relative; > label { position: absolute; top: 10px; left: 15px; } > input { margin: 0; padding: 30px 15px 15px; border-top: none; border-left: none; &:hover { background-color: rgba(#1c2542, .04); } } }
}
.forgot-password {
float: right; margin: 0 0 15px 0;
}
// Unmask Password // ————— // inputs fields will have // a toggle icon to allow users to mask/unmask // their password, default is masked .password-unmask {
width: 1.5rem; height: 1.5rem; cursor: pointer; position: absolute; top: 4.1rem; right: 3rem; &:after { color: #aaa; content: "\f06e"; //open eye icon display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
} // when password field is switched to text, change icon input ~ .password-unmask:after {
content: "\f070"; //closed eye icon
}