Commit 96b2959fe394835c53c248938a76011234f1d49d
1 parent
378ae951
Exists in
master
and in
4 other branches
Styled chosen css. Lighter box shadow for blocks
Showing
2 changed files
with
58 additions
and
25 deletions
Show diff stats
app/assets/stylesheets/main.scss
| @@ -3,10 +3,11 @@ | @@ -3,10 +3,11 @@ | ||
| 3 | @import 'font-awesome'; | 3 | @import 'font-awesome'; |
| 4 | 4 | ||
| 5 | /** GitLab colors **/ | 5 | /** GitLab colors **/ |
| 6 | -$link_color:#3A89A3; | ||
| 7 | -$blue_link: #2fa0bb; | ||
| 8 | -$style_color: #474d57; | 6 | +$link_color: #3A89A3; |
| 7 | +$blue_link: #2FA0BB; | ||
| 8 | +$style_color: #474D57; | ||
| 9 | $hover: #D9EDF7; | 9 | $hover: #D9EDF7; |
| 10 | +$hover_border: #ADF; | ||
| 10 | 11 | ||
| 11 | /** GitLab Fonts **/ | 12 | /** GitLab Fonts **/ |
| 12 | @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } | 13 | @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } |
| @@ -19,9 +20,9 @@ $hover: #D9EDF7; | @@ -19,9 +20,9 @@ $hover: #D9EDF7; | ||
| 19 | } | 20 | } |
| 20 | 21 | ||
| 21 | @mixin solid_shade { | 22 | @mixin solid_shade { |
| 22 | - -moz-box-shadow: 0 0 0 3px #eee; | ||
| 23 | - -webkit-box-shadow: 0 0 0 3px #eee; | ||
| 24 | - box-shadow: 0 0 0 3px #eee; | 23 | + -moz-box-shadow: 0 0 0 3px #f1f1f1; |
| 24 | + -webkit-box-shadow: 0 0 0 3px #f1f1f1; | ||
| 25 | + box-shadow: 0 0 0 3px #f1f1f1; | ||
| 25 | } | 26 | } |
| 26 | 27 | ||
| 27 | @mixin border-radius($radius) { | 28 | @mixin border-radius($radius) { |
| @@ -64,6 +65,14 @@ $hover: #D9EDF7; | @@ -64,6 +65,14 @@ $hover: #D9EDF7; | ||
| 64 | background-image: -o-linear-gradient($from, $to); | 65 | background-image: -o-linear-gradient($from, $to); |
| 65 | } | 66 | } |
| 66 | 67 | ||
| 68 | +@mixin bg-light-gray-gradient { | ||
| 69 | + background:#f1f1f1; | ||
| 70 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1)); | ||
| 71 | + background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 72 | + background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 73 | + background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 74 | +} | ||
| 75 | + | ||
| 67 | @mixin bg-gray-gradient { | 76 | @mixin bg-gray-gradient { |
| 68 | background:#eee; | 77 | background:#eee; |
| 69 | background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | 78 | background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); |
app/assets/stylesheets/ref_select.scss
| @@ -19,31 +19,66 @@ | @@ -19,31 +19,66 @@ | ||
| 19 | margin-right: 10px; | 19 | margin-right: 10px; |
| 20 | 20 | ||
| 21 | .chzn-drop { | 21 | .chzn-drop { |
| 22 | - margin:7px 0; | ||
| 23 | min-width: 400px; | 22 | min-width: 400px; |
| 24 | - border: 2px solid $blue_link; | ||
| 25 | - @include border-radius(4px); | 23 | + .chzn-results { |
| 24 | + max-height:300px; | ||
| 25 | + } | ||
| 26 | + .chzn-search input { | ||
| 27 | + min-width:365px; | ||
| 28 | + } | ||
| 29 | + } | ||
| 30 | +} | ||
| 31 | + | ||
| 32 | +/** Fix for Search Dropdown Border **/ | ||
| 33 | +.chzn-container { | ||
| 34 | + .chzn-search { | ||
| 35 | + input:focus { | ||
| 36 | + -webkit-box-shadow: none; | ||
| 37 | + -moz-box-shadow: none; | ||
| 38 | + box-shadow: none; | ||
| 39 | + } | ||
| 40 | + } | ||
| 41 | + | ||
| 42 | + .chzn-drop { | ||
| 43 | + margin:7px 0; | ||
| 44 | + min-width: 200px; | ||
| 45 | + border: 1px solid #bbb; | ||
| 46 | + border-radius:0; | ||
| 26 | 47 | ||
| 27 | .chzn-results { | 48 | .chzn-results { |
| 49 | + margin-top: 5px; | ||
| 28 | max-height:300px; | 50 | max-height:300px; |
| 29 | 51 | ||
| 30 | .group-result { | 52 | .group-result { |
| 31 | - color: $blue_link; | 53 | + color: $style_color; |
| 54 | + border-bottom: 1px solid #EEE; | ||
| 55 | + padding: 8px; | ||
| 32 | } | 56 | } |
| 33 | .active-result { | 57 | .active-result { |
| 58 | + border-radius: 0; | ||
| 59 | + | ||
| 34 | &.highlighted { | 60 | &.highlighted { |
| 35 | - background: $blue_link; | 61 | + background: $hover; |
| 62 | + color: $style_color; | ||
| 63 | + } | ||
| 64 | + &.result-selected { | ||
| 65 | + background: #EEE; | ||
| 66 | + border-left: 4px solid #CCC; | ||
| 36 | } | 67 | } |
| 37 | } | 68 | } |
| 38 | } | 69 | } |
| 39 | 70 | ||
| 40 | - .chzn-search input { | ||
| 41 | - min-width:365px; | 71 | + .chzn-search { |
| 72 | + @include bg-gray-gradient; | ||
| 73 | + input { | ||
| 74 | + min-width:165px; | ||
| 75 | + border-color: #CCC; | ||
| 76 | + } | ||
| 42 | } | 77 | } |
| 43 | } | 78 | } |
| 44 | 79 | ||
| 45 | .chzn-single { | 80 | .chzn-single { |
| 46 | - @include bg-gray-gradient; | 81 | + @include bg-light-gray-gradient; |
| 47 | 82 | ||
| 48 | div { | 83 | div { |
| 49 | background:transparent; | 84 | background:transparent; |
| @@ -55,14 +90,3 @@ | @@ -55,14 +90,3 @@ | ||
| 55 | } | 90 | } |
| 56 | } | 91 | } |
| 57 | } | 92 | } |
| 58 | - | ||
| 59 | -/** Fix for Search Dropdown Border **/ | ||
| 60 | -.chzn-container { | ||
| 61 | - .chzn-search { | ||
| 62 | - input:focus { | ||
| 63 | - -webkit-box-shadow: none; | ||
| 64 | - -moz-box-shadow: none; | ||
| 65 | - box-shadow: none; | ||
| 66 | - } | ||
| 67 | - } | ||
| 68 | -} |