]>
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 */ | |
f0cfe83e | 43 | padding: 4px 0 2px 0; |
81bea17a AD |
44 | |
45 | background-color: none; // IE6 doesn't understand rgba() or transparent below | |
46 | background-color: transparent; // IE8 doesn't understand rgba() below | |
47 | background-color: rgba(171,214,255,0); // rgba() instead of transparent to prevent flash on hover fade-in | |
81bea17a AD |
48 | background-position:0 0; |
49 | background-repeat:repeat-x; | |
50 | ||
f0cfe83e | 51 | border: solid 0 transparent; |
81bea17a | 52 | |
1354d172 AD |
53 | color: @text-color; |
54 | ||
81bea17a AD |
55 | .transition-property(background-color, border-color); |
56 | .transition-duration(.25s); | |
57 | .transition-timing-function(ease-out); | |
58 | } | |
81bea17a AD |
59 | |
60 | .claro .dijitTreeRowSelected { | |
f0cfe83e AD |
61 | background-color: @selected-background-color; |
62 | .standard-gradient; | |
81bea17a | 63 | padding: 3px 0 1px; |
f0cfe83e AD |
64 | border-color: @selected-border-color; |
65 | border-width: 1px 0; | |
66 | color: @selected-text-color; | |
81bea17a AD |
67 | } |
68 | .claro .dijitTreeRowHover { | |
f0cfe83e AD |
69 | background-color: @hovered-background-color; |
70 | .standard-gradient; | |
81bea17a | 71 | padding: 3px 0 1px; |
f0cfe83e AD |
72 | border-color: @hovered-border-color; |
73 | border-width: 1px 0; | |
74 | color: @hovered-text-color; | |
81bea17a AD |
75 | .transition-duration(.25s); |
76 | } | |
77 | .claro .dijitTreeRowActive { | |
78 | background-color:@pressed-background-color; | |
f0cfe83e | 79 | .active-gradient; |
81bea17a | 80 | padding: 3px 0 1px; |
f0cfe83e AD |
81 | border-color: @pressed-border-color; |
82 | border-width: 1px 0; | |
83 | color: @selected-text-color; | |
81bea17a AD |
84 | } |
85 | .claro .dijitTreeRowFocused { | |
86 | background-repeat: repeat; | |
87 | } | |
88 | ||
89 | /* expando (open/closed) icon */ | |
90 | ||
91 | .claro .dijitTreeExpando { | |
1354d172 | 92 | background-image: url(@image-tree-expand); |
81bea17a AD |
93 | width: 16px; |
94 | height: 16px; | |
95 | background-position: -35px 0; /* for dijitTreeExpandoOpened */ | |
96 | } | |
97 | .dj_ie6 .claro .dijitTreeExpando { | |
1354d172 | 98 | background-image: url(@image-tree-expand-ie6); |
81bea17a AD |
99 | } |
100 | .claro .dijitTreeRowHover .dijitTreeExpandoOpened { | |
101 | background-position: -53px 0; | |
102 | } | |
103 | .claro .dijitTreeExpandoClosed { | |
104 | background-position: 1px 0; | |
105 | } | |
106 | .claro .dijitTreeRowHover .dijitTreeExpandoClosed { | |
107 | background-position: -17px 0; | |
108 | } | |
109 | .claro .dijitTreeExpandoLeaf, | |
110 | .dj_ie6 .claro .dijitTreeExpandoLeaf { | |
111 | background-image:none; | |
112 | } | |
113 | .claro .dijitTreeExpandoLoading { | |
1354d172 | 114 | background-image: url(@image-loading-animation); |
81bea17a AD |
115 | } |
116 | ||
117 | /* Drag and Drop on TreeNodes | |
118 | * Put insert line on dijitTreeContent node so it's aligned w/ | |
119 | * (ie, indented equally with) target element, even | |
120 | * though dijitTreeRowNode is the actual "drag object" | |
121 | */ | |
122 | .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { | |
123 | border-top: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? | |
124 | } | |
125 | .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { | |
126 | border-bottom: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? | |
127 | } |