@mdsfe/mds-ui/dist/style/tag.css

A set of enterprise-class Vue UI components.

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable declaration-bang-space-before */
/* stylelint-disable declaration-bang-space-before */
.mds-tag {
  display: inline-block;
  padding: 0 10px;
  height: 28px;
  border: 1px solid #d8dce6;
  font-size: 12px;
  opacity: 1;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-align: center;
}
.mds-tag-icon {
  margin-left: 10px;
  color: #9d9d9d;
}
.mds-tag-lg {
  padding: 0 15px;
  height: 32px;
}
.mds-tag-lg span {
  line-height: 32px !important;
}
.mds-tag-md {
  padding: 0 10px;
  height: 28px;
}
.mds-tag-md span {
  line-height: 28px !important;
}
.mds-tag-sm {
  height: 24px;
  padding: 0 8px;
}
.mds-tag-sm span {
  line-height: 24px !important;
}
.mds-tag-mn {
  padding: 0 8px;
  height: 20px;
}
.mds-tag-mn span {
  line-height: 20px !important;
}
.mds-tag:hover {
  opacity: 0.85;
}
.mds-tag,
.mds-tag a,
.mds-tag a:hover {
  color: #666666;
}
.mds-tag-text a:first-child:last-child {
  display: inline-block;
  margin: 0 -8px;
}
.mds-tag .mdsicon-cross {
  display: inline-block;
  font-size: 12px;
  font-size: 10px ;
  transform: scale(0.83333333) rotate(0deg);
  /* IE6-IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
  zoom: 1;
  cursor: pointer;
  font-weight: bold;
  margin-left: 3px;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0.66;
}
:root .mds-tag .mdsicon-cross {
  filter: none;
}
:root .mds-tag .mdsicon-cross {
  font-size: 12px;
}
.mds-tag .mdsicon-cross:hover {
  opacity: 1;
}
.mds-tag-has-color {
  border-color: transparent;
}
.mds-tag-checkable {
  background-color: transparent;
  border-color: transparent;
}
.mds-tag-checkable:active,
.mds-tag-checkable-checked {
  color: #fff;
}
.mds-tag-checkable-checked {
  background-color: #ecf5ff;
  color: #0364ff;
}
.mds-tag-checkable:active {
  background-color: #0252dd;
}
.mds-tag-close {
  width: 0 !important;
  padding: 0;
  margin: 0;
}
.mds-tag-zoom-enter,
.mds-tag-zoom-appear {
  animation: antFadeIn 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  animation-fill-mode: both;
}
.mds-tag-zoom-leave {
  animation: antZoomOut 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  animation-fill-mode: both;
}
.mds-tag-pink {
  color: #f5317f;
  background: #fdd8e7;
  border-color: #fdd8e7;
}
.mds-tag-blue {
  color: #0364ff;
  background: #ecf5ff;
  border-color: #ecf5ff;
}
.mds-tag-green {
  color: #00aa00;
  background: rgba(0, 170, 0, 0.05);
  border-color: rgba(0, 170, 0, 0.05);
}
.mds-tag-purple {
  color: #666;
  background: #F8F8F8;
  border-color: #F8F8F8;
}
.mds-tag-red {
  color: #EE3333;
  background: rgba(238, 51, 51, 0.05);
  border-color: rgba(238, 51, 51, 0.05);
}
.mds-tag-orange {
  color: #FF6600;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 102, 0, 0.05);
}
.mds-tag-pink-inverse {
  border-color: #f5317f;
  color: #f5317f;
}
.mds-tag-red {
  color: #EE3333;
  background: #fcd8d8;
  border-color: #fcd8d8;
}
.mds-tag-blue {
  color: #0364ff;
  background: #ecf5ff;
  border-color: #ecf5ff;
}
.mds-tag-green {
  color: #00aa00;
  background: rgba(0, 170, 0, 0.05);
  border-color: rgba(0, 170, 0, 0.05);
}
.mds-tag-purple {
  color: #666;
  background: #F8F8F8;
  border-color: #F8F8F8;
}
.mds-tag-red {
  color: #EE3333;
  background: rgba(238, 51, 51, 0.05);
  border-color: rgba(238, 51, 51, 0.05);
}
.mds-tag-orange {
  color: #FF6600;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 102, 0, 0.05);
}
.mds-tag-red-inverse {
  border-color: #EE3333;
  color: #EE3333;
}
.mds-tag-orange {
  color: #f56a00;
  background: #fde3cf;
  border-color: #fde3cf;
}
.mds-tag-blue {
  color: #0364ff;
  background: #ecf5ff;
  border-color: #ecf5ff;
}
.mds-tag-green {
  color: #00aa00;
  background: rgba(0, 170, 0, 0.05);
  border-color: rgba(0, 170, 0, 0.05);
}
.mds-tag-purple {
  color: #666;
  background: #F8F8F8;
  border-color: #F8F8F8;
}
.mds-tag-red {
  color: #EE3333;
  background: rgba(238, 51, 51, 0.05);
  border-color: rgba(238, 51, 51, 0.05);
}
.mds-tag-orange {
  color: #FF6600;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 102, 0, 0.05);
}
.mds-tag-orange-inverse {
  border-color: #f56a00;
  color: #f56a00;
}
.mds-tag-yellow {
  color: #ffbf00;
  background: #fff3cf;
  border-color: #fff3cf;
}
.mds-tag-blue {
  color: #0364ff;
  background: #ecf5ff;
  border-color: #ecf5ff;
}
.mds-tag-green {
  color: #00aa00;
  background: rgba(0, 170, 0, 0.05);
  border-color: rgba(0, 170, 0, 0.05);
}
.mds-tag-purple {
  color: #666;
  background: #F8F8F8;
  border-color: #F8F8F8;
}
.mds-tag-red {
  color: #EE3333;
  background: rgba(238, 51, 51, 0.05);
  border-color: rgba(238, 51, 51, 0.05);
}
.mds-tag-orange {
  color: #FF6600;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 102, 0, 0.05);
}
.mds-tag-yellow-inverse {
  border-color: #ffbf00;
  color: #ffbf00;
}
.mds-tag-cyan {
  color: #00a2ae;
  background: #cfedf0;
  border-color: #cfedf0;
}
.mds-tag-blue {
  color: #0364ff;
  background: #ecf5ff;
  border-color: #ecf5ff;
}
.mds-tag-green {
  color: #00aa00;
  background: rgba(0, 170, 0, 0.05);
  border-color: rgba(0, 170, 0, 0.05);
}
.mds-tag-purple {
  color: #666;
  background: #F8F8F8;
  border-color: #F8F8F8;
}
.mds-tag-red {
  color: #EE3333;
  background: rgba(238, 51, 51, 0.05);
  border-color: rgba(238, 51, 51, 0.05);
}
.mds-tag-orange {
  color: #FF6600;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 102, 0, 0.05);
}
.mds-tag-cyan-inverse {
  border-color: #00a2ae;
  color: #00a2ae;
}
.mds-tag-green {
  color: #00a854;
  background: #cfefdf;
  border-color: #cfefdf;
}
.mds-tag-blue {
  color: #0364ff;
  background: #ecf5ff;
  border-color: #ecf5ff;
}
.mds-tag-green {
  color: #00aa00;
  background: rgba(0, 170, 0, 0.05);
  border-color: rgba(0, 170, 0, 0.05);
}
.mds-tag-purple {
  color: #666;
  background: #F8F8F8;
  border-color: #F8F8F8;
}
.mds-tag-red {
  color: #EE3333;
  background: rgba(238, 51, 51, 0.05);
  border-color: rgba(238, 51, 51, 0.05);
}
.mds-tag-orange {
  color: #FF6600;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 102, 0, 0.05);
}
.mds-tag-green-inverse {
  border-color: #00a854;
  color: #00a854;
}
.mds-tag-blue {
  color: #0364ff;
  background: #cfe2ff;
  border-color: #cfe2ff;
}
.mds-tag-blue {
  color: #0364ff;
  background: #ecf5ff;
  border-color: #ecf5ff;
}
.mds-tag-green {
  color: #00aa00;
  background: rgba(0, 170, 0, 0.05);
  border-color: rgba(0, 170, 0, 0.05);
}
.mds-tag-purple {
  color: #666;
  background: #F8F8F8;
  border-color: #F8F8F8;
}
.mds-tag-red {
  color: #EE3333;
  background: rgba(238, 51, 51, 0.05);
  border-color: rgba(238, 51, 51, 0.05);
}
.mds-tag-orange {
  color: #FF6600;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 102, 0, 0.05);
}
.mds-tag-blue-inverse {
  border-color: #0364ff;
  color: #0364ff;
}
.mds-tag-purple {
  color: #7265e6;
  background: #e4e2fa;
  border-color: #e4e2fa;
}
.mds-tag-blue {
  color: #0364ff;
  background: #ecf5ff;
  border-color: #ecf5ff;
}
.mds-tag-green {
  color: #00aa00;
  background: rgba(0, 170, 0, 0.05);
  border-color: rgba(0, 170, 0, 0.05);
}
.mds-tag-purple {
  color: #666;
  background: #F8F8F8;
  border-color: #F8F8F8;
}
.mds-tag-red {
  color: #EE3333;
  background: rgba(238, 51, 51, 0.05);
  border-color: rgba(238, 51, 51, 0.05);
}
.mds-tag-orange {
  color: #FF6600;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 102, 0, 0.05);
}
.mds-tag-purple-inverse {
  border-color: #7265e6;
  color: #7265e6;
}
.mds-tag-text {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  line-height: 28px;
  opacity: 1;
}
.btn {
  outline: none;
  width: 98px;
  height: 30px;
  background: #ffffff;
  border-radius: 2px;
  font-size: 12px;
  border: 1px dashed #d8dce6;
  vertical-align: bottom;
}
.btn span:first-child {
  color: #9d9d9d;
  font-size: 18px;
  margin-right: 10px;
  font-weight: 200;
  display: inline-block;
  line-height: 19px;
}
.btn span:last-child {
  font-size: 12px;
}
.gap-top {
  margin-bottom: 10px;
}
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable declaration-bang-space-before */
/* stylelint-disable declaration-bang-space-before */