Changeset 7788

Timestamp:

03/25/07 23:55:02 (22 months ago)

Author:

itorrey

Message:

updating the styling of the dijit buttons. Adding a span to wrap them so that we can do some advanced styling. Need to update the disabled style not to be active when clicked and moused over. Need to port the new styles to the final dijit classes. refs #2640

Location:

dijit/trunk/themes/tundra

Files:

• index.html (modified) (3 diffs)
• tundra.css (modified) (7 diffs)

dijit/trunk/themes/tundra/index.html

@@ -4 +4 @@
                 <link href="tundra.css" rel="stylesheet" type="text/css" />
                 <style type="text/css">
-                        button {
-                                margin:0 12px 0 0;
+                        
+                        body {
+                                background:#cddde9;
+                                background:#fff;
                         }
                         
@@ -16 +18 @@
                 
                 <h4>Button Widget Example</h4>
-                <button class="dojoButton">Button</button>
-                <button class="dojoButton">Button</button>
+                <span class="dojoButton dojoInlineBox"><button>Button</button></span>
                 
-                <button class="dojoButton dojoButtonDisabled" disabled="disabled">Disabled</button>
+                <span class="dojoButton dojoButtonDisabled dojoInlineBox"><button disabled="disabled">Disabled</button></span>
                 
                 <h4>Form Fields</h4>
@@ -26 +27 @@
                 <input type="text" class="dojoInputField dojoInputFieldValidationError" value="Test" /><br />
                 <input type="password" class="dojoinputField" id="passwordField" /><br />
-                <button class="dojoButton">Login</button>
+                <span class="dojoButton dojoInlineBox"><button>Login</button></span>
                 
         </body>

dijit/trunk/themes/tundra/tundra.css

@@ +1 @@
+
 /* To inline block elements, surround them with <fieldset class="dojoInlineBox"> */
 .dojoInlineBox {
+        
+        display:inline-block;
         display: -moz-inline-stack;
-        display:inline-block;
         _display:inline;
         border:0px;
@@ -13 +15 @@
 
 /*IE6 Hack */
-* html .dojoButton, 
+* html .dojoButton button, 
 * html .dojoInputField,
 * html .dojoMenu {
@@ -20 +22 @@
 }
 
+
+
+/*Dojo Button Rules*/
+
+.dojoButton {
+        background:#fff;
+        border-top:1px solid #dadada;
+        border-right:1px solid #a9a9a9;
+        border-bottom:1px solid #a9a9a9;
+        border-left:1px solid #dadada;
+        padding:0 0 1px 1px;
+}
+
+.dojoButton button {
+        background:#e2e2e2 url("dojoTundraGradientBg.png") repeat-x 0 0;
+        border:0;
+        border-left:0;
+        font-family: Myriad, Arial, Helvetica;
+        font-size:13px;
+        font-weight:normal;
+        padding:2px 4px;
+}
+
+.dojoButtonDisabled {
+        background:#dadada;
+        border-top:1px solid #dadada;
+        border-right:1px solid #a9a9a9;
+        border-bottom:1px solid #a9a9a9;
+        border-left:1px solid #dadada;
+}
+
+.dojoButtonDisabled button {
+        color:#787878;
+        background-image: url("dojoTundraGradientBgActive.png");
+}
+
+span.dojoButton:hover {
+        border-top:1px solid #80a5c2;
+        border-right:1px solid #42739a;
+        border-bottom:1px solid #42739a;
+        border-left:1px solid #80a5c2;
+}
+
+span.dojoButton:hover button {
+        color:#0e4978;
+}
+
+span.dojoButton:active {
+                border-top:1px solid #42739a;
+        border-right:1px solid #80a5c2;
+        border-bottom:1px solid #80a5c2;
+        border-left:1px solid #42739a;
+}
+
+span.dojoButton:active button {
+        background-image: url("dojoTundraGradientBgActive.png");
+        background-position:bottom left;
+}
+
+
 /* Base of Tundra default theme */
-.dojoButton, 
 .dojoInputField
 {
@@ -34 +95 @@
 
 
-/* Default Hover Styles */
-.dojoButton:hover, 
+/* Default Hover Styles */ 
 .dojoInputField:hover,
 .dojoMenuItemHover
@@ -44 +104 @@
 
 /* Default Active/Focus style*/
-.dojoButton:active, 
 .dojoInputField:focus,
 .dojoInputFieldFocused
@@ -54 +113 @@
 
 /* Default Disabled Styles*/
-.dojoButton[disabled],
 .dojoInputField[disabled],
-.dojoButtonDisabled,
 .dojoInputFieldDisabled,
 .dojoMenuItemDisabled {
@@ -65 +122 @@
 }
 
-.dojoButton[disabled]:active,
 .dojoInputField[disabled]:active,
-.dojoButtonDisabled:active,
 .dojoInputFieldDisabled:active {
         background-image: url("dojoTundraGradientBg.png");