quasar/src/css/core/typography.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

body
  min-width: 100px
  min-height: 100%
  font-family: $typography-font-family
  -ms-text-size-adjust: 100%
  -webkit-text-size-adjust: 100%
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  font-smoothing: antialiased
  line-height: $body-line-height
  font-size: $body-font-size

for $heading, $value in $h-tags
  {$heading}
    font-size: $value.size
    font-weight: $value.weight
    line-height: $value.line-height
    letter-spacing: $value.letter-spacing

p
  margin: 0 0 $spaces.md.y

.text-
  for $heading, $value in $headings
    &{$heading}
      font-size: $value.size
      font-weight: $value.weight
      line-height: $value.line-height
      letter-spacing: $value.letter-spacing

  &uppercase
    text-transform: uppercase
  &lowercase
    text-transform: lowercase
  &capitalize
    text-transform: capitalize

  &center
    text-align: center
  &left
    text-align: left
  &right
    text-align: right
  &justify
    text-align: justify
    hyphens: auto

  &italic
    font-style: italic
  &bold
    font-weight: bold

  &no-wrap
    white-space: nowrap

  &strike
    text-decoration: line-through

  for $weight, $value in $text-weights
    &weight-{$weight}
      font-weight: $value

small
  font-size: 80%
big
  font-size: 170%
sub
  bottom: -.25em
sup
  top: -.5em