Novo componente Select-box

css/_chosen.scss

@@ -0,0 +1,263 @@
+/* @group Base */
+.chzn-container {
+  font-size: 13px;
+  position: relative;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+
+  .chzn-drop {
+    background: #fff;
+    border: 1px solid #73C3E6;
+    border-top: 0;
+    position: absolute;
+    top: 29px;
+    z-index: 1010;
+  }
+}
+/* @end */
+
+/* @group Single Chosen */
+.chzn-container-single {
+
+  .chzn-single {
+    @include border-radius(3px);
+    @include background-clip(padding-box);
+    @include box-shadow(inset 0 1px 0 white);
+    $experimental-support-for-svg: true;
+    @include background-image(linear-gradient(bottom, white 60%, #E6E6E6 100%));
+    background-color: #ffffff;
+    border: 1px solid rgb(204, 204, 204);
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    height: 18px;
+    line-height: 18px;
+    padding: 6px 10px;
+    color: #6D6E6F;
+    text-decoration: none;
+
+    div {
+      @include box-shadow(inset 0 1px 0 white);
+      $experimental-support-for-svg: true;
+      @include background-image(linear-gradient(bottom, #F0F0F0, white));
+      @include size(16px, 18px);
+      -webkit-border-radius: 0 3px 3px 0;
+      border-radius: 0 3px 3px 0;
+      border: 1px solid #E6E6E6;
+      background-color: white;
+      padding: 6px;
+      position: absolute;
+      right: -1px;
+      top: -1px;
+      display: block;
+
+      b {
+        @include size(100%, 100%);
+        background: url('../img/icon/select-box-gray_16_18.png') no-repeat 0px 0px;
+        margin: 0;
+        display: block;
+      }
+    }
+
+    span {
+      margin-right: 26px;
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      -o-text-overflow: ellipsis;
+      -ms-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+    }
+
+    abbr {
+      @include size(12px, 12px);
+      display: block;
+      position: absolute;
+      right: 26px;
+      top: 6px;
+      font-size: 1px;
+      background: url('img/../img/chosen-sprite.png') -42px 1px no-repeat;
+      &:hover { background-position: -42px -10px; }
+    }
+
+    &:hover {
+      border-color: #73C3E6;
+
+      div {
+        border-color: #73C3E6;
+        b { background: url('../img/icon/select-box-lightblue_16_18.png') no-repeat 0px 0px; }
+      }
+    }
+  }
+
+  .chzn-default {
+    color: #999;
+  }
+
+  .chzn-search {
+    padding: 3px 4px;
+    position: relative;
+    margin: 0;
+    white-space: nowrap;
+    z-index: 1010;
+
+    input {
+      $experimental-support-for-svg: true;
+      @include background(image-url('../img/chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%));
+      @include size(100% !important, auto);
+      margin: 1px 0;
+      padding: 4px 20px 4px 5px;
+      outline: 0;
+      font-family: sans-serif;
+      font-size: 1em;
+      box-shadow: none;
+      &:focus { background: white url('../img/chosen-sprite.png') no-repeat 100% -20px !important; }
+    }
+  }
+
+  .chzn-drop {
+    @include background-clip(padding-box);
+    -webkit-border-radius: 0 0 4px 4px;
+    -moz-border-radius   : 0 0 4px 4px;
+    border-radius        : 0 0 4px 4px;
+  }
+
+  &.chzn-disabled {
+    .chzn-single {
+      abbr {
+        &:hover { background-position: -42px -10px; }
+      }
+    }
+  }
+}
+/* @end */
+
+.chzn-container-single-nosearch {
+  .chzn-search {
+    input {
+      position: absolute;
+      left: -9000px;
+    }
+  }
+}
+
+/* @group Results */
+.chzn-container {
+  .chzn-results {
+    margin: 0 4px 4px 0;
+    max-height: 240px;
+    padding: 0 0 0 4px;
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    text-shadow: none;
+
+    li {
+      display: none;
+      line-height: 15px;
+      padding: 5px 6px;
+      margin: 0;
+      list-style: none;
+
+      em {
+        background-color: #feffde;
+        font-style: normal;
+      }
+    }
+
+    .active-result {
+      cursor: pointer;
+      display: list-item;
+    }
+
+    .highlighted {
+      $experimental-support-for-svg: true;
+      @include background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%));
+      background-color: #3875d7;
+      color: #fff;
+      em { background: transparent; }
+    }
+
+    .no-results {
+      background-color: #f4f4f4;
+      display: list-item;
+    }
+
+    .group-result {
+      cursor: default;
+      color: #999;
+      font-weight: bold;
+    }
+
+    .group-option {
+      padding-left: 15px;
+    }
+  }
+
+  .chzn-results-scroll {
+    background-color: white;
+    margin: 0 4px;
+    position: absolute;
+    text-align: center;
+    width: 321px; /* This should by dynamic with js */
+    z-index: 1;
+
+    span {
+      @include size(9px, 17px);
+      display: inline-block;
+      text-indent: -5000px;
+    }
+  }
+
+  .chzn-results-scroll-down {
+    bottom: 0;
+    span { background: url('../img/chosen-sprite.png') no-repeat -4px -3px; }
+  }
+
+  .chzn-results-scroll-up {
+    span { background: url('../img/chosen-sprite.png') no-repeat -22px -3px; }
+  }
+}
+/* @end */
+
+/* @group Active  */
+.chzn-container-active {
+  .chzn-single-with-drop {
+    @include border-bottom-left-radius(0);
+    @include border-bottom-right-radius(0);
+    $experimental-support-for-svg: true;
+    @include background-image(linear-gradient(bottom, white 60%, #E6E6E6 100%));
+    border: 1px solid #73C3E6;
+    background-color: #eee;
+
+    div {
+      background: transparent;
+      border-left: none;
+
+      b { background: url('../img/icon/select-box-lightblue_16_18.png') no-repeat 0px 0px; }
+    }
+  }
+
+  .chzn-choices {
+    @include box-shadow(0 0 5px rgba(0,0,0,.3));
+    border: 1px solid #5897fb;
+
+    .search-field {
+      input { color: #111 !important; }
+    }
+  }
+}
+/* @end */
+
+/* @group Retina compatibility */
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi)  {
+  .chzn-container-single .chzn-single abbr, .chzn-container-single .chzn-single div b, .chzn-container-single .chzn-search input, .chzn-container .chzn-results-scroll-down span, .chzn-container .chzn-results-scroll-up span {
+      background-image: url('chosen-sprite@2x.png') !important;
+      background-repeat: no-repeat !important;
+      background-size: 52px 37px !important;
+  }
+}
+/* @end */