SONAR-4910 UI - flat design for input elements

5 files changed, 142 insertions, 65 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
index dceb971cd62..09c3d3152d4 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
@@ -24,11 +24,12 @@
     <%= javascript_include_tag 'sonar' -%>
   <% else %>
     <%= stylesheet_link_tag 'yui-reset-font', :media => 'all' %>
+    <%= stylesheet_link_tag 'jquery-ui', :media => 'all' %>
     <%= stylesheet_link_tag 'select2', :media => 'all' %>
     <%= stylesheet_link_tag 'select2-sonar', :media => 'all' %>
     <%= stylesheet_link_tag 'layout', :media => 'all' %>
-    <%= stylesheet_link_tag 'jquery-ui', :media => 'all' %>
     <%= stylesheet_link_tag 'style', :media => 'all' %>
+    <%= stylesheet_link_tag 'ui', :media => 'all' %>
     <%= stylesheet_link_tag 'sonar-colorizer', :media => 'all' %>
     <%= stylesheet_link_tag 'dashboard', :media => 'all' %>
     <%= stylesheet_link_tag 'select-list', :media => 'all' %>
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index 1edb4fff5af..709870353ff 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -164,60 +164,6 @@ a.external {
   vertical-align: text-bottom;
 }
 
-button, .button, input[type="submit"], input[type="button"] {
-  font-weight: bold;
-  font-size: 90%;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: 1px 1px 0 #FFFFFF;
-
-  cursor: pointer;
-  outline: none;
-  margin: 0 1px;
-  padding: 2px 10px;
-  -webkit-border-radius: .5em;
-  -moz-border-radius: .5em;
-  border-radius: .5em;
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-
-  color: #333;
-  border: 1px solid #CCC;
-  background: #EBEBEB;
-  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E7E7E7));
-  background: -moz-linear-gradient(top, #FFFFFF, #E7E7E7);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FFFFFF', endColorstr = '#E7E7E7');
-
-  vertical-align: baseline;
-  display: inline-block;
-  /* zoom and *display = ie7 hack for display:inline-block */
-  zoom: 1;
-  *display: inline;
-}
-
-button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover {
-  text-decoration: none;
-  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
-  color: #FFFFFF;
-  border: 1px solid #5281a0;
-  background: #4B9FD5;
-  background: -webkit-gradient(linear, left top, left bottom, from(#78bdea), to(#4B9FD5));
-  background: -moz-linear-gradient(top, #78bdea, #4B9FD5);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#78bdea', endColorstr = '#4B9FD5');
-}
-
-button:active, .button:active, input[type="submit"]:active, input[type="button"]:active {
-  position: relative;
-  top: 1px;
-  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
-  color: #FFFFFF;
-  border: solid 1px #2790C0;
-  background: -webkit-gradient(linear, left top, left bottom, from(#4B9FD5), to(#78bdea));
-  background: -moz-linear-gradient(top, #4B9FD5, #78bdea);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#4B9FD5', endColorstr = '#78bdea');
-}
-
 .red-button {
   color: #990000 !important;
 }
@@ -2378,16 +2324,6 @@ ul.modal-head-metadata li {
   display: none;
 }
 
-input[type=text], input[type=password] {
-  height: 18px;
-  padding: 0 3px;
-  color: #444;
-}
-
-textarea {
-  padding: 3px;
-}
-
 textarea.width100 {
   width: 100%;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
diff --git a/sonar-server/src/main/webapp/stylesheets/ui.css b/sonar-server/src/main/webapp/stylesheets/ui.css
new file mode 100644
index 00000000000..e7356a7706f
--- /dev/null
+++ b/sonar-server/src/main/webapp/stylesheets/ui.css
@@ -0,0 +1,73 @@
+/*
+ * Fonts
+ */
+/*
+ * Colors
+ */
+input[type=text],
+input[type=password],
+input[type=email],
+textarea {
+  border: 1px solid #cdcdcd;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #fff;
+  color: #444444;
+}
+input[type=text]:active,
+input[type=password]:active,
+input[type=email]:active,
+textarea:active,
+input[type=text]:focus,
+input[type=password]:focus,
+input[type=email]:focus,
+textarea:focus {
+  box-shadow: none;
+  outline: none;
+}
+input[type=text],
+input[type=password],
+input[type=email] {
+  height: 22px;
+  padding: 0 3px;
+}
+textarea {
+  padding: 3px;
+}
+button,
+.button,
+input[type=submit],
+input[type=button] {
+  display: inline-block;
+  vertical-align: baseline;
+  height: 22px;
+  margin: 0 1px;
+  padding: 2px 10px;
+  border: 1px solid #cdcdcd;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #f4f4f4;
+  color: #444444;
+  font-weight: bold;
+  font-size: 13px;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+}
+button:hover,
+.button:hover,
+input[type=submit]:hover,
+input[type=button]:hover {
+  border-color: #5281a0;
+  background: #4b9fd5;
+  color: #fff;
+}
+button:active,
+.button:active,
+input[type=submit]:active,
+input[type=button]:active {
+  border-color: #2790c0;
+  background: #78bdea;
+  color: #fff;
+}
diff --git a/sonar-server/src/main/webapp/stylesheets/ui.less b/sonar-server/src/main/webapp/stylesheets/ui.less
new file mode 100644
index 00000000000..d47414d7752
--- /dev/null
+++ b/sonar-server/src/main/webapp/stylesheets/ui.less
@@ -0,0 +1,66 @@
+@import "mixins";
+@import "variables";
+
+input[type=text],
+input[type=password],
+input[type=email],
+textarea {
+  border: 1px solid @darkGrey;
+  .box-sizing(border-box);
+  background: #fff;
+  color: @baseFontColor;
+
+  &:active,
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+input[type=text],
+input[type=password],
+input[type=email] {
+  height: 22px;
+  padding: 0 3px;
+}
+
+textarea {
+  padding: 3px;
+}
+
+button,
+.button,
+input[type=submit],
+input[type=button] {
+  display: inline-block;
+  vertical-align: baseline;
+  height: 22px;
+  margin: 0 1px;
+  padding: 2px 10px;
+
+  border: 1px solid @darkGrey;
+  .box-sizing(border-box);
+
+  background: #f4f4f4;
+
+  color: @baseFontColor;
+  font-weight: bold;
+  font-size: @baseFontSize;
+  text-align: center;
+  text-decoration: none;
+
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    border-color: #5281a0;
+    background: #4b9fd5;
+    color: #fff;
+  }
+
+  &:active {
+    border-color: #2790c0;
+    background: #78bdea;
+    color: #fff;
+  }
+}
diff --git a/sonar-server/wro.xml b/sonar-server/wro.xml
index 56640c1c029..215716a06c4 100644
--- a/sonar-server/wro.xml
+++ b/sonar-server/wro.xml
@@ -9,6 +9,7 @@
     <css>/stylesheets/select2-sonar.css</css>
     <css>/stylesheets/layout.css</css>
     <css>/stylesheets/style.css</css>
+    <css>/stylesheets/ui.css</css>
     <css>/stylesheets/sonar-colorizer.css</css>
     <css>/stylesheets/dashboard.css</css>
     <css>/stylesheets/select-list.css</css>