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