diff options
Diffstat (limited to 'lib/dijit/themes/claro/layout/AccordionContainer.css')
-rw-r--r-- | lib/dijit/themes/claro/layout/AccordionContainer.css | 145 |
1 files changed, 102 insertions, 43 deletions
diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css index 77b8bd967..f76947959 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.css +++ b/lib/dijit/themes/claro/layout/AccordionContainer.css @@ -1,65 +1,124 @@ - +/* 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 + */ .claro .dijitAccordionContainer { - border:none; + border: none; } .claro .dijitAccordionInnerContainer { - background-color: #e6e6e7; - border:solid 1px #b5bcc7; - margin-bottom:1px; - -webkit-transition-property:background-color,border; - -webkit-transition-duration:.3s; - -webkit-transition-timing-function:linear; + background-color: #efefef; + /* gray, for closed pane */ + + border: solid 1px #b5bcc7; + margin-bottom: 1px; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + transition-timing-function: linear; } .claro .dijitAccordionTitle { - background-color: transparent; - background-image: url("images/accordion.png"); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 5px 7px 2px 7px; - min-height:17px; - color:#4a4a4a; + background-color: transparent; + /* pick up color from dijitAccordionInnerContainer */ + + background-image: url("images/accordion.png"); + background-position: 0 0; + background-repeat: repeat-x; + padding: 5px 7px 2px 7px; + min-height: 17px; + color: #4a4a4a; +} +.claro .dijitAccordionTitleHover { + color: #000000; } .dj_ie6 .claro .dijitAccordionTitle { - background-image: none; + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + + background-color: #ffffff; + border: 1px solid #769dc0; + margin: 0 2px 2px; } .claro .dijitAccordionContainer .dijitAccordionContainer-child { - background-color:#fff; - - border:1px solid #92bce1 !important; - margin: 0px 2px 2px; - padding: 9px; + /* this is affecting the child widget itself */ + + padding: 9px; } +/* Active state for closed pane */ .claro .dijitAccordionInnerContainerActive { - border:1px solid #769DC0; - background-color:#7dbefa; - -webkit-transition-duration:.1s; + border: 1px solid #769dc0; + background-color: #7dbefa; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position:0px -136px; - color:#000; + background-position: 0 -136px; + color: #000000; } +/* Open (a.k.a. selected) pane */ .claro .dijitAccordionInnerContainerSelected { - border-color:#92bce1; - background-color: #cde8ff; + border-color: #769dc0; + background-color: #cfe5fa; } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { - color:#000; - background-position: 0 0; + color: #000000; + background-position: 0 0; + /* avoid effect when clicking the title of the open pane */ + } +/* Hovering open or closed pane */ .claro .dijitAccordionInnerContainerHover dijitAccordionTitle { - - color:#000; + /* both open and closed */ + + color: #000000; } -.claro .dijitAccordionInnerContainerHover, -.claro .dijitAccordionInnerContainerSelectedActive { - border:1px solid #769DC0; - background-color:#9dcfff; - -webkit-transition-duration:.2s; +.claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + + border: 1px solid #769dc0; + background-color: #abd6ff; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; } -.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionContainer-child, -.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionContainer-child { - background-color:#ffffff; - border:1px solid #769DC0 !important; - -webkit-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); - -moz-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color: #ffffff; + border: 1px solid #769dc0 !important; + -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); } |