337 lines
10 KiB
SCSS
337 lines
10 KiB
SCSS
|
//
|
||
|
|
// Form Variables
|
||
|
|
//
|
||
|
|
|
||
|
|
// We use this to set the base for lots of form spacing and positioning styles
|
||
|
|
$form-spacing: emCalc(16px) !default;
|
||
|
|
|
||
|
|
// We use these to style the labels in different ways
|
||
|
|
$label-pointer: pointer !default;
|
||
|
|
$label-font-size: emCalc(14px) !default;
|
||
|
|
$label-font-weight: 500 !default;
|
||
|
|
$label-font-color: lighten(#000, 30%) !default;
|
||
|
|
$label-bottom-margin: emCalc(3px) !default;
|
||
|
|
$input-font-family: inherit !default;
|
||
|
|
$input-font-color: rgba(0,0,0,0.75) !default;
|
||
|
|
$input-font-size: emCalc(14px) !default;
|
||
|
|
$input-bg-color: #fff !default;
|
||
|
|
$input-focus-bg-color: darken(#fff, 2%) !default;
|
||
|
|
$input-border-color: darken(#fff, 20%) !default;
|
||
|
|
$input-focus-border-color: darken(#fff, 40%) !default;
|
||
|
|
$input-border-style: solid !default;
|
||
|
|
$input-border-width: 1px !default;
|
||
|
|
$input-disabled-bg: #ddd !default;
|
||
|
|
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
|
||
|
|
|
||
|
|
// We use these to style the fieldset border and spacing.
|
||
|
|
$fieldset-border-style: solid !default;
|
||
|
|
$fieldset-border-width: 1px !default;
|
||
|
|
$fieldset-border-color: #ddd !default;
|
||
|
|
$fieldset-padding: emCalc(20px) !default;
|
||
|
|
$fieldset-margin: emCalc(18px) 0 !default;
|
||
|
|
|
||
|
|
// We use these to style the legends when you use them
|
||
|
|
$legend-bg: #fff !default;
|
||
|
|
$legend-font-weight: bold !default;
|
||
|
|
$legend-padding: 0 emCalc(3px) !default;
|
||
|
|
|
||
|
|
// We use these to style the prefix and postfix input elements
|
||
|
|
$input-prefix-bg: darken(#fff, 5%) !default;
|
||
|
|
$input-prefix-border-color: darken(#fff, 20%) !default;
|
||
|
|
$input-prefix-border-size: 1px !default;
|
||
|
|
$input-prefix-border-type: solid !default;
|
||
|
|
$input-prefix-overflow: hidden !default;
|
||
|
|
$input-prefix-font-color: #333 !default;
|
||
|
|
$input-prefix-font-color-alt: #fff !default;
|
||
|
|
|
||
|
|
// We use these to style the error states for inputs and labels
|
||
|
|
$input-error-message-padding: emCalc(6px) emCalc(4px) !default;
|
||
|
|
$input-error-message-top: -($form-spacing) - emCalc(5px) !default;
|
||
|
|
$input-error-message-font-size: emCalc(12px) !default;
|
||
|
|
$input-error-message-font-weight: bold !default;
|
||
|
|
$input-error-message-font-color: #fff !default;
|
||
|
|
$input-error-message-font-color-alt: #333 !default;
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Form 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.column,
|
||
|
|
input.columns { padding-#{$default-float}: $form-spacing / 2; }
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this mixin to give all basic form elements their style
|
||
|
|
@mixin form-element() {
|
||
|
|
background-color: $input-bg-color;
|
||
|
|
font-family: $input-font-family;
|
||
|
|
border: $input-border-width $input-border-style $input-border-color;
|
||
|
|
-webkit-box-shadow: $input-box-shadow;
|
||
|
|
box-shadow: $input-box-shadow;
|
||
|
|
color: $input-font-color;
|
||
|
|
display: block;
|
||
|
|
font-size: $input-font-size;
|
||
|
|
margin: 0 0 $form-spacing 0;
|
||
|
|
padding: $form-spacing / 2;
|
||
|
|
height: emCalc(13px) + ($form-spacing * 1.5);
|
||
|
|
width: 100%;
|
||
|
|
@include box-sizing(border-box);
|
||
|
|
|
||
|
|
// Basic focus styles
|
||
|
|
&:focus {
|
||
|
|
background: $input-focus-bg-color;
|
||
|
|
border-color: $input-focus-border-color;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Disabled background input background color
|
||
|
|
&[disabled] { background-color: $input-disabled-bg; }
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this mixin to create form labels
|
||
|
|
@mixin form-label($alignment:false, $base-style:true) {
|
||
|
|
|
||
|
|
// Control whether or not the base styles come through.
|
||
|
|
@if $base-style {
|
||
|
|
font-size: $label-font-size;
|
||
|
|
color: $label-font-color;
|
||
|
|
cursor: $label-pointer;
|
||
|
|
display: block;
|
||
|
|
font-weight: $label-font-weight;
|
||
|
|
margin-bottom: $label-bottom-margin;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Alignment options
|
||
|
|
@if $alignment == right {
|
||
|
|
float: none;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
@else if $alignment == inline {
|
||
|
|
margin: 0 0 $form-spacing 0;
|
||
|
|
padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this mixin to create postfix/prefix form Labels
|
||
|
|
@mixin prefix-postfix-base {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
border-style: $input-prefix-border-type;
|
||
|
|
border-width: $input-prefix-border-size;
|
||
|
|
overflow: $input-prefix-overflow;
|
||
|
|
font-size: $label-font-size;
|
||
|
|
height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
||
|
|
line-height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this mixin to create prefix label styles
|
||
|
|
@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
|
||
|
|
|
||
|
|
@if $bg {
|
||
|
|
$bg-lightness: lightness($bg);
|
||
|
|
background: $bg;
|
||
|
|
border-color: darken($bg, 10%);
|
||
|
|
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 $is-button {
|
||
|
|
padding-#{$default-float}: 0;
|
||
|
|
padding-#{$opposite-direction}: 0;
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
text-align: center;
|
||
|
|
line-height: emCalc(34px);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this mixin to create postfix label styles
|
||
|
|
@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
|
||
|
|
|
||
|
|
@if $bg {
|
||
|
|
$bg-lightness: lightness($bg);
|
||
|
|
background: $bg;
|
||
|
|
border-color: darken($bg, 15%);
|
||
|
|
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 $is-button {
|
||
|
|
padding-#{$default-float}: 0;
|
||
|
|
padding-#{$opposite-direction}: 0;
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
text-align: center;
|
||
|
|
line-height: emCalc(34px);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this mixin to style fieldsets
|
||
|
|
@mixin fieldset {
|
||
|
|
border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
|
||
|
|
padding: $fieldset-padding;
|
||
|
|
margin: $fieldset-margin;
|
||
|
|
|
||
|
|
// and legend styles
|
||
|
|
legend {
|
||
|
|
font-weight: $legend-font-weight;
|
||
|
|
background: $legend-bg;
|
||
|
|
padding: $legend-padding;
|
||
|
|
margin: 0;
|
||
|
|
margin-#{$default-float}: emCalc(-3px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this mixin to control border and background color of error inputs
|
||
|
|
@mixin form-error-color($color:$alert-color) {
|
||
|
|
border-color: $color;
|
||
|
|
background-color: rgba($color, 0.1);
|
||
|
|
|
||
|
|
// Go back to normal on focus
|
||
|
|
&:focus {
|
||
|
|
background: $input-focus-bg-color;
|
||
|
|
border-color: $input-focus-border-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this simple mixin to style labels for error inputs
|
||
|
|
@mixin form-label-error-color($color:$alert-color) { color: $color; }
|
||
|
|
|
||
|
|
// We use this mixin to create error message styles
|
||
|
|
@mixin form-error-message($bg:$alert-color) {
|
||
|
|
display: block;
|
||
|
|
padding: $input-error-message-padding;
|
||
|
|
margin-top: $input-error-message-top;
|
||
|
|
margin-bottom: $form-spacing;
|
||
|
|
font-size: $input-error-message-font-size;
|
||
|
|
font-weight: $input-error-message-font-weight;
|
||
|
|
|
||
|
|
// 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; }
|
||
|
|
}
|
||
|
|
|
||
|
|
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||
|
|
@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); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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,false); @include postfix(false,true); }
|
||
|
|
.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
|
||
|
|
.prefix.button.radius { @include side-radius($default-float, $global-radius); }
|
||
|
|
.postfix.button.radius { @include side-radius($opposite-direction, $global-radius); }
|
||
|
|
.prefix.button.round { @include side-radius($default-float, 1000px); }
|
||
|
|
.postfix.button.round { @include side-radius($opposite-direction, 1000px); }
|
||
|
|
|
||
|
|
/* Separate prefix and postfix styles when on span so buttons keep their own */
|
||
|
|
span.prefix { @include prefix();
|
||
|
|
&.radius { @include side-radius($default-float, $global-radius); }
|
||
|
|
}
|
||
|
|
span.postfix { @include postfix();
|
||
|
|
&.radius { @include side-radius($opposite-direction, $global-radius); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Input groups will automatically style first and last elements of the group */
|
||
|
|
.input-group {
|
||
|
|
&.radius {
|
||
|
|
&>*:first-child, &>*:first-child * {
|
||
|
|
@include side-radius($default-float, $global-radius);
|
||
|
|
}
|
||
|
|
&>*:last-child, &>*:last-child * {
|
||
|
|
@include side-radius($opposite-direction, $global-radius);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.round {
|
||
|
|
&>*:first-child, &>*:first-child * {
|
||
|
|
@include side-radius($default-float, $button-round);
|
||
|
|
}
|
||
|
|
&>*:last-child, &>*:last-child * {
|
||
|
|
@include side-radius($opposite-direction, $button-round);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* We use this to get basic styling on all basic form elements */
|
||
|
|
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 {
|
||
|
|
@include form-element;
|
||
|
|
@include single-transition(all, 0.15s, linear);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* We add basic fieldset styling */
|
||
|
|
fieldset {
|
||
|
|
@include fieldset;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Error Handling */
|
||
|
|
.error input,
|
||
|
|
input.error,
|
||
|
|
.error textarea,
|
||
|
|
textarea.error {
|
||
|
|
@include form-error-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error label,
|
||
|
|
label.error { @include form-label-error-color; }
|
||
|
|
|
||
|
|
.error small,
|
||
|
|
small.error {
|
||
|
|
@include form-error-message;
|
||
|
|
}
|
||
|
|
}
|