app/assets/stylesheets/multi-select.scss in multi-select-rails-0.9.8.1 vs app/assets/stylesheets/multi-select.scss in multi-select-rails-0.9.10

- old
+ new

@@ -1,19 +1,30 @@ .ms-container{ - background: transparent image-url('switch.png') no-repeat 170px 80px; + background: transparent image-url('switch.png') no-repeat 50% 50%; + width: 370px; } .ms-container:after{ - content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; + content: "."; + display: block; + height: 0; + line-height: 0; + font-size: 0; + clear: both; + min-height: 0; + visibility: hidden; } .ms-container .ms-selectable, .ms-container .ms-selection{ - background: #fff; color: #555555; float: left; + width: 45%; } +.ms-container .ms-selection{ + float: right; +} .ms-container .ms-list{ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); @@ -24,20 +35,16 @@ transition: border linear 0.2s, box-shadow linear 0.2s; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + position: relative; + height: 200px; + padding: 0; + overflow-y: auto; } - -.ms-selected{ - display:none; -} -.ms-container .ms-selectable{ - margin-right: 40px; -} - .ms-container .ms-list.ms-focus{ border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); @@ -53,17 +60,10 @@ .ms-container .ms-optgroup-container{ width: 100%; } -.ms-container ul.ms-list{ - width: 160px; - height: 200px; - padding: 0; - overflow-y: auto; -} - .ms-container .ms-optgroup-label{ margin: 0; padding: 5px 0px 0px 5px; cursor: pointer; color: #999; @@ -88,6 +88,6 @@ .ms-container .ms-selectable li.disabled, .ms-container .ms-selection li.disabled{ background-color: #eee; color: #aaa; cursor: text; -} +}