index.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @typography-prefix-cls: ~'@{ant-prefix}-typography';
  4. // =============== Basic ===============
  5. .@{typography-prefix-cls} {
  6. color: @text-color;
  7. word-break: break-word;
  8. &&-secondary {
  9. color: @text-color-secondary;
  10. }
  11. &&-success {
  12. color: @success-color;
  13. }
  14. &&-warning {
  15. color: @warning-color;
  16. }
  17. &&-danger {
  18. color: @error-color;
  19. a&:active,
  20. a&:focus {
  21. color: @error-color-active;
  22. }
  23. a&:hover {
  24. color: @error-color-hover;
  25. }
  26. }
  27. &&-disabled {
  28. color: @disabled-color;
  29. cursor: not-allowed;
  30. user-select: none;
  31. }
  32. // Tag
  33. div&,
  34. p {
  35. .typography-paragraph();
  36. }
  37. h1&,
  38. div&-h1,
  39. div&-h1 > textarea,
  40. h1 {
  41. .typography-title-1();
  42. }
  43. h2&,
  44. div&-h2,
  45. div&-h2 > textarea,
  46. h2 {
  47. .typography-title-2();
  48. }
  49. h3&,
  50. div&-h3,
  51. div&-h3 > textarea,
  52. h3 {
  53. .typography-title-3();
  54. }
  55. h4&,
  56. div&-h4,
  57. div&-h4 > textarea,
  58. h4 {
  59. .typography-title-4();
  60. }
  61. h5&,
  62. div&-h5,
  63. div&-h5 > textarea,
  64. h5 {
  65. .typography-title-5();
  66. }
  67. h1&,
  68. h2&,
  69. h3&,
  70. h4&,
  71. h5& {
  72. .@{typography-prefix-cls} + & {
  73. margin-top: @typography-title-margin-top;
  74. }
  75. }
  76. div,
  77. ul,
  78. li,
  79. p,
  80. h1,
  81. h2,
  82. h3,
  83. h4,
  84. h5 {
  85. + h1,
  86. + h2,
  87. + h3,
  88. + h4,
  89. + h5 {
  90. margin-top: @typography-title-margin-top;
  91. }
  92. }
  93. a&-ellipsis,
  94. span&-ellipsis {
  95. display: inline-block;
  96. max-width: 100%;
  97. }
  98. a&,
  99. a {
  100. .operation-unit();
  101. text-decoration: @link-decoration;
  102. &:active,
  103. &:hover {
  104. text-decoration: @link-hover-decoration;
  105. }
  106. &[disabled],
  107. &.@{typography-prefix-cls}-disabled {
  108. color: @disabled-color;
  109. cursor: not-allowed;
  110. &:active,
  111. &:hover {
  112. color: @disabled-color;
  113. }
  114. &:active {
  115. pointer-events: none;
  116. }
  117. }
  118. }
  119. code {
  120. margin: 0 0.2em;
  121. padding: 0.2em 0.4em 0.1em;
  122. font-size: 85%;
  123. background: rgba(150, 150, 150, 0.1);
  124. border: 1px solid rgba(100, 100, 100, 0.2);
  125. border-radius: 3px;
  126. }
  127. kbd {
  128. margin: 0 0.2em;
  129. padding: 0.15em 0.4em 0.1em;
  130. font-size: 90%;
  131. background: rgba(150, 150, 150, 0.06);
  132. border: 1px solid rgba(100, 100, 100, 0.2);
  133. border-bottom-width: 2px;
  134. border-radius: 3px;
  135. }
  136. mark {
  137. padding: 0;
  138. background-color: @gold-3;
  139. }
  140. u,
  141. ins {
  142. text-decoration: underline;
  143. text-decoration-skip-ink: auto;
  144. }
  145. s,
  146. del {
  147. text-decoration: line-through;
  148. }
  149. strong {
  150. font-weight: 600;
  151. }
  152. // Operation
  153. &-expand,
  154. &-edit,
  155. &-copy {
  156. .operation-unit();
  157. margin-left: 4px;
  158. }
  159. &-copy-success {
  160. &,
  161. &:hover,
  162. &:focus {
  163. color: @success-color;
  164. }
  165. }
  166. // Text input area
  167. &-edit-content {
  168. position: relative;
  169. div& {
  170. left: -@input-padding-horizontal - 1px;
  171. margin-top: -@input-padding-vertical-base - 1px;
  172. margin-bottom: calc(1em - @input-padding-vertical-base - 1px);
  173. }
  174. &-confirm {
  175. position: absolute;
  176. right: 10px;
  177. bottom: 8px;
  178. color: @text-color-secondary;
  179. // default style
  180. font-weight: normal;
  181. font-size: @font-size-base;
  182. font-style: normal;
  183. pointer-events: none;
  184. }
  185. // Fix Editable Textarea flash in Firefox
  186. textarea {
  187. // https://stackoverflow.com/a/7695964/3040605
  188. height: 1em;
  189. margin: 0 !important;
  190. /* stylelint-disable-next-line property-no-vendor-prefix */
  191. -moz-transition: none;
  192. }
  193. }
  194. // list
  195. ul,
  196. ol {
  197. margin: 0 0 1em;
  198. padding: 0;
  199. li {
  200. margin: 0 0 0 20px;
  201. padding: 0 0 0 4px;
  202. }
  203. }
  204. ul {
  205. list-style-type: circle;
  206. ul {
  207. list-style-type: disc;
  208. }
  209. }
  210. ol {
  211. list-style-type: decimal;
  212. }
  213. // pre & block
  214. pre,
  215. blockquote {
  216. margin: 1em 0;
  217. }
  218. pre {
  219. padding: 0.4em 0.6em;
  220. white-space: pre-wrap;
  221. word-wrap: break-word;
  222. background: rgba(150, 150, 150, 0.1);
  223. border: 1px solid rgba(100, 100, 100, 0.2);
  224. border-radius: 3px;
  225. // Compatible for marked
  226. code {
  227. display: inline;
  228. margin: 0;
  229. padding: 0;
  230. font-size: inherit;
  231. font-family: inherit;
  232. background: transparent;
  233. border: 0;
  234. }
  235. }
  236. blockquote {
  237. padding: 0 0 0 0.6em;
  238. border-left: 4px solid rgba(100, 100, 100, 0.2);
  239. opacity: 0.85;
  240. }
  241. // ============ Ellipsis ============
  242. &-single-line {
  243. white-space: nowrap;
  244. }
  245. &-ellipsis-single-line {
  246. overflow: hidden;
  247. text-overflow: ellipsis;
  248. // https://blog.csdn.net/iefreer/article/details/50421025
  249. a&,
  250. span& {
  251. vertical-align: bottom;
  252. }
  253. }
  254. &-ellipsis-multiple-line {
  255. /* stylelint-disable-next-line value-no-vendor-prefix */
  256. display: -webkit-box;
  257. overflow: hidden;
  258. -webkit-line-clamp: 3;
  259. /*! autoprefixer: ignore next */
  260. -webkit-box-orient: vertical;
  261. }
  262. }
  263. @import './rtl';