@import "../tool/tool";

.page {
  min-height: 100%;
  padding-top: 20px;
  position: relative;
}

.color_list {
  display: flex;
  flex-wrap: wrap;
  .color_item {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    padding: 5px 10px;
    cursor: pointer;
    width: 100px;
    height: 125px;
    &:hover{
      .color_add{
        transform: translate(-50%,-50%) scale(1.3);
      }
    }
    .color_add{
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      transition: transform .3s linear;
      transform: translate(-50%,-50%);
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.041);
      .color_toggle_list {
        max-height: 99px;
      }
    }
    .color_toggle_list {
      overflow: hidden;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-height: 0;
      transition: max-height .5s linear;
      background-color: rgba(180, 180, 180, 0.274);
      .color_toggle_item {
        display: inline-block;
        padding: 2px 6px;
        &:hover {
          background-color: rgba(0, 0, 0, 0.185);
        }
      }
    }
    .color_item_bg {
      height: 50px;
      background-color: red;
      position: relative;
    }
    .color_item_content {
      .color_item_title {
        font-size: 1.2em;
        font-weight: bold;
      }
      .color_item_desc {
        color: rgb(167, 166, 166);
        @include ellipsis(2);
      }
    }
  }
}