index.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /* 第三方图标字体间距/大小设置
  2. ------------------------------- */
  3. @mixin generalIcon {
  4. font-size: 14px !important;
  5. display: inline-block;
  6. vertical-align: middle;
  7. margin-right: 5px;
  8. width: 24px;
  9. text-align: center;
  10. justify-content: center;
  11. }
  12. /* 文本不换行
  13. ------------------------------- */
  14. @mixin text-no-wrap() {
  15. text-overflow: ellipsis;
  16. overflow: hidden;
  17. white-space: nowrap;
  18. }
  19. /* 多行文本溢出
  20. ------------------------------- */
  21. @mixin text-ellipsis($line: 2) {
  22. overflow: hidden;
  23. word-break: break-all;
  24. text-overflow: ellipsis;
  25. display: -webkit-box;
  26. -webkit-line-clamp: $line;
  27. -webkit-box-orient: vertical;
  28. }
  29. /* 滚动条(页面未使用) div 中使用:
  30. ------------------------------- */
  31. // .test {
  32. // @include scrollBar;
  33. // }
  34. @mixin scrollBar {
  35. // 滚动条凹槽的颜色,还可以设置边框属性
  36. &::-webkit-scrollbar-track-piece {
  37. background-color: #f8f8f8;
  38. }
  39. // 滚动条的宽度
  40. &::-webkit-scrollbar {
  41. width: 9px;
  42. height: 9px;
  43. }
  44. // 滚动条的设置
  45. &::-webkit-scrollbar-thumb {
  46. background-color: #dddddd;
  47. background-clip: padding-box;
  48. min-height: 28px;
  49. }
  50. &::-webkit-scrollbar-thumb:hover {
  51. background-color: #bbb;
  52. }
  53. }