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

   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 .claro .dijitAccordionContainer {
  31   border: none;
  32 }
  33 .claro .dijitAccordionInnerContainer {
  34   background-color: #efefef;
  35   /* gray, for closed pane */
  36
  37   border: solid 1px #b5bcc7;
  38   margin-bottom: 1px;
  39   -webkit-transition-property: background-color, border;
  40   -moz-transition-property: background-color, border;
  41   transition-property: background-color, border;
  42   -webkit-transition-duration: 0.3s;
  43   -moz-transition-duration: 0.3s;
  44   transition-duration: 0.3s;
  45   -webkit-transition-timing-function: linear;
  46   -moz-transition-timing-function: linear;
  47   transition-timing-function: linear;
  48 }
  49 .claro .dijitAccordionTitle {
  50   background-color: transparent;
  51   /* pick up color from dijitAccordionInnerContainer */
  52
  53   background-image: url("../layout/images/accordion.png");
  54   background-position: 0 0;
  55   background-repeat: repeat-x;
  56   padding: 5px 7px 2px 7px;
  57   min-height: 17px;
  58   color: #494949;
  59 }
  60 .dj_ie6 .claro .dijitAccordionTitle {
  61   background-image: none;
  62 }
  63 .claro .dijitAccordionContainer .dijitAccordionChildWrapper {
  64   /* this extends the blue trim styling of the title bar to wrapping around the node.
  65          * done by setting margin
  66          */
  67
  68   background-color: #ffffff;
  69   border: 1px solid #759dc0;
  70   margin: 0 2px 2px;
  71 }
  72 .claro .dijitAccordionContainer .dijitAccordionContainer-child {
  73   /* this is affecting the child widget itself */
  74
  75   padding: 9px;
  76 }
  77 /* Active state for closed pane */
  78 .claro .dijitAccordionInnerContainerActive {
  79   border: 1px solid #759dc0;
  80   background-color: #7dbdfa;
  81   -webkit-transition-duration: 0.1s;
  82   -moz-transition-duration: 0.1s;
  83   transition-duration: 0.1s;
  84 }
  85 .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
  86   background-position: 0 -136px;
  87   color: #000000;
  88 }
  89 /* Open (a.k.a. selected) pane */
  90 .claro .dijitAccordionInnerContainerSelected {
  91   border-color: #759dc0;
  92   background-color: #cfe5fa;
  93 }
  94 .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
  95   color: #000000;
  96   background-position: 0 0;
  97   /* avoid effect when clicking the title of the open pane */
  98
  99 }
 100 /* Hovering open or closed pane */
 101 .claro .dijitAccordionInnerContainerHover .dijitAccordionTitle {
 102   /* both open and closed */
 103
 104   color: #000000;
 105 }
 106 .claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive {
 107   /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */
 108
 109   border: 1px solid #759dc0;
 110   background-color: #abd6ff;
 111   -webkit-transition-duration: 0.2s;
 112   -moz-transition-duration: 0.2s;
 113   transition-duration: 0.2s;
 114 }
 115 .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
 116   background-color: #ffffff;
 117   border: 1px solid #759dc0 !important;
 118   -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
 119   -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
 120   box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
 121 }