TitlePane.less 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /* TitlePane
  2. *
  3. * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane)
  4. *
  5. * TitlePane title:
  6. * 1. TitlePane title (default styling):
  7. * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border
  8. *
  9. * 2. hovered TitlePane title (ie, mouse hover on a title bar)
  10. * .dijitTitlePaneTitleHover - styles when mouse hover on the title div
  11. *
  12. * 3. active TitlePane title (ie, mouse down on a title bar)
  13. * .dijitTitlePaneTitleActive - styles when mouse down on the title div
  14. *
  15. *
  16. * TitlePane Content Container:
  17. * 1. outer/inner container:
  18. * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
  19. */
  20. @import "variables";
  21. .claro .dijitTitlePaneTitle {
  22. background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened?
  23. .standard-gradient;
  24. border:1px solid @border-color;
  25. padding: 0 7px 3px 7px;
  26. min-height:17px;
  27. }
  28. .claro .dijitTitlePaneTitleHover {
  29. background-color: @hovered-background-color;
  30. border-color: @hovered-border-color;
  31. }
  32. .claro .dijitTitlePaneTitleActive {
  33. background-color: @pressed-background-color;
  34. border-color: @pressed-border-color;
  35. .active-gradient;
  36. }
  37. .claro .dijitTitlePaneTitleFocus {
  38. margin-top:3px;
  39. padding-bottom:2px;
  40. }
  41. .claro .dijitTitlePane .dijitArrowNode {
  42. background-image: url(@image-arrow-sprite);
  43. background-repeat: no-repeat;
  44. height: 8px;
  45. width: 7px;
  46. }
  47. .claro .dijitTitlePane .dijitOpen .dijitArrowNode {
  48. background-position: 0 0;
  49. }
  50. .claro .dijitTitlePane .dijitClosed .dijitArrowNode {
  51. background-position: -14px 0;
  52. }
  53. .claro .dijitTitlePane .dijitTitlePaneTextNode {
  54. color:@text-color;
  55. }
  56. .claro .dijitTitlePaneContentOuter {
  57. background: @pane-background-color;
  58. border:1px solid @border-color;
  59. border-top:none;
  60. }
  61. .claro .dijitTitlePaneContentInner {
  62. padding:10px;
  63. }
  64. .claro .dijitTitlePaneTextNode {
  65. margin-left: 4px;
  66. margin-right: 4px;
  67. vertical-align:text-top;
  68. }