diaspora/app/assets/stylesheets/new_styles/_forms.scss

129 lines
2.4 KiB
SCSS

input,
input[type=email],
input[type=text],
input[type=password],
textarea { /* Bootstrap reset */
&,
&:active,
&:invalid,
&:invalid:required,
&:focus,
&:active:focus,
&:invalid:focus,
&:invalid:required:focus {
border-color: $border-grey;
box-shadow: none;
color : $text-dark-grey;
}
}
/* 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;
}
}
.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;
}
::placeholder { text-transform: uppercase; }
}
}
/* 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);
}
}