index-pure.less 4.5 KB

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