BorderContainer.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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. .claro .dijitBorderContainer {
  25. /* matches the width of the splitters between panes */
  26. padding: 5px;
  27. }
  28. .claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child {
  29. /* By default put borders on all children of BorderContainer,
  30. * to give illusion of borders on the splitters themselves.
  31. */
  32. border: 1px #b5bcc7 solid;
  33. }
  34. .claro .dijitBorderContainer-dijitTabContainerTop,
  35. .claro .dijitBorderContainer-dijitTabContainerBottom,
  36. .claro .dijitBorderContainer-dijitTabContainerLeft,
  37. .claro .dijitBorderContainer-dijitTabContainerRight,
  38. .claro .dijitBorderContainer-dijitAccordionContainer {
  39. /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
  40. * so override rule setting border on domNode
  41. */
  42. border: none;
  43. }
  44. .claro .dijitBorderContainer-dijitBorderContainer {
  45. /* make nested BorderContainers look like a single big widget with lots of splitters */
  46. border: 0;
  47. padding: 0;
  48. }
  49. /* Splitters and gutters */
  50. .claro .dijitSplitterH, .claro .dijitGutterH {
  51. background: none;
  52. border: 0;
  53. height: 5px;
  54. }
  55. .claro .dijitSplitterH .dijitSplitterThumb {
  56. background: #b5bcc7 none;
  57. height: 1px;
  58. top: 2px;
  59. width: 19px;
  60. }
  61. .claro .dijitSplitterV, .claro .dijitGutterV {
  62. background: none;
  63. border: 0;
  64. width: 5px;
  65. margin: 0;
  66. }
  67. .claro .dijitSplitterV .dijitSplitterThumb {
  68. background: #b5bcc7 none;
  69. height: 19px;
  70. left: 2px;
  71. width: 1px;
  72. margin: 0;
  73. }
  74. /* hovered splitter */
  75. .claro .dijitSplitterHHover {
  76. font-size: 1px;
  77. background: url("images/splitterHorizontalHover.png") no-repeat center top;
  78. }
  79. .claro .dijitSplitterHHover .dijitSplitterThumb {
  80. background: #769dc0 none;
  81. }
  82. .claro .dijitSplitterVHover {
  83. font-size: 1px;
  84. background: url("images/splitterVerticalHover.png") no-repeat center left;
  85. }
  86. .claro .dijitSplitterVHover .dijitSplitterThumb {
  87. background: #769dc0 none;
  88. }
  89. .dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover {
  90. background-color: #cfe5fa;
  91. background-image: none;
  92. }
  93. /* active splitter */
  94. .claro .dijitSplitterHActive, .claro .dijitSplitterVActive {
  95. font-size: 1px;
  96. background-color: #abd6ff;
  97. }