Merge remote-tracking branch 'origin/master' into dockerfile-templatesdockerfile-templates

1 files changed, 76 insertions, 44 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 3e34ec98427..889366d6ddf 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -8,6 +8,12 @@
   }
 }
 
+@mixin chevron-active {
+  .fa-chevron-down {
+    color: $gray-darkest;
+  }
+}
+
 .open {
   .dropdown-menu,
   .dropdown-menu-nav {
@@ -19,48 +25,30 @@
     }
   }
 
+  .dropdown-toggle,
   .dropdown-menu-toggle {
-    border-color: $dropdown-toggle-hover-border-color;
-
-    .fa {
-      color: $dropdown-toggle-hover-icon-color;
-    }
+    @include chevron-active;
+    border-color: $gray-darkest;
   }
 }
 
-.dropdown-menu-toggle {
-  position: relative;
-  width: 160px;
-  padding: 6px 20px 6px 10px;
-  background-color: $dropdown-toggle-bg;
-  color: $dropdown-toggle-color;
-  font-size: 15px;
+.dropdown-toggle {
+  padding: 6px 8px 6px 10px;
+  background-color: $white-light;
+  color: $gl-text-color;
+  font-size: 14px;
   text-align: left;
   border: 1px solid $border-color;
   border-radius: $border-radius-base;
-  outline: 0;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 
-  .fa {
-    position: absolute;
-    top: 10px;
-    right: 8px;
-    color: $dropdown-toggle-icon-color;
-
-    &.fa-spinner {
-      font-size: 16px;
-      margin-top: -8px;
-    }
+  &[disabled] {
+    background-color: $input-bg-disabled;
+    cursor: not-allowed;
   }
 
-  &:hover, {
-    border-color: $dropdown-toggle-hover-border-color;
-
-    .fa {
-      color: $dropdown-toggle-hover-icon-color;
-    }
+  &.no-outline {
+    outline: 0;
   }
 
   &.large {
@@ -83,6 +71,51 @@
     max-width: 100%;
     padding-right: 25px;
   }
+
+  .fa {
+    color: $gray-darkest;
+  }
+
+  .fa-chevron-down {
+    font-size: $dropdown-chevron-size;
+    position: relative;
+    top: -3px;
+    margin-left: 5px;
+  }
+
+  &:hover {
+    @include chevron-active;
+    border-color: $gray-darkest;
+  }
+
+  &:focus:active {
+    @include chevron-active;
+    border-color: $dropdown-toggle-active-border-color;
+  }
+}
+
+.dropdown-menu-toggle {
+  @extend .dropdown-toggle;
+  padding-right: 20px;
+  position: relative;
+  width: 163px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  .fa {
+    position: absolute;
+
+    &.fa-spinner {
+      font-size: 16px;
+      margin-top: -8px;
+    }
+  }
+
+  .fa-chevron-down {
+    position: absolute;
+    top: 11px;
+    right: 8px;
+  }
 }
 
 .dropdown-menu,
@@ -95,10 +128,10 @@
   width: 240px;
   margin-top: 2px;
   margin-bottom: 0;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: normal;
   padding: 8px 0;
-  background-color: $dropdown-bg;
+  background-color: $white-light;
   border: 1px solid $dropdown-border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
@@ -155,7 +188,6 @@
     &.is-focused {
       background-color: $dropdown-link-hover-bg;
       text-decoration: none;
-      outline: 0;
     }
 
     &.dropdown-menu-empty-link {
@@ -169,7 +201,7 @@
     }
 
     .icon-play {
-      fill: $table-text-gray;
+      fill: $gl-gray-light;
       margin-right: 6px;
       height: 12px;
       width: 11px;
@@ -177,7 +209,7 @@
   }
 
   .dropdown-header {
-    color: $dropdown-header-color;
+    color: $gl-gray-light;
     font-size: 13px;
     line-height: 22px;
     padding: 0 10px;
@@ -190,7 +222,7 @@
   .unclickable {
     cursor: not-allowed;
     padding: 5px 8px;
-    color: $dropdown-header-color;
+    color: $gl-gray-light;
   }
 }
 
@@ -348,7 +380,7 @@
     position: absolute;
     top: 10px;
     right: 20px;
-    color: #c7c7c7;
+    color: $dropdown-input-fa-color;
     font-size: 12px;
     pointer-events: none;
   }
@@ -501,7 +533,7 @@
     .ui-datepicker-calendar {
       .ui-state-hover,
       .ui-state-active {
-        color: #fff;
+        color: $white-light;
         border: 0;
       }
     }
@@ -561,7 +593,7 @@
 
     .ui-datepicker-title {
       color: $gl-gray;
-      font-size: 15px;
+      font-size: 14px;
       line-height: 1;
       font-weight: normal;
     }
@@ -569,14 +601,14 @@
 
   th {
     padding: 2px 0;
-    color: $calendar-header-color;
+    color: $note-disabled-comment-color;
     font-weight: normal;
     text-transform: lowercase;
     border-top: 1px solid $calendar-border-color;
   }
 
   .ui-datepicker-unselectable {
-    background-color: $calendar-unselectable-bg;
+    background-color: $gray-light;
   }
 }
 
@@ -588,11 +620,11 @@
 
 .dropdown-menu-inner-content {
   display: block;
-  color: $gl-placeholder-color;
+  color: $gl-gray-light;
 }
 
 .dropdown-toggle-text {
   &.is-default {
-    color: $gl-placeholder-color;
+    color: $gl-gray-light;
   }
 }