diff options
author | Jacob Schatz <jschatz1@gmail.com> | 2016-02-23 15:07:14 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz1@gmail.com> | 2016-02-23 15:07:14 +0300 |
commit | b323e4dcf1a3198eda1a1657cb35dc914352706f (patch) | |
tree | e6beb4cd12226250624895f7224630b1ff6594c9 | |
parent | 884094a77e19b225345b028e64a5355747e716dd (diff) | |
parent | 8f5e1b9fb5d377778a0254869e2129a70c2cf7ec (diff) |
Merge branch 'issue_11874' into 'master'
Fixes dropdown appearance and makes it look accordingly to current design
Fixes #11874
See merge request !2920
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/common.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/filters.scss | 7 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/selects.scss | 147 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 5 |
6 files changed, 127 insertions, 56 deletions
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 5f193fa7434..50aa170d24c 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -7,7 +7,7 @@ &:focus, &:active { outline: none; - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + @include box-shadow($gl-btn-active-background); } } @@ -28,7 +28,7 @@ } &:active { - @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); + @include box-shadow ($gl-btn-active-background); background-color: $dark; border-color: $border-dark; @@ -68,6 +68,12 @@ @include btn-default; @include btn-white; + color: $gl-text-color; + + &:focus:active { + outline: 0; + } + &.btn-small, &.btn-sm { padding: 4px 10px; @@ -130,6 +136,11 @@ &.disabled { pointer-events: auto !important; } + + .caret { + margin-left: 5px; + color: $gray-darkest; + } } .btn-block { @@ -179,7 +190,7 @@ } .active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + @include box-shadow($gl-btn-active-background); border: 1px solid #c6cacf !important; background-color: #e4e7ed !important; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 0ddbf612543..8f753f581bb 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -56,6 +56,10 @@ hr { margin: $gl-padding 0; } +.dropdown-menu { + margin: 6px 0 0; +} + .dropdown-menu > li > a { text-shadow: none; } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index b7638c86bfa..eab41628677 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -21,10 +21,3 @@ } } } - -.issues-filters, -.issues_bulk_update { - .select2-container .select2-choice { - color: #444 !important; - } -} diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 3ee3443e349..7bf04e4ad74 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -1,49 +1,53 @@ /** Select2 selectbox style override **/ +.select2-container { + width: 100% !important; +} + .select2-container, .select2-container.select2-drop-above { .select2-choice { - background: #FFF; - border-color: #DDD; - height: 36px; - padding: 6px $gl-padding; + background: #fff; + border-color: $input-border; + border-color: $border-white-light; + 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($border-radius-default); .select2-arrow { - background: #FFF; - border-left: none; - padding-top: 5px; + background-image: none; + background-color: transparent; + border: none; + padding-top: 6px; + padding-right: 10px; + + 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: $gl-text-color; } } } -.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); - - padding: 16px; - border: none !important; + @include border-radius ($border-radius-default); + border: none; } .select2-results .select2-result-label { - padding: 9px; + padding: 10px 15px; } .select2-drop{ @@ -56,15 +60,30 @@ .select2-results li.select2-result-with-children > .select2-result-label { font-weight: 600; - color: #313236; + color: $gl-text-color; +} + +.select2-container-active { + .select2-choice, .select2-choices { + @include box-shadow(none); + } +} + +.select2-dropdown-open { + .select2-choice { + border-color: $border-white-normal; + outline: 0; + background-image: none; + background-color: $white-dark; + @include box-shadow($gl-btn-active-gradient); + } } .select2-container-multi { .select2-choices { - @include border-radius(2px); + @include border-radius($border-radius-default); border-color: $input-border; - background: white; - padding-left: $gl-padding / 2; + background: none; .select2-search-field input { padding: $gl-padding / 2; @@ -76,14 +95,16 @@ .select2-search-choice { margin: 8px 0 0 8px; - background: white; box-shadow: none; border-color: $input-border; color: $gl-text-color; line-height: 15px; + background-color: $background-color; + background-image: none; .select2-search-choice-close { - top: 5px; + top: 4px; + left: 3px; } &.select2-search-choice-focus { @@ -91,22 +112,25 @@ } } } + + &.select2-container-active .select2-choices, + &.select2-dropdown-open .select2-choices { + border-color: $border-white-normal; + @include box-shadow($gl-btn-active-gradient); + } +} + +.select2-container-multi .select2-choices .select2-search-choice { } .select2-drop-active { - border: 1px solid #BBB !important; - margin-top: 4px; - font-size: 13px; + margin-top: 6px; + font-size: 14px; &.select2-drop-above { margin-bottom: 8px; } - .select2-search input { - background: #fafafa; - border-color: #DDD; - } - .select2-results { max-height: 350px; .select2-highlighted { @@ -115,8 +139,34 @@ } } -.select2-container { - width: 100% !important; +.select2-search { + padding: 15px 15px 5px; + + .select2-drop-auto-width & { + padding: 15px 15px 5px; + } +} + +.select2-search input { + padding: 2px 25px 2px 5px; + background: #fff image-url('select2.png'); + background-repeat: no-repeat; + background-position: right 0px bottom 6px; + border: 1px solid $input-border; + @include border-radius($border-radius-default); + @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); + + &:focus { + border-color: $input-border-focus; + } +} + +.select2-search input.select2-active { + background-color: #fff; + background-image: image-url('select2-spinner.gif') !important; + background-repeat: no-repeat; + background-position: right 5px center !important; + background-size: 16px 16px !important; } /** Branch/tag selector **/ @@ -124,10 +174,19 @@ width: 160px !important; } -.ajax-users-dropdown, .ajax-project-users-dropdown { - .select2-search { - padding-top: 2px; - } +.select2-results .select2-no-results, +.select2-results .select2-searching, +.select2-results .select2-ajax-error, +.select2-results .select2-selection-limit { + background: $gray-light; + display: list-item; + padding: 10px 15px; +} + + +.select2-results { + margin: 0; + padding: 10px 0; } .ajax-users-select { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index b8386362637..04db0da73d1 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; +$border-radius-default: 3px; /* * Color schema @@ -100,6 +101,8 @@ $gl-success: $green-normal; $gl-info: $blue-normal; $gl-warning: $orange-normal; $gl-danger: $red-normal; +$gl-btn-active-background: rgba(0, 0, 0, 0.12); +$gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background; /* * Commit Diff Colors diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 542ac896f6b..b86d1a98723 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -32,6 +32,7 @@ .cover-controls { .project-settings-dropdown { margin-left: 10px; + display: inline-block; } } @@ -186,10 +187,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 ($border-radius-default); border: none; - padding: 16px 0; + padding: 10px 0; font-size: 14px; font-weight: 100; |