diff options
Diffstat (limited to 'lib/dijit/themes/claro/Tree.css')
| -rw-r--r-- | lib/dijit/themes/claro/Tree.css | 156 |
1 files changed, 101 insertions, 55 deletions
diff --git a/lib/dijit/themes/claro/Tree.css b/lib/dijit/themes/claro/Tree.css index 739a4931e..069deb80a 100644 --- a/lib/dijit/themes/claro/Tree.css +++ b/lib/dijit/themes/claro/Tree.css @@ -1,88 +1,134 @@ - +/* 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 + * + * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element) + * .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line + */ .claro .dijitTreeNode { - zoom: 1; + zoom: 1; + /* force layout on IE (TODO: may not be needed anymore) */ + } .claro .dijitTreeIsRoot { - background-image: none; -} -.claro .dijitTreeRow { - - padding: 4px 1px 2px 0px; - margin-left: 1px; - background-image: url("images/commonHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; - border-color: rgba(118,157,192,0); - background-color: rgba(171,214,255,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.25s ; - -webkit-transition-timing-function: ease-out; + background-image: none; +} +/* Styling for basic tree node (unhovered, unselected) + * Also use this styling when dropping between items on the tree (in other words, don't + * use hover effect) + */ +.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter { + /* so insert line shows up on IE when dropping after a target element */ + + padding: 4px 1px 2px 0; + margin: 0 1px; + /* replaced by border for selected/hovered row */ + + background-color: none; + background-color: transparent; + background-color: rgba(171, 214, 255, 0); + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + border-color: rgba(118, 157, 192, 0); + border-width: 0; + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + transition-timing-function: ease-out; } .dj_ie6 .claro .dijitTreeRow { - background-image: none; + background-image: none; } .claro .dijitTreeRowSelected { - background-repeat:repeat-x; - background-color:#d8edff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #c3e2fd; - color:#000; + background-repeat: repeat-x; + background-color: #cfe5fa; + padding: 3px 0 1px; + margin: 0; + border: solid 1px #769dc0; + color: #000000; } .claro .dijitTreeRowHover { - background-color:#abd6ff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; - -webkit-transition-duration:.25s ; + background-color: #abd6ff; + padding: 3px 0 1px; + margin: 0; + border: solid 1px #769dc0; + color: #000000; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; } .claro .dijitTreeRowActive { - background-color:#7dbefa; - background-position:0px -177px; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; + background-color: #7dbefa; + background-position: 0 -177px; + padding: 3px 0 1px; + margin-left: 0; + border: solid 1px #769dc0; + color: #000000; } .dj_ie6 .claro .dijitTreeRowActive { - background-image: none; + background-image: none; } .claro .dijitTreeRowFocused { - background-repeat: repeat; + background-repeat: repeat; } +/* expando (open/closed) icon */ .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages.png'); - width: 16px; - height: 16px; - background-position: -35px 0px + background-image: url('images/treeExpandImages.png'); + width: 16px; + height: 16px; + background-position: -35px 0; + /* for dijitTreeExpandoOpened */ + } .dj_ie6 .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages8bit.png'); + background-image: url('images/treeExpandImages8bit.png'); } .claro .dijitTreeRowHover .dijitTreeExpandoOpened { - background-position: -53px 0px; + background-position: -53px 0; } .claro .dijitTreeExpandoClosed { - background-position: 1px 0px; + background-position: 1px 0; } .claro .dijitTreeRowHover .dijitTreeExpandoClosed { - background-position: -17px 0px; + background-position: -17px 0; } -.claro .dijitTreeExpandoLeaf{ - background-image:none; +.claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf { + background-image: none; } .claro .dijitTreeExpandoLoading { - background-image: url('images/loadingAnimation.gif'); -} -.claro .dijitTreeNode .dojoDndItemBefore, -.claro .dijitTreeNode .dojoDndItemAfter { - border-bottom: none; - border-top: none; + background-image: url('images/loadingAnimation.gif'); } +/* Drag and Drop on TreeNodes + * Put insert line on dijitTreeContent node so it's aligned w/ + * (ie, indented equally with) target element, even + * though dijitTreeRowNode is the actual "drag object" + */ .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { - border-top: 2px solid #369; + border-top: 2px solid #769dc0; } .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { - border-bottom: 2px solid #369; + border-bottom: 2px solid #769dc0; } |