diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 5f193fa743451ba35448218418ff075b0dc7cccb..949b8fc294ad6c7eb6b86f5f0bf1fa4ef0f3052b 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 b7638c86bfa12f5f0346205e5612f1cdb820a67b..6a28a6ccbb19f122bf943a695e6282c46c4f3e51 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 3ee3443e3499ee99b36fe41c529eb53e8743986f..603d8be78236e21f4f573ae3d797d34190e28916 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 b838636263750c4bc2f7d7bd107b38fd4237b43e..6673ec8dfa15185c9e63f71bd074224c97afc733 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 046bae672fcf19b781083bdddbdf614ce6112812..2ac07209b0249c84d7c7a910576c0f15fc5f3d4a 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;