New button style

git-svn-id: svn://cherokee-project.com/CTK/trunk@5331 5dc97367-97f1-0310-9951-d761b3857238
cherokee · Jul 18, 2010 · b6c27f2 · b6c27f2
1 parent 638a21b
commit b6c27f2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 94 deletions.
diff --git a/CTK/Button.py b/CTK/Button.py
@@ -46,7 +46,7 @@ def Render (self):
         caption = self.caption
         props   = props_to_str (self.props)
 
-        html = '<a id="%(id)s" %(props)s><span>%(caption)s</span></a>' %(locals())
+        html = '<button id="%(id)s" %(props)s>%(caption)s</button>' %(locals())
 
         render = Widget.Render (self)
         render.html += html

diff --git a/static/css/CTK.css b/static/css/CTK.css
@@ -130,101 +130,34 @@ html>body #container { min-height: 100%; }
 
 /* Button
  */
-button { border: 0; margin: 0; padding: 0; outline: none; background: #fff; }
-a.button, .button-outter {
-    border: 0;
-    margin: 0;
-    padding: 0;
+button { 
+    border: 0; 
+    margin: 0; 
+    padding: 6px 8px; 
     outline: none;
-    background: transparent url('/CTK/images/bg-button-a.png') no-repeat scroll top right;
-    color: #fff;
-    display: block;
-    float: left;
-    height: 24px;
-    margin-right: 6px;
-    padding-right: 18px;
-    text-decoration: none;
-}
-
-a.button.butlight {
-    background: transparent url('/CTK/images/bg-button-a-light.png') no-repeat scroll top right;
     color: #27c;
-    text-shadow: #fff 0px 1px 0px;
-}
-
-a.button.butbig {
-    background: transparent url('/CTK/images/bg-button-a-big.png') no-repeat scroll top right;
-    color: #def;
-    text-transform:uppercase;
     font-weight: bold;
-    text-shadow: #234b81 0px 1px 0px;
-    height: 27px;
-}
-
-a.button span, .button-inner {
-    outline: none;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    font-size: 12px;
-    background: transparent url('/CTK/images/bg-button-span.png') no-repeat;
-    display: block;
-    line-height: 14px;
-    padding: 5px 0 5px 18px;
-}
-a.button.butlight span {
-    background: transparent url('/CTK/images/bg-button-span-light.png') no-repeat;
-}
-a.button.butbig span {
-    background: transparent url('/CTK/images/bg-button-span-big.png') no-repeat;
-    font-size: 14px;
-    line-height: 14px;
-    padding: 6px 0 7px 18px;
-}
-a.button.butlight.butstart span {
-    background: transparent url('/CTK/images/bg-button-span-start-light.png') no-repeat;
-    padding-left: 38px;
-}
-a.button.butlight.butstop span {
-    background: transparent url('/CTK/images/bg-button-span-stop-light.png') no-repeat;
-    padding-left: 38px;
-}
-
-a.button:active, button:active .button-outter {
-    background-position: bottom right;
-    color: #fff;
-    outline: none;
-}
-
-a.button.butlight:active {
-    color: #469;
-}
-a.button.butbig:active {
-    color: #cfddef;
-    background-position: -27px right;
-}
-
-a.button:active span, button:active .button-inner {
-    background-position: bottom left;
-}
-
-a.button.butlight:active span{
-    background-position: bottom left;
-}
-a.button.butbig:active span{
-    background-position: -27px left;
-}
-
-a.button.butbig.saved {
-    color: #5c81b5;
-    background-position: bottom right;
-    cursor: default;
-}
-a.button.butbig.saved span {
-    text-shadow: none;
-    background-position: bottom left;
-}
-
+    text-shadow: #fff 0px 1px 0px; 
+    border: 1px solid #cde;
+    -moz-border-radius: 4px; 
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background: #2277cc;
+    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ddeeff));
+    background: -moz-linear-gradient(top,  #ffffff,  #ddeeff);
+    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ddeeff');
+    -moz-box-shadow: inset 1px 1px 0 #fff;
+    -webkit-box-shadow: inset 1px 1px 0 #fff;
+    box-shadow: inset 1px 1px 0 #fff;
+}
+button:active { 
+    -moz-box-shadow: inset 0 1px 4px #def;
+    -webkit-box-shadow: inset 0 1px 4px #def;
+    box-shadow: inset 0 1px 4px #def; 
+    padding: 7px 8px 5px 8px;
+}
+
+button:hover { cursor: pointer; }
 
 /* Styles for CTK/Tabs.py
  */
@@ -388,7 +321,7 @@ a.helpbutton span {
 .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
 .ui-dialog .ui-dialog-content { border: 0; padding: 16px; background: #fff; overflow: auto; zoom: 1; }
 .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background: #fff; padding: 16px; border-top: 1px solid #cde; }
-.ui-dialog .ui-dialog-buttonpane button { float: right; cursor: pointer; width:auto; overflow:visible; }
+.ui-dialog .ui-dialog-buttonpane button { float: right; margin-left: 8px; cursor: pointer; width:auto; overflow:visible; }
 .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
 .ui-draggable .ui-dialog-titlebar { cursor: move; }
 .ui-dialog.ui-corner-all { -moz-border-radius: 8px; -webkit-border-radius: 8px; }