quasar/src/css/core/typography.styl at v0.15 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
body
  min-width 100px
  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
  background $body-background
  color $body-color
  min-height 100vh

for $heading, $value in $h-tags
  {$heading}
    font-size: $value.size
    font-weight: $value.weight
    if $value.line-height
      line-height: $value.line-height
    if $value.letter-spacing
      letter-spacing: $value.letter-spacing
    @media screen and (max-width $breakpoint-sm)
      font-size: ($value.size * .6)

for $heading, $value in $headings
  .q-{$heading}-opacity
    opacity: $value.opacity
  .q-{$heading}
    font-size: $value.size
    font-weight: $value.weight
    if $value.line-height
      line-height: $value.line-height
    if $value.letter-spacing
      letter-spacing: $value.letter-spacing

p
  margin: 0 0 $spaces.md.y

.caption
  color $grey-9
  letter-spacing 0
  line-height 24px
  padding 0
  font-weight 300

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

.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

  &no-wrap
    white-space nowrap

  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

blockquote
  padding: $spaces.sm.y $spaces.md.x
  margin 0
  font-size 16px
  border-left: $spaces.xs.x solid $primary
  border-left: $spaces.xs.x solid var(--q-color-primary)
  &.text-right
    padding-right: $spaces.md.x
    padding-left 0
    border-right: $spaces.xs.x solid $primary
    border-right: $spaces.xs.x solid var(--q-color-primary)
    border-left 0
    text-align right

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

.quote
  padding 10px 20px
  margin 0 0 20px
  border-left 5px solid $primary
  border-left 5px solid var(--q-color-primary)
  &.text-right
    padding-right 15px
    padding-left 0
    border-right 5px solid $primary
    border-right 5px solid var(--q-color-primary)
    border-left 0
    text-align right

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%