SplitPane.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /*
  2. * <<
  3. * Davinci
  4. * ==
  5. * Copyright (C) 2016 - 2017 EDP
  6. * ==
  7. * Licensed under the Apache License, Version 2.0 (the "License");
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://www.apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. * >>
  19. */
  20. @import '~assets/less/variable.less';
  21. :global {
  22. .split-pane {
  23. display: flex;
  24. &-horizontal {
  25. flex-direction: row;
  26. min-height: 0;
  27. &-spliter {
  28. border-right: @border-width-base @border-style-base @border-color-split;
  29. }
  30. }
  31. &-vertical {
  32. flex-direction: column;
  33. min-width: 0;
  34. &-spliter {
  35. border-bottom: @border-width-base @border-style-base @border-color-split;
  36. }
  37. }
  38. &-1 {
  39. display: flex;
  40. min-height: 0;
  41. & > .react-resizable {
  42. display: flex;
  43. min-height: 0;
  44. }
  45. }
  46. &-2 {
  47. flex: 1;
  48. display: flex;
  49. min-height: 0;
  50. overflow: hidden;
  51. & > .react-resizable {
  52. display: flex;
  53. }
  54. }
  55. &-resize-handle {
  56. position: absolute;
  57. width: 8px;
  58. cursor: col-resize;
  59. user-select: none;
  60. &-horizontal {
  61. top: 0;
  62. bottom: 0;
  63. &-1 {
  64. right: -4px;
  65. }
  66. &-2 {
  67. left: -4px;
  68. }
  69. }
  70. &-vertical {
  71. left: 0;
  72. right: 0;
  73. &-1 {
  74. bottom: -4px;
  75. }
  76. &-2 {
  77. top: -4px;
  78. }
  79. }
  80. }
  81. }
  82. }