@c8y/style/styles/base/_type.less

Styles for Cumulocity IoT applications

@import "../../variables/_dlt-c8y-icons-vars.less";
@import "../mixins/_text-overflow.less";

/**
 * Typography Styles
 *
 * Note: Most spacing values use @size-* tokens from the 8px base unit system.
 *
 * Intentionally hardcoded values:
 * - Percentages (65%, 75%, 80%, 90%, 120%, 0.2em): Proportional scaling
 * - Border widths (1px, 4px, 5px): Border properties, not spacing
 * - Unitless line-heights (1, 1.4): CSS best practice for line-height
 * - Calc expressions with layout vars: Specific layout calculations
 */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: @headings-font-weight;
  font-family: @headings-font-family;
  line-height: @headings-line-height;
  small,
  .small {
    color: @headings-small-color;
    font-weight: normal;
    line-height: 1;
  }
}

h1,
h2,
h3,
h4,
h5,
h6{
  color: @headings-color;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  // reset margins to 0;
  // on bootstrap uses @line-height-computed on top and (@line-height-computed / 2) on bottom;
  margin-top: 0;
  margin-bottom: 0;
  small,
  .small {
    font-size: 65%;
  }
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  // reset margins to 0;
  // on bootstrap uses (@line-height-computed / 2) for top and bottom;
  margin-top: 0;
  margin-bottom: 0;
  small,
  .small {
    font-size: 75%;
  }
}

h1,
.h1 {
  font-size: @font-size-h1;
}

h2,
.h2 {
  font-size: @font-size-h2;
}

h3,
.h3 {
  font-size: @font-size-h3;
}

h4,
.h4 {
  font-size: @font-size-h4;
}

h5,
.h5 {
  font-size: @font-size-h5;
}

h6,
.h6 {
  font-size: @font-size-h6;
}

// Body text
p {
  margin: 0;
}

.lead {
  margin-bottom: @size-16;
  font-size: calc((@font-size-base * 1.142857143));
  line-height: 1.4;
}

// Emphasis & misc
// Ex: (12px small font / 14px base font) * 100% = about 85%
small,
.small {
  font-size: @font-size-small;
}

mark,
.mark {
  padding: 0.2em;
  background-color: @state-warning-bg;
}

// Lists
// Unordered and Ordered lists
ul,
ol {
  margin-top: 0;
  margin-bottom: calc(@line-height-computed / 2);
  ul,
  ol {
    margin-bottom: 0;
  }
}

// List options
// checkmark bullets in lists
.check-bullets {
  margin: 0 0 @size-10;
  padding: 0;
  list-style: none;
  text-align: left;
  > li {
    margin-bottom: @size-5;
    padding: 0 0 0 @size-20;
    &:before {
      display: inline-block;
      margin-left: calc(-1 * @size-20);
      width: @size-20;
      content: @dlt-c8y-icon-check;
      font: normal normal normal @font-size-base/1 @icon-font-family;
      font-size: 120%;

      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  &.success {
    > li:before {
      color: var(--palette-status-success, var(--c8y-palette-status-success));
    }
  }
  &.brand-primary {
    > li:before {
      color: var(--brand-primary, var(--c8y-brand-primary));
    }
  }
}

// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
  padding-left: 0;
  list-style: none;
}

// Inline turns list items into inline-block
.list-inline {
  margin-left: calc(-1 * @size-5);

  &:extend(.list-unstyled);
  > li {
    display: inline-block;
    padding-right: @size-5;
    padding-left: @size-5;
  }
}

// Description Lists
dl {
  margin-top: 0; // Remove browser default
  margin-bottom: @line-height-computed;
}

dt,
dd {
  line-height: @line-height-base;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0; // Undo browser default
}

dl.dl-inline {
  margin-bottom: 0;
  dt {
    margin-right: @size-5;
  }
  dt,
  dd {
    display: inline-block;
    vertical-align: top;
  }
  dd:after {
    content: '\A';
    white-space: pre;
  }
}

// Horizontal description lists
// Defaults to being stacked without any of the below styles applied, until the grid breakpoint is reached (default of ~768px).
.dl-horizontal {
  dd {
    &::before,
    &::after {
      display: table;
      content: " ";
    }
    &::after {
      clear: both;
    }
  }
  @media (min-width: @grid-float-breakpoint) {
    dt {
      float: left;
      clear: left;
      width: calc((@dl-horizontal-offset - 20) * 1px);
      text-align: right;

      .text-overflow();
    }
    dd {
      margin-bottom: @size-base;
      margin-left: calc(@dl-horizontal-offset * 1px);
    }
  }
}

// Misc
abbr[title],
abbr[data-original-title] {
  text-decoration-color: @abbr-border-color;
  text-decoration-line:overline;
  text-decoration-style: dotted;
  border-bottom-color: @abbr-border-color;
  cursor: help;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

blockquote {
  margin: 0 0 @line-height-computed;
  padding: calc(@line-height-computed / 2) @line-height-computed;
  border-left: 4px solid @blockquote-border-color;
  font-size: @blockquote-font-size;
  p,
  ul,
  ol {
    &:last-child {
      margin-bottom: 0;
    }
  }

  footer,
  small,
  .small {
    display: block;
    color: @blockquote-small-color;
    font-size: 80%; // back to default font-size
    line-height: @line-height-base;
    &:before {
      content: '\2014 \00A0'; // em dash, nbsp
    }
  }
}

// Opposite alignment of blockquote
// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
.blockquote-reverse,
blockquote.pull-right {
  padding-right: @size-16;
  padding-left: 0;
  border-right: 5px solid @blockquote-border-color;
  border-left: 0;
  text-align: right; // Account for citation
  footer,
  small,
  .small {
    &:before {
      content: '';
    }
    &:after {
      content: '\00A0 \2014'; // nbsp, em dash
    }
  }
}

address {
  margin-bottom: @line-height-computed;
  font-style: normal;
  line-height: @line-height-base;
}

/* Languages
  font-family set based on html lang attribute (https://www.w3schools.com/tags/ref_language_codes.asp) and on the keys from .pot files
*/
:lang(ja),
:lang(ja_jp),
:lang(ja-jp),
:lang(ja_JP),
:lang(ja-JP) {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  --c8y-font-size-base: 13px;
}

:lang(zh-Hans),
:lang(zh-tw),
:lang(zh_CN),
:lang(zh-cn) {
  font-family: 'Microsoft YaHei New', 'Microsoft Yahei', '微软雅黑', '宋体', SimSun, STXihei,
    '华文细黑', sans-serif;
}