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         .standard-gradient;
  26         border:1px solid @border-color;
  27         padding: 0 7px 3px 7px;
  28         min-height:17px;
  29 }
  30 .claro .dijitTitlePaneTitleHover {
  31         background-color: @hovered-background-color;
  32         border-color: @hovered-border-color;
  33 }
  34 .claro .dijitTitlePaneTitleActive {
  35         background-color: @pressed-background-color;
  36         border-color: @pressed-border-color;
  37         .active-gradient;
  38 }
  39 .claro .dijitTitlePaneTitleFocus {
  40         margin-top:3px;
  41         padding-bottom:2px;
  42 }
  43 .claro .dijitTitlePane .dijitArrowNode {
  44         background-image: url(@image-arrow-sprite);
  45         background-repeat: no-repeat;
  46         height: 8px;
  47         width: 7px;
  48 }
  49 .claro .dijitTitlePane .dijitOpen .dijitArrowNode {
  50         background-position: 0 0;
  51 }
  52 .claro .dijitTitlePane .dijitClosed .dijitArrowNode {
  53         background-position: -14px 0;
  54 }
  55 .claro .dijitTitlePane .dijitTitlePaneTextNode {
  56         color:@text-color;
  57 }
  58 .claro .dijitTitlePaneContentOuter {
  59         background: @pane-background-color;
  60         border:1px solid @border-color;
  61         border-top:none;
  62 }
  63 .claro .dijitTitlePaneContentInner {
  64         padding:10px;
  65 }
  66 .claro .dijitTitlePaneTextNode {
  67         margin-left: 4px;
  68         margin-right: 4px;
  69         vertical-align:text-top;
  70 }