151 lines
3 KiB
SCSS
151 lines
3 KiB
SCSS
input,
|
|
textarea { /* Bootstrap reset */
|
|
&,
|
|
&:active,
|
|
&:invalid,
|
|
&:invalid:required, {
|
|
border-color: $border-grey;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:focus,
|
|
&:active:focus,
|
|
&:invalid:focus,
|
|
&:invalid:required:focus {
|
|
border-color: $border-dark-grey;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* autocomplete colors */
|
|
input:-webkit-autofill{
|
|
background-color: #fff !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
/* Forms described here are only used on the public pages at the moment */
|
|
form.block-form {
|
|
margin: 20px auto;
|
|
|
|
label {
|
|
color : $text-dark-grey;
|
|
position: absolute;
|
|
top: -9999px;
|
|
left: -9999px;
|
|
}
|
|
|
|
fieldset {
|
|
margin-bottom: 1em;
|
|
background-color: #fff;
|
|
position: relative; /* To correctly place the entypo icon */
|
|
|
|
input {
|
|
color : $text-dark-grey;
|
|
margin: 0px;
|
|
border-bottom-width: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.form-control {
|
|
font-size: 16px;
|
|
height: 40px;
|
|
padding: 10px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.form-control:first-of-type {
|
|
&,
|
|
&:focus,
|
|
&:invalid,
|
|
&:invalid:focus,
|
|
&:invalid:required,
|
|
&:invalid:required:focus {
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
}
|
|
|
|
.form-control:last-of-type {
|
|
&,
|
|
&:focus,
|
|
&:invalid,
|
|
&:invalid:focus,
|
|
&:invalid:required,
|
|
&:invalid:required:focus {
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
border-bottom-width: 1px;
|
|
}
|
|
}
|
|
|
|
.form-control:focus {
|
|
&,
|
|
&:invalid,
|
|
&:invalid:required {
|
|
border-color: $border-dark-grey;
|
|
border-bottom-width: 1px;
|
|
}
|
|
/* remove the border of the element under the one with the focus */
|
|
& + label + .entypo + .form-control {
|
|
border-top-width: 0px;
|
|
}
|
|
}
|
|
|
|
.entypo {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
width: 20px;
|
|
text-align: center;
|
|
color: $text-grey;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.entypo:nth-of-type(2) {
|
|
top: 50px;
|
|
}
|
|
|
|
.entypo:nth-of-type(3) {
|
|
top: 90px;
|
|
}
|
|
|
|
.entypo:nth-of-type(4) {
|
|
top: 130px;
|
|
}
|
|
|
|
input:-moz-placeholder { text-transform: uppercase; }
|
|
input::-webkit-input-placeholder { text-transform: uppercase; }
|
|
input:-ms-input-placeholder { text-transform: uppercase; }
|
|
}
|
|
|
|
input[type=submit] {
|
|
text-align: center;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
|
|
/* buttons to be extracted? */
|
|
.new-btn {
|
|
@include transition(box-shadow);
|
|
@include linear-gradient(#fff, rgb(233,233,233));
|
|
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0);
|
|
background-color : rgb(233,233,233);
|
|
color : $text-grey;
|
|
border-radius: 5px;
|
|
border : 1px solid $border-dark-grey;
|
|
|
|
//font-family : Roboto-Bold;
|
|
font-size : 14px;
|
|
text-shadow : 0 1px 2px #eee;
|
|
|
|
&:hover {
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow : inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.7);
|
|
}
|
|
}
|