Commit 7d037c111be4a2357452510d524421c74204a814
1 parent
c946defb
Exists in
master
and in
4 other branches
Refactor Chosen.js select css
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Showing
2 changed files
with
45 additions
and
104 deletions
Show diff stats
app/assets/stylesheets/sections/projects.scss
| @@ -188,3 +188,34 @@ ul.nav.nav-projects-tabs { | @@ -188,3 +188,34 @@ ul.nav.nav-projects-tabs { | ||
| 188 | .transfer-project .chosen-container { | 188 | .transfer-project .chosen-container { |
| 189 | min-width: 200px; | 189 | min-width: 200px; |
| 190 | } | 190 | } |
| 191 | + | ||
| 192 | +/** Branch/tag selector **/ | ||
| 193 | +.project-refs-form { | ||
| 194 | + margin: 0; | ||
| 195 | + span { | ||
| 196 | + background:none !important; | ||
| 197 | + position:static !important; | ||
| 198 | + width:auto !important; | ||
| 199 | + height:auto !important; | ||
| 200 | + } | ||
| 201 | +} | ||
| 202 | +.project-refs-select { | ||
| 203 | + width: 120px; | ||
| 204 | +} | ||
| 205 | + | ||
| 206 | +.project-refs-form .chosen-container { | ||
| 207 | + position: relative; | ||
| 208 | + top: 0; | ||
| 209 | + left: 0; | ||
| 210 | + margin-right: 10px; | ||
| 211 | + | ||
| 212 | + &.chosen-container-active { | ||
| 213 | + .chosen-drop { | ||
| 214 | + min-width: 400px; | ||
| 215 | + } | ||
| 216 | + | ||
| 217 | + .chosen-results { | ||
| 218 | + max-height: 400px; | ||
| 219 | + } | ||
| 220 | + } | ||
| 221 | +} |
app/assets/stylesheets/selects.scss
| 1 | -/* CHZN reset few styles */ | ||
| 2 | -.chosen-container-single .chosen-single { | ||
| 3 | - background: #FFF; | ||
| 4 | - border: 1px solid #bbb; | ||
| 5 | - box-shadow: none; | ||
| 6 | -} | ||
| 7 | -.chosen-container-active .chosen-single { | ||
| 8 | - background: #fff; | ||
| 9 | -} | ||
| 10 | - | ||
| 11 | .ajax-users-select { | 1 | .ajax-users-select { |
| 12 | width: 400px; | 2 | width: 400px; |
| 13 | 3 | ||
| @@ -27,109 +17,29 @@ | @@ -27,109 +17,29 @@ | ||
| 27 | } | 17 | } |
| 28 | } | 18 | } |
| 29 | 19 | ||
| 30 | -/** Branch/tag selector **/ | ||
| 31 | -.project-refs-form { | ||
| 32 | - margin: 0; | ||
| 33 | - span { | ||
| 34 | - background:none !important; | ||
| 35 | - position:static !important; | ||
| 36 | - width:auto !important; | ||
| 37 | - height:auto !important; | ||
| 38 | - } | ||
| 39 | -} | ||
| 40 | -.project-refs-select { | ||
| 41 | - width: 120px; | ||
| 42 | -} | ||
| 43 | - | ||
| 44 | -.project-refs-form .chosen-container { | ||
| 45 | - position: relative; | ||
| 46 | - top: 0; | ||
| 47 | - left: 0; | ||
| 48 | - margin-right: 10px; | ||
| 49 | - | ||
| 50 | - .chosen-drop { | ||
| 51 | - min-width: 400px; | ||
| 52 | - .chosen-results { | ||
| 53 | - max-height: 300px; | ||
| 54 | - } | ||
| 55 | - .chosen-search input { | ||
| 56 | - min-width: 365px; | ||
| 57 | - } | ||
| 58 | - } | ||
| 59 | -} | ||
| 60 | - | ||
| 61 | -/** Fix for Search Dropdown Border **/ | 20 | +/** Chosen.js selectbox style override **/ |
| 62 | .chosen-container { | 21 | .chosen-container { |
| 63 | min-width: 100px; | 22 | min-width: 100px; |
| 64 | 23 | ||
| 65 | - .chosen-search { | ||
| 66 | - input:focus { | ||
| 67 | - @include box-shadow(none); | ||
| 68 | - } | 24 | + .chosen-single { |
| 25 | + background: #EEE !important; | ||
| 26 | + border: 1px solid #DDD !important; | ||
| 27 | + @include box-shadow(none !important); | ||
| 28 | + @include border-radius(4px !important); | ||
| 69 | } | 29 | } |
| 70 | 30 | ||
| 71 | - .chosen-drop { | ||
| 72 | - margin: 7px 0; | ||
| 73 | - min-width: 200px; | ||
| 74 | - border: 1px solid #CCC; | ||
| 75 | - @include border-radius(0); | ||
| 76 | - box-shadow: inset 0 1px 0 #fff, 0 1px 5px #f1f1f1; | ||
| 77 | - | ||
| 78 | - .chosen-results { | ||
| 79 | - margin-top: 5px; | ||
| 80 | - max-height: 300px; | ||
| 81 | - | ||
| 82 | - li { | ||
| 83 | - border-bottom: 1px solid #EEE; | ||
| 84 | - padding: 7px; | ||
| 85 | - | ||
| 86 | - &:last-child { | ||
| 87 | - border-bottom: none; | ||
| 88 | - } | ||
| 89 | - } | ||
| 90 | - | ||
| 91 | - .group-result { | ||
| 92 | - color: $style_color; | ||
| 93 | - font-size: 14px; | ||
| 94 | - line-height: 1.5; | ||
| 95 | - } | ||
| 96 | - | ||
| 97 | - .active-result { | ||
| 98 | - @include border-radius(0); | ||
| 99 | - | ||
| 100 | - &.highlighted { | ||
| 101 | - background: $hover; | ||
| 102 | - color: $style_color; | ||
| 103 | - } | ||
| 104 | - &.result-selected { | ||
| 105 | - font-weight: bolder; | ||
| 106 | - background: #F3F3F3; | ||
| 107 | - } | ||
| 108 | - } | ||
| 109 | - } | ||
| 110 | - | ||
| 111 | - .chosen-search { | ||
| 112 | - @include bg-gray-gradient; | ||
| 113 | - input { | ||
| 114 | - min-width: 165px; | ||
| 115 | - border-color: #CCC; | ||
| 116 | - } | ||
| 117 | - } | 31 | + .chosen-results li.highlighted { |
| 32 | + background: #29b; | ||
| 118 | } | 33 | } |
| 119 | -} | ||
| 120 | 34 | ||
| 121 | -.chosen-container .chosen-single, | ||
| 122 | -.chosen-container.chosen-with-drop .chosen-single { | ||
| 123 | - @include bg-light-gray-gradient; | ||
| 124 | - | ||
| 125 | - div { | ||
| 126 | - background: transparent; | ||
| 127 | - border-left: none; | 35 | + .chosen-drop { |
| 36 | + margin-top: 10px; | ||
| 37 | + border: 1px solid #DDD !important; | ||
| 38 | + @include border-radius(4px !important); | ||
| 128 | } | 39 | } |
| 129 | 40 | ||
| 130 | - span { | ||
| 131 | - font-weight: normal; | ||
| 132 | - text-shadow: 0 1px 2px #FFF; | 41 | + .chosen-search input { |
| 42 | + @include box-shadow(none !important); | ||
| 133 | } | 43 | } |
| 134 | } | 44 | } |
| 135 | 45 |