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 | 3 | @import 'font-awesome'; |
| 4 | 4 | |
| 5 | 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 | 9 | $hover: #D9EDF7; |
| 10 | +$hover_border: #ADF; | |
| 10 | 11 | |
| 11 | 12 | /** GitLab Fonts **/ |
| 12 | 13 | @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } |
| ... | ... | @@ -19,9 +20,9 @@ $hover: #D9EDF7; |
| 19 | 20 | } |
| 20 | 21 | |
| 21 | 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 | 28 | @mixin border-radius($radius) { |
| ... | ... | @@ -64,6 +65,14 @@ $hover: #D9EDF7; |
| 64 | 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 | 76 | @mixin bg-gray-gradient { |
| 68 | 77 | background:#eee; |
| 69 | 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 | 19 | margin-right: 10px; |
| 20 | 20 | |
| 21 | 21 | .chzn-drop { |
| 22 | - margin:7px 0; | |
| 23 | 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 | 48 | .chzn-results { |
| 49 | + margin-top: 5px; | |
| 28 | 50 | max-height:300px; |
| 29 | 51 | |
| 30 | 52 | .group-result { |
| 31 | - color: $blue_link; | |
| 53 | + color: $style_color; | |
| 54 | + border-bottom: 1px solid #EEE; | |
| 55 | + padding: 8px; | |
| 32 | 56 | } |
| 33 | 57 | .active-result { |
| 58 | + border-radius: 0; | |
| 59 | + | |
| 34 | 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 | 80 | .chzn-single { |
| 46 | - @include bg-gray-gradient; | |
| 81 | + @include bg-light-gray-gradient; | |
| 47 | 82 | |
| 48 | 83 | div { |
| 49 | 84 | background:transparent; |
| ... | ... | @@ -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 | -} | ... | ... |