choerodon-ui/pro/lib/typography/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 no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
.c7n-pro-typography {
  color: #000000;
  overflow-wrap: break-word;
}
.c7n-pro-typography.c7n-pro-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}
.c7n-pro-typography.c7n-pro-typography-success {
  color: #00bf96;
}
.c7n-pro-typography.c7n-pro-typography-warning {
  color: #faad14;
}
.c7n-pro-typography.c7n-pro-typography-danger {
  color: #d50000;
}
a.c7n-pro-typography.c7n-pro-typography-danger:active,
a.c7n-pro-typography.c7n-pro-typography-danger:focus,
a.c7n-pro-typography.c7n-pro-typography-danger:hover {
  color: #e32b24;
}
.c7n-pro-typography.c7n-pro-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.c7n-pro-typography.c7n-pro-typography-text,
.c7n-pro-typography.c7n-pro-typography-link,
.c7n-pro-typography.c7n-pro-typography-Paragraph {
  line-height: 2.15384615;
}
div.c7n-pro-typography,
.c7n-pro-typography p {
  margin-bottom: 0.13rem;
}
h1.c7n-pro-typography,
div.c7n-pro-typography-h1,
div.c7n-pro-typography-h1 > textarea,
.c7n-pro-typography h1 {
  margin-bottom: 0.2rem;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 0.3523rem;
  line-height: 1.23;
}
h2.c7n-pro-typography,
div.c7n-pro-typography-h2,
div.c7n-pro-typography-h2 > textarea,
.c7n-pro-typography h2 {
  margin-bottom: 0.2rem;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 0.2782rem;
  line-height: 1.35;
}
h3.c7n-pro-typography,
div.c7n-pro-typography-h3,
div.c7n-pro-typography-h3 > textarea,
.c7n-pro-typography h3 {
  margin-bottom: 0.2rem;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 0.2223rem;
  line-height: 1.35;
}
h4.c7n-pro-typography,
div.c7n-pro-typography-h4,
div.c7n-pro-typography-h4 > textarea,
.c7n-pro-typography h4 {
  margin-bottom: 0.2rem;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 0.1846rem;
  line-height: 1.4;
}
h5.c7n-pro-typography,
div.c7n-pro-typography-h5,
div.c7n-pro-typography-h5 > textarea,
.c7n-pro-typography h5 {
  margin-bottom: 0.2rem;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 0.1482rem;
  line-height: 1.5;
}
.c7n-pro-typography + h1.c7n-pro-typography,
.c7n-pro-typography + h2.c7n-pro-typography,
.c7n-pro-typography + h3.c7n-pro-typography,
.c7n-pro-typography + h4.c7n-pro-typography,
.c7n-pro-typography + h5.c7n-pro-typography {
  margin-top: 0.3rem;
}
.c7n-pro-typography div + h1,
.c7n-pro-typography ul + h1,
.c7n-pro-typography li + h1,
.c7n-pro-typography p + h1,
.c7n-pro-typography h1 + h1,
.c7n-pro-typography h2 + h1,
.c7n-pro-typography h3 + h1,
.c7n-pro-typography h4 + h1,
.c7n-pro-typography h5 + h1,
.c7n-pro-typography div + h2,
.c7n-pro-typography ul + h2,
.c7n-pro-typography li + h2,
.c7n-pro-typography p + h2,
.c7n-pro-typography h1 + h2,
.c7n-pro-typography h2 + h2,
.c7n-pro-typography h3 + h2,
.c7n-pro-typography h4 + h2,
.c7n-pro-typography h5 + h2,
.c7n-pro-typography div + h3,
.c7n-pro-typography ul + h3,
.c7n-pro-typography li + h3,
.c7n-pro-typography p + h3,
.c7n-pro-typography h1 + h3,
.c7n-pro-typography h2 + h3,
.c7n-pro-typography h3 + h3,
.c7n-pro-typography h4 + h3,
.c7n-pro-typography h5 + h3,
.c7n-pro-typography div + h4,
.c7n-pro-typography ul + h4,
.c7n-pro-typography li + h4,
.c7n-pro-typography p + h4,
.c7n-pro-typography h1 + h4,
.c7n-pro-typography h2 + h4,
.c7n-pro-typography h3 + h4,
.c7n-pro-typography h4 + h4,
.c7n-pro-typography h5 + h4,
.c7n-pro-typography div + h5,
.c7n-pro-typography ul + h5,
.c7n-pro-typography li + h5,
.c7n-pro-typography p + h5,
.c7n-pro-typography h1 + h5,
.c7n-pro-typography h2 + h5,
.c7n-pro-typography h3 + h5,
.c7n-pro-typography h4 + h5,
.c7n-pro-typography h5 + h5 {
  margin-top: 0.3rem;
}
a.c7n-pro-typography-ellipsis,
span.c7n-pro-typography-ellipsis {
  display: inline-block;
  max-width: 100%;
}
a.c7n-pro-typography,
.c7n-pro-typography a {
  color: #3f51b5;
  outline: none;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  text-decoration: none;
}
a.c7n-pro-typography:focus,
.c7n-pro-typography a:focus,
a.c7n-pro-typography:hover,
.c7n-pro-typography a:hover {
  color: #6374c2;
}
a.c7n-pro-typography:active,
.c7n-pro-typography a:active {
  color: #2b378f;
}
a.c7n-pro-typography:active,
.c7n-pro-typography a:active,
a.c7n-pro-typography:hover,
.c7n-pro-typography a:hover {
  text-decoration: none;
}
a.c7n-pro-typography[disabled],
.c7n-pro-typography a[disabled],
a.c7n-pro-typography.c7n-pro-typography-disabled,
.c7n-pro-typography a.c7n-pro-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}
a.c7n-pro-typography[disabled]:active,
.c7n-pro-typography a[disabled]:active,
a.c7n-pro-typography.c7n-pro-typography-disabled:active,
.c7n-pro-typography a.c7n-pro-typography-disabled:active,
a.c7n-pro-typography[disabled]:hover,
.c7n-pro-typography a[disabled]:hover,
a.c7n-pro-typography.c7n-pro-typography-disabled:hover,
.c7n-pro-typography a.c7n-pro-typography-disabled:hover {
  color: rgba(0, 0, 0, 0.25);
}
a.c7n-pro-typography[disabled]:active,
.c7n-pro-typography a[disabled]:active,
a.c7n-pro-typography.c7n-pro-typography-disabled:active,
.c7n-pro-typography a.c7n-pro-typography-disabled:active {
  pointer-events: none;
}
.c7n-pro-typography code {
  margin: 0 0.022rem;
  padding: 0.022rem 0.04rem 0.01rem;
  font-size: 85%;
  background: rgba(150, 150, 150, 0.1);
  border: 0.01rem solid rgba(100, 100, 100, 0.2);
  border-radius: 0.03rem;
}
.c7n-pro-typography kbd {
  margin: 0 0.022rem;
  padding: 0.015rem 0.04rem 0.01rem;
  font-size: 90%;
  background: rgba(150, 150, 150, 0.06);
  border: 0.01rem solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 0.02rem;
  border-radius: 0.03rem;
}
.c7n-pro-typography mark {
  padding: 0;
  background-color: #ffe58f;
}
.c7n-pro-typography u,
.c7n-pro-typography ins {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
.c7n-pro-typography s,
.c7n-pro-typography del {
  text-decoration: line-through;
}
.c7n-pro-typography strong {
  font-weight: 600;
}
.c7n-pro-typography-expand,
.c7n-pro-typography-copy {
  color: #3f51b5;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  margin-left: 0.04rem;
}
.c7n-pro-typography-expand:focus,
.c7n-pro-typography-copy:focus,
.c7n-pro-typography-expand:hover,
.c7n-pro-typography-copy:hover {
  color: #6374c2;
}
.c7n-pro-typography-expand:active,
.c7n-pro-typography-copy:active {
  color: #2b378f;
}
.c7n-pro-typography-copy-success,
.c7n-pro-typography-copy-success:hover,
.c7n-pro-typography-copy-success:focus {
  color: #00bf96;
}
.c7n-pro-typography ul,
.c7n-pro-typography ol {
  margin: 0 0 0.1rem;
  padding: 0;
}
.c7n-pro-typography ul li,
.c7n-pro-typography ol li {
  margin: 0 0 0 0.2rem;
  padding: 0 0 0 0.04rem;
}
.c7n-pro-typography ul {
  list-style-type: circle;
}
.c7n-pro-typography ul ul {
  list-style-type: disc;
}
.c7n-pro-typography ol {
  list-style-type: decimal;
}
.c7n-pro-typography pre,
.c7n-pro-typography blockquote {
  margin: 0.1rem 0;
}
.c7n-pro-typography pre {
  padding: 0.04rem 0.06rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: rgba(150, 150, 150, 0.1);
  border: 0.01rem solid rgba(100, 100, 100, 0.2);
  border-radius: 0.03rem;
}
.c7n-pro-typography pre code {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  background: transparent;
  border: 0;
}
.c7n-pro-typography blockquote {
  padding: 0 0 0 0.1rem;
  border-left: 0.04rem solid rgba(100, 100, 100, 0.2);
  opacity: 0.85;
}
.c7n-pro-typography-single-line {
  white-space: nowrap;
}
.c7n-pro-typography-ellipsis-single-line {
  overflow: hidden;
  text-overflow: ellipsis;
}
a.c7n-pro-typography-ellipsis-single-line,
span.c7n-pro-typography-ellipsis-single-line {
  vertical-align: bottom;
}
.c7n-pro-typography-ellipsis-multiple-line {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}