Skip to content
Browse files

Flatten email form

  • Loading branch information...
1 parent bbef831 commit a3cad1c6cdc7e339d16fac54f0ffd4c9d31042ae @soffes soffes committed Mar 27, 2013
Showing with 6 additions and 36 deletions.
  1. +6 −36 assets/stylesheets/components/form.scss
View
42 assets/stylesheets/components/form.scss
@@ -18,7 +18,6 @@ form {
input[type="email"] {
@include appearance(none);
@include box-sizing(border-box);
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;
font-size: 1em;
border-radius: 5px;
background-color: white;
@@ -31,40 +30,22 @@ input[type="email"] {
}
input[type="email"]:focus {
- -webkit-box-shadow: 0 0 4px rgba(8, 129, 179, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1) inset;
- -moz-box-shadow: 0 0 4px rgba(8, 129, 179, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1) inset;
- box-shadow: 0 0 4px rgba(8, 129, 179, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1) inset;
+ @include transition(border 0.3s ease-in-out);
outline: 0;
border-color: #43acd7;
}
button {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -ms-border-radius: 5px;
- -o-border-radius: 5px;
+ @include box-sizing(border-box);
border-radius: 5px;
- background-color: #fcfcfd;
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfd), color-stop(100%, #e4e7ee));
- background-image: -webkit-linear-gradient(top, #fcfcfd, #e4e7ee);
- background-image: -moz-linear-gradient(top, #fcfcfd, #e4e7ee);
- background-image: -ms-linear-gradient(top, #fcfcfd, #e4e7ee);
- background-image: -o-linear-gradient(top, #fcfcfd, #e4e7ee);
- background-image: linear-gradient(top, #fcfcfd, #e4e7ee);
- -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
- border: 1px solid #959aa5;
+ background-color: #eee;
+ border: 1px solid #999;
cursor: pointer;
color: #606877;
height: 32px;
display: inline-block;
padding: 5px 8px;
vertical-align: top;
- text-shadow: 0 1px 0 #fff;
font-size: 16px;
@media #{$grater-small-media-query} {
@@ -74,20 +55,9 @@ button {
}
button:hover, button:focus {
- background-color: #fcfcfd;
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfd), color-stop(100%, #f0f2f6));
- background-image: -webkit-linear-gradient(top, #fcfcfd, #f0f2f6);
- background-image: -moz-linear-gradient(top, #fcfcfd, #f0f2f6);
- background-image: -ms-linear-gradient(top, #fcfcfd, #f0f2f6);
- background-image: -o-linear-gradient(top, #fcfcfd, #f0f2f6);
- background-image: linear-gradient(top, #fcfcfd, #f0f2f6);
+ background-color: #f3f3f3;
}
button:active {
- -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
- background: #f0f2f6;
- position: relative;
- top: 1px;
+ background: #f6f6f6;
}

0 comments on commit a3cad1c

Please sign in to comment.
Something went wrong with that request. Please try again.