diff options
Diffstat (limited to 'lib/flat/dijit/layout/AccordionContainer.css')
| -rw-r--r-- | lib/flat/dijit/layout/AccordionContainer.css | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/lib/flat/dijit/layout/AccordionContainer.css b/lib/flat/dijit/layout/AccordionContainer.css new file mode 100644 index 000000000..a5241a770 --- /dev/null +++ b/lib/flat/dijit/layout/AccordionContainer.css @@ -0,0 +1,169 @@ +/* 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: 3px; +} +.flat .dijitAccordionInnerContainer { + background-color: #fff; + border: 1px solid #9e9e9e; + border-radius: 3px; + -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: #9e9e9e; + padding: 4px; + border-radius: 3px; + 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: 3px; +} +.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: 16px; + -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: #2196f3; + border-radius: 3px 3px 0 0; +} +.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp { + display: none; +} +.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown { + display: block; +} +.flat .dijitAccordionContainer .dijitAccordionChildWrapper { + background-color: #fff; + border: 1px solid #9e9e9e; + border-top: 0 none; + position: relative; + z-index: 1; + clear: both; + border-radius: 0 0 3px 3px; +} +.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: 3px 3px 0 0; +} +.flat .dijitAccordionInnerContainer:last-child, +.flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle { + border-radius: 0 0 3px 3px; +} |