Learn more »
Push, build, and install
RubyGems
npm packages
Python packages
Maven artifacts
PHP packages
Go Modules
Bower components
Debian packages
RPM packages
NuGet packages
/ core / _form.scss
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import 'button';
$input-focus-border-color: scale-color($purple, $lightness: 65%);
$input-placeholder-font-color: $black-lighten-40;
//
// @variables
//
$include-html-form-classes: $include-html-classes !default;
// We use this to set the base for lots of form spacing and positioning styles
$form-spacing: rem-calc(16) !default;
// We use these to style the labels in different ways
$form-label-pointer: pointer !default;
$form-label-font-size: rem-calc(14) !default;
$form-label-font-weight: $font-weight-normal !default;
$form-label-line-height: 1.5 !default;
$form-label-font-color: scale-color($black, $lightness: 30%) !default;
$form-label-small-transform: capitalize !default;
$form-label-bottom-margin: 0 !default;
$input-font-family: inherit !default;
$input-font-color: rgba(0,0,0,0.75) !default;
$input-placeholder-font-color: $steel !default;
$input-font-size: rem-calc(14) !default;
$input-bg-color: $white !default;
$input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
$input-border-color: scale-color($white, $lightness: -20%) !default;
$input-focus-border-color: scale-color($white, $lightness: -40%) !default;
$input-border-style: solid !default;
$input-border-width: 1px !default;
$input-border-radius: $global-radius !default;
$input-disabled-bg: $gainsboro !default;
$input-disabled-cursor: $cursor-default-value !default;
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
$input-include-glowing-effect: false !default;
// We use these to style the fieldset border and spacing.
$fieldset-border-style: solid !default;
$fieldset-border-width: 1px !default;
$fieldset-border-color: $gainsboro !default;
$fieldset-padding: rem-calc(20) !default;
$fieldset-margin: rem-calc(18 0) !default;
// We use these to style the legends when you use them
$legend-font-weight: $font-weight-bold !default;
$legend-padding: rem-calc(0 3) !default;
// We use these to style the prefix and postfix input elements
$input-prefix-bg: scale-color($white, $lightness: -5%) !default;
$input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
$input-prefix-border-size: 1px !default;
$input-prefix-border-type: solid !default;
$input-prefix-overflow: visible !default;
$input-prefix-font-color: $oil !default;
$input-prefix-font-color-alt: $white !default;
// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
$input-number-spinners: true !default;
// We use these to style the error states for inputs and labels
$input-error-message-padding: rem-calc(6 9 9) !default;
$input-error-message-top: -1px !default;
$input-error-message-font-size: rem-calc(12) !default;
$input-error-message-font-weight: $font-weight-normal !default;
$input-error-message-font-style: italic !default;
$input-error-message-font-color: $white !default;
$input-error-message-bg-color: $alert-color !default;
$input-error-message-font-color-alt: $oil !default;
// We use this to style the glowing effect of inputs when focused
$glowing-effect-fade-time: .45s !default;
$glowing-effect-color: $input-focus-border-color !default;
// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
$input-transition-fade-time: 0.15s !default;
$input-transition-fade-timing-function: linear !default;
// Select variables
$select-bg-color: $ghost !default;
$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
// @MIXINS
//
// We use this mixin to give us form styles for rows inside of forms
@mixin form-row-base {
.row { margin: 0 ((-$form-spacing) / 2);
.column,
.columns { padding: 0 ($form-spacing / 2); }
// Use this to collapse the margins of a form row
&.collapse { margin: 0;
.column,
.columns { padding: 0; }
input {
@include side-radius($opposite-direction, 0);
}
}
}
input.column,
input.columns,
textarea.column,
textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
}
// @MIXIN
//
// We use this mixin to give all basic form elements their style
@mixin form-element {
background-color: $input-bg-color;
border: {
style: $input-border-style;
width: $input-border-width;
color: $input-border-color;
}
box-shadow: $input-box-shadow;
color: $input-font-color;
display: block;
font-family: $input-font-family;
font-size: $input-font-size;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
margin: 0 0 $form-spacing 0;
padding: $form-spacing / 2;
width: 100%;
@include box-sizing(border-box);
@if $input-include-glowing-effect {
@include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
}
// Basic focus styles
&:focus {
background: $input-focus-bg-color;
border-color: $input-focus-border-color;
outline: none;
}
// Disabled Styles
&:disabled {
background-color: $input-disabled-bg;
cursor: $input-disabled-cursor;
}
// Disabled background input background color
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: $input-disabled-bg;
cursor: $input-disabled-cursor;
}
}
// @MIXIN
//
// We use this mixin to create form labels
//
// $alignment - Alignment options. Default: false. Options: [right, inline, false]
// $base-style - Control whether or not the base styles come through. Default: true.
@mixin form-label($alignment:false, $base-style:true) {
// Control whether or not the base styles come through.
@if $base-style {
color: $form-label-font-color;
cursor: $form-label-pointer;
display: block;
font-size: $form-label-font-size;
font-weight: $form-label-font-weight;
line-height: $form-label-line-height;
margin-bottom: $form-label-bottom-margin;
}
// Alignment options
@if $alignment == right {
float: none !important;
text-align: right;
}
@else if $alignment == inline {
margin: 0 0 $form-spacing 0;
padding: $form-spacing / 2 + rem-calc($input-border-width) 0;
}
}
// We use this mixin to create postfix/prefix form Labels
@mixin prefix-postfix-base {
border-style: $input-prefix-border-type;
border-width: $input-prefix-border-size;
display: block;
font-size: $form-label-font-size;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
overflow: $input-prefix-overflow;
padding-bottom: 0;
padding-top: 0;
position: relative;
text-align: center;
width: 100%;
z-index: 2;
}
// @MIXIN
//
// We use this mixin to create prefix label styles
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default:false
//
@mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
@if $bg {
$bg-lightness: lightness($bg);
background: $bg;
border-#{$opposite-direction}: none;
// Control the font color based on background brightness
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
@else { color: $input-prefix-font-color-alt; }
}
@if $border {
border-color: $border;
}
@if $is-button {
border: none;
padding-#{$default-float}: 0;
padding-#{$opposite-direction}: 0;
padding-bottom: 0;
padding-top: 0;
text-align: center;
}
}
// @MIXIN
//
// We use this mixin to create postfix label styles
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default: false
@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:true, $border:$input-prefix-border-color, $is-button:false) {
@if $bg {
$bg-lightness: lightness($bg);
background: $bg;
@if $border-left-hidden {
border-#{$default-float}: none;
}
// Control the font color based on background brightness
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
@else { color: $input-prefix-font-color-alt; }
}
@if $border {
border-color: $border;
}
@if $is-button {
border: none;
padding-#{$default-float}: 0;
padding-#{$opposite-direction}: 0;
padding-bottom: 0;
padding-top: 0;
text-align: center;
}
}
// We use this mixin to style fieldsets
@mixin fieldset {
border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
margin: $fieldset-margin;
padding: $fieldset-padding;
// and legend styles
legend {
font-weight: $legend-font-weight;
margin: 0;
margin-#{$default-float}: rem-calc(-3);
padding: $legend-padding;
}
}
// @MIXIN
//
// We use this mixin to control border and background color of error inputs
// $color - Default: $alert-color (found in settings file)
@mixin form-error-color($color:$alert-color) {
background-color: rgba($color, .1);
border-color: $color;
// Go back to normal on focus
&:focus {
background: $input-focus-bg-color;
border-color: $input-focus-border-color;
}
}
// @MIXIN
//
// We use this simple mixin to style labels for error inputs
// $color - Default:$alert-color. Found in settings file
@mixin form-label-error-color($color:$alert-color) { color: $color; }
// @MIXIN
//
// We use this mixin to create error message styles
// $bg - Default: $alert-color (Found in settings file)
@mixin form-error-message($bg:$input-error-message-bg-color) {
display: block;
font-size: $input-error-message-font-size;
font-style: $input-error-message-font-style;
font-weight: $input-error-message-font-weight;
margin-bottom: $form-spacing;
margin-top: $input-error-message-top;
padding: $input-error-message-padding;
// We can control the text color based on the brightness of the background.
$bg-lightness: lightness($bg);
background: $bg;
@if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
@else { color: $input-error-message-font-color-alt; }
}
// We use this mixin to style select elements
@mixin form-select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-color: $select-bg-color;
border-radius: 0;
// Hide the dropdown arrow shown in newer IE versions
&::-ms-expand {
display: none;
}
// The custom arrow has some fake horizontal padding so we can align it
// from the right side of the element without relying on CSS3
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+');
// We can safely use leftmost and rightmost now
background-position: if($text-direction == 'rtl', 0%, 100%) center;
background-repeat: no-repeat;
border: {
style: $input-border-style;
width: $input-border-width;
color: $input-border-color;
}
color: $input-font-color;
font-family: $input-font-family;
font-size: $input-font-size;
line-height: normal;
padding: ($form-spacing / 2);
@include radius(0);
&.radius { @include radius($global-radius); }
&:focus {
background-color: $select-hover-bg-color;
border-color: $input-focus-border-color;
}
// Disabled Styles
&:disabled {
background-color: $input-disabled-bg;
cursor: $input-disabled-cursor;
}
}
// We use this mixin to turn on/off HTML5 number spinners
@mixin html5number($browser, $on: true) {
@if $on == false {
@if $browser == webkit {
-webkit-appearance: none;
margin: 0;
} @else if $browser == moz {
-moz-appearance: textfield;
}
}
}
@include exports("form") {
@if $include-html-form-classes {
/* Standard Forms */
form { margin: 0 0 $form-spacing; }
/* Using forms within rows, we need to set some defaults */
form .row { @include form-row-base; }
/* Label Styles */
label { @include form-label;
&.right { @include form-label(right, false); }
&.inline { @include form-label(inline, false); }
/* Styles for required inputs */
small {
text-transform: $form-label-small-transform;
color: scale-color($form-label-font-color, $lightness: 15%);
}
}
/* Attach elements to the beginning or end of an input */
.prefix,
.postfix { @include prefix-postfix-base; }
/* Adjust padding, alignment and radius if pre/post element is a button */
.postfix.button { @include button-size(false, false); @include postfix(false, false, false, true); }
.prefix.button { @include button-size(false, false); @include prefix(false, false, true); }
.prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
.postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
.prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); }
.postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
/* Separate prefix and postfix styles when on span or label so buttons keep their own */
span.prefix, label.prefix { @include prefix(); }
span.postfix, label.postfix { @include postfix(); }
/* We use this to get basic styling on all basic form elements */
input:not([type]), #{text-inputs(all, 'input')} {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
@include form-element;
@if $input-include-glowing-effect == false {
-webkit-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
-moz-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
-ms-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
-o-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
}
&.radius {
@include radius($input-border-radius);
}
}
form {
.row {
.prefix-radius.row.collapse {
input,
textarea,
select,
button { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
.prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
}
.postfix-radius.row.collapse {
input,
textarea,
select,
button { @include radius(0); @include side-radius($default-float, $button-radius); }
.postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
}
.prefix-round.row.collapse {
input,
textarea,
select,
button { @include radius(0); @include side-radius($opposite-direction, $button-round); }
.prefix { @include radius(0); @include side-radius($default-float, $button-round); }
}
.postfix-round.row.collapse {
input,
textarea,
select,
button { @include radius(0); @include side-radius($default-float, $button-round); }
.postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
}
}
}
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
}
/* Respect enforced amount of rows for textarea */
textarea[rows] {
height: auto;
}
/* Not allow resize out of parent */
textarea {
max-width: 100%;
}
// style placeholder text cross browser
::-webkit-input-placeholder {
color: $input-placeholder-font-color;
}
:-moz-placeholder { /* Firefox 18- */
color: $input-placeholder-font-color;
}
::-moz-placeholder { /* Firefox 19+ */
color: $input-placeholder-font-color;
}
:-ms-input-placeholder {
color: $input-placeholder-font-color;
}
/* Add height value for select elements to match text input height */
select {
@include form-select;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
&[multiple] {
height: auto;
}
}
/* Adjust margin for form elements below */
input[type="file"],
input[type="checkbox"],
input[type="radio"],
select {
margin: 0 0 $form-spacing 0;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
display: inline-block;
margin-#{$default-float}: $form-spacing * .5;
margin-#{$opposite-direction}: $form-spacing;
margin-bottom: 0;
vertical-align: baseline;
}
/* Normalize file input width */
input[type="file"] {
width:100%;
}
/* HTML5 Number spinners settings */
input[type=number] {
@include html5number(moz, $input-number-spinners)
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
@include html5number(webkit, $input-number-spinners);
}
/* We add basic fieldset styling */
fieldset {
@include fieldset;
}
/* Error Handling */
#{data('abide')} {
.error small.error, .error span.error, span.error, small.error {
@include form-error-message;
}
span.error, small.error { display: none; }
}
span.error, small.error {
@include form-error-message;
}
.error {
input,
textarea,
select {
margin-bottom: 0;
}
input[type="checkbox"],
input[type="radio"] {
margin-bottom: $form-spacing
}
label,
label.error {
@include form-label-error-color;
}
small.error {
@include form-error-message;
}
> label {
> small {
background: transparent;
color: scale-color($form-label-font-color, $lightness: 15%);
display: inline;
font-size: 60%;
font-style: normal;
margin: 0;
padding: 0;
text-transform: $form-label-small-transform;
}
}
span.error-message {
display: block;
}
}
input.error,
textarea.error,
select.error {
margin-bottom: 0;
}
label.error { @include form-label-error-color; }
}
}
//
// ACL Style Form
//
// -------------------------------------------------
// Form. This file contains all standard elements
// for form layout
// TODO: splitting this file up for better readability
// clean up repeating input selector
// -------------------------------------------------
form, .acl-form {
//
// Base elements
//
// Add rounded corner to input element by default.
// and remove shadow come from Foundation
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
@include radius(2px);
box-shadow: none;
}
// Extra right padding to prevent overlap of dropdown arrow
select {
padding-right: 20px;
}
// Prevent textarea from being resized horizontally beyond its wrapper.
textarea { resize: vertical; }
// "Optional" indicator next to label
label {
span { font-weight: 200; }
}
legend { font-size: rem-calc(font-scale(2)); }
//
// Form standard elements
//
h3 { margin-bottom: 1em; }
.row, .acl-row {
// align checkbox/radio + label on the same line
// and wrap long text around nicely.
input[type="checkbox"], input[type="radio"] {
float: left;
margin-top: $form-spacing * .3;
& + label {
display: inline-block;
width: 90%;
}
}
// override margin setting for checkbox on the last row
&:last-child {
// margin-bottom: 0;
input[type="checkbox"], input[type="radio"] {
margin-bottom: 0;
}
}
&.error {
// When there validation error occurred, hide short helper text
.short-helper { display: none; }
// highlight input with color
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="checkbox"],
input[type="radio"],
select,
textarea {
border-color: $alert-color;
}
// Add (!) to the following input types
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
background-image: url(data:image/png;base64,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);
background-repeat: no-repeat;
background-position: 98% 8px;
padding-right: 24px;
}
// override .error textarea set by Foundation
input, textarea, select { margin-bottom: .5rem; }
// override checkbox bottom margin for error message to display nicely.
input { margin-bottom: 0; }
// error message
// keep .error in supporting legacy code in accounts app
small.error,
small.error-msg {
background: none;
color: $alert-color;
display: block;
font-size: rem-calc(font-scale());
font-style: normal;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0;
padding-left: 0;
padding-top: 0;
}
// error icon
i {
position: relative;
top: 1px;
}
}
// by default, error message is not visible
small.error,
small.error-msg { display: none; }
&.cta { margin-top: .5rem; }
}
// Short helper text
.has-short-helper {
input[type="text"], input[type="password"], input[type="file"],
input[type="checkbox"], input[type="radio"], select, textarea {
margin-bottom: 0.5em;
}
.short-helper {
color: $black-lighten-40;
display: block;
font-size: rem-calc(font-scale(-1));
line-height: 1.2;
margin-bottom: 1em;
}
}
// icon for long helper text
label {
font-weight: 700;
.has-tip {
color: $black-lighten-40;
&:hover { color: $black; }
}
}
// Call to action. keep it out of acl-row to reduce specificity
.cta {
// Override behavior for Cancel link in form CTA.
a:visited { color: $link-color; }
.acl-btn { margin-bottom: 0; }
}
// Override default error styles added by Rails form helper
.field_with_errors {
label {
color: $alert-color;
}
input, select, textarea {
border-color: $alert-color;
}
}
// Optional fields divider
.optional-fields__divider {
color: $black-lighten-30;
margin-bottom: 1rem;
margin-top: 5px;
position: relative;
text-align: center;
// Creates the divider line in the background
&:before {
border-top: 1px solid $black-lighten-60;
content: '';
left: 0;
position: absolute;
top: 50%;
width: 100%;
}
// Styles the text "Optional Fields"
.text {
background-color: #fff;
font-size: font-scale(-1);
font-style: italic;
padding-left: 7px;
padding-right: 7px;
position: relative;
}
}
//
// On-demand form
//
&.on-demand {
// trigger of the form
.odf-trigger {}
// the form (hidden by default)
.odf-form { display: none; }
// when the form is open
&.is-open {
.odf-trigger { display: none; }
.odf-form { display: block; }
}
}
&.multi-fieldset {
fieldset {
border-left: 0;
border-right: 0;
border-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
legend { padding-right: 0.75em; }
}
//
// Override Rails form helper
//
.read_only_input {
line-height: 1.5;
}
}
// Target browsers that don't have flex-box support,
// which is lt-ie10 (ie9 and older)
.no-flexbox {
form, .acl-form {
select {
background-image: none;
padding-right: 8px;
}
}
}
//
// Form on dark background.
//
.dark-bg-form {
fieldset {
border: 0;
padding-bottom: 0;
}
form, .acl-form { background: white; }
}
//
// Override display property coming from Foundation,
// which doesn't wrap these elements in form markup,
// so they have to stay here
//
input[type="checkbox"] + label,
input[type="radio"] + label {
display: inline;
// remove margin so label and input will fit on one line
margin-#{$opposite-direction}: 0;
}