global.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  1. *,
  2. ::before,
  3. ::after {
  4. box-sizing: border-box;
  5. border-color: currentcolor;
  6. border-style: solid;
  7. border-width: 0;
  8. }
  9. html {
  10. box-sizing: border-box;
  11. width: 100%;
  12. height: 100%;
  13. line-height: 1.5;
  14. tab-size: 4;
  15. text-size-adjust: 100%;
  16. }
  17. body {
  18. width: 100%;
  19. height: 100%;
  20. margin: 0;
  21. font-family:
  22. 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
  23. '微软雅黑', Arial, sans-serif;
  24. line-height: inherit;
  25. -moz-osx-font-smoothing: grayscale;
  26. -webkit-font-smoothing: antialiased;
  27. text-rendering: optimizelegibility;
  28. }
  29. #root {
  30. width: 100%;
  31. height: 100%;
  32. overflow: hidden auto;
  33. }
  34. hr {
  35. height: 0;
  36. color: inherit;
  37. border-top-width: 1px;
  38. }
  39. abbr:where([title]) {
  40. text-decoration: underline dotted;
  41. }
  42. a {
  43. color: inherit;
  44. text-decoration: inherit;
  45. }
  46. b,
  47. strong {
  48. font-weight: bolder;
  49. }
  50. code,
  51. kbd,
  52. samp,
  53. pre {
  54. font-family:
  55. ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
  56. monospace;
  57. font-size: 1em;
  58. }
  59. small {
  60. font-size: 80%;
  61. }
  62. sub,
  63. sup {
  64. position: relative;
  65. font-size: 75%;
  66. line-height: 0;
  67. vertical-align: baseline;
  68. }
  69. sub {
  70. bottom: -0.25em;
  71. }
  72. sup {
  73. top: -0.5em;
  74. }
  75. table {
  76. text-indent: 0;
  77. border-collapse: collapse;
  78. border-color: inherit;
  79. }
  80. button,
  81. input,
  82. optgroup,
  83. select,
  84. textarea {
  85. padding: 0;
  86. margin: 0;
  87. font-family: inherit;
  88. font-size: 100%;
  89. line-height: inherit;
  90. color: inherit;
  91. }
  92. button,
  93. select {
  94. text-transform: none;
  95. }
  96. button,
  97. [type='button'],
  98. [type='reset'],
  99. [type='submit'] {
  100. background-image: none;
  101. }
  102. :-moz-focusring {
  103. outline: auto;
  104. }
  105. :-moz-ui-invalid {
  106. box-shadow: none;
  107. }
  108. progress {
  109. vertical-align: baseline;
  110. }
  111. ::-webkit-inner-spin-button,
  112. ::-webkit-outer-spin-button {
  113. height: auto;
  114. }
  115. [type='search'] {
  116. outline-offset: -2px;
  117. }
  118. ::-webkit-file-upload-button {
  119. font: inherit;
  120. }
  121. summary {
  122. display: list-item;
  123. }
  124. blockquote,
  125. dl,
  126. dd,
  127. h1,
  128. h2,
  129. h3,
  130. h4,
  131. h5,
  132. h6,
  133. hr,
  134. figure,
  135. p,
  136. pre {
  137. margin: 0;
  138. }
  139. fieldset {
  140. padding: 0;
  141. margin: 0;
  142. }
  143. legend {
  144. padding: 0;
  145. }
  146. ol,
  147. ul,
  148. menu {
  149. padding: 0;
  150. margin: 0;
  151. list-style: none;
  152. }
  153. textarea {
  154. resize: vertical;
  155. }
  156. input::placeholder,
  157. textarea::placeholder {
  158. color: #9ca3af;
  159. opacity: 1;
  160. }
  161. button,
  162. [role='button'] {
  163. cursor: pointer;
  164. }
  165. :disabled {
  166. cursor: default;
  167. }
  168. svg,
  169. video,
  170. canvas,
  171. audio,
  172. iframe,
  173. embed,
  174. object {
  175. display: block;
  176. }
  177. img,
  178. video {
  179. max-width: 100%;
  180. height: auto;
  181. }
  182. [hidden] {
  183. display: none;
  184. }
  185. .dark {
  186. color-scheme: dark;
  187. }
  188. label {
  189. font-weight: 700;
  190. }
  191. *,
  192. *::before,
  193. *::after {
  194. box-sizing: inherit;
  195. }
  196. a:focus,
  197. a:active {
  198. outline: none;
  199. }
  200. a,
  201. a:focus,
  202. a:hover {
  203. color: inherit;
  204. text-decoration: none;
  205. cursor: pointer;
  206. }
  207. div:focus {
  208. outline: none;
  209. }
  210. .clearfix {
  211. &::after {
  212. display: block;
  213. height: 0;
  214. clear: both;
  215. font-size: 0;
  216. visibility: hidden;
  217. content: ' ';
  218. }
  219. }
  220. // RTL 支持
  221. [dir='rtl'] {
  222. // 文本对齐
  223. text-align: right;
  224. // left-[xpx] 转换为 right-[xpx]
  225. [class*='left-['] {
  226. @for $i from 0 through 100 {
  227. &.left-\[#{$i}px\] {
  228. left: unset;
  229. right: #{$i}px;
  230. }
  231. }
  232. }
  233. // right-[xpx] 转换为 left-[xpx]
  234. [class*='right-['] {
  235. @for $i from 0 through 100 {
  236. &.right-\[#{$i}px\] {
  237. right: unset;
  238. left: #{$i}px;
  239. }
  240. }
  241. }
  242. // 边距和填充
  243. .ml-auto {
  244. margin-left: unset;
  245. margin-right: auto;
  246. }
  247. .mr-auto {
  248. margin-right: unset;
  249. margin-left: auto;
  250. }
  251. // 浮动
  252. .float-right {
  253. float: left;
  254. }
  255. .float-left {
  256. float: right;
  257. }
  258. // 边框
  259. .border-l {
  260. border-left: none;
  261. border-right: 1px solid;
  262. }
  263. .border-r {
  264. border-right: none;
  265. border-left: 1px solid;
  266. }
  267. // 圆角
  268. .rounded-l {
  269. border-radius: 0 0.375rem 0.375rem 0;
  270. }
  271. .rounded-r {
  272. border-radius: 0.375rem 0 0 0.375rem;
  273. }
  274. // 图标
  275. .icon {
  276. transform: scaleX(-1);
  277. }
  278. // 列表
  279. ul,
  280. ol {
  281. padding-right: 1.5em;
  282. padding-left: 0;
  283. }
  284. // 表格
  285. table {
  286. direction: rtl;
  287. }
  288. th,
  289. td {
  290. text-align: right;
  291. }
  292. // 输入框
  293. input,
  294. textarea {
  295. text-align: right;
  296. }
  297. // 下拉菜单
  298. .ant-select-dropdown {
  299. direction: rtl;
  300. }
  301. // 模态框
  302. .ant-modal {
  303. direction: rtl;
  304. }
  305. // 抽屉
  306. .ant-drawer {
  307. direction: rtl;
  308. }
  309. // 消息提示
  310. .ant-message {
  311. direction: rtl;
  312. }
  313. // 通知提醒
  314. .ant-notification {
  315. direction: rtl;
  316. }
  317. }