]>
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 */ | |
f0cfe83e | 46 | .standard-gradient("../"); |
81bea17a AD |
47 | padding: 5px 7px 2px 7px; |
48 | min-height:17px; | |
49 | color:@unselected-text-color; | |
50 | } | |
f0cfe83e | 51 | |
81bea17a AD |
52 | .claro .dijitAccordionContainer .dijitAccordionChildWrapper { |
53 | /* this extends the blue trim styling of the title bar to wrapping around the node. | |
54 | * done by setting margin | |
55 | */ | |
56 | background-color:@pane-background-color; | |
57 | border:1px solid @selected-border-color; | |
58 | margin: 0 2px 2px; | |
59 | } | |
60 | ||
61 | .claro .dijitAccordionContainer .dijitAccordionContainer-child { | |
62 | /* this is affecting the child widget itself */ | |
63 | padding: 9px; | |
64 | } | |
65 | ||
6887a0f5 AK |
66 | /* Hover state for closed pane */ |
67 | ||
68 | .claro .dijitAccordionInnerContainerHover { | |
69 | border:1px solid @hovered-border-color; | |
70 | background-color:@hovered-background-color; | |
71 | .transition-duration(.2s); | |
72 | } | |
73 | ||
74 | .claro .dijitAccordionInnerContainerHover .dijitAccordionTitle { | |
75 | color:@hovered-text-color; | |
76 | } | |
77 | ||
81bea17a AD |
78 | /* Active state for closed pane */ |
79 | ||
80 | .claro .dijitAccordionInnerContainerActive { | |
81 | border:1px solid @selected-border-color; | |
82 | background-color:@pressed-background-color; | |
83 | .transition-duration(.1s); | |
84 | } | |
85 | .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { | |
f0cfe83e | 86 | .active-gradient("../"); |
81bea17a AD |
87 | color:@selected-text-color; |
88 | } | |
89 | ||
90 | /* Open (a.k.a. selected) pane */ | |
91 | ||
92 | .claro .dijitAccordionInnerContainerSelected { | |
93 | border-color:@selected-border-color; | |
94 | background-color: @selected-background-color; | |
95 | } | |
96 | .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { | |
97 | color:@selected-text-color; | |
f0cfe83e | 98 | .standard-gradient("../"); /* avoid effect when clicking the title of the open pane */ |
81bea17a AD |
99 | } |
100 |