antd/lib/tag/style/index.css

An enterprise-class UI design language and React-based implementation

/* 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 */
.ant-tag {
  display: inline-block;
  line-height: 20px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  background: #f3f3f3;
  font-size: 12px;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 1;
  margin-right: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.ant-tag:hover {
  opacity: 0.85;
}
.ant-tag,
.ant-tag a,
.ant-tag a:hover {
  color: rgba(0, 0, 0, 0.65);
}
.ant-tag-text a:first-child:last-child {
  display: inline-block;
  margin: 0 -8px;
  padding: 0 8px;
}
.ant-tag .anticon-cross {
  display: inline-block;
  font-size: 12px;
  font-size: 10px \9;
  -ms-transform: scale(0.83333333) rotate(0deg);
      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 .ant-tag .anticon-cross {
  -webkit-filter: none;
          filter: none;
}
:root .ant-tag .anticon-cross {
  font-size: 12px;
}
.ant-tag .anticon-cross:hover {
  opacity: 1;
}
.ant-tag-has-color {
  border-color: transparent;
}
.ant-tag-has-color,
.ant-tag-has-color a,
.ant-tag-has-color a:hover,
.ant-tag-has-color .anticon-cross,
.ant-tag-has-color .anticon-cross:hover {
  color: #fff;
}
.ant-tag-checkable {
  background-color: transparent;
  border-color: transparent;
}
.ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
  color: #108ee9;
}
.ant-tag-checkable:active,
.ant-tag-checkable-checked {
  color: #fff;
}
.ant-tag-checkable-checked {
  background-color: #108ee9;
}
.ant-tag-checkable:active {
  background-color: #0e77ca;
}
.ant-tag-close {
  width: 0 !important;
  padding: 0;
  margin: 0;
}
.ant-tag-zoom-enter,
.ant-tag-zoom-appear {
  animation: antFadeIn 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  animation-fill-mode: both;
}
.ant-tag-zoom-leave {
  animation: antZoomOut 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  animation-fill-mode: both;
}
.ant-tag-pink {
  color: #f5317f;
  background: #fdd8e7;
  border-color: #fdd8e7;
}
.ant-tag-pink-inverse {
  background: #f5317f;
  border-color: #f5317f;
  color: #fff;
}
.ant-tag-red {
  color: #f04134;
  background: #fcdbd9;
  border-color: #fcdbd9;
}
.ant-tag-red-inverse {
  background: #f04134;
  border-color: #f04134;
  color: #fff;
}
.ant-tag-orange {
  color: #f56a00;
  background: #fde3cf;
  border-color: #fde3cf;
}
.ant-tag-orange-inverse {
  background: #f56a00;
  border-color: #f56a00;
  color: #fff;
}
.ant-tag-yellow {
  color: #ffbf00;
  background: #fff3cf;
  border-color: #fff3cf;
}
.ant-tag-yellow-inverse {
  background: #ffbf00;
  border-color: #ffbf00;
  color: #fff;
}
.ant-tag-cyan {
  color: #00a2ae;
  background: #cfedf0;
  border-color: #cfedf0;
}
.ant-tag-cyan-inverse {
  background: #00a2ae;
  border-color: #00a2ae;
  color: #fff;
}
.ant-tag-green {
  color: #00a854;
  background: #cfefdf;
  border-color: #cfefdf;
}
.ant-tag-green-inverse {
  background: #00a854;
  border-color: #00a854;
  color: #fff;
}
.ant-tag-blue {
  color: #108ee9;
  background: #d2eafb;
  border-color: #d2eafb;
}
.ant-tag-blue-inverse {
  background: #108ee9;
  border-color: #108ee9;
  color: #fff;
}
.ant-tag-purple {
  color: #7265e6;
  background: #e4e2fa;
  border-color: #e4e2fa;
}
.ant-tag-purple-inverse {
  background: #7265e6;
  border-color: #7265e6;
  color: #fff;
}