]>
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 | ||
f0cfe83e | 53 | background-image: url("../images/standardGradient.png"); |
81bea17a | 54 | background-repeat: repeat-x; |
f0cfe83e AD |
55 | background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); |
56 | background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
57 | background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
58 | background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
59 | _background-image: none; | |
81bea17a AD |
60 | padding: 5px 7px 2px 7px; |
61 | min-height: 17px; | |
1354d172 | 62 | color: #494949; |
2f01fe57 | 63 | } |
81bea17a AD |
64 | .claro .dijitAccordionContainer .dijitAccordionChildWrapper { |
65 | /* this extends the blue trim styling of the title bar to wrapping around the node. | |
66 | * done by setting margin | |
67 | */ | |
68 | ||
69 | background-color: #ffffff; | |
1354d172 | 70 | border: 1px solid #759dc0; |
81bea17a | 71 | margin: 0 2px 2px; |
2f01fe57 AD |
72 | } |
73 | .claro .dijitAccordionContainer .dijitAccordionContainer-child { | |
81bea17a AD |
74 | /* this is affecting the child widget itself */ |
75 | ||
76 | padding: 9px; | |
2f01fe57 | 77 | } |
81bea17a | 78 | /* Active state for closed pane */ |
2f01fe57 | 79 | .claro .dijitAccordionInnerContainerActive { |
1354d172 AD |
80 | border: 1px solid #759dc0; |
81 | background-color: #7dbdfa; | |
81bea17a AD |
82 | -webkit-transition-duration: 0.1s; |
83 | -moz-transition-duration: 0.1s; | |
84 | transition-duration: 0.1s; | |
2f01fe57 AD |
85 | } |
86 | .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { | |
f0cfe83e AD |
87 | background-image: url("../images/activeGradient.png"); |
88 | background-repeat: repeat-x; | |
89 | background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
90 | background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
91 | background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
92 | background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
93 | _background-image: none; | |
81bea17a | 94 | color: #000000; |
2f01fe57 | 95 | } |
81bea17a | 96 | /* Open (a.k.a. selected) pane */ |
2f01fe57 | 97 | .claro .dijitAccordionInnerContainerSelected { |
1354d172 | 98 | border-color: #759dc0; |
81bea17a | 99 | background-color: #cfe5fa; |
2f01fe57 AD |
100 | } |
101 | .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { | |
81bea17a | 102 | color: #000000; |
f0cfe83e AD |
103 | background-image: url("../images/standardGradient.png"); |
104 | background-repeat: repeat-x; | |
105 | background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
106 | background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
107 | background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
108 | background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
109 | _background-image: none; | |
81bea17a AD |
110 | /* avoid effect when clicking the title of the open pane */ |
111 | ||
2f01fe57 | 112 | } |
81bea17a | 113 | /* Hovering open or closed pane */ |
1354d172 | 114 | .claro .dijitAccordionInnerContainerHover .dijitAccordionTitle { |
81bea17a AD |
115 | /* both open and closed */ |
116 | ||
117 | color: #000000; | |
2f01fe57 | 118 | } |
81bea17a AD |
119 | .claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { |
120 | /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ | |
121 | ||
1354d172 | 122 | border: 1px solid #759dc0; |
81bea17a AD |
123 | background-color: #abd6ff; |
124 | -webkit-transition-duration: 0.2s; | |
125 | -moz-transition-duration: 0.2s; | |
126 | transition-duration: 0.2s; | |
2f01fe57 | 127 | } |
81bea17a AD |
128 | .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { |
129 | background-color: #ffffff; | |
f0cfe83e | 130 | border: 1px solid #759dc0; |
81bea17a AD |
131 | -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); |
132 | -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); | |
133 | box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); | |
2f01fe57 | 134 | } |