_typography.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. /* Typography */
  2. body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, .alert, a, .td-name, td, button.close {
  3. -moz-osx-font-smoothing: grayscale;
  4. -webkit-font-smoothing: antialiased;
  5. font-family: 'Lato', sans-serif;
  6. }
  7. body {
  8. font-size: 14px;
  9. color: $body-text-color;
  10. }
  11. a {
  12. color: $primary-color;
  13. &:hover, &:focus {
  14. color: $primary2-color;
  15. }
  16. }
  17. h1,
  18. .h1
  19. {
  20. font-size: 1.725rem;
  21. }
  22. h2,
  23. .h2
  24. {
  25. font-size: 1.35rem;
  26. }
  27. h3,
  28. .h3
  29. {
  30. font-size: 1.1625rem;
  31. }
  32. h4,
  33. .h4
  34. {
  35. font-size: 1.0375rem;
  36. }
  37. h5,
  38. .h5
  39. {
  40. font-size: .9125rem;
  41. }
  42. h6,
  43. .h6
  44. {
  45. font-size: .825rem;
  46. }
  47. p {
  48. font-size: 14px;
  49. line-height: 1.82;
  50. margin-bottom: 1rem;
  51. word-break: break-word;
  52. }
  53. h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  54. line-height: 1.4;
  55. a {
  56. color: inherit;
  57. }
  58. }
  59. small, .small {
  60. font-size: 13px;
  61. }
  62. b, .b, strong, .strong{
  63. font-weight: $font-weight-bold;
  64. }
  65. .page-pretitle{
  66. letter-spacing: .08em;
  67. text-transform: uppercase;
  68. color: #95aac9;
  69. }
  70. .page-title {
  71. font-size: 23px;
  72. font-weight: $font-weight-bold;
  73. color: #444444;
  74. line-height: 30px;
  75. margin-bottom: 20px;
  76. }
  77. .page-category {
  78. color: #444444;
  79. line-height: 1.8;
  80. margin-bottom: 25px;
  81. }
  82. .text-primary, .text-primary a {
  83. color: $primary-color !important;
  84. &:hover {
  85. color: $primary-color !important;
  86. }
  87. }
  88. .text-secondary, .text-secondary a {
  89. color: $secondary-color !important;
  90. &:hover {
  91. color: $secondary-color !important;
  92. }
  93. }
  94. .text-info, .text-info a {
  95. color: $info-color !important;
  96. &:hover {
  97. color: $info-color !important;
  98. }
  99. }
  100. .text-success, .text-success a {
  101. color: $success-color !important;
  102. &:hover {
  103. color: $success-color !important;
  104. }
  105. }
  106. .text-warning, .text-warning a {
  107. color: $warning-color !important;
  108. &:hover {
  109. color: $warning-color !important;
  110. }
  111. }
  112. .text-danger, .text-danger a {
  113. color: $danger-color !important;
  114. &:hover {
  115. color: $danger-color !important;
  116. }
  117. }
  118. label {
  119. color: #495057 !important;
  120. font-size: 14px !important;
  121. }
  122. .text-small {
  123. font-size: 11px;
  124. }
  125. .metric-value {
  126. margin-bottom: 5px;
  127. line-height: 1;
  128. white-space: nowrap;
  129. }
  130. .metric-label {
  131. font-size: .975rem;
  132. font-weight: 500;
  133. color: #686f76;
  134. white-space: nowrap;
  135. margin-bottom: 0;
  136. }
  137. /* Font-weight */
  138. .fw-light {
  139. font-weight: $font-weight-light !important;
  140. }
  141. .fw-normal {
  142. font-weight: $font-weight-normal !important;
  143. }
  144. .fw-mediumbold {
  145. font-weight: $font-weight-normal !important;
  146. }
  147. .fw-bold {
  148. font-weight: $font-weight-bold !important;
  149. }
  150. .fw-extrabold {
  151. font-weight: $font-weight-extrabold !important;
  152. }