lib/dijit/themes/claro/TitlePane.less

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