Introduce form elements
Alex P
parent
27cabfc08c
commit
548410e23c
|
|
@ -5,8 +5,9 @@
|
|||
a component basis
|
||||
*/
|
||||
|
||||
@import 'theme/reset';
|
||||
@import 'theme/typography';
|
||||
@import 'theme/buttons';
|
||||
@import 'theme/tables';
|
||||
@import 'theme/dropdowns';
|
||||
@import 'reset';
|
||||
@import 'typography';
|
||||
@import 'buttons';
|
||||
@import 'tables';
|
||||
@import 'dropdowns';
|
||||
@import 'form-elements';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,512 @@
|
|||
/*
|
||||
Form Elements
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.form-control {
|
||||
border: 2px solid $g5-pepper;
|
||||
border-radius: $radius;
|
||||
color: $g15-platinum;
|
||||
background-color: $g2-kevlar;
|
||||
font-weight: 500;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease,
|
||||
border-color 0.4s ease,
|
||||
box-shadow 0.4s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $g6-smoke;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $c-pool;
|
||||
color: $g20-white;
|
||||
box-shadow: 0 0 6px 0 $c-pool;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
|
||||
// Disabled State
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] &,
|
||||
&.disabled {
|
||||
&, &:hover {
|
||||
border-color: $g5-pepper;
|
||||
background-color: $g3-castle !important;
|
||||
color: $g9-mountain !important;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error &,
|
||||
.has-success &,
|
||||
.has-warning & {
|
||||
box-shadow: none;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease,
|
||||
border-color 0.4s ease,
|
||||
box-shadow 0.4s ease;
|
||||
|
||||
&:focus {
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
}
|
||||
|
||||
// Success State
|
||||
.has-success & {
|
||||
border-color: $c-rainforest;
|
||||
&:focus {
|
||||
border-color: $c-honeydew;
|
||||
box-shadow: 0 0 8px $c-rainforest;
|
||||
}
|
||||
&::selection {background-color: $c-rainforest;}
|
||||
&::-moz-selection {background-color: $c-rainforest;}
|
||||
}
|
||||
|
||||
// Error State
|
||||
.has-error & {
|
||||
background-color: $g2-kevlar;
|
||||
border-color: $c-curacao;
|
||||
&:focus {
|
||||
background-color: $c-basalt;
|
||||
border-color: $c-dreamsicle;
|
||||
box-shadow: 0 0 8px $c-fire;
|
||||
}
|
||||
&::selection {background-color: $c-dreamsicle;}
|
||||
&::-moz-selection {background-color: $c-dreamsicle;}
|
||||
}
|
||||
|
||||
// Warning State
|
||||
.has-warning & {
|
||||
border-color: $c-star;
|
||||
&:focus {
|
||||
border-color: $c-comet;
|
||||
box-shadow: 0 0 8px $c-star;
|
||||
}
|
||||
&::selection {background-color: $c-comet;}
|
||||
&::-moz-selection {background-color: $c-comet;}
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder Text
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-control,
|
||||
textarea,
|
||||
input {
|
||||
&::-webkit-input-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;}
|
||||
&::-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;}
|
||||
&:-ms-input-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;}
|
||||
&:-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;}
|
||||
}
|
||||
|
||||
// Size Modifiers
|
||||
// ----------------------------------------------------------------------------
|
||||
input.form-control {
|
||||
&.input-xs {
|
||||
height: $form-xs-height;
|
||||
padding: 0 $form-xs-padding;
|
||||
font-size: $form-xs-font;
|
||||
}
|
||||
&.input-sm {
|
||||
height: $form-sm-height;
|
||||
padding: 0 $form-sm-padding;
|
||||
font-size: $form-sm-font;
|
||||
}
|
||||
&, &.input-md {
|
||||
height: $form-md-height;
|
||||
padding: 0 $form-md-padding;
|
||||
font-size: $form-md-font;
|
||||
}
|
||||
&.input-lg {
|
||||
height: $form-lg-height;
|
||||
padding: 0 $form-lg-padding;
|
||||
font-size: $form-lg-font;
|
||||
}
|
||||
}
|
||||
|
||||
// Static Elements
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-control-static {
|
||||
min-height: $form-md-height;
|
||||
padding: ($ix-marg-b - 1px) ($ix-marg-b + 1px);
|
||||
border: $ix-border solid $g5-pepper;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.panel form {
|
||||
margin-left: -9px;
|
||||
margin-right: -9px;
|
||||
width: calc(100% + 18px);
|
||||
display: inline-block;
|
||||
|
||||
.alert {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
&.form-inline {
|
||||
padding-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.form-horizontal {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.panel-body:first-child > form {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
// Form Add-Ons
|
||||
// ----------------------------------------------------------------------------
|
||||
.input-group-addon {
|
||||
border: 2px solid $g5-pepper;
|
||||
background-color: $g4-onyx;
|
||||
color: $g10-wolf;
|
||||
font-weight: 600;
|
||||
padding-left: 13px;
|
||||
padding-right: 13px;
|
||||
@extend %no-user-select;
|
||||
|
||||
// Error State
|
||||
.has-error & {
|
||||
background-color: $g4-onyx;
|
||||
color: $c-dreamsicle;
|
||||
border-color: $c-curacao;
|
||||
}
|
||||
|
||||
// Success State
|
||||
.has-success & {
|
||||
background-color: $g4-onyx;
|
||||
color: $c-rainforest;
|
||||
border-color: $c-rainforest;
|
||||
}
|
||||
|
||||
// Warning State
|
||||
.has-warning & {
|
||||
background-color: $g4-onyx;
|
||||
color: $c-comet;
|
||||
border-color: $c-star;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Groups
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-group {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.form-group > label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $g11-sidewalk;
|
||||
margin: 0 0 4px 0;
|
||||
padding: 0 ($form-sm-padding + $ix-border);
|
||||
@extend %no-user-select;
|
||||
}
|
||||
label.form-helper {
|
||||
font-style: italic;
|
||||
line-height: 16px;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
// ----------------------------------------------------------------------------
|
||||
$form-control-checkbox: 16px;
|
||||
$form-control-checkdot: 6px;
|
||||
$form-control-checkbox-gap: 24px;
|
||||
|
||||
.form-control-static {
|
||||
input[type="checkbox"] {
|
||||
position: relative;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="checkbox"] + label {
|
||||
transition: color 0.25s ease;
|
||||
padding-left: $form-control-checkbox-gap;
|
||||
position: relative;
|
||||
color: $g11-sidewalk;
|
||||
|
||||
// Checkbox
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: $form-control-checkbox;
|
||||
height: $form-control-checkbox;
|
||||
border-radius: 3px;
|
||||
border: $ix-border solid $g5-pepper;
|
||||
background-color: $g2-kevlar;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
// Check Dot
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: ($form-control-checkbox / 2);
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
width: $form-control-checkdot;
|
||||
height: $form-control-checkdot;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
opacity 0.25s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
// Hover State
|
||||
&:hover {
|
||||
color: $g18-cloud;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {border-color: $g6-smoke;}
|
||||
}
|
||||
}
|
||||
// Animate checked state
|
||||
input[type="checkbox"]:checked + label {
|
||||
color: $g18-cloud;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
|
||||
// Radio Buttons
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-control-static {
|
||||
> .radio-item {
|
||||
width: 100%;
|
||||
}
|
||||
input[type="radio"] {
|
||||
position: relative;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="radio"] + label {
|
||||
transition: color 0.25s ease;
|
||||
padding-left: $form-control-checkbox-gap;
|
||||
position: relative;
|
||||
color: $g11-sidewalk;
|
||||
|
||||
// Radio Circle
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: $form-control-checkbox;
|
||||
height: $form-control-checkbox;
|
||||
border-radius: 50%;
|
||||
border: $ix-border solid $g5-pepper;
|
||||
background-color: $g2-kevlar;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
// Radio Dot
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: ($form-control-checkbox / 2);
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
width: $form-control-checkdot;
|
||||
height: $form-control-checkdot;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
opacity 0.25s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
// Hover State
|
||||
&:hover {
|
||||
color: $g18-cloud;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {border-color: $g6-smoke;}
|
||||
}
|
||||
}
|
||||
// Animate checked state
|
||||
input[type="radio"]:checked + label {
|
||||
color: $g18-cloud;
|
||||
}
|
||||
input[type="radio"]:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Themed Text Inputs
|
||||
// ----------------------------------------------------------------------------
|
||||
input.form-control,
|
||||
textarea.form-control {
|
||||
// Blue
|
||||
&.form-plutonium {
|
||||
color: $c-pool;
|
||||
&:focus {color: $g20-white;}
|
||||
}
|
||||
// Green
|
||||
&.form-malachite {
|
||||
color: $c-rainforest;
|
||||
&:focus {
|
||||
border-color: $c-rainforest;
|
||||
color: $g20-white;
|
||||
box-shadow: 0 0 8px $c-rainforest;
|
||||
}
|
||||
&::selection {background-color: $c-rainforest;}
|
||||
&::-moz-selection {background-color: $c-rainforest;}
|
||||
}
|
||||
// Purple
|
||||
&.form-astronaut {
|
||||
color: $c-comet;
|
||||
&:focus {
|
||||
border-color: $c-star;
|
||||
color: $g20-white;
|
||||
box-shadow: 0 0 8px $c-star;
|
||||
}
|
||||
&::selection {background-color: $c-comet;}
|
||||
&::-moz-selection {background-color: $c-comet;}
|
||||
}
|
||||
// Red
|
||||
&.form-volcano {
|
||||
color: $c-dreamsicle;
|
||||
&:focus {
|
||||
background-color: $c-basalt;
|
||||
border-color: $c-dreamsicle;
|
||||
color: $c-flan;
|
||||
box-shadow: 0 0 8px $c-curacao;
|
||||
}
|
||||
&::selection {background-color: $c-curacao;}
|
||||
&::-moz-selection {background-color: $c-curacao;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Monospace Inputs
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-control.monotype {
|
||||
font-family: $code-font;
|
||||
}
|
||||
|
||||
// Generic Checkboxes
|
||||
// ----------------------------------------------------------------------------
|
||||
.dark-checkbox {
|
||||
input {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $g1-raven;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
label:hover {
|
||||
cursor: pointer;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease;
|
||||
}
|
||||
input:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
|
||||
// Generic Radio Inputs
|
||||
// ----------------------------------------------------------------------------
|
||||
.dark-radio {
|
||||
input {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $g1-raven;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
label:hover {
|
||||
cursor: pointer;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease;
|
||||
}
|
||||
input:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-submit {
|
||||
margin-top: 30px;
|
||||
}
|
||||
Loading…
Reference in New Issue