lib/dijit/themes/claro/layout/AccordionContainer.less

   1 /* Accordion
   2  *
   3  * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
   4  * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
   5  *
   6  * 1. closed pane (and default styling):
   7  *              .dijitAccordionInnerContainer - container for each accordion child
   8  *              .dijitAccordionTitle - title for each accordion child
   9  *
  10  * 2. active closed pane (ie, mouse down on a title bar)
  11  *              .dijitAccordionInnerContainerActive - for background-color, border
  12  *              .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
  13  *
  14  * 3. open pane (expanded child)
  15  *              .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
  16  *                      setting a margin so that there's blue trim all the way around the child
  17  *
  18  *              These rules need to override the closed pane active:
  19  *
  20  *              .dijitAccordionInnerContainerSelected - for background-color, border
  21  *              .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
  22  *
  23  * 4. hovered pane, open or closed
  24  *              The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
  25  *              and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
  26  *
  27  *              .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
  28  *              .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
  29  */
  30
  31 @import "../variables";
  32
  33 .claro .dijitAccordionContainer {
  34         border:none;
  35 }
  36 .claro .dijitAccordionInnerContainer {
  37         background-color: @unselected-background-color; /* gray, for closed pane */
  38         border:solid 1px @border-color;
  39         margin-bottom:1px;
  40         .transition-property(background-color,border);
  41         .transition-duration(.3s);
  42         .transition-timing-function(linear);
  43 }
  44 .claro .dijitAccordionTitle {
  45         background-color: transparent;  /* pick up color from dijitAccordionInnerContainer */
  46         .standard-gradient("../");
  47         padding: 5px 7px 2px 7px;
  48         min-height:17px;
  49         color:@unselected-text-color;
  50 }
  51
  52 .claro .dijitAccordionContainer .dijitAccordionChildWrapper {
  53         /* this extends the blue trim styling of the title bar to wrapping around the node.
  54          * done by setting margin
  55          */
  56         background-color:@pane-background-color;
  57         border:1px solid @selected-border-color;
  58         margin: 0 2px 2px;
  59 }
  60
  61 .claro .dijitAccordionContainer .dijitAccordionContainer-child {
  62         /* this is affecting the child widget itself */
  63         padding: 9px;
  64 }
  65
  66 /* Active state for closed pane */
  67
  68 .claro .dijitAccordionInnerContainerActive {
  69         border:1px solid @selected-border-color;
  70         background-color:@pressed-background-color;
  71         .transition-duration(.1s);
  72 }
  73 .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
  74         .active-gradient("../");
  75         color:@selected-text-color;
  76 }
  77
  78 /* Open (a.k.a. selected) pane */
  79
  80 .claro .dijitAccordionInnerContainerSelected {
  81         border-color:@selected-border-color;
  82         background-color: @selected-background-color;
  83 }
  84 .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
  85         color:@selected-text-color;
  86         .standard-gradient("../");      /* avoid effect when clicking the title of the open pane */
  87 }
  88
  89 /* Hovering open or closed pane */
  90
  91 .claro .dijitAccordionInnerContainerHover .dijitAccordionTitle {
  92         /* both open and closed */
  93         color:@hovered-text-color;
  94 }
  95
  96 // TODO: why do we have any hover effect on the selected pane?
  97 // Since you can't click it, there shouldn't be a hover effect.
  98 .claro .dijitAccordionInnerContainerHover,
  99 .claro .dijitAccordionInnerContainerSelectedActive {
 100         /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */
 101         border:1px solid @hovered-border-color;
 102         background-color:@hovered-background-color;
 103         .transition-duration(.2s);
 104 }
 105
 106 .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
 107 .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
 108         background-color:@pane-background-color;
 109         border:1px solid @hovered-border-color;
 110         .box-shadow(inset 0 0 3px rgba(0, 0, 0, .25));
 111 }