]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Tree |
2 | * | |
3 | * Styling Tree mostly means styling the TreeRow (dijitTreeRow) | |
4 | * There are 4 basic states to style: | |
5 | * | |
6 | * Tree Row: | |
7 | * 1. tree row (default styling): | |
8 | * .dijitTreeRow - styles for each row of the tree | |
9 | * | |
10 | * 2. hovered tree row (mouse hover on a tree row) | |
11 | * .dijitTreeRowHover - styles when mouse over on one row | |
12 | * | |
13 | * 3. active tree row (mouse down on a tree row) | |
14 | * .dijitTreeRowActive - styles when mouse down on one row | |
15 | * | |
16 | * 4. selected tree row | |
17 | * dijitTreeRowSelected - style when the row has been selected | |
18 | * | |
19 | * Tree Expando: | |
20 | * dijitTreeExpando - the expando at the left of the text of each tree row | |
21 | * | |
22 | * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element) | |
23 | * .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line | |
24 | */ | |
2f01fe57 | 25 | .claro .dijitTreeNode { |
81bea17a AD |
26 | zoom: 1; |
27 | /* force layout on IE (TODO: may not be needed anymore) */ | |
28 | ||
2f01fe57 AD |
29 | } |
30 | .claro .dijitTreeIsRoot { | |
81bea17a AD |
31 | background-image: none; |
32 | } | |
33 | /* Styling for basic tree node (unhovered, unselected) | |
34 | * Also use this styling when dropping between items on the tree (in other words, don't | |
35 | * use hover effect) | |
36 | */ | |
37 | .claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter { | |
38 | /* so insert line shows up on IE when dropping after a target element */ | |
39 | ||
f0cfe83e | 40 | padding: 4px 0 2px 0; |
81bea17a AD |
41 | background-color: none; |
42 | background-color: transparent; | |
43 | background-color: rgba(171, 214, 255, 0); | |
81bea17a AD |
44 | background-position: 0 0; |
45 | background-repeat: repeat-x; | |
f0cfe83e | 46 | border: solid 0 transparent; |
1354d172 | 47 | color: #000000; |
81bea17a AD |
48 | -webkit-transition-property: background-color, border-color; |
49 | -moz-transition-property: background-color, border-color; | |
50 | transition-property: background-color, border-color; | |
51 | -webkit-transition-duration: 0.25s; | |
52 | -moz-transition-duration: 0.25s; | |
53 | transition-duration: 0.25s; | |
54 | -webkit-transition-timing-function: ease-out; | |
55 | -moz-transition-timing-function: ease-out; | |
56 | transition-timing-function: ease-out; | |
2f01fe57 | 57 | } |
2f01fe57 | 58 | .claro .dijitTreeRowSelected { |
81bea17a | 59 | background-color: #cfe5fa; |
f0cfe83e AD |
60 | background-image: url("images/standardGradient.png"); |
61 | background-repeat: repeat-x; | |
62 | background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
63 | background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
64 | background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
65 | background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
66 | _background-image: none; | |
81bea17a | 67 | padding: 3px 0 1px; |
f0cfe83e AD |
68 | border-color: #759dc0; |
69 | border-width: 1px 0; | |
81bea17a | 70 | color: #000000; |
2f01fe57 AD |
71 | } |
72 | .claro .dijitTreeRowHover { | |
81bea17a | 73 | background-color: #abd6ff; |
f0cfe83e AD |
74 | background-image: url("images/standardGradient.png"); |
75 | background-repeat: repeat-x; | |
76 | background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
77 | background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
78 | background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
79 | background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
80 | _background-image: none; | |
81bea17a | 81 | padding: 3px 0 1px; |
f0cfe83e AD |
82 | border-color: #759dc0; |
83 | border-width: 1px 0; | |
81bea17a AD |
84 | color: #000000; |
85 | -webkit-transition-duration: 0.25s; | |
86 | -moz-transition-duration: 0.25s; | |
87 | transition-duration: 0.25s; | |
2f01fe57 AD |
88 | } |
89 | .claro .dijitTreeRowActive { | |
1354d172 | 90 | background-color: #7dbdfa; |
f0cfe83e AD |
91 | background-image: url("images/activeGradient.png"); |
92 | background-repeat: repeat-x; | |
93 | 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%); | |
94 | 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%); | |
95 | 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%); | |
96 | background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
97 | _background-image: none; | |
81bea17a | 98 | padding: 3px 0 1px; |
f0cfe83e AD |
99 | border-color: #759dc0; |
100 | border-width: 1px 0; | |
81bea17a | 101 | color: #000000; |
2f01fe57 | 102 | } |
2f01fe57 | 103 | .claro .dijitTreeRowFocused { |
81bea17a | 104 | background-repeat: repeat; |
2f01fe57 | 105 | } |
81bea17a | 106 | /* expando (open/closed) icon */ |
2f01fe57 | 107 | .claro .dijitTreeExpando { |
1354d172 | 108 | background-image: url("images/treeExpandImages.png"); |
81bea17a AD |
109 | width: 16px; |
110 | height: 16px; | |
111 | background-position: -35px 0; | |
112 | /* for dijitTreeExpandoOpened */ | |
113 | ||
2f01fe57 AD |
114 | } |
115 | .dj_ie6 .claro .dijitTreeExpando { | |
1354d172 | 116 | background-image: url("images/treeExpandImages8bit.png"); |
2f01fe57 AD |
117 | } |
118 | .claro .dijitTreeRowHover .dijitTreeExpandoOpened { | |
81bea17a | 119 | background-position: -53px 0; |
2f01fe57 AD |
120 | } |
121 | .claro .dijitTreeExpandoClosed { | |
81bea17a | 122 | background-position: 1px 0; |
2f01fe57 AD |
123 | } |
124 | .claro .dijitTreeRowHover .dijitTreeExpandoClosed { | |
81bea17a | 125 | background-position: -17px 0; |
2f01fe57 | 126 | } |
81bea17a AD |
127 | .claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf { |
128 | background-image: none; | |
2f01fe57 AD |
129 | } |
130 | .claro .dijitTreeExpandoLoading { | |
1354d172 | 131 | background-image: url("images/loadingAnimation.gif"); |
2f01fe57 | 132 | } |
81bea17a AD |
133 | /* Drag and Drop on TreeNodes |
134 | * Put insert line on dijitTreeContent node so it's aligned w/ | |
135 | * (ie, indented equally with) target element, even | |
136 | * though dijitTreeRowNode is the actual "drag object" | |
137 | */ | |
2f01fe57 | 138 | .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { |
1354d172 | 139 | border-top: 2px solid #759dc0; |
2f01fe57 AD |
140 | } |
141 | .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { | |
1354d172 | 142 | border-bottom: 2px solid #759dc0; |
2f01fe57 | 143 | } |