Restyling of jquery-ui buttons in dialog box + various style fixes

bzr revid: mit@openerp.com-20120730154750-x40vpq9y9f492zvn

2 files changed, 33 insertions, 16 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 9b6cd67b51c..703683d4d96 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -148,7 +148,7 @@
 .openerp h4 {
   margin: 4px 0;
 }
-.openerp a.button:link, .openerp a.button:visited, .openerp button, .openerp input[type='submit'] {
+.openerp a.button:link, .openerp a.button:visited, .openerp button, .openerp input[type='submit'], .openerp .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
   display: inline-block;
   border: 1px solid #ababab;
   color: #404040;
@@ -173,7 +173,7 @@
   -webkit-font-smoothing: antialiased;
   outline: none;
 }
-.openerp a.button:hover, .openerp button:hover, .openerp input[type='submit']:hover {
+.openerp a.button:hover, .openerp button:hover, .openerp input[type='submit']:hover, .openerp .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-hover {
   background-color: #f6f6f6;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e3e3e3));
   background-image: -webkit-linear-gradient(top, #f6f6f6, #e3e3e3);
@@ -182,9 +182,11 @@
   background-image: -o-linear-gradient(top, #f6f6f6, #e3e3e3);
   background-image: linear-gradient(to bottom, #f6f6f6, #e3e3e3);
   cursor: pointer;
+  background-position: 0;
 }
-.openerp a.button:focus, .openerp button:focus, .openerp input[type='submit']:focus {
+.openerp a.button:focus, .openerp button:focus, .openerp input[type='submit']:focus, .openerp .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-focus {
   border: 1px solid #80bfff;
+  background-position: 0;
   background-color: #f6f6f6;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e3e3e3));
   background-image: -webkit-linear-gradient(top, #f6f6f6, #e3e3e3);
@@ -196,7 +198,7 @@
   -webkit-box-shadow: 0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
   box-shadow: 0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
 }
-.openerp a.button:active, .openerp a.button.active, .openerp button:active, .openerp button.active, .openerp input[type='submit']:active, .openerp input[type='submit'].active {
+.openerp a.button:active, .openerp a.button.active, .openerp button:active, .openerp button.active, .openerp input[type='submit']:active, .openerp input[type='submit'].active, .openerp .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-active {
   background-color: #e3e3e3;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f6f6f6));
   background-image: -webkit-linear-gradient(top, #e3e3e3, #f6f6f6);
@@ -230,11 +232,6 @@
 .openerp .ui-menu .ui-menu-item a.ui-state-active {
   background: #f0f0fa;
 }
-.openerp div.ui-widget-overlay {
-  background: black;
-  filter: alpha(opacity=30);
-  opacity: 0.3;
-}
 .openerp.ui-dialog {
   display: none;
   padding: 6px;
@@ -294,6 +291,9 @@
 .openerp.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   float: left;
 }
+.openerp.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
+  margin-right: 4px;
+}
 .openerp.ui-dialog .ui-dialog-titlebar-close {
   padding: 0;
 }
@@ -329,6 +329,9 @@
 .openerp.ui-dialog .oe_about a:hover {
   text-decoration: underline;
 }
+.openerp.ui-dialog .oe_about a:focus {
+  outline: none;
+}
 .openerp.ui-dialog .oe_about .oe_logo {
   margin-left: -6px;
 }
@@ -2539,3 +2542,9 @@
 .kitten-mode-activated > * {
   opacity: 0.7;
 }
+
+div.ui-widget-overlay {
+  background: black;
+  filter: alpha(opacity=30);
+  opacity: 0.3;
+}
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index dd4f9baee66..2a2d816241f 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -184,7 +184,7 @@ $sheet-max-width: 860px
         margin: 4px 0
     // }}}
     // Button style {{{
-    a.button:link, a.button:visited, button, input[type='submit']
+    a.button:link, a.button:visited, button, input[type='submit'], .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button
         display: inline-block
         border: 1px solid #ababab
         color: #404040
@@ -199,16 +199,18 @@ $sheet-max-width: 860px
         -webkit-font-smoothing: antialiased
         outline: none
 
-    a.button:hover, button:hover, input[type='submit']:hover
+    a.button:hover, button:hover, input[type='submit']:hover, .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-hover
         @include vertical-gradient(#f6f6f6, #e3e3e3)
         cursor: pointer
+        background-position: 0
 
-    a.button:focus, button:focus, input[type='submit']:focus
+    a.button:focus, button:focus, input[type='submit']:focus, .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-focus
         border: 1px solid #80bfff
+        background-position: 0
         @include vertical-gradient(#f6f6f6, #e3e3e3)
         @include box-shadow((0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, .8) inset))
 
-    a.button:active, a.button.active, button:active, button.active, input[type='submit']:active, input[type='submit'].active
+    a.button:active, a.button.active, button:active, button.active, input[type='submit']:active, input[type='submit'].active, .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-state-active
         @include vertical-gradient(#e3e3e3, #f6f6f6)
         @include box-shadow(none)
 
@@ -231,9 +233,7 @@ $sheet-max-width: 860px
             width: auto
             a.ui-state-active
                 background: #f0f0fa
-    div.ui-widget-overlay
-        background: black
-        @include opacity(0.3)
+
     // Modal box
     &.ui-dialog
         display: none
@@ -270,6 +270,8 @@ $sheet-max-width: 860px
                 margin: 0
             .ui-dialog-buttonset
                 float: left
+                .ui-button
+                    margin-right: 4px
         .ui-dialog-titlebar-close
             padding: 0
             .ui-icon-closethick
@@ -296,6 +298,8 @@ $sheet-max-width: 860px
                 color: #8A89BA
                 &:hover
                     text-decoration: underline
+                &:focus
+                    outline: none
             .oe_logo
                 margin-left: -6px
             .oe_bottom
@@ -1993,6 +1997,10 @@ $sheet-max-width: 860px
 
 // }}}
 
+// The jQuery-ui overlay is outside the .openerp div, please don't add indentation !!!
+div.ui-widget-overlay
+    background: black
+    @include opacity(0.3)
 
 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: