CheckPanel.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. @minHeight: 400px;
  2. @maxHeight: 600px;
  3. .highlight {
  4. color: rgb(255, 85, 0);
  5. }
  6. .checkPanelWrapper {
  7. display: flex;
  8. border: 1px solid #ececec;
  9. border-radius: 4px;
  10. .leftWrapper {
  11. width: calc(50% - 1px);
  12. border-right: 1px solid #ececec;
  13. }
  14. .rightWrapper {
  15. width: 50%;
  16. }
  17. .headWrapper {
  18. display: flex;
  19. height: 40px;
  20. padding: 0 12px;
  21. align-items: center;
  22. justify-content: space-between;
  23. border-bottom: 1px solid #ececec;
  24. }
  25. .contentWrapper, .tagWrapper {
  26. padding: 12px;
  27. }
  28. .optionRow {
  29. min-height: calc(@minHeight - 40px - 32px - 12px);
  30. max-height: calc(@maxHeight - 40px - 32px - 12px);
  31. margin-top: 12px;
  32. overflow-y: scroll;
  33. :global(.ant-checkbox-wrapper) {
  34. width: calc(25% - 8px);
  35. margin-bottom: 10px;
  36. }
  37. :global(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {
  38. margin-left: 0;
  39. }
  40. }
  41. .tagWrapper {
  42. min-height: calc(@minHeight - 40px);
  43. max-height: calc(@maxHeight - 40px);
  44. overflow-y: scroll;
  45. }
  46. :global(.ant-tag) {
  47. font-size: 14px;
  48. margin-bottom: 12px;
  49. .highlight {
  50. color: #fff;
  51. }
  52. }
  53. :global(.ant-checkbox + span) {
  54. width: calc(100% - 16px);
  55. overflow: hidden;
  56. text-overflow: ellipsis;
  57. display: inline-block;
  58. white-space: nowrap;
  59. vertical-align: bottom;
  60. }
  61. }