quasar-framework/src/themes/core/typography.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

body
  min-width 320px
  background $background
  font-family $typography-font-family
  color $text-color
  -ms-text-size-adjust 100%
  -webkit-text-size-adjust 100%
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-smoothing antialiased

a
  color $link-color
  text-decoration none
  cursor pointer
  outline 0
  transition color .25s
  &:hover
    color $link-color-active
  &:active, &:hover
    outline-width 0

h1, h2, h3, h4, h5, h6
  font-weight 400
  line-height 110%
  -webkit-font-smoothing antialised

h1
  font-size 4.2rem
  letter-spacing -.04em
  margin 2.1rem 0 1.68rem
  font-weight 300

h2
  font-size 3.56rem
  letter-spacing -.02em
  margin 1.78rem 0 1.424rem

h3
  font-size 2.92rem
  margin 1.46rem 0 1.168rem

h4
  font-size 2.28rem
  margin 1.14rem 0 .912rem

h5
  font-size 1.64rem
  margin .82rem 0 .656rem
  -moz-osx-font-smoothing grayscale

h6
  font-size 1rem
  letter-spacing .02em
  margin .5rem 0 .4rem
  font-weight 500

p
  font-size 1rem
  letter-spacing 0
  margin 0 0 1rem
  line-height 24px
  color rgba(0, 0, 0, .71)
  padding 0
  -webkit-font-smoothing antialiased
  &.caption
    font-weight 300
    &:not(:first-child)
      margin-top 2rem

.token
  color opposite-non-color($primary)
  background alpha($primary, .7)
  border-radius $generic-border-radius
  padding 3px 5px
  font-size 90%

.uppercase
  text-transform uppercase
.lowercase
  text-transform lowercase
.capitalize
  text-transform capitalize

+prefix-classes('text-')
  .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

.light-paragraph
  font-weight 300
.thin-paragraph
  font-weight 200

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

.strong
  font-weight bold
.emphasize
  font-style italic

blockquote
  padding 10px 20px
  margin 0 0 20px
  font-size 17.5px
  border-left 5px solid $primary
  &.text-right
    padding-right 15px
    padding-left 0
    border-right 5px solid $primary
    border-left 0
    text-align right

  small
    display block
    line-height 1.4
    color $faded
    &:before
      content '\2014 \00A0'

dt
  font-weight bold
dd
  margin-left 0
dt, dd
  line-height 1.4
dl
  margin-top 0
  margin-bottom 20px
  &.horizontal
    dt
      float left
      width 25%
      clear left
      text-align right
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    dd
      margin-left 30%



::-webkit-selection,
::-moz-selection,
::selection
  background $primary
  color alpha(opposite-non-color($primary), .87)

textarea::-webkit-selection,
input::-webkit-selection,
textarea::-moz-selection,
input::-moz-selection,
textarea::selection,
input::selection
  background alpha($primary, .4)
  color alpha(opposite-non-color($primary), .87)

*:-webkit-full-screen // @stylint ignore
  width 100%
  height 100%