TitlePane.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. /* TitlePane and Fieldset
  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;
  23. .standard-gradient;
  24. border:1px solid @border-color;
  25. padding: 0 7px 3px 7px;
  26. min-height:17px;
  27. color: @unselected-text-color;
  28. }
  29. .claro .dijitFieldset {
  30. .border-radius(4px);
  31. }
  32. .claro .dijitTitlePaneTitleOpen, .claro .dijitTitlePaneTitleFixedOpen {
  33. background-color: @selected-background-color;
  34. color: @text-color;
  35. }
  36. .claro .dijitTitlePaneTitleHover {
  37. background-color: @hovered-background-color;
  38. border-color: @hovered-border-color;
  39. }
  40. .claro .dijitTitlePaneTitleActive {
  41. background-color: @pressed-background-color;
  42. border-color: @pressed-border-color;
  43. .active-gradient;
  44. }
  45. .claro .dijitTitlePaneTitleFocus {
  46. margin-top:3px;
  47. padding-bottom:2px;
  48. }
  49. .claro .dijitTitlePane .dijitArrowNode, .claro .dijitFieldset .dijitArrowNode {
  50. background-image: url(@image-arrow-sprite);
  51. background-repeat: no-repeat;
  52. height: 8px;
  53. width: 7px;
  54. }
  55. .claro .dijitTitlePaneTitleOpen .dijitArrowNode, .claro .dijitFieldsetTitleOpen .dijitArrowNode,{
  56. background-position: 0 0;
  57. }
  58. .claro .dijitTitlePaneTitleClosed .dijitArrowNode, .claro .dijitFieldsetTitleClosed .dijitArrowNode {
  59. background-position: -14px 0;
  60. }
  61. .claro .dijitTitlePaneContentOuter {
  62. background: @pane-background-color;
  63. border:1px solid @border-color;
  64. border-top:none;
  65. }
  66. .claro .dijitTitlePaneContentInner{
  67. padding:10px;
  68. }
  69. .claro .dijitFieldsetContentInner {
  70. padding: 4px;
  71. }
  72. .claro .dijitTitlePaneTextNode, .claro .dijitFieldsetLegendNode {
  73. margin-left: 4px;
  74. margin-right: 4px;
  75. vertical-align:text-top;
  76. }