From 81bea17aefb26859f825b9293c7c99192874806e Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 8 Nov 2011 20:40:44 +0400 Subject: upgrade Dojo to 1.6.1 --- .../themes/claro/layout/AccordionContainer.less | 116 +++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 lib/dijit/themes/claro/layout/AccordionContainer.less (limited to 'lib/dijit/themes/claro/layout/AccordionContainer.less') diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.less b/lib/dijit/themes/claro/layout/AccordionContainer.less new file mode 100644 index 000000000..01f4427f4 --- /dev/null +++ b/lib/dijit/themes/claro/layout/AccordionContainer.less @@ -0,0 +1,116 @@ +/* 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 + */ + +@import "../variables"; + +.claro .dijitAccordionContainer { + border:none; +} +.claro .dijitAccordionInnerContainer { + background-color: @unselected-background-color; /* gray, for closed pane */ + border:solid 1px @border-color; + margin-bottom:1px; + .transition-property(background-color,border); + .transition-duration(.3s); + .transition-timing-function(linear); +} +.claro .dijitAccordionTitle { + 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:@unselected-text-color; +} +.claro .dijitAccordionTitleHover { + color:@hovered-text-color; +} +.dj_ie6 .claro .dijitAccordionTitle { + 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:@pane-background-color; + border:1px solid @selected-border-color; + margin: 0 2px 2px; +} + +.claro .dijitAccordionContainer .dijitAccordionContainer-child { + /* this is affecting the child widget itself */ + padding: 9px; +} + +/* Active state for closed pane */ + +.claro .dijitAccordionInnerContainerActive { + border:1px solid @selected-border-color; + background-color:@pressed-background-color; + .transition-duration(.1s); +} +.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { + background-position:0 -136px; + color:@selected-text-color; +} + +/* Open (a.k.a. selected) pane */ + +.claro .dijitAccordionInnerContainerSelected { + border-color:@selected-border-color; + background-color: @selected-background-color; +} +.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color:@selected-text-color; + background-position: 0 0; /* avoid effect when clicking the title of the open pane */ +} + +/* Hovering open or closed pane */ + +.claro .dijitAccordionInnerContainerHover dijitAccordionTitle { + /* both open and closed */ + color:@hovered-text-color; +} + +.claro .dijitAccordionInnerContainerHover, +.claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + border:1px solid @hovered-border-color; + background-color:@hovered-background-color; + .transition-duration(.2s); +} + +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, +.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color:@pane-background-color; + border:1px solid @hovered-border-color !important; + .box-shadow(inset 0 0 3px rgba(0, 0, 0, .25)); +} -- cgit v1.2.3