amazeui/less/ui.selected.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:            Selected
//
// Description:     Define style for Selected Plugin
//
// Component:       `.am-selected`
//
// Sub-objects:     `.am-selected-btn`
//                  `.am-selected-status`
//                  `.am-selected-content`
//                  `.am-selected-list`
//
// States:
//
// Used:            Icon
//
// Uses:
//
//= require icon.less
//= require ui.dropdown.less
// =============================================================================

/* ==========================================================================
   Component: Selected Plugin
 ============================================================================ */

.@{ns}selected {
  width: 200px;
}

.@{ns}selected-btn {
  width: 100%;
  padding-left: 10px;
  text-align: right;

  &.@{ns}btn-default {
    background: none;
  }

  .@{ns}invalid & {
    border-color: @global-danger;
  }
}

.@{ns}selected-header {
  height: 45px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ddd;
  display: none;
}

.@{ns}selected-status {
  text-align: left;
  width: 100%;
  .text-overflow();
}

.@{ns}selected-content {
  padding: 10px 0;
}

.@{ns}selected-search {
  padding: 0 10px 10px;

  .@{ns}form-field {
    padding: .5em;
  }
}

.@{ns}selected-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.5rem;

  li {
    position: relative;
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color .15s;

    &:hover {
      background-color: #f8f8f8;

      .@{ns}icon-check {
        opacity: .6;
      }
    }

    &.@{ns}checked {
      .@{ns}icon-check {
        opacity: 1;
        color: @global-primary;
      }
    }

    // disabled item
    &.@{ns}disabled {
      opacity: .5;
      pointer-events: none;
      cursor: not-allowed;
    }
  }

  .@{ns}selected-list-header {
    margin-top: 8px;
    font-size: 1.3rem;
    color: @gray-light;
    border-bottom: 1px solid #e5e5e5;
    cursor: default;

    &:hover {
      background: none;
    }

    &:first-child {
      margin-top: 0;
    }
  }

  .@{ns}selected-text {
    .text-overflow();
    margin-right: 30px;
  }

  .@{ns}icon-check {
    position: absolute;
    right: 8px;
    top: 5px;
    color: @gray-light;
    opacity: 0;
    transition: opacity .15s;
  }
}

.@{ns}selected-hint {
  line-height: 1.2;
  color: @global-danger;

  &:not(:empty) {
    margin-top: 10px;
    border-top: 1px solid #e5e5e5;
    padding: 10px 10px 0;
  }
}

// placeholder color
.@{ns}selected-placeholder {
  opacity: .65;
}

// TODO: 移动端样式？