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