style.less

.knockout-select {
  @font-size: 14px;
  @width: 250px;
  @height: 28px;
  @spacing: 8px;
  @border-radius: 3px;
  @border-width: 1px;
  @border-color: #c8c8c8;
  @inactive-color: #c8c8c8;
  @hover-color: #0088d3;
  @background-color: white;

  @font-face {
    font-family: 'knockout-select-icomoon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'),
    url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
    font-weight: normal;
    font-style: normal;
  }

  .box-sizing-border-box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .disable-selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .icon-font {
    font-family: 'knockout-select-icomoon';
    line-height: inherit;
  }

  font-size: @font-size;
  width: @width;
  height: @height;

  &-button {
    .box-sizing-border-box;
    width: 100%;
    height: @height;
    margin: 0;
    padding: 0 @spacing;
    background-color: @background-color;
    border-radius: @border-radius;
    border: @border-width solid @border-color;
    cursor: pointer;
    text-align: left;
    font-size: inherit;

    &[disabled] {
      background-color: @inactive-color;
      cursor: default;
    }

    &[data-open="true"] {
      .knockout-select-arrow:before {
        float: right;
        .icon-font;
        content: "\e637"; // arrow-up
      }
    }

    &[data-open="false"] {
      .knockout-select-arrow:before {
        float: right;
        .icon-font;
        content: "\e636"; // arrow-down
      }
    }
  }

  &-container {
    .box-sizing-border-box;
    min-height: @height;
    margin: 0;
    background-color: @background-color;
    border-radius: @border-radius;
    border: @border-width solid @border-color;

    .knockout-select-row {
      .disable-selection;
      .box-sizing-border-box;
      height: auto;
      overflow: hidden;
      cursor: default;
      padding: (@spacing / 4) (@spacing / 2);
      background-color: @background-color;

      &.knockout-select-row-selected {
        background-color: @hover-color;
        color: @background-color;
      }

      &.knockout-select-row-active {
        background-color: @hover-color;
        color: @background-color;
        outline: @border-width solid @border-color;
      }

      &:before {
        .icon-font;
        display: inline-block;
        padding-right: @spacing / 2;
        font-size: 12px;
        width: 12px;
        height: inherit;
      }

      &[data-selected="true"]:before {
        content: "\e621"; // check
      }

      &[data-selected="false"]:before {
        content: "";
      }
    }
  }
}