ygd/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 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.yg-typography {
  color: #333;
}
.yg-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}
.yg-typography-warning {
  color: #ffa812;
}
.yg-typography-danger {
  color: #e2062c;
}
.yg-typography-disabled {
  color: rgba(51, 51, 51, 0.25);
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
div.yg-typography,
.yg-typography p {
  margin-bottom: 1em;
}
h1.yg-typography,
.yg-typography h1 {
  margin-bottom: 0.5em;
  color: rgba(51, 51, 51, 0.85);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.23;
}
h2.yg-typography,
.yg-typography h2 {
  margin-bottom: 0.5em;
  color: rgba(51, 51, 51, 0.85);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
}
h3.yg-typography,
.yg-typography h3 {
  margin-bottom: 0.5em;
  color: rgba(102, 102, 102, 0.85);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
}
h4.yg-typography,
.yg-typography h4 {
  margin-bottom: 0.5em;
  color: rgba(51, 51, 51, 0.85);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
}
.yg-typography + h1.yg-typography,
.yg-typography + h2.yg-typography,
.yg-typography + h3.yg-typography,
.yg-typography + h4.yg-typography {
  margin-top: 1.2em;
}
.yg-typography div + h1,
.yg-typography ul + h1,
.yg-typography li + h1,
.yg-typography p + h1,
.yg-typography h1 + h1,
.yg-typography h2 + h1,
.yg-typography h3 + h1,
.yg-typography h4 + h1,
.yg-typography div + h2,
.yg-typography ul + h2,
.yg-typography li + h2,
.yg-typography p + h2,
.yg-typography h1 + h2,
.yg-typography h2 + h2,
.yg-typography h3 + h2,
.yg-typography h4 + h2,
.yg-typography div + h3,
.yg-typography ul + h3,
.yg-typography li + h3,
.yg-typography p + h3,
.yg-typography h1 + h3,
.yg-typography h2 + h3,
.yg-typography h3 + h3,
.yg-typography h4 + h3,
.yg-typography div + h4,
.yg-typography ul + h4,
.yg-typography li + h4,
.yg-typography p + h4,
.yg-typography h1 + h4,
.yg-typography h2 + h4,
.yg-typography h3 + h4,
.yg-typography h4 + h4 {
  margin-top: 1.2em;
}
span.yg-typography-ellipsis {
  display: inline-block;
}
.yg-typography a {
  color: #475669;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
}
.yg-typography a:focus,
.yg-typography a:hover {
  color: #636b75;
}
.yg-typography a:focus {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
.yg-typography a:active {
  color: #2a3442;
}
.yg-typography a:active,
.yg-typography a:hover {
  text-decoration: none;
}
.yg-typography a[disabled] {
  color: rgba(51, 51, 51, 0.25);
  cursor: not-allowed;
  pointer-events: none;
}
.yg-typography code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em 0.1em;
  font-size: 85%;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 3px;
}
.yg-typography mark {
  padding: 0;
  background-color: #ffe08c;
}
.yg-typography u,
.yg-typography ins {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
.yg-typography s,
.yg-typography del {
  text-decoration: line-through;
}
.yg-typography strong {
  font-weight: 600;
}
.yg-typography-expand,
.yg-typography-edit,
.yg-typography-copy {
  color: #475669;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
  margin-left: 8px;
}
.yg-typography-expand:focus,
.yg-typography-edit:focus,
.yg-typography-copy:focus,
.yg-typography-expand:hover,
.yg-typography-edit:hover,
.yg-typography-copy:hover {
  color: #636b75;
}
.yg-typography-expand:focus,
.yg-typography-edit:focus,
.yg-typography-copy:focus {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
.yg-typography-expand:active,
.yg-typography-edit:active,
.yg-typography-copy:active {
  color: #2a3442;
}
.yg-typography-copy-success,
.yg-typography-copy-success:hover,
.yg-typography-copy-success:focus {
  color: #228b22;
}
.yg-typography-edit-content {
  position: relative;
}
div.yg-typography-edit-content {
  left: -11px;
  margin-top: -1px;
  margin-bottom: calc(1em - 0px - 2px);
}
.yg-typography-edit-content-confirm {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.yg-typography ul,
.yg-typography ol {
  margin: 0 0 1em 0;
  padding: 0;
}
.yg-typography ul li,
.yg-typography ol li {
  margin: 0 0 0 20px;
  padding: 0 0 0 4px;
}
.yg-typography ul li {
  list-style-type: circle;
}
.yg-typography ul li li {
  list-style-type: disc;
}
.yg-typography ol li {
  list-style-type: decimal;
}
.yg-typography-ellipsis-single-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.yg-typography-ellipsis-multiple-line {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow: hidden;
}