]>
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 | |
49 | background-image: url("images/commonHighlight.png"); | |
50 | background-position:0 0; | |
51 | background-repeat:repeat-x; | |
52 | ||
53 | border-color: rgba(118,157,192,0); // rgba() instead of none to prevent flash on hover fade-in | |
54 | border-width: 0; | |
55 | ||
56 | .transition-property(background-color, border-color); | |
57 | .transition-duration(.25s); | |
58 | .transition-timing-function(ease-out); | |
59 | } | |
60 | .dj_ie6 .claro .dijitTreeRow { | |
61 | background-image: none; | |
62 | } | |
63 | ||
64 | .claro .dijitTreeRowSelected { | |
65 | background-repeat:repeat-x; | |
66 | background-color:@selected-background-color; | |
67 | padding: 3px 0 1px; | |
68 | margin: 0; | |
69 | border:solid 1px @selected-border-color; | |
70 | color:@selected-text-color; | |
71 | } | |
72 | .claro .dijitTreeRowHover { | |
73 | background-color:@hovered-background-color; | |
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; | |
82 | background-position:0 -177px; | |
83 | padding: 3px 0 1px; | |
84 | margin-left: 0; | |
85 | border:solid 1px @pressed-border-color; | |
86 | color:@selected-text-color; | |
87 | } | |
88 | .dj_ie6 .claro .dijitTreeRowActive { | |
89 | background-image: none; | |
90 | } | |
91 | .claro .dijitTreeRowFocused { | |
92 | background-repeat: repeat; | |
93 | } | |
94 | ||
95 | /* expando (open/closed) icon */ | |
96 | ||
97 | .claro .dijitTreeExpando { | |
98 | background-image: url('images/treeExpandImages.png'); | |
99 | width: 16px; | |
100 | height: 16px; | |
101 | background-position: -35px 0; /* for dijitTreeExpandoOpened */ | |
102 | } | |
103 | .dj_ie6 .claro .dijitTreeExpando { | |
104 | background-image: url('images/treeExpandImages8bit.png'); | |
105 | } | |
106 | .claro .dijitTreeRowHover .dijitTreeExpandoOpened { | |
107 | background-position: -53px 0; | |
108 | } | |
109 | .claro .dijitTreeExpandoClosed { | |
110 | background-position: 1px 0; | |
111 | } | |
112 | .claro .dijitTreeRowHover .dijitTreeExpandoClosed { | |
113 | background-position: -17px 0; | |
114 | } | |
115 | .claro .dijitTreeExpandoLeaf, | |
116 | .dj_ie6 .claro .dijitTreeExpandoLeaf { | |
117 | background-image:none; | |
118 | } | |
119 | .claro .dijitTreeExpandoLoading { | |
120 | background-image: url('images/loadingAnimation.gif'); | |
121 | } | |
122 | ||
123 | /* Drag and Drop on TreeNodes | |
124 | * Put insert line on dijitTreeContent node so it's aligned w/ | |
125 | * (ie, indented equally with) target element, even | |
126 | * though dijitTreeRowNode is the actual "drag object" | |
127 | */ | |
128 | .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { | |
129 | border-top: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? | |
130 | } | |
131 | .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { | |
132 | border-bottom: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? | |
133 | } |