old-icon.scss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715
  1. [class*="vxe-icon--"] {
  2. display: inline-block;
  3. vertical-align: middle;
  4. position: relative;
  5. direction: ltr;
  6. font-family: Verdana,Arial,Tahoma;
  7. font-weight: normal;
  8. user-select: none;
  9. &.rotate45 {
  10. transform: rotate(45deg);
  11. }
  12. &.rotate90 {
  13. transform: rotate(90deg);
  14. }
  15. &.rotate180 {
  16. transform: rotate(180deg);
  17. }
  18. }
  19. %DefaultWidthHeight {
  20. width: 1em;
  21. height: 1em;
  22. line-height: 1em;
  23. }
  24. %PseudoClass {
  25. content: "";
  26. position: absolute;
  27. }
  28. .vxe-icon--square {
  29. @extend %DefaultWidthHeight;
  30. &:before {
  31. @extend %PseudoClass;
  32. left: 0.05em;
  33. top: 0.05em;
  34. width: 0.9em;
  35. height: 0.9em;
  36. border-width: 0.1em;
  37. border-style: solid;
  38. border-color: inherit;
  39. }
  40. }
  41. .vxe-icon--zoomin {
  42. @extend %DefaultWidthHeight;
  43. border-width: 0.1em;
  44. border-style: solid;
  45. border-color: inherit;
  46. background-color: var(--vxe-ui-layout-background-color);
  47. &:before,
  48. &:after {
  49. @extend %PseudoClass;
  50. background-color: inherit;
  51. }
  52. &:before {
  53. left: -0.1em;
  54. top: 0.2em;
  55. width: 1.1em;
  56. height: 0.4em;
  57. }
  58. &:after {
  59. top: -0.1em;
  60. left: 0.2em;
  61. width: 0.4em;
  62. height: 1.1em;
  63. }
  64. }
  65. .vxe-icon--zoomout {
  66. @extend %DefaultWidthHeight;
  67. position: relative;
  68. &:before {
  69. @extend %PseudoClass;
  70. right: 0;
  71. top: 0;
  72. width: 0.7em;
  73. height: 0.7em;
  74. border-width: 0.1em;
  75. border-style: solid;
  76. border-color: inherit;
  77. }
  78. &:after {
  79. @extend %PseudoClass;
  80. left: 0.1em;
  81. bottom: 0.1em;
  82. width: 0.7em;
  83. height: 0.7em;
  84. border-width: 0.1em;
  85. border-style: solid;
  86. border-color: inherit;
  87. background-color: var(--vxe-ui-layout-background-color);
  88. }
  89. }
  90. .vxe-icon--menu {
  91. $yOffset: 0.36em;
  92. @extend %DefaultWidthHeight;
  93. &:before {
  94. content: "";
  95. display: inline-block;
  96. width: 0.22em;
  97. height: 0.22em;
  98. box-shadow: 0 -#{$yOffset} 0, -#{$yOffset} -#{$yOffset} 0, #{$yOffset} -#{$yOffset} 0, 0 0 0 1em inset, -#{$yOffset} 0 0, #{$yOffset} 0 0, 0 #{$yOffset} 0, -#{$yOffset} #{$yOffset} 0, #{$yOffset} #{$yOffset} 0;
  99. margin: 0.26em;
  100. }
  101. }
  102. %Caret {
  103. @extend %DefaultWidthHeight;
  104. &:before {
  105. @extend %PseudoClass;
  106. border-width: 0.4em;
  107. border-style: solid;
  108. border-color: transparent;
  109. }
  110. }
  111. .vxe-icon--caret-top {
  112. @extend %Caret;
  113. &:before {
  114. left: 0.1em;
  115. bottom: 0.3em;
  116. border-bottom-color: inherit;
  117. }
  118. }
  119. .vxe-icon--caret-bottom {
  120. @extend %Caret;
  121. &:before {
  122. left: 0.1em;
  123. top: 0.3em;
  124. border-top-color: inherit;
  125. }
  126. }
  127. .vxe-icon--caret-left {
  128. @extend %Caret;
  129. &:before {
  130. right: 0.3em;
  131. bottom: 0.1em;
  132. border-right-color: inherit;
  133. }
  134. }
  135. .vxe-icon--caret-right {
  136. @extend %Caret;
  137. &:before {
  138. left: 0.3em;
  139. bottom: 0.1em;
  140. border-left-color: inherit;
  141. }
  142. }
  143. %BeforeArrowTop {
  144. &:before {
  145. @extend %PseudoClass;
  146. top: 0.32em;
  147. left: 0.12em;
  148. width: 0.6em;
  149. height: 0.6em;
  150. border-width: 0.1em;
  151. border-style: solid;
  152. border-top-color: inherit;
  153. border-right-color: inherit;
  154. border-bottom-color: transparent;
  155. border-left-color: transparent;
  156. }
  157. }
  158. .vxe-icon--arrow-top {
  159. @extend %DefaultWidthHeight;
  160. &:before {
  161. @extend %PseudoClass;
  162. top: 0.4em;
  163. left: 0.14em;
  164. width: 0.7em;
  165. height: 0.7em;
  166. border-width: 0.15em;
  167. border-style: solid;
  168. border-top-color: inherit;
  169. border-right-color: inherit;
  170. border-bottom-color: transparent;
  171. border-left-color: transparent;
  172. border-radius: 0.15em;
  173. transform: rotate(-45deg);
  174. }
  175. }
  176. .vxe-icon--arrow-bottom {
  177. @extend .vxe-icon--arrow-top;
  178. &:before {
  179. top: 0;
  180. left: 0.14em;
  181. transform: rotate(135deg);
  182. }
  183. }
  184. .vxe-icon--arrow-left {
  185. @extend .vxe-icon--arrow-top;
  186. &:before {
  187. top: 0.18em;
  188. left: 0.35em;
  189. transform: rotate(-135deg);
  190. }
  191. }
  192. .vxe-icon--arrow-right {
  193. @extend .vxe-icon--arrow-top;
  194. &:before {
  195. top: 0.18em;
  196. left: 0;
  197. transform: rotate(45deg);
  198. }
  199. }
  200. .vxe-icon--d-arrow-left {
  201. @extend %DefaultWidthHeight;
  202. &:before {
  203. left: 0.15em;
  204. }
  205. &:after {
  206. left: 0.58em;
  207. }
  208. &:before,
  209. &:after {
  210. @extend %PseudoClass;
  211. top: 0.18em;
  212. width: 0.7em;
  213. height: 0.7em;
  214. border-width: 0.15em;
  215. border-style: solid;
  216. border-top-color: inherit;
  217. border-right-color: transparent;
  218. border-bottom-color: transparent;
  219. border-left-color: inherit;
  220. border-radius: 0.15em;
  221. transform: rotate(-45deg);
  222. }
  223. }
  224. .vxe-icon--d-arrow-right {
  225. @extend .vxe-icon--d-arrow-left;
  226. &:before,
  227. &:after {
  228. transform: rotate(135deg);
  229. }
  230. &:before {
  231. left: -0.25em;
  232. }
  233. &:after {
  234. left: 0.18em;
  235. }
  236. }
  237. .vxe-icon--funnel {
  238. @extend %DefaultWidthHeight;
  239. &:before {
  240. @extend %PseudoClass;
  241. top: 0.05em;
  242. left: 0;
  243. border-width: 0.5em;
  244. border-style: solid;
  245. border-top-color: inherit;
  246. border-right-color: transparent;
  247. border-bottom-color: transparent;
  248. border-left-color: transparent;
  249. }
  250. &:after {
  251. @extend %PseudoClass;
  252. left: 0.41em;
  253. top: 0.4em;
  254. width: 0;
  255. height: 0.5em;
  256. border-width: 0 0.2em 0 0;
  257. border-style: solid;
  258. border-right-color: inherit;
  259. }
  260. }
  261. .vxe-icon--edit-outline {
  262. @extend %DefaultWidthHeight;
  263. &:before {
  264. @extend %PseudoClass;
  265. height: 0.84em;
  266. width: 0.86em;
  267. top: 0.1em;
  268. left: 0.02em;
  269. border-radius: 0.2em;
  270. border-width: 0.1em;
  271. border-style: solid;
  272. border-color: inherit;
  273. }
  274. &:after {
  275. @extend %PseudoClass;
  276. left: 0.6em;
  277. bottom: 0.2em;
  278. width: 0;
  279. height: 0.8em;
  280. border-radius: 0 0 80% 80%;
  281. border-width: 0 0 0 0.22em;
  282. border-style: solid;
  283. border-color: inherit;
  284. transform: rotate(45deg);
  285. }
  286. }
  287. .vxe-icon--more {
  288. @extend %DefaultWidthHeight;
  289. &:before {
  290. @extend %PseudoClass;
  291. content: "...";
  292. top: 0;
  293. left: 0.1em;
  294. line-height: 0.5em;
  295. font-weight: 700;
  296. }
  297. }
  298. .vxe-icon--plus {
  299. @extend %DefaultWidthHeight;
  300. &:before {
  301. @extend %PseudoClass;
  302. content: "+";
  303. left: -0.12em;
  304. bottom: -0.1em;
  305. line-height: 1em;
  306. font-size: 1.6em;
  307. }
  308. }
  309. .vxe-icon--check {
  310. @extend %DefaultWidthHeight;
  311. &:before {
  312. @extend %PseudoClass;
  313. left: 0.25em;
  314. bottom: 0.2em;
  315. width: 0.5em;
  316. height: 0.9em;
  317. border-width: 0.15em;
  318. border-style: solid;
  319. border-top-color: transparent;
  320. border-right-color: inherit;
  321. border-bottom-color: inherit;
  322. border-radius: 0.15em;
  323. border-left-color: transparent;
  324. transform: rotate(45deg);
  325. }
  326. }
  327. .vxe-icon--close {
  328. @extend %DefaultWidthHeight;
  329. &:before {
  330. @extend %PseudoClass;
  331. content: "+";
  332. left: -0.1em;
  333. bottom: -0.16em;
  334. line-height: 1em;
  335. font-size: 1.8em;
  336. transform: rotate(45deg);
  337. }
  338. }
  339. .vxe-icon--minus {
  340. @extend %DefaultWidthHeight;
  341. &:before {
  342. @extend %PseudoClass;
  343. content: "\2500";
  344. left: 0;
  345. bottom: 0;
  346. width: 100%;
  347. text-align: center;
  348. line-height: 0.9em;
  349. font-size: 1.2em;
  350. }
  351. }
  352. .vxe-icon--refresh {
  353. @extend %DefaultWidthHeight;
  354. border-width: 0.1em;
  355. border-style: solid;
  356. border-radius: 50%;
  357. border-right-color: transparent !important;
  358. border-left-color: transparent !important;
  359. &:before {
  360. left: 50%;
  361. top: 0;
  362. transform: translateX(50%) rotate(-45deg);
  363. }
  364. &:after {
  365. right: 50%;
  366. bottom: 0;
  367. transform: translateX(-50%) rotate(135deg);
  368. }
  369. &:before,
  370. &:after {
  371. @extend %PseudoClass;
  372. width: 0;
  373. height: 0;
  374. border-width: 0.25em;
  375. border-style: solid;
  376. border-right-color: transparent;
  377. border-bottom-color: transparent;
  378. border-left-color: transparent;
  379. }
  380. &.roll {
  381. animation: rollCircle 1s infinite linear;
  382. }
  383. }
  384. @keyframes rollCircle {
  385. 0% {
  386. transform: rotate(0deg);
  387. }
  388. 100% {
  389. transform: rotate(360deg);
  390. }
  391. }
  392. %BeforeSolidRadius {
  393. content: "";
  394. border-radius: 50%;
  395. border-width: 0.5em;
  396. border-style: solid;
  397. border-color: inherit;
  398. position: absolute;
  399. top: 0;
  400. left: 0;
  401. transform: scale(0.95);
  402. }
  403. %QuestionAndInfoWarning {
  404. &:after {
  405. @extend %PseudoClass;
  406. left: 0;
  407. bottom: 0;
  408. width: 100%;
  409. text-align: center;
  410. color: var(--vxe-ui-layout-background-color);
  411. transform: rotate(-10deg) scale(0.75);
  412. }
  413. }
  414. .vxe-icon--question {
  415. @extend %DefaultWidthHeight, %QuestionAndInfoWarning;
  416. &:before {
  417. @extend %BeforeSolidRadius;
  418. }
  419. &:after {
  420. content: "\3F";
  421. }
  422. }
  423. .vxe-icon--info {
  424. @extend %DefaultWidthHeight, %QuestionAndInfoWarning;
  425. &:before {
  426. @extend %BeforeSolidRadius;
  427. }
  428. &:after {
  429. content: "\A1";
  430. }
  431. }
  432. .vxe-icon--warning {
  433. @extend %DefaultWidthHeight, %QuestionAndInfoWarning;
  434. &:before {
  435. @extend %BeforeSolidRadius;
  436. }
  437. &:after {
  438. content: "\21";
  439. }
  440. }
  441. .vxe-icon--success {
  442. @extend %DefaultWidthHeight;
  443. &:before {
  444. @extend %BeforeSolidRadius;
  445. }
  446. &:after {
  447. @extend %PseudoClass;
  448. content: "\2713";
  449. left: 0.25em;
  450. bottom: 0;
  451. color: var(--vxe-ui-layout-background-color);
  452. font-size: 0.65em;
  453. }
  454. }
  455. .vxe-icon--circle-plus {
  456. @extend %DefaultWidthHeight;
  457. &:before {
  458. @extend %BeforeSolidRadius;
  459. }
  460. &:after {
  461. @extend %PseudoClass;
  462. content: "+";
  463. left: 0;
  464. bottom: 0;
  465. width: 100%;
  466. text-align: center;
  467. color: var(--vxe-ui-layout-background-color);
  468. line-height: 1.4em;
  469. font-size: 0.8em;
  470. }
  471. }
  472. .vxe-icon--remove {
  473. @extend %DefaultWidthHeight;
  474. &:before {
  475. @extend %BeforeSolidRadius;
  476. }
  477. &:after {
  478. @extend %PseudoClass;
  479. content: "\2500";
  480. left: 0;
  481. bottom: 0;
  482. width: 100%;
  483. text-align: center;
  484. line-height: 1.5em;
  485. color: var(--vxe-ui-layout-background-color);
  486. font-size: 0.7em;
  487. }
  488. }
  489. .vxe-icon--error {
  490. @extend %DefaultWidthHeight;
  491. &:before {
  492. @extend %BeforeSolidRadius;
  493. }
  494. &:after {
  495. @extend %PseudoClass;
  496. content: "\D7";
  497. left: 0;
  498. bottom: 0;
  499. width: 100%;
  500. line-height: 1.4em;
  501. text-align: center;
  502. color: var(--vxe-ui-layout-background-color);
  503. font-size: 0.8em;
  504. }
  505. }
  506. .vxe-icon--upload,
  507. .vxe-icon--download {
  508. @extend %DefaultWidthHeight;
  509. overflow: hidden;
  510. &:before {
  511. @extend %PseudoClass;
  512. left: 0;
  513. width: 1em;
  514. border-width: 0;
  515. border-style: solid;
  516. border-color: inherit;
  517. }
  518. &:after {
  519. @extend %PseudoClass;
  520. width: 100%;
  521. text-align: center;
  522. font-size: 2em;
  523. }
  524. }
  525. .vxe-icon--upload {
  526. &:before {
  527. top: 0.1em;
  528. border-top-width: 0.1em;
  529. }
  530. &:after {
  531. content: "\2191";
  532. left: 0;
  533. top: 0.15em;
  534. }
  535. }
  536. .vxe-icon--download {
  537. &:before {
  538. bottom: 0.05em;
  539. border-bottom-width: 0.1em;
  540. }
  541. &:after {
  542. content: "\2191";
  543. left: 0;
  544. bottom: 0.15em;
  545. transform: rotate(180deg);
  546. }
  547. }
  548. .vxe-icon--eye,
  549. .vxe-icon--eye-slash {
  550. @extend %DefaultWidthHeight;
  551. &:before {
  552. @extend %PseudoClass;
  553. content: "\25CF";
  554. top: 0.16em;
  555. left: 0;
  556. width: 1em;
  557. height: 0.68em;
  558. line-height: 0.25em;
  559. border-radius: 50%;
  560. border-width: 0.1em;
  561. border-style: solid;
  562. border-color: inherit;
  563. text-align: center;
  564. }
  565. }
  566. .vxe-icon--eye-slash {
  567. &:after {
  568. @extend %PseudoClass;
  569. top: -0.1em;
  570. left: 0.45em;
  571. width: 0;
  572. height: 1.2em;
  573. border-width: 0;
  574. border-style: solid;
  575. border-color: inherit;
  576. border-left-width: 0.1em;
  577. transform: rotate(45deg);
  578. }
  579. }
  580. .vxe-icon--calendar {
  581. @extend %DefaultWidthHeight;
  582. &:before {
  583. @extend %PseudoClass;
  584. top: 0.15em;
  585. left: 0;
  586. width: 1em;
  587. height: 0.8em;
  588. border-width: 0.2em 0.1em 0.1em 0.1em;
  589. border-radius: 0.1em 0.1em 0 0;
  590. border-style: solid;
  591. border-color: inherit;
  592. }
  593. &:after {
  594. @extend %PseudoClass;
  595. left: 0.2em;
  596. top: 0;
  597. width: 0.6em;
  598. height: 0.3em;
  599. border-width: 0 0.1em;
  600. border-style: solid;
  601. border-color: inherit;
  602. }
  603. }
  604. .vxe-icon--dot {
  605. @extend %DefaultWidthHeight;
  606. &:before {
  607. @extend %PseudoClass;
  608. top: 0.25em;
  609. left: 0.25em;
  610. border-radius: 50%;
  611. border-width: 0.25em;
  612. border-style: solid;
  613. border-color: inherit;
  614. }
  615. }
  616. .vxe-icon--print {
  617. @extend %DefaultWidthHeight;
  618. box-shadow: inset 0 0 0 0.1em;
  619. border-width: 0.2em 0;
  620. border-style: solid;
  621. border-color: transparent !important;
  622. border-radius: 0.3em 0.3em 0 0;
  623. &:before {
  624. @extend %PseudoClass;
  625. width: 0.6em;
  626. height: 0.3em;
  627. top: -0.2em;
  628. left: 0.2em;
  629. box-shadow: inset 0 0 0 0.1em;
  630. }
  631. &:after {
  632. @extend %PseudoClass;
  633. width: 0.6em;
  634. height: 0.6em;
  635. left: 0.2em;
  636. bottom: -0.2em;
  637. box-shadow: inset 0 0 0 0.1em;
  638. background-color: var(--vxe-ui-layout-background-color);
  639. }
  640. }
  641. .vxe-icon--search {
  642. @extend %DefaultWidthHeight;
  643. &:before {
  644. @extend %PseudoClass;
  645. top: 0;
  646. left: 0;
  647. width: 0.8em;
  648. height: 0.8em;
  649. border-width: 0.15em;
  650. border-style: solid;
  651. border-color: inherit;
  652. border-radius: 50%;
  653. }
  654. &:after {
  655. @extend %PseudoClass;
  656. top: 0.75em;
  657. left: 0.6em;
  658. width: 0.35em;
  659. height: 0;
  660. border-width: 0.15em 0 0 0;
  661. border-style: solid;
  662. border-color: inherit;
  663. transform: rotate(45deg);
  664. }
  665. }
  666. // 已废弃
  667. .vxe-icon-warnion-circle-fill:before {
  668. content: "\e848";
  669. }