typography.scss 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. // Font Family
  2. /* #ifndef APP-NVUE */
  3. .#{$prefix}font-sans {
  4. font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  5. 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  6. }
  7. .#{$prefix}font-serif {
  8. font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  9. }
  10. .#{$prefix}font-mono {
  11. font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  12. }
  13. /* #endif */
  14. // 字号 {8~100} px || rpx
  15. @for $i from 8 through 48 {
  16. // font-size: {8~48}px;
  17. .#{$prefix}text-#{$i} {
  18. font-size: $i + px;
  19. }
  20. }
  21. @for $i from 8 through 96 {
  22. // font-size: {8~96}rpx;
  23. .#{$prefix}text-#{$i}r {
  24. font-size: $i + rpx;
  25. }
  26. }
  27. // 字体平滑度
  28. /* #ifndef APP-NVUE */
  29. .#{$prefix}antialiased {
  30. -webkit-font-smoothing: antialiased;
  31. -moz-osx-font-smoothing: grayscale;
  32. }
  33. .#{$prefix}subpixel-antialiased {
  34. -webkit-font-smoothing: auto;
  35. -moz-osx-font-smoothing: auto;
  36. }
  37. /* #endif */
  38. // 字体样式
  39. .#{$prefix}italic {
  40. font-style: italic;
  41. }
  42. .#{$prefix}not-italic {
  43. font-style: normal;
  44. }
  45. // 字体粗细
  46. .#{$prefix}font-thin {
  47. font-weight: 100;
  48. }
  49. .#{$prefix}font-extralight {
  50. font-weight: 200;
  51. }
  52. .#{$prefix}font-light {
  53. font-weight: 300;
  54. }
  55. .#{$prefix}font-normal {
  56. font-weight: 400;
  57. }
  58. .#{$prefix}font-medium {
  59. font-weight: 500;
  60. }
  61. .#{$prefix}font-semibold {
  62. font-weight: 600;
  63. }
  64. .#{$prefix}font-bold {
  65. font-weight: 700;
  66. }
  67. .#{$prefix}font-extrabold {
  68. font-weight: 800;
  69. }
  70. .#{$prefix}font-black {
  71. font-weight: 900;
  72. }
  73. @for $i from 1 through 9 {
  74. // font-weight: {100-900};
  75. .#{$prefix}font-#{$i * 100} {
  76. font-weight: $i * 100;
  77. }
  78. }
  79. // 连字符
  80. /* #ifndef APP-NVUE */
  81. .#{$prefix}hyphens-none {
  82. hyphens: none;
  83. }
  84. .#{$prefix}hyphens-manual {
  85. hyphens: manual;
  86. }
  87. .#{$prefix}hyphens-auto {
  88. hyphens: auto;
  89. }
  90. /* #endif */
  91. // 行高 {8~100} px || rpx
  92. @for $i from 8 through 48 {
  93. .#{$prefix}leading-#{$i} {
  94. line-height: $i + px;
  95. }
  96. }
  97. @for $i from 8 through 96 {
  98. .#{$prefix}leading-#{$i}r {
  99. line-height: $i + rpx;
  100. }
  101. }
  102. // 文本对齐
  103. .#{$prefix}text-left {
  104. text-align: left;
  105. }
  106. .#{$prefix}text-center {
  107. text-align: center;
  108. }
  109. .#{$prefix}text-right {
  110. text-align: right;
  111. }
  112. /* #ifndef APP-NVUE */
  113. .#{$prefix}text-justify {
  114. text-align: justify;
  115. }
  116. /* #endif */
  117. // 文本颜色 {000~999}
  118. /* #ifndef APP-NVUE */
  119. .#{$prefix}text-transparent {
  120. color: transparent;
  121. }
  122. .#{$prefix}text-current {
  123. color: currentColor;
  124. }
  125. /* #endif */
  126. .#{$prefix}text-000,
  127. .#{$prefix}text-black {
  128. color: #000;
  129. }
  130. .#{$prefix}text-fff,
  131. .#{$prefix}text-white {
  132. color: #fff;
  133. }
  134. @for $i from 1 through 9 {
  135. .#{$prefix}text-#{$i * 111} {
  136. color: unquote('##{$i * 111}');
  137. }
  138. }
  139. // 垂直对齐
  140. /* #ifndef APP-NVUE */
  141. .#{$prefix}align-baseline {
  142. vertical-align: baseline;
  143. }
  144. .#{$prefix}align-top {
  145. vertical-align: top;
  146. }
  147. .#{$prefix}align-middle {
  148. vertical-align: middle;
  149. }
  150. .#{$prefix}align-bottom {
  151. vertical-align: bottom;
  152. }
  153. .#{$prefix}align-text-top {
  154. vertical-align: text-top;
  155. }
  156. .#{$prefix}align-text-bottom {
  157. vertical-align: text-bottom;
  158. }
  159. /* #endif */
  160. // 文本溢出
  161. .#{$prefix}truncate {
  162. text-overflow: ellipsis;
  163. /* #ifndef APP-NVUE */
  164. overflow: hidden;
  165. -o-text-overflow: ellipsis;
  166. /* #endif */
  167. }
  168. .#{$prefix}overflow-ellipsis {
  169. /* #ifndef APP-NVUE */
  170. -o-text-overflow: ellipsis;
  171. /* #endif */
  172. text-overflow: ellipsis;
  173. }
  174. .#{$prefix}overflow-clip {
  175. /* #ifndef APP-NVUE */
  176. overflow: clip;
  177. /* #endif */
  178. /* #ifdef APP-NVUE */
  179. text-overflow: clip;
  180. /* #endif */
  181. }
  182. // 行数
  183. @for $i from 1 through 8 {
  184. .#{$prefix}lines-#{$i} {
  185. /* #ifdef APP-NVUE */
  186. lines: $i;
  187. /* #endif */
  188. /* #ifndef APP-NVUE */
  189. display: -webkit-box;
  190. -webkit-box-orient: vertical;
  191. -webkit-line-clamp: $i;
  192. /* #endif */
  193. }
  194. }
  195. // 空格
  196. /* #ifndef APP-NVUE */
  197. .#{$prefix}whitespace-normal {
  198. white-space: normal;
  199. }
  200. .#{$prefix}whitespace-nowrap {
  201. white-space: nowrap;
  202. }
  203. .#{$prefix}whitespace-pre {
  204. white-space: pre;
  205. }
  206. .#{$prefix}whitespace-pre-line {
  207. white-space: pre-line;
  208. }
  209. .#{$prefix}whitespace-pre-wrap {
  210. white-space: pre-wrap;
  211. }
  212. /* #endif */
  213. // 断字
  214. /* #ifndef APP-NVUE */
  215. .#{$prefix}break-normal {
  216. // word-wrap: normal;
  217. word-break: normal;
  218. overflow-wrap: normal;
  219. }
  220. .#{$prefix}break-words {
  221. overflow-wrap: break-word;
  222. // word-wrap: break-word;
  223. }
  224. .#{$prefix}break-all {
  225. // word-wrap: anywhere;
  226. word-break: break-all;
  227. }
  228. /* #endif */