siwi-form
Version:
siwi form by siwi
426 lines (366 loc) • 8.7 kB
CSS
/**
* @author [siwi]
* @email [siwi@siwi.me]
* @create date 2017-04-28 05:24:08
* @modify date 2017-04-28 05:26:26
* @desc [variables for Siwi UI]
*/
/*--------------------------------------------------------
Base font-size
---------------------------------------------------------*/
/*--------------------------------------------------------
Layout And Grid
---------------------------------------------------------*/
/*--------------------------------------------------------
Media queries breakpoints
---------------------------------------------------------*/
/*--------------------------------------------------------
Site Colors
---------------------------------------------------------*/
/*--------------------- Colors ------------------------*/
/*------------------ Light Colors -------------------*/
/*------------------- Neutrals ---------------------*/
/*--------------- Colored Backgrounds ----------------*/
/*--------------------------------------------------------
Border
---------------------------------------------------------*/
/*--------------------------------------------------------
Button
---------------------------------------------------------*/
/*--------------------------------------------------------
Input
---------------------------------------------------------*/
/*--------------------------------------------------------
Animate
---------------------------------------------------------*/
/*--------------------------------------------------------
Shadow
---------------------------------------------------------*/
/*--------------------------------------------------------
Z-index
---------------------------------------------------------*/
.sw.form
{
position: relative;
}
.sw.form .field
{
padding: 5px 10px;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center;
}
.sw.form .field > label
{
font-size: 14px;
display: inline-block;
text-align: right;
}
.sw.form .field > input
{
font-size: 12px;
line-height: 1.5;
position: relative;
display: inline-block;
width: 100%;
height: 32px;
margin: 5px 0;
padding: 4px 7px;
cursor: text;
transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
color: #545454;
border: 1px solid rgba(34, 36, 38, .15);
border-radius: 4px;
background-color: #fff;
background-image: none;
}
.sw.form .field > input::-moz-placeholder
{
opacity: 1;
color: #dcddde;
}
.sw.form .field > input:-ms-input-placeholder
{
color: #dcddde;
}
.sw.form .field > input::-webkit-input-placeholder
{
color: #dcddde;
}
.sw.form .field > input:focus
{
border-color: #c1ebff;
outline: 0;
}
.sw.form .field > input[disabled],
fieldset[disabled] .sw.form .field > input
{
cursor: not-allowed;
opacity: 1;
color: #ccc;
background-color: #dcddde;
}
.sw.form .field .radio,
.sw.form .field .checkbox
{
display: -ms-flexbox;
display: flex;
height: 32px;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: start;
justify-content: flex-start;
}
.sw.form .field .radio > input,
.sw.form .field .checkbox > input
{
line-height: 1;
position: relative;
display: inline-block;
margin-right: 4px;
cursor: pointer;
vertical-align: middle;
white-space: nowrap;
outline: none;
}
.sw.form .field .radio > label,
.sw.form .field .checkbox > label
{
font-size: 12px;
display: inline-block;
width: 50px;
text-align: left;
}
.sw.form .field > select
{
font-size: 12px;
line-height: 32px;
display: inline-block;
width: 100%;
margin: 5px 0;
color: #545454;
border: 1px solid rgba(34, 36, 38, .15);
border-radius: 2;
outline: none;
}
.sw.form .field > select[multiple]
{
width: 100%;
}
.sw.form .field > select[multiple] option
{
padding: .2rem .4rem;
}
.sw.form .field > select:not([multiple])
{
height: 32px;
padding-right: 24px;
color: #545454;
background: white;
}
.sw.form .field > select option
{
color: #545454;
}
.sw.form .field > textarea
{
font-size: 12px;
line-height: 1.5;
position: relative;
display: inline-block;
width: 100%;
height: 32px;
height: auto;
margin: 5px 0;
padding: 4px 7px;
cursor: text;
transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
color: #545454;
border: 1px solid rgba(34, 36, 38, .15);
border-radius: 4px;
background-color: #fff;
background-image: none;
}
.sw.form .field > textarea::-moz-placeholder
{
opacity: 1;
color: #dcddde;
}
.sw.form .field > textarea:-ms-input-placeholder
{
color: #dcddde;
}
.sw.form .field > textarea::-webkit-input-placeholder
{
color: #dcddde;
}
.sw.form .field > textarea:focus
{
border-color: #c1ebff;
outline: 0;
}
.sw.form .field > textarea[disabled],
fieldset[disabled] .sw.form .field > textarea
{
cursor: not-allowed;
opacity: 1;
color: #ccc;
background-color: #dcddde;
}
.sw.form .inline-field
{
display: -ms-flexbox;
display: flex;
padding: 5px 10px;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center;
}
.sw.form .inline-field > label
{
font-size: 14px;
width: 80px;
padding: 0 10px;
text-align: right;
}
.sw.form .inline-field > input
{
font-size: 12px;
line-height: 1.5;
position: relative;
display: inline-block;
width: 100%;
height: 32px;
padding: 4px 7px;
cursor: text;
transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
color: #545454;
border: 1px solid rgba(34, 36, 38, .15);
border-radius: 4px;
background-color: #fff;
background-image: none;
-ms-flex: 1;
flex: 1;
}
.sw.form .inline-field > input::-moz-placeholder
{
opacity: 1;
color: #dcddde;
}
.sw.form .inline-field > input:-ms-input-placeholder
{
color: #dcddde;
}
.sw.form .inline-field > input::-webkit-input-placeholder
{
color: #dcddde;
}
.sw.form .inline-field > input:focus
{
border-color: #c1ebff;
outline: 0;
}
.sw.form .inline-field > input[disabled],
fieldset[disabled] .sw.form .inline-field > input
{
cursor: not-allowed;
opacity: 1;
color: #ccc;
background-color: #dcddde;
}
.sw.form .inline-field .radio,
.sw.form .inline-field .checkbox
{
display: -ms-flexbox;
display: flex;
height: 32px;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: start;
justify-content: flex-start;
}
.sw.form .inline-field .radio > input,
.sw.form .inline-field .checkbox > input
{
line-height: 1;
position: relative;
display: inline-block;
margin-right: 4px;
padding: 0;
cursor: pointer;
vertical-align: middle;
white-space: nowrap;
outline: none;
}
.sw.form .inline-field .radio > label,
.sw.form .inline-field .checkbox > label
{
font-size: 12px;
display: inline-block;
width: 50px;
text-align: left;
}
.sw.form .inline-field > textarea
{
font-size: 12px;
line-height: 1.5;
position: relative;
display: inline-block;
width: 100%;
height: 32px;
height: auto;
padding: 4px 7px;
cursor: text;
transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
color: #545454;
border: 1px solid rgba(34, 36, 38, .15);
border-radius: 4px;
background-color: #fff;
background-image: none;
-ms-flex: 1;
flex: 1;
}
.sw.form .inline-field > textarea::-moz-placeholder
{
opacity: 1;
color: #dcddde;
}
.sw.form .inline-field > textarea:-ms-input-placeholder
{
color: #dcddde;
}
.sw.form .inline-field > textarea::-webkit-input-placeholder
{
color: #dcddde;
}
.sw.form .inline-field > textarea:focus
{
border-color: #c1ebff;
outline: 0;
}
.sw.form .inline-field > textarea[disabled],
fieldset[disabled] .sw.form .inline-field > textarea
{
cursor: not-allowed;
opacity: 1;
color: #ccc;
background-color: #dcddde;
}
.sw.form .fields
{
display: -ms-flexbox;
display: flex;
}
.sw.form .fields .inline-field > label
{
width: auto;
padding: 0 10px;
text-align: center;
}
.sw.form .fields .inline-field:first-child > label
{
width: 80px;
text-align: right;
}