/* Accordion * * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: * * 1. closed pane (and default styling): * .dijitAccordionInnerContainer - container for each accordion child * .dijitAccordionTitle - title for each accordion child * * 2. active closed pane (ie, mouse down on a title bar) * .dijitAccordionInnerContainerActive - for background-color, border * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color * * 3. open pane (expanded child) * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) * setting a margin so that there's blue trim all the way around the child * * These rules need to override the closed pane active: * * .dijitAccordionInnerContainerSelected - for background-color, border * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color * * 4. hovered pane, open or closed * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: * * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color */ .flat .dijitAccordionContainer { border: 0 none; border-radius: 4px; } .flat .dijitAccordionInnerContainer { background-color: #fff; border: 1px solid #ccc; border-radius: 4px; -webkit-transition-property: background-color, border; -moz-transition-property: background-color, border; -o-transition-property: background-color, border; -ms-transition-property: background-color, border; transition-property: background-color, border; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; -ms-transition-timing-function: linear; transition-timing-function: linear; } .flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer { margin-top: 0; position: relative; } .flat .dijitAccordionTitle { border-style: solid; border-width: 1px; border-color: #ccc; padding: 4px; border-radius: 4px; line-height: 20px; cursor: pointer; -webkit-transition: all 0.05s linear; -moz-transition: all 0.05s linear; -o-transition: all 0.05s linear; -ms-transition: all 0.05s linear; transition: all 0.05s linear; background: #fff; border: 0 none; border-radius: 4px; } .flat .dijitAccordionTitle .arrowTextUp, .flat .dijitAccordionTitle .arrowTextDown { display: none; float: right; font-family: "flat-icon"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; font-size: 0px; } .flat .dijitAccordionTitle .arrowTextUp:before, .flat .dijitAccordionTitle .arrowTextDown:before { content: "\f007"; font-size: 18px; } .flat .dijitAccordionTitle .arrowTextUp { display: block; } .flat .dijitAccordionTitle .arrowTextUp:before { content: "\f006"; } .flat .dijitAccordionInnerContainerHover .dijitAccordionTitle { -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s; background: #f2f2f2; border-color: #d9d9d9; } .flat .dijitAccordionInnerContainerActive .dijitAccordionTitle { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; outline: none; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); background: #e0e0e0; border-color: #b3b3b3; } .flat .dijitAccordionInnerContainerSelected { border: 0 none; } .flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle { color: #fff; background-color: #257aa7; border-radius: 4px 4px 0 0; } .flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp { display: none; } .flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown { display: block; } .flat .dijitAccordionContainer .dijitAccordionChildWrapper { background-color: #fff; border: 1px solid #ccc; border-top: 0 none; position: relative; z-index: 1; clear: both; border-radius: 0 0 4px 4px; } .flat .dijitAccordionInnerContainer { border-radius: 0; } .flat .dijitAccordionInnerContainer .dijitAccordionTitle { border-radius: 0; } .flat .dijitAccordionInnerContainer:not(:last-child) .dijitAccordionChildWrapper { border-radius: 0; } .flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer { border-top: 0 none; } .flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainerSelected:last-child .dijitAccordionTitle { border-radius: 0; } .flat .dijitAccordionInnerContainer:first-child, .flat .dijitAccordionInnerContainer:first-child .dijitAccordionTitle { border-radius: 4px 4px 0 0; } .flat .dijitAccordionInnerContainer:last-child, .flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle { border-radius: 0 0 4px 4px; }