SONAR-4910 SONAR-4884 Add active state for inputs, buttons and select2 dropdowns

9 files changed, 75 insertions, 9 deletions

diff --git a/sonar-server/src/main/webapp/stylesheets/mixins.css b/sonar-server/src/main/webapp/stylesheets/mixins.css
index e69de29bb2d..4b2b8a6e5df 100644
--- a/sonar-server/src/main/webapp/stylesheets/mixins.css
+++ b/sonar-server/src/main/webapp/stylesheets/mixins.css
@@ -0,0 +1,9 @@
+/*
+ * Fonts
+ */
+/*
+ * Colors
+ */
+/*
+ * Transitions
+ */
diff --git a/sonar-server/src/main/webapp/stylesheets/mixins.less b/sonar-server/src/main/webapp/stylesheets/mixins.less
index f6cdaf82046..fc56b89ba17 100644
--- a/sonar-server/src/main/webapp/stylesheets/mixins.less
+++ b/sonar-server/src/main/webapp/stylesheets/mixins.less
@@ -1,3 +1,5 @@
+@import "variables";
+
 .clearfix() {
   &:before, &:after { display: table; content: ""; line-height: 0; }
   &:after { clear: both; }
@@ -119,6 +121,10 @@
     background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
 }
 
+.trans(@property: all, @options: @defaultTransitionOptions) {
+  transition: @property @options;
+}
+
 .webkit-scrollbar() {
   &::-webkit-scrollbar {
     width: 11px;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator.css b/sonar-server/src/main/webapp/stylesheets/navigator.css
index a9fcb8021f7..acfe6ad6fb4 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator.css
@@ -4,6 +4,9 @@
 /*
  * Colors
  */
+/*
+ * Transitions
+ */
 .navigator-filters {
   margin-bottom: 10px;
   border-bottom: 1px solid #cdcdcd;
diff --git a/sonar-server/src/main/webapp/stylesheets/select2-sonar.css b/sonar-server/src/main/webapp/stylesheets/select2-sonar.css
index bf9ee365671..4b56deb8103 100644
--- a/sonar-server/src/main/webapp/stylesheets/select2-sonar.css
+++ b/sonar-server/src/main/webapp/stylesheets/select2-sonar.css
@@ -4,6 +4,9 @@
 /*
  * Colors
  */
+/*
+ * Transitions
+ */
 .select2-container .select2-choice {
   height: 20px;
   line-height: 20px;
@@ -12,6 +15,10 @@
   background: #fff;
   text-align: left;
 }
+.select2-container .select2-choice,
+.select2-container .select2-choices {
+  transition: border-color 0.3s ease;
+}
 .select2-container .select2-choice div {
   width: 19px;
   border: none;
@@ -27,6 +34,7 @@
 }
 .select2-container-active .select2-choice,
 .select2-container-active .select2-choices {
+  border-color: #4b9fd5;
   box-shadow: none;
 }
 .select2-dropdown-open .select2-choice {
@@ -37,16 +45,16 @@
   border-radius: 0;
 }
 .select2-drop-active {
-  border-color: #cdcdcd;
+  border-color: #4b9fd5;
 }
 .select2-dropdown-open.select2-drop-above .select2-choice,
 .select2-dropdown-open.select2-drop-above .select2-choices {
-  border-color: #cdcdcd;
+  border-color: #4b9fd5;
   border-radius: 0;
   background: #fff;
 }
 .select2-drop.select2-drop-above.select2-drop-active {
-  border-color: #cdcdcd;
+  border-color: #4b9fd5;
   border-radius: 0;
 }
 .select2-drop.select2-drop-above .select2-search input {
@@ -97,7 +105,7 @@
   background: #fff;
 }
 .select2-container-multi.select2-container-active .select2-choices {
-  border-color: #cdcdcd;
+  border-color: #4b9fd5;
   box-shadow: none;
 }
 .select2-container-multi .select2-choices .select2-search-field input {
diff --git a/sonar-server/src/main/webapp/stylesheets/select2-sonar.less b/sonar-server/src/main/webapp/stylesheets/select2-sonar.less
index a7dc806161f..39f0a7c6275 100644
--- a/sonar-server/src/main/webapp/stylesheets/select2-sonar.less
+++ b/sonar-server/src/main/webapp/stylesheets/select2-sonar.less
@@ -15,6 +15,11 @@
   text-align: left;
 }
 
+.select2-container .select2-choice,
+.select2-container .select2-choices {
+  .trans(border-color);
+}
+
 .select2-container .select2-choice div {
   width: 19px;
   border: none;
@@ -31,8 +36,10 @@
   background-position: -17px -1px;
 }
 
+
 .select2-container-active .select2-choice,
 .select2-container-active .select2-choices {
+  border-color: @highlighted;
   box-shadow: none;
 }
 
@@ -46,18 +53,18 @@
 }
 
 .select2-drop-active {
-  border-color: @darkGrey;
+  border-color: @highlighted;
 }
 
 .select2-dropdown-open.select2-drop-above .select2-choice,
 .select2-dropdown-open.select2-drop-above .select2-choices {
-  border-color: @darkGrey;
+  border-color: @highlighted;
   border-radius: 0;
   background: #fff;
 }
 
 .select2-drop.select2-drop-above.select2-drop-active {
-  border-color: @darkGrey;
+  border-color: @highlighted;
   border-radius: 0;
 }
 
@@ -119,7 +126,7 @@
 }
 
 .select2-container-multi.select2-container-active .select2-choices {
-  border-color: @darkGrey;
+  border-color: @highlighted;
   box-shadow: none;
 }
 
diff --git a/sonar-server/src/main/webapp/stylesheets/ui.css b/sonar-server/src/main/webapp/stylesheets/ui.css
index e7356a7706f..0caf2ce8e5d 100644
--- a/sonar-server/src/main/webapp/stylesheets/ui.css
+++ b/sonar-server/src/main/webapp/stylesheets/ui.css
@@ -4,6 +4,9 @@
 /*
  * Colors
  */
+/*
+ * Transitions
+ */
 input[type=text],
 input[type=password],
 input[type=email],
@@ -13,6 +16,7 @@ textarea {
   box-sizing: border-box;
   background: #fff;
   color: #444444;
+  transition: border-color 0.3s ease;
 }
 input[type=text]:active,
 input[type=password]:active,
@@ -22,6 +26,7 @@ input[type=text]:focus,
 input[type=password]:focus,
 input[type=email]:focus,
 textarea:focus {
+  border-color: #4b9fd5;
   box-shadow: none;
   outline: none;
 }
@@ -54,6 +59,7 @@ input[type=button] {
   text-decoration: none;
   cursor: pointer;
   outline: none;
+  transition: border-color 0.3s ease;
 }
 button:hover,
 .button:hover,
@@ -71,3 +77,9 @@ input[type=button]:active {
   background: #78bdea;
   color: #fff;
 }
+button:focus,
+.button:focus,
+input[type=submit]:focus,
+input[type=button]:focus {
+  border-color: #4b9fd5;
+}
diff --git a/sonar-server/src/main/webapp/stylesheets/ui.less b/sonar-server/src/main/webapp/stylesheets/ui.less
index d47414d7752..b4cca9c5621 100644
--- a/sonar-server/src/main/webapp/stylesheets/ui.less
+++ b/sonar-server/src/main/webapp/stylesheets/ui.less
@@ -1,5 +1,5 @@
-@import "mixins";
 @import "variables";
+@import "mixins";
 
 input[type=text],
 input[type=password],
@@ -9,9 +9,11 @@ textarea {
   .box-sizing(border-box);
   background: #fff;
   color: @baseFontColor;
+  .trans(border-color);
 
   &:active,
   &:focus {
+    border-color: @highlighted;
     box-shadow: none;
     outline: none;
   }
@@ -51,6 +53,7 @@ input[type=button] {
 
   cursor: pointer;
   outline: none;
+  .trans(border-color);
 
   &:hover {
     border-color: #5281a0;
@@ -63,4 +66,8 @@ input[type=button] {
     background: #78bdea;
     color: #fff;
   }
+
+  &:focus {
+    border-color: @highlighted;
+  }
 }
diff --git a/sonar-server/src/main/webapp/stylesheets/variables.css b/sonar-server/src/main/webapp/stylesheets/variables.css
index 6fbfac8e716..4b2b8a6e5df 100644
--- a/sonar-server/src/main/webapp/stylesheets/variables.css
+++ b/sonar-server/src/main/webapp/stylesheets/variables.css
@@ -4,3 +4,6 @@
 /*
  * Colors
  */
+/*
+ * Transitions
+ */
diff --git a/sonar-server/src/main/webapp/stylesheets/variables.less b/sonar-server/src/main/webapp/stylesheets/variables.less
index 6bd6a9e8706..c9aca6c5d94 100644
--- a/sonar-server/src/main/webapp/stylesheets/variables.less
+++ b/sonar-server/src/main/webapp/stylesheets/variables.less
@@ -15,3 +15,14 @@
 @white: #ffffff;
 @grey:  #efefef;
 @darkGrey: #cdcdcd;
+@blue: #4b9fd5;
+
+@highlighted: @blue;
+
+
+
+/*
+ * Transitions
+ */
+
+@defaultTransitionOptions: .3s ease;