lib/dijit/themes/claro/TitlePane.less

   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
  21 @import "variables";
  22
  23 .claro .dijitTitlePaneTitle {
  24         background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened?
  25         background-image: url(@image-titlebar);
  26         background-repeat:repeat-x;
  27         border:1px solid @border-color;
  28         padding: 0 7px 3px 7px;
  29         min-height:17px;
  30 }
  31 .dj_ie6 .claro .dijitTitlePaneTitle {
  32         background-image: none;
  33 }
  34 .claro .dijitTitlePaneTitleHover {
  35         background-color: @hovered-background-color;
  36         border-color: @hovered-border-color;
  37 }
  38 .claro .dijitTitlePaneTitleActive {
  39         background-color: @pressed-background-color;
  40         border-color: @pressed-border-color;
  41         background-position:0 -136px;
  42 }
  43 .claro .dijitTitlePaneTitleFocus {
  44         margin-top:3px;
  45         padding-bottom:2px;
  46 }
  47 .claro .dijitTitlePane .dijitArrowNode {
  48         background-image: url(@image-arrow-sprite);
  49         background-repeat: no-repeat;
  50         height: 8px;
  51         width: 7px;
  52 }
  53 .claro .dijitTitlePane .dijitOpen .dijitArrowNode {
  54         background-position: 0 0;
  55 }
  56 .claro .dijitTitlePane .dijitClosed .dijitArrowNode {
  57         background-position: -14px 0;
  58 }
  59 .claro .dijitTitlePane .dijitTitlePaneTextNode {
  60         color:@text-color;
  61 }
  62 .claro .dijitTitlePaneContentOuter {
  63         background: @pane-background-color;
  64         border:1px solid @border-color;
  65         border-top:none;
  66 }
  67 .claro .dijitTitlePaneContentInner {
  68         padding:10px;
  69 }
  70 .claro .dijitTitlePaneTextNode {
  71         margin-left: 4px;
  72         margin-right: 4px;
  73         vertical-align:text-top;
  74 }