Permalink
Browse files

improved inset box shadow for active state, added new example files f…

…or testing styles
  • Loading branch information...
imathis committed Oct 30, 2010
1 parent 9341bed commit d52d3986a29359ae83814efb3a2fa7dec10c1396
View
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+ <title>Fancy Buttons - Basics Demo</title>
+ <link href="./stylesheets/button-basics.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ <!--[if lte IE 6]>
+ <link href='./stylesheets/ie6.css' rel='stylesheet' type='text/css' />
+ <![endif]-->
+</head>
+ <body>
+ <h1>Fancy Buttons</h1>
+ <div>
+ <button>Fancy!</button>
+ </div>
+ </body>
+</html>
@@ -1,15 +1,15 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
- <title>Fancy Buttons - Demo</title>
+ <title>Fancy Buttons - Color Demo</title>
<link href="./stylesheets/buttons.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href='./stylesheets/ie6.css' rel='stylesheet' type='text/css' />
<![endif]-->
</head>
<body>
- <h1>Fancy Buttons</h1>
+ <h1>Fancy Buttons - Color Demo</h1>
<div>
<button class="green">Click Me</button>
<a href="#" class="button blue">Click Me</a>
@@ -0,0 +1,26 @@
+@import "compass";
+@include global-reset;
+@include reset-html5;
+
+html { @include linear-gradient(color-stops(#145599, darken(#145599, 19))); height: 100%; background-color: #0e3b69;}
+body { background: none; text-align: center; padding-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; }
+
+#{headings()} { letter-spacing: -1px; margin: .4em 0 .8em; font-weight: bold; @include text-shadow(rgba(#000,.3), 1px, 1px, 4px)}
+
+h1 { font-size: 50px; }
+h2 { font-size: 30px; }
+
+div { background: #fff; width: 310px; margin: 0 auto;
+ border: 10px solid darken(#fff, 20);
+ @include box-shadow(rgba(#000, .4), 0, 0, 1px, 1px, inset);
+ @include border-radius(10px);
+ @include background-clip(padding-box);
+ padding: 40px 0;
+ }
+div.dark { background: #151515; width: 310px; margin: 0 auto;
+ border: 10px solid rgba(#000,1);
+ @include box-shadow(rgba(#fff, .1), 0, 0, 1px, 1px, inset);
+ @include border-radius(10px);
+ @include background-clip(padding-box);
+ padding: 40px 0;
+ }
@@ -0,0 +1,4 @@
+@import "page-styles";
+@import "fancy-buttons";
+
+button {@include fancy-button(#124c89, 26px, 1em, 4px);}
View
@@ -1,4 +1,3 @@
-$fb-allow-disabled: false
@import fancy-buttons
body
@@ -38,7 +37,7 @@ $heart_button: saturate(lighten($red, 2), 20)
.light
+fancy-button-colors-matte(#ddd)
.matte-blue
- +fancy-button-colors-matte($blue)
+ +fancy-button-colors($blue)
.green
+fancy-button-colors($green)
.red

0 comments on commit d52d398

Please sign in to comment.