rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updated the styles for the buttons, switching from using background css gradients to using box-shadow techniques

This commit is contained in:
Hugo Baeta 2012-08-15 13:45:04 -07:00
parent 31c5a39408
commit 6f4192d9b0
1 changed files with 14 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
style.css
View File

@ -225,36 +225,27 @@ input[type="submit"] {
border: 1px solid #ccc; border: 1px solid #ccc;
border-color: #ccc #ccc #bbb #ccc; border-color: #ccc #ccc #bbb #ccc;
border-radius: 3px; border-radius: 3px;
background: #fafafa; /* Old browsers */ background: #e6e6e6;
background: -moz-linear-gradient(top, #fafafa 60%, #e6e6e6 100%); /* FF3.6+ */ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */ -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
background: -webkit-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
background: -o-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* IE10+ */
background: linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0 2px 1px #fff;
color: rgba(0,0,0,.8); color: rgba(0,0,0,.8);
cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
font-size: 12px; font-size: 12px;
font-size: 1.4rem; font-size: 1.4rem;
padding: 1.12em 1.5em .88em; line-height: 1;
text-shadow: 0 1px 0 rgba(255,255,255,.5); padding: 1.12em 1.5em 1em;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
} }
button:hover, button:hover,
html input[type="button"]:hover, html input[type="button"]:hover,
input[type="reset"]:hover, input[type="reset"]:hover,
input[type="submit"]:hover { input[type="submit"]:hover {
background: #f5f5f5; /* Old browsers */ border-color: #ccc #bbb #aaa #bbb;
background: -moz-linear-gradient(top, #f5f5f5 60%, #dcdcdc 100%); /* FF3.6+ */ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */ -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
background: -webkit-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
background: -o-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* IE10+ */
background: linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
border-color: #bbb #bbb #aaa #bbb;
} }
button:focus, button:focus,
html input[type="button"]:focus, html input[type="button"]:focus,
@ -265,8 +256,9 @@ html input[type="button"]:active,
input[type="reset"]:active, input[type="reset"]:active,
input[type="submit"]:active { input[type="submit"]:active {
border-color: #aaa #bbb #bbb #bbb; border-color: #aaa #bbb #bbb #bbb;
box-shadow: inset 0 2px 3px rgba(0,0,0,.15); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
box-shadow: inset 0 2px 2px rgba(0,0,0,.15); -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {