diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components/_tree.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/valo/components/_tree.scss | 253 |
1 files changed, 253 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss new file mode 100644 index 0000000000..0dcabbcf84 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -0,0 +1,253 @@ +$v-tree-row-height: round($v-unit-size/1.3) !default; +$v-tree-animations-enabled: true !default; +$v-tree-expand-animation-enabled: false !default; + + +@if $v-tree-expand-animation-enabled { + @include keyframes(v-valo-tree-node-open) { + 0% { + max-height: 0; + } + 100% { + max-height: $v-tree-row-height * 10; + } + } + + @include keyframes(v-valo-tree-node-close) { + 0% { + max-height: $v-tree-row-height * 10; + } + 100% { + max-height: 0; + } + } +} + + +@mixin v-valo-tree ($primary-stylename: v-tree) { + + .#{$primary-stylename} { + position: relative; + white-space: nowrap; + @include user-select(none);; + + &:focus { + outline: none; + } + } + + .#{$primary-stylename}-node { + &:before { + content: ""; + position: absolute; + display: inline-block; + z-index: 3; + width: 1.9em; + height: $v-tree-row-height; + cursor: pointer; + + .v-ie8 & { + content: "+"; + position: static; + margin-left: -1.9em; + //background: red; + vertical-align: top; + @include v-valo-tree-collapsed-icon-style; + text-align: center; + } + } + + .v-ie8 & { + padding-left: 1.9em; + } + } + + .#{$primary-stylename}-node-caption { + height: $v-tree-row-height; + line-height: $v-tree-row-height - 1px; + overflow: hidden; + white-space: nowrap; + + & > div { + display: inline-block; + width: 100%; + position: relative; + z-index: 2; + + &:before { + @include v-valo-tree-collapsed-icon-style; + display: inline-block; + width: .5em; + text-align: center; + margin: 0 .6em 0 .8em; + + @if $v-tree-animations-enabled { + @include transition(all 100ms); + } + + .v-ie8 & { + display: none; + } + } + } + + span { + padding-right: $v-tree-row-height; + cursor: pointer; + display: inline-block; + // Allow to click on the whole row (almost, at least the right side part) + width: 100%; + + // IE does strange things when the width is wider than the parent + .v-ie & { + width: auto; + } + } + + .v-icon { + padding-right: 0; + width: auto; + min-width: 1em; + } + + &:after { + content: ""; + display: inline-block; + vertical-align: top; + position: absolute; + z-index: 1; + left: 0; + width: 100%; + height: $v-tree-row-height; + border-radius: $v-border-radius; + opacity: 0; + + @if $v-tree-animations-enabled { + @include transition(opacity 120ms); + } + + .v-ie8 & { + content: none; + } + } + + .v-ie8 & { + display: inline-block; + } + } + + .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-caption > div:before { + @include v-valo-tree-expanded-icon-style; + + @if $v-tree-animations-enabled { + @include transform(rotate(90deg)); + @include v-valo-tree-collapsed-icon-style; + } + } + + .v-ie8 & .#{$primary-stylename}-node-expanded:before { + @include v-valo-tree-expanded-icon-style(true); + } + + + + .#{$primary-stylename}-node-focused { + // This a v-tree-node-caption element + &:after { + opacity: 1; + border: 1px solid v-valo-focus-color(); + } + } + + + + .#{$primary-stylename}-node-selected { + color: v-valo-font-color(v-valo-selection-color(), 0.9); + text-shadow: v-valo-button-text-shadow(v-valo-selection-color(), $v-bevel-depth); + + &:after { + opacity: 1; + @include v-valo-gradient(v-valo-selection-color()); + border: none; + + .v-ie8 & { + //visibility: visible; + } + } + + .v-ie8 & { + @include v-valo-gradient(v-valo-selection-color()); + } + } + + .#{$primary-stylename}-node-children { + padding-left: round($v-unit-size/2); + + .v-ie8 & { + padding-left: 0; + } + } + + @if $v-tree-expand-animation-enabled { + .#{$primary-stylename}-node-children[style*="display: none"] { + @include animation(v-valo-tree-node-close 400ms ease-out forwards); + display: block !important; + } + + .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children { + @include animation(v-valo-tree-node-open 400ms ease-in); + } + } + + + + // Drag'n'drop styles + + .#{$primary-stylename}-node-drag-top:before, + .#{$primary-stylename}-node-drag-bottom:after { + content: "\2022"; + display: block; + position: absolute; + height: 2px; + width: 100%; + background: v-valo-focus-color(); + font-size: $v-font-size * 2; + line-height: 2px; + color: v-valo-focus-color(); + text-indent: round($v-font-size/-4); + text-shadow: 0 0 1px $v-app-background-color, 0 0 1px $v-app-background-color; + } + + .#{$primary-stylename}-node-caption-drag-center { + box-shadow: 0 0 0 2px v-valo-focus-color(); + position: relative; + border-radius: $v-border-radius; + + .v-ie8 & { + outline: 2px solid v-valo-focus-color(); + } + } + + .v-ff & .#{$primary-stylename}-node-drag-top:before, + .v-ff & .#{$primary-stylename}-node-drag-bottom:after { + line-height: 1px; + } + + .v-ie8 & .#{$primary-stylename}-node-drag-top:before, + .v-ie8 & .#{$primary-stylename}-node-drag-bottom:after { + line-height: 0; + } +} + + +@mixin v-valo-tree-collapsed-icon-style { + content: "\f0da"; + font-family: FontAwesome; +} + +@mixin v-valo-tree-expanded-icon-style ($force: false) { + @if $v-tree-animations-enabled == false or $force { + content: "\f0d7"; + font-family: FontAwesome; + } +} |