]>
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 | ||
66 | /* Active state for closed pane */ | |
67 | ||
68 | .claro .dijitAccordionInnerContainerActive { | |
69 | border:1px solid @selected-border-color; | |
70 | background-color:@pressed-background-color; | |
71 | .transition-duration(.1s); | |
72 | } | |
73 | .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { | |
f0cfe83e | 74 | .active-gradient("../"); |
81bea17a AD |
75 | color:@selected-text-color; |
76 | } | |
77 | ||
78 | /* Open (a.k.a. selected) pane */ | |
79 | ||
80 | .claro .dijitAccordionInnerContainerSelected { | |
81 | border-color:@selected-border-color; | |
82 | background-color: @selected-background-color; | |
83 | } | |
84 | .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { | |
85 | color:@selected-text-color; | |
f0cfe83e | 86 | .standard-gradient("../"); /* avoid effect when clicking the title of the open pane */ |
81bea17a AD |
87 | } |
88 | ||
89 | /* Hovering open or closed pane */ | |
90 | ||
1354d172 | 91 | .claro .dijitAccordionInnerContainerHover .dijitAccordionTitle { |
81bea17a AD |
92 | /* both open and closed */ |
93 | color:@hovered-text-color; | |
94 | } | |
95 | ||
f0cfe83e AD |
96 | // TODO: why do we have any hover effect on the selected pane? |
97 | // Since you can't click it, there shouldn't be a hover effect. | |
81bea17a AD |
98 | .claro .dijitAccordionInnerContainerHover, |
99 | .claro .dijitAccordionInnerContainerSelectedActive { | |
100 | /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ | |
101 | border:1px solid @hovered-border-color; | |
102 | background-color:@hovered-background-color; | |
103 | .transition-duration(.2s); | |
104 | } | |
105 | ||
106 | .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, | |
107 | .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { | |
108 | background-color:@pane-background-color; | |
f0cfe83e | 109 | border:1px solid @hovered-border-color; |
81bea17a AD |
110 | .box-shadow(inset 0 0 3px rgba(0, 0, 0, .25)); |
111 | } |