| @mixin base-tree($primaryStyleName : v-tree) { |
| |
| // tree-default.css |
| |
| .#{$primaryStyleName} { |
| text-align: left; /* Force default alignment */ |
| padding: 1px 0; |
| outline: none; |
| } |
| .#{$primaryStyleName}-node { |
| background: transparent url(../common/img/sprites.png) no-repeat 5px -37px; |
| padding: 1px 0; |
| } |
| .#{$primaryStyleName}-node-caption:focus { |
| outline: none; |
| } |
| div.#{$primaryStyleName}-node-leaf { |
| background: transparent; |
| } |
| .#{$primaryStyleName}-node-expanded { |
| background: transparent url(../common/img/sprites.png) no-repeat -5px -10px; |
| } |
| .#{$primaryStyleName}-node-caption { |
| margin-left: 1em; |
| } |
| .#{$primaryStyleName}-node span { |
| cursor: pointer; |
| } |
| .#{$primaryStyleName}-node-caption div { |
| white-space: nowrap; |
| } |
| .#{$primaryStyleName}-node-caption span, |
| .#{$primaryStyleName}-node-caption .v-icon { |
| vertical-align: middle; |
| } |
| .#{$primaryStyleName}-node-selected span { |
| background: #999; |
| color: #fff; |
| } |
| .#{$primaryStyleName}-node-children { |
| padding-left: 1em; |
| } |
| |
| // Drag'n'drop styles |
| |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top { |
| border-top: 2px solid #1d9dff; |
| margin-top: -1px; |
| padding-top: 0; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom { |
| border-bottom: 2px solid #1d9dff; |
| margin-bottom: -1px; |
| padding-bottom: 0; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top:before, |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after, |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after { |
| display: block; |
| |
| position: absolute; |
| width: 6px; |
| height: 6px; |
| margin-top: -4px; |
| background: transparent url(../common/img/drag-slot-dot.png); |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after { |
| margin-top: -2px; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after { |
| margin-left: 14px; |
| } |
| .v-ff & .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after, |
| .v-ie & .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after { |
| margin-top: -2px; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top { |
| background-position: 5px -38px; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded { |
| background-position: -5px -11px; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div { |
| border: 2px solid #1d9dff; |
| -moz-border-radius: 4px; |
| -webkit-border-radius: 4px; |
| border-radius: 4px; |
| margin: -2px 2px -2px -2px; |
| background-color: #bcdcff; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div { |
| background-color: rgba(169,209,255,.6); |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div, |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top, |
| .#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom { |
| border-color: rgba(0,109,232,.6); |
| } |
| |
| // tree-connectors.css |
| // This could be (and was) wrapped in a nested block instead of prefixing each |
| // row, but #10309 prevents us from doing that right now. |
| |
| // Make item caption height an even number (so that the connector dots overlap nicely) |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption { |
| padding-top: 1px; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node { |
| background: transparent url(img/connector-expand.png) no-repeat 2px -52px; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded { |
| background: transparent url(img/connector-collapse.png) no-repeat 2px -52px; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-last { |
| background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-last { |
| background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf { |
| background: transparent url(img/connector-leaf.png) repeat-y 2px 50%; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf-last { |
| background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children { |
| background: transparent url(img/connector.png) repeat-y 2px 0; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children-last { |
| background: transparent; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top, |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top { |
| background-position: 2px -53px; |
| } |
| .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-leaf { |
| background-position: 2px 50%; |
| } |
| |
| |
| } |