blob: d5507da87ddf78855be7a8e8c29c12b83913c0f4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
/* Tree
*
* Styling Tree mostly means styling the TreeRow (dijitTreeRow)
* There are 4 basic states to style:
*
* Tree Row:
* 1. tree row (default styling):
* .dijitTreeRow - styles for each row of the tree
*
* 2. hovered tree row (mouse hover on a tree row)
* .dijitTreeRowHover - styles when mouse over on one row
*
* 3. active tree row (mouse down on a tree row)
* .dijitTreeRowActive - styles when mouse down on one row
*
* 4. selected tree row
* dijitTreeRowSelected - style when the row has been selected
*
* Tree Expando:
* dijitTreeExpando - the expando at the left of the text of each tree row
*
*/
@import 'dijit_variables';
.{$theme-name} {
.dijitTreeIsRoot {
background-color: $tree-background-color;
}
.dijitTreeRow,
.dijitTreeNode .dojoDndItemBefore,
.dijitTreeNode .dojoDndItemAfter {
padding: $tree-row-padding;
border: 0 $tree-row-border-color;
line-height: $tree-row-line-height;
transition-property: background-color;
transition-duration: .15s;
transition-timing-function: ease-out;
}
/* Hover */
.dijitTreeRowHover {
background-color: $tree-row-hover-background-color;
border-color: $tree-row-hover-border-color;
transition-duration: .15s;
}
/* Active */
.dijitTreeRowActive {
background-color:$tree-row-active-background-color;
border-color: $tree-row-active-border-color;
}
/* Selected */
.dijitTreeRowSelected,
.dijitTreeRowHover.dijitTreeRowSelected,
.dijitTreeRowActive.dijitTreeRowSelected {
color: $tree-row-selected-text-color;
background-color: $tree-row-selected-background-color;
border-color: $tree-row-selected-border-color;
.dijitTreeExpando {
color: $tree-expando-icon-selected-color;
}
}
/* Focused */
/*
.dijitTreeRowFocused {
}
*/
/* expando (open/closed) icon */
.dijitTreeExpando {
_icon-core-style();
width: $tree-expando-icon-width;
height: $tree-expando-icon-height;
line-height: @height;
text-align: center;
margin-left: $tree-expando-margin;
margin-right: $tree-expando-margin;
color: $tree-expando-icon-color;
vertical-align: middle;
}
.dijitTreeExpandoOpened:before {
content: "\f012";
cursor: pointer;
}
.dijitTreeExpandoClosed:before {
content: "\f011";
}
.dijitTreeExpandoLoading {
animation: spinning 2s linear infinite;
&:before {
content: "\f01d";
}
}
}
.dj_ie8 .dijitTreeExpandoLoading,
.dj_ie9 .dijitTreeExpandoLoading {
background:url('images/loadingAnimation.gif') no-repeat;
&:before {
content: "";
}
}
@keyframes spinning {
from {transform: rotate(0);}
to {transform: rotate(-360deg);}
}
|
