]>
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 | */ | |
25 | ||
26 | @import "variables"; | |
27 | ||
28 | .claro .dijitTreeNode { | |
29 | zoom: 1; /* force layout on IE (TODO: may not be needed anymore) */ | |
30 | } | |
31 | .claro .dijitTreeIsRoot { | |
32 | background-image: none; | |
33 | } | |
34 | ||
35 | /* Styling for basic tree node (unhovered, unselected) | |
36 | * Also use this styling when dropping between items on the tree (in other words, don't | |
37 | * use hover effect) | |
38 | */ | |
39 | .claro .dijitTreeRow, | |
40 | .claro .dijitTreeNode .dojoDndItemBefore, | |
41 | .claro .dijitTreeNode .dojoDndItemAfter { | |
42 | /* so insert line shows up on IE when dropping after a target element */ | |
43 | padding: 4px 1px 2px 0; | |
44 | margin: 0 1px; /* replaced by border for selected/hovered row */ | |
45 | ||
46 | background-color: none; // IE6 doesn't understand rgba() or transparent below | |
47 | background-color: transparent; // IE8 doesn't understand rgba() below | |
48 | background-color: rgba(171,214,255,0); // rgba() instead of transparent to prevent flash on hover fade-in | |
81bea17a AD |
49 | background-position:0 0; |
50 | background-repeat:repeat-x; | |
51 | ||
52 | border-color: rgba(118,157,192,0); // rgba() instead of none to prevent flash on hover fade-in | |
53 | border-width: 0; | |
54 | ||
1354d172 AD |
55 | color: @text-color; |
56 | ||
81bea17a AD |
57 | .transition-property(background-color, border-color); |
58 | .transition-duration(.25s); | |
59 | .transition-timing-function(ease-out); | |
60 | } | |
81bea17a AD |
61 | |
62 | .claro .dijitTreeRowSelected { | |
63 | background-repeat:repeat-x; | |
64 | background-color:@selected-background-color; | |
1354d172 | 65 | background-image: url(@image-common-highlight); |
81bea17a AD |
66 | padding: 3px 0 1px; |
67 | margin: 0; | |
68 | border:solid 1px @selected-border-color; | |
69 | color:@selected-text-color; | |
70 | } | |
71 | .claro .dijitTreeRowHover { | |
72 | background-color:@hovered-background-color; | |
1354d172 | 73 | background-image: url(@image-common-highlight); |
81bea17a AD |
74 | padding: 3px 0 1px; |
75 | margin: 0; | |
76 | border:solid 1px @hovered-border-color; | |
77 | color:@hovered-text-color; | |
78 | .transition-duration(.25s); | |
79 | } | |
80 | .claro .dijitTreeRowActive { | |
81 | background-color:@pressed-background-color; | |
1354d172 | 82 | background-image: url(@image-common-highlight); |
81bea17a AD |
83 | background-position:0 -177px; |
84 | padding: 3px 0 1px; | |
85 | margin-left: 0; | |
86 | border:solid 1px @pressed-border-color; | |
87 | color:@selected-text-color; | |
88 | } | |
1354d172 | 89 | .dj_ie6 .claro .dijitTreeRow { |
81bea17a AD |
90 | background-image: none; |
91 | } | |
92 | .claro .dijitTreeRowFocused { | |
93 | background-repeat: repeat; | |
94 | } | |
95 | ||
96 | /* expando (open/closed) icon */ | |
97 | ||
98 | .claro .dijitTreeExpando { | |
1354d172 | 99 | background-image: url(@image-tree-expand); |
81bea17a AD |
100 | width: 16px; |
101 | height: 16px; | |
102 | background-position: -35px 0; /* for dijitTreeExpandoOpened */ | |
103 | } | |
104 | .dj_ie6 .claro .dijitTreeExpando { | |
1354d172 | 105 | background-image: url(@image-tree-expand-ie6); |
81bea17a AD |
106 | } |
107 | .claro .dijitTreeRowHover .dijitTreeExpandoOpened { | |
108 | background-position: -53px 0; | |
109 | } | |
110 | .claro .dijitTreeExpandoClosed { | |
111 | background-position: 1px 0; | |
112 | } | |
113 | .claro .dijitTreeRowHover .dijitTreeExpandoClosed { | |
114 | background-position: -17px 0; | |
115 | } | |
116 | .claro .dijitTreeExpandoLeaf, | |
117 | .dj_ie6 .claro .dijitTreeExpandoLeaf { | |
118 | background-image:none; | |
119 | } | |
120 | .claro .dijitTreeExpandoLoading { | |
1354d172 | 121 | background-image: url(@image-loading-animation); |
81bea17a AD |
122 | } |
123 | ||
124 | /* Drag and Drop on TreeNodes | |
125 | * Put insert line on dijitTreeContent node so it's aligned w/ | |
126 | * (ie, indented equally with) target element, even | |
127 | * though dijitTreeRowNode is the actual "drag object" | |
128 | */ | |
129 | .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { | |
130 | border-top: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? | |
131 | } | |
132 | .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { | |
133 | border-bottom: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? | |
134 | } |