Adjusted alignment for the new label form

3 files changed, 33 insertions, 15 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 0fb7d94d0dd..20afc5c9dc0 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -183,7 +183,7 @@
 }
 
 .dropdown-select {
-  width: 280px;
+  width: 300px;
 }
 
 .dropdown-menu-align-right {
@@ -237,7 +237,7 @@
 
 .dropdown-title-button {
   position: absolute;
-  top: -1px;
+  top: 0;
   padding: 0;
   color: $dropdown-title-btn-color;
   font-size: 14px;
@@ -357,8 +357,9 @@
 .dropdown-label-box {
   position: relative;
   top: 3px;
+  margin-right: 5px;
   display: inline-block;
-  width: 20px;
-  height: 16px;
-  border-radius: 3px;
+  width: 15px;
+  height: 15px;
+  border-radius: $border-radius-base;
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index be626678bd7..b014031e758 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -168,13 +168,13 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
 */
 $dropdown-bg: #fff;
 $dropdown-link-color: #555;
-$dropdown-link-hover-bg: rgba(#000, .04);
+$dropdown-link-hover-bg: $row-hover;
 $dropdown-border-color: rgba(#000, .1);
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
 $dropdown-header-color: #959494;
 $dropdown-title-btn-color: #bfbfbf;
-$dropdown-input-color: #c7c7c7;
+$dropdown-input-color: #555;
 $dropdown-input-focus-border: rgb(58, 171, 240);
 $dropdown-input-focus-shadow: rgba(#000, .2);
 $dropdown-loading-bg: rgba(#fff, .6);
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 3c13573c8fe..4e02ec4e891 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -9,28 +9,45 @@
   }
 
   &.suggest-colors-dropdown {
-    margin-bottom: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-radius: $border-radius-base;
+    overflow: hidden;
 
     a {
       @include border-radius(0);
-      width: 36.7px;
+      width: (100% / 7);
       margin-right: 0;
       margin-bottom: -5px;
     }
   }
 }
 
-.dropdown-label-color-preview {
-  display: none;
-  margin-top: 5px;
-  width: 100%;
-  height: 25px;
+.dropdown-new-label {
+  .dropdown-content {
+    max-height: 260px;
+  }
+}
+
+.dropdown-label-color-input {
+  position: relative;
+  margin-bottom: 10px;
 
   &.is-active {
-    display: block;
+    padding-left: 32px;
   }
 }
 
+.dropdown-label-color-preview {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  border-top-left-radius: $border-radius-base;
+  border-bottom-left-radius: $border-radius-base;
+}
+
 .label-row {
   .label {
     padding: 9px;