@pi0/framework7/src/components/chip/chip-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';

  .chip {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.87);
    background: rgba(0, 0, 0, 0.12);
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    padding: 0 12px;
  }
  .chip-media {
    width: 32px;
    height: 32px;
    vertical-align: top;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    color: #fff;
    font-size: 16px;
    .ltr({
      margin-left: -12px;
      + .chip-label {
        margin-left: 8px;
      }
    });
    .rtl({
      margin-right: -12px;
      + .chip-label {
        margin-right: 8px;
      }
    });

  }
  .chip-label {
    + .chip-delete {
      .ltr({
        margin-left: 4px;
      });
      .rtl({
        margin-right: 4px;
      });
    }
  }
  .chip-delete {
    margin-right: -8px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    .svg-background("<svg fill='#000' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-position: center;
    background-size: 20px 20px;
    opacity: 0.54;
    .ltr({
      margin-right: -8px;
    });
    .rtl({
      margin-left: -8px;
    });
  }
  .color-loop({
    .chip.color-@{colorName} {
      background: @colorValue;
      color: #fff;
    }
  });
}