meri-design-dev/custom/theme/Tag.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-icon
  text-align: center
  cursor: pointer
  font-size: 0

.p-icon + .p-icon
  margin-left: 8px

.p-icon svg
  vertical-align: middle

.p-icon svg path
  transition: fill .3s

.p-tag
  display: inline-block

.p-tag .p-tag-wrapper
  display: flex
  justify-content: center
  align-items: center

.p-tag-big
  min-width: 40px
  padding: 5px 8px

.p-tag-big+.p-tag-big
  margin-left: 8px

.p-tag-big .p-tag-text
  line-height: 1
  font-size: 14px

.p-tag-small
  height: 18px
  font-size: 12px
  padding: 0 8px

.p-tag-small+.p-tag-small
  margin-left: 4px

.p-tag-small .p-tag-text
  line-height: 18px
  font-size: 12px

.p-tag-circular
  border-radius: 12px
  padding-left: 12px
  padding-right: 12px

.p-tag-circular .p-tag-text
  line-height: 24px
  font-size: 14px

.p-tag-circular svg
  margin-right: 8px

.p-tag-circular+.p-tag-circular
  margin-left: 12px

.p-tag-circular .p-tag-icon
  width: 12px
  height: 12px
  margin-right: 4px

.p-tag-circular .p-tag-icon .p-icon
  vertical-align: top

.p-tag-circular .p-tag-icon-1 svg path
  fill: #0065b3

.p-tag-circular .p-tag-icon-2 svg path
  fill: #078372

.p-tag-circular .p-tag-icon-3 svg path
  fill: #237b19

.p-tag-circular .p-tag-icon-4 svg path
  fill: #aa7803

.p-tag-circular .p-tag-icon-5 svg path
  fill: #b26206

.p-tag-circular .p-tag-icon-6 svg path
  fill: #ac2f28

.p-tag-circular .p-tag-icon-7 svg path
  fill: #8c218c

.p-tag-circular .p-tag-icon-8 svg path
  fill: #4e1ba7

.p-tag-circular .p-tag-icon-9 svg path
  fill: #161fa2

.p-tag-circular .p-tag-icon-10 svg path
  fill: #373c43

.p-tag-dot .p-tag-dot-icon
  width: 6px
  height: 6px
  border-radius: 50%
  margin: 0 8px

.p-tag-dot .p-tag-text
  line-height: 1