element-plus.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. $border: 1px solid var(--el-border-color-light);
  2. /* el-dialog */
  3. .el-dialog {
  4. .el-dialog__header {
  5. padding: 15px 20px;
  6. margin: 0;
  7. border-bottom: $border;
  8. }
  9. .el-dialog__body {
  10. padding: 20px;
  11. }
  12. .el-dialog__footer {
  13. padding: 15px;
  14. border-top: $border;
  15. }
  16. }
  17. /** el-drawer */
  18. .el-drawer {
  19. .el-drawer__header {
  20. padding: 15px 20px;
  21. margin: 0;
  22. color: inherit;
  23. border-bottom: $border;
  24. }
  25. .el-drawer__body {
  26. padding: 20px;
  27. }
  28. .el-drawer__footer {
  29. padding: 15px;
  30. border-top: $border;
  31. }
  32. }
  33. // 抽屉和对话框底部按钮区域
  34. .dialog-footer {
  35. display: flex;
  36. gap: 8px;
  37. justify-content: flex-end;
  38. }
  39. // 列表
  40. .el-card {
  41. .el-card__body {
  42. display: flex;
  43. flex: 1;
  44. flex-direction: column;
  45. overflow: hidden;
  46. }
  47. }
  48. // 表格内操作列:单元格 .cell 默认 overflow:hidden,会裁切 el-button 的 :focus-visible outline(常见为底边缺失)。
  49. // 仅对「含 el-button」的单元格放开裁剪,避免整表 .cell 全改为 visible 破坏省略号与长文本布局。
  50. .el-table .el-table__cell .cell:has(.el-button) {
  51. overflow: visible;
  52. }
  53. // 不支持 :has() 的环境:将 outline 略向内收,减轻裁切(效果弱于上一段)。
  54. @supports not selector(:has(*)) {
  55. .el-table .el-button:focus-visible {
  56. outline-offset: -1px;
  57. }
  58. }