153 lines
3.6 KiB
Plaintext
153 lines
3.6 KiB
Plaintext
.fform {
|
|
min-width:320px;
|
|
background-color: @boxBackgroundColor;
|
|
box-shadow: -5px -5px 30px @boxShadowTLColor, 5px 5px 30px @boxShadowBRColor;
|
|
border-radius:20px;
|
|
border:1px solid @boxBorderColor;
|
|
margin:10px;
|
|
padding:10px;
|
|
position:relative;
|
|
|
|
.loading {
|
|
&:before {
|
|
width:25px;
|
|
height:25px;
|
|
}
|
|
}
|
|
input[type=text] + label,
|
|
input[type=password] + label {
|
|
box-sizing: border-box;
|
|
display:block;
|
|
position:absolute;
|
|
pointer-events: none;
|
|
margin: ~"calc(-1.85em + 1px) 1em 0";
|
|
&:before {
|
|
content: attr(placeholder);
|
|
display: inline-block;
|
|
color: @labelColor;
|
|
white-space: nowrap;
|
|
transition-property: transform, color, font-size;
|
|
transition-duration: 0.2s;
|
|
transition-timing-function: ease-out;
|
|
transform-origin: left center;
|
|
border:1px solid @labelBorder;
|
|
border-bottom:0;
|
|
padding:3px;
|
|
border-radius:5px 5px 0 0;
|
|
}
|
|
}
|
|
input,button,.button,select {
|
|
box-shadow: -3px -3px 10px @buttonShadowTLColor, 3px 3px 10px @buttonShadowBRColor;
|
|
background: radial-gradient(@buttonUnCheckedColorInner 20%, @buttonUnCheckedColorOuter 100%);
|
|
border:1px solid @inputBorderColor;
|
|
border-radius:1em;
|
|
color: @labelColor;
|
|
transition: box-shadow .5s, border .5s;
|
|
&:hover, &:focus, &:focus-within {
|
|
box-shadow: none;
|
|
border:1px solid @inputBorderColorActive;
|
|
transition: box-shadow 0.5s, border .5s;
|
|
}
|
|
&:checked, &:active {
|
|
box-shadow: -5px -5px 13px @buttonShadowBRColor, 3px 3px 10px @buttonShadowTLColor;
|
|
transition: box-shadow 0.5s;
|
|
}
|
|
&.green {
|
|
background: radial-gradient(@buttonUnCheckedColorInnerGreen 20%, @buttonUnCheckedColorOuterGreen 100%);
|
|
}
|
|
&.red {
|
|
background: radial-gradient(@buttonUnCheckedColorInnerRed 20%, @buttonUnCheckedColorOuterRed 100%);
|
|
}
|
|
}
|
|
input[type=radio], input[type=checkbox], select {
|
|
height: 2em;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
select {
|
|
margin-top:-4px;
|
|
vertical-align:top;
|
|
padding:0 3px;
|
|
}
|
|
|
|
input[type=radio], input[type=checkbox] {
|
|
width:2em;
|
|
&:checked {
|
|
background: radial-gradient(@buttonCheckedColorInner 20%, @buttonCheckedColorOuter 100%);
|
|
}
|
|
|
|
& + label {
|
|
margin:0.5em 0 0 5px;
|
|
display:inline-block;
|
|
height:2em;
|
|
vertical-align:top;
|
|
}
|
|
}
|
|
input[type=text], input[type=password], input[type=submit], button {
|
|
font-size: 100%;
|
|
margin: 1.3em 0 0;
|
|
padding: 0.2em 0.5em 0;
|
|
height: 2em;
|
|
box-sizing: border-box;
|
|
width:100%;
|
|
}
|
|
input[type=text], input[type=password] {
|
|
&:active {
|
|
box-shadow:none;
|
|
}
|
|
}
|
|
button {
|
|
cursor:pointer;
|
|
outline:none;
|
|
}
|
|
|
|
label + a, label + p {
|
|
margin-top:1.3em;
|
|
display:inline-block;
|
|
}
|
|
input[type=text], input[type=password], input[type=file], select, button {
|
|
&:focus,
|
|
&.active,
|
|
&:valid,
|
|
&.invalid,
|
|
&:disabled {
|
|
& + label:before {
|
|
transform: translateY(-2.0em) translateX(0.5em);
|
|
border-color: @inputBorderColor;
|
|
font-size:70%;
|
|
background: @labelBackground;
|
|
}
|
|
}
|
|
}
|
|
|
|
.errormsg {
|
|
display:inline-block;
|
|
}
|
|
|
|
.successmsg {
|
|
margin-top:1em;
|
|
color:#009900;
|
|
display:inline-block;
|
|
}
|
|
|
|
&.small, .small {
|
|
font-size: 75%;
|
|
input[type=checkbox] + label {
|
|
margin:0.6em 0 0;
|
|
}
|
|
input[type=text], input[type=password], input[type=file], select {
|
|
&:focus,
|
|
&.active,
|
|
&:valid,
|
|
&.invalid,
|
|
&:disabled {
|
|
& + label:before {
|
|
transform: translateY(-2.3em) translateX(0.5em);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|