BorderContainer.less 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. /* BorderContainer
  2. Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable.
  3. Styling the BorderContainer widget consists of the following:
  4. .dijitBorderContainer - for border and padding of the entire border container
  5. .dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.
  6. .dijitBorderContainer-dijitTabContainerTop,
  7. .dijitBorderContainer-dijitTabContainerBottom,
  8. .dijitBorderContainer-dijitTabContainerLeft,
  9. .dijitBorderContainer-dijitTabContainerRight,
  10. .dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget
  11. .dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
  12. Splitters and gutters:
  13. .dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter
  14. .dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
  15. .dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter
  16. .dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
  17. .dijitSplitterHHover - for background-color of a hovered horizontal splitter
  18. .dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
  19. .dijitSplitterVHover - for background-color of a hovered vertical splitter
  20. .dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
  21. .dijitSplitterHActive - for background-color of an active horizontal splitter
  22. .dijitSplitterVActive - for background-color of an active horizontal splitter
  23. */
  24. @import "../variables";
  25. .claro .dijitBorderContainer {
  26. /* matches the width of the splitters between panes */
  27. padding: 5px;
  28. }
  29. .claro .dijitSplitContainer-child,
  30. .claro .dijitBorderContainer-child {
  31. /* By default put borders on all children of BorderContainer,
  32. * to give illusion of borders on the splitters themselves.
  33. */
  34. border: 1px @border-color solid;
  35. }
  36. .claro .dijitBorderContainer-dijitTabContainerTop,
  37. .claro .dijitBorderContainer-dijitTabContainerBottom,
  38. .claro .dijitBorderContainer-dijitTabContainerLeft,
  39. .claro .dijitBorderContainer-dijitTabContainerRight,
  40. .claro .dijitBorderContainer-dijitAccordionContainer {
  41. /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
  42. * so override rule setting border on domNode
  43. */
  44. border: none;
  45. }
  46. .claro .dijitBorderContainer-dijitBorderContainer {
  47. /* make nested BorderContainers look like a single big widget with lots of splitters */
  48. border: 0;
  49. padding: 0;
  50. }
  51. /* Splitters and gutters */
  52. .claro .dijitSplitterH,
  53. .claro .dijitGutterH {
  54. background:none;
  55. border:0;
  56. height:5px;
  57. }
  58. .claro .dijitSplitterH .dijitSplitterThumb {
  59. background:@border-color none;
  60. height:1px;
  61. top:2px;
  62. width:19px;
  63. }
  64. .claro .dijitSplitterV,
  65. .claro .dijitGutterV {
  66. background:none;
  67. border:0;
  68. width:5px;
  69. margin: 0;
  70. }
  71. .claro .dijitSplitterV .dijitSplitterThumb {
  72. background:@border-color none;
  73. height:19px;
  74. left:2px;
  75. width:1px;
  76. margin: 0;
  77. }
  78. /* hovered splitter */
  79. .claro .dijitSplitterHHover,
  80. .claro .dijitSplitterVHover {
  81. font-size: 1px;
  82. background-color: @splitter-hovered-background-color;
  83. }
  84. .claro .dijitSplitterHHover {
  85. .alpha-white-gradient (left, 1,0px, 0,50%, 1,100%);
  86. }
  87. .claro .dijitSplitterVHover {
  88. .alpha-white-gradient (top, 1,0px, 0,50%, 1,100%);
  89. }
  90. .claro .dijitSplitterHHover .dijitSplitterThumb,
  91. .claro .dijitSplitterVHover .dijitSplitterThumb {
  92. background:@hovered-border-color none;
  93. }
  94. /* active splitter */
  95. .claro .dijitSplitterHActive,
  96. .claro .dijitSplitterVActive {
  97. font-size: 1px;
  98. background-color:@splitter-dragged-background-color;
  99. background-image: none; // color all the way across, not gradient like in hover mode
  100. }