From 42b277ecebccd3835f47ca0811afca666838e168 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran <alfredo@gitlab.com> Date: Fri, 19 Feb 2016 21:46:18 -0500 Subject: [PATCH] Make select2 design consistent --- app/assets/stylesheets/framework/buttons.scss | 7 ++ app/assets/stylesheets/framework/filters.scss | 2 +- app/assets/stylesheets/framework/selects.scss | 72 ++++++++++++------- .../stylesheets/framework/variables.scss | 1 + app/assets/stylesheets/pages/projects.scss | 4 +- 5 files changed, 57 insertions(+), 29 deletions(-) diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 5f193fa743..949b8fc294 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -68,6 +68,8 @@ @include btn-default; @include btn-white; + color: $gl-text-color; + &.btn-small, &.btn-sm { padding: 4px 10px; @@ -130,6 +132,11 @@ &.disabled { pointer-events: auto !important; } + + .caret { + margin-left: 5px; + color: $gray-darkest; + } } .btn-block { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index b7638c86bf..6a28a6ccbb 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -25,6 +25,6 @@ .issues-filters, .issues_bulk_update { .select2-container .select2-choice { - color: #444 !important; + // color: #444 !important; } } diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 3ee3443e34..603d8be782 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -2,38 +2,41 @@ .select2-container, .select2-container.select2-drop-above { .select2-choice { background: #FFF; - border-color: #DDD; - height: 36px; - padding: 6px $gl-padding; + border-color: $input-border; + height: 35px; + padding: $gl-vert-padding $gl-btn-padding; font-size: $gl-font-size; line-height: 1.42857143; - @include border-radius(2px); + @include border-radius($input-border-radius); .select2-arrow { - background: #FFF; - border-left: none; - padding-top: 5px; + width: auto; + background-image: none; + background-color: transparent; + border: none; + top: calc(50% - 12px); + right: 8px; + + b { + @extend .caret; + color: $gray-darkest; + } } .select2-chosen { - color: $gl-text-color; + margin-right: 15px; } - &.select2-default { - .select2-chosen { - color: #999; - } + + &:hover { + background-color: $gray-dark; + border-color: $border-white-normal; + color: #313236; } } } -.select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice{ - color: #7f8fa4; - border: 1px solid #e7e9ed; -} - - .select2-drop { @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); @include border-radius (0px); @@ -61,9 +64,8 @@ .select2-container-multi { .select2-choices { - @include border-radius(2px); + @include border-radius($input-border-radius); border-color: $input-border; - background: white; padding-left: $gl-padding / 2; .select2-search-field input { @@ -76,7 +78,6 @@ .select2-search-choice { margin: 8px 0 0 8px; - background: white; box-shadow: none; border-color: $input-border; color: $gl-text-color; @@ -93,6 +94,22 @@ } } +.select2-container-active { + .select2-choice, .select2-choices { + @include box-shadow(none); + } +} + +.select2-dropdown-open { + .select2-choice, .select2-choices { + outline: 0; + background-image: none; + border-color: #d6dae2; + background-color: $white-dark; + @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); + } +} + .select2-drop-active { border: 1px solid #BBB !important; margin-top: 4px; @@ -102,11 +119,6 @@ margin-bottom: 8px; } - .select2-search input { - background: #fafafa; - border-color: #DDD; - } - .select2-results { max-height: 350px; .select2-highlighted { @@ -115,6 +127,14 @@ } } +.select2-search input { + background: #fff image-url('select2.png') no-repeat 99% -22px; +} + +.select2-search input.select2-active { + background: #fff image-url('select2-spinner.gif') no-repeat 99%; +} + .select2-container { width: 100% !important; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index b838636263..6673ec8dfa 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -31,6 +31,7 @@ $gl-padding-top:10px; $gl-avatar-size: 40px; $secondary-text: #7f8fa4; $error-exclamation-point: #E62958; +$input-border-radius: 3px; /* * Color schema diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 046bae672f..2ac07209b0 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -191,10 +191,10 @@ .dropdown-menu { @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); - @include border-radius (0px); + @include border-radius ($input-border-radius); border: none; - padding: 16px 0; + padding: 10px 0; font-size: 14px; font-weight: 100; -- 2.30.9