|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308 |
- /**
- *
- * @group tree
- */
- $v-tree-row-height: round($v-unit-size/1.3) !default;
-
- /**
- *
- * @group tree
- */
- $v-tree-animations-enabled: true !default;
-
- /**
- *
- * @group tree
- */
- $v-tree-expand-animation-enabled: false !default;
-
-
- @if $v-tree-expand-animation-enabled {
- @include keyframes(valo-tree-node-open) {
- 0% {
- max-height: 0;
- }
- 100% {
- max-height: $v-tree-row-height * 10;
- }
- }
-
- @include keyframes(valo-tree-node-close) {
- 0% {
- max-height: $v-tree-row-height * 10;
- }
- 100% {
- max-height: 0;
- }
- }
- }
-
-
- /**
- *
- *
- * @param {string} $primary-stylename (v-tree) -
- *
- * @group tree
- */
- @mixin valo-tree ($primary-stylename: v-tree) {
-
- .#{$primary-stylename} {
- position: relative;
- white-space: nowrap;
-
- &: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;
- // IE 9/10 need some color so that this element can receive mouse events.
- // 'red' just happens to be the shortest color name.
- background: red;
- opacity: 0;
-
- .v-ie8 & {
- position: static;
- margin-left: -1.9em;
- vertical-align: top;
- @include valo-tree-collapsed-icon-style;
- text-align: center;
- background: transparent;
- }
- }
-
- .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;
-
- // Mainly to satisty IE8 (doesn't harm other browsers)
- vertical-align: top;
-
- & > div {
- display: inline-block;
- width: 100%;
- position: relative;
- z-index: 2;
-
- &:before {
- @include 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: block;
- vertical-align: top;
- position: absolute;
- z-index: 1;
- left: 0;
- margin-top: -$v-tree-row-height;
- 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 valo-tree-expanded-icon-style;
-
- @if $v-tree-animations-enabled {
- @include transform(rotate(90deg));
- @include valo-tree-collapsed-icon-style;
- }
- }
-
- .v-ie8 & .#{$primary-stylename}-node-expanded:before {
- @include valo-tree-expanded-icon-style(true);
- }
-
- .#{$primary-stylename}-node-leaf:before,
- .#{$primary-stylename}-node-leaf > .#{$primary-stylename}-node-caption > div:before {
- visibility: hidden;
- }
-
- .#{$primary-stylename}-node-focused {
- // This a v-tree-node-caption element
- &:after {
- opacity: 1;
- border: 1px solid $v-focus-color;
- }
-
- .v-ie8 & {
- outline: 1px dotted $v-focus-color;
- }
- }
-
-
-
- .#{$primary-stylename}-node-selected {
- $font-color: valo-font-color($v-selection-color, 0.9);
- color: $font-color;
- text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-item-selection-color);
-
- &:after {
- opacity: 1;
- @include valo-gradient($v-selection-color);
- border: none;
-
- .v-ie8 & {
- //visibility: visible;
- }
- }
-
- .v-ie8 & {
- @include valo-gradient($v-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(valo-tree-node-close 400ms ease-out forwards);
- display: block !important;
- }
-
- .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children {
- @include animation(valo-tree-node-open 400ms ease-in);
- }
- }
-
-
-
- // Drag'n'drop styles
-
- .#{$primary-stylename}-node-drag-top:before,
- .#{$primary-stylename}-node-drag-bottom:after,
- .#{$primary-stylename}-node-drag-bottom.#{$primary-stylename}-node-dragfolder.#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children:before {
- content: "\2022";
- display: block;
- position: absolute;
- height: 2px;
- width: 100%;
- background: $v-focus-color;
- font-size: $v-font-size * 2;
- line-height: 2px;
- color: $v-focus-color;
- text-indent: round($v-font-size/-4);
- text-shadow: 0 0 1px $v-background-color, 0 0 1px $v-background-color;
- opacity: 1;
- visibility: visible;
- }
-
- .#{$primary-stylename}-node-drag-bottom.#{$primary-stylename}-node-dragfolder.#{$primary-stylename}-node-expanded:after {
- content: none;
- }
-
- .#{$primary-stylename}-node-caption-drag-center {
- @include box-shadow(0 0 0 2px $v-focus-color);
- position: relative;
- border-radius: $v-border-radius;
-
- .v-ie8 & {
- outline: 2px solid $v-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;
- }
- }
-
-
- /**
- *
- *
- *
- * @group tree
- */
- @mixin valo-tree-collapsed-icon-style {
- content: "\f0da";
- font-family: ThemeIcons;
- }
-
- /**
- *
- *
- * @param {bool} $force (false) -
- *
- * @group tree
- */
- @mixin valo-tree-expanded-icon-style ($force: false) {
- @if $v-tree-animations-enabled == false or $force {
- content: "\f0d7";
- font-family: ThemeIcons;
- }
- }
|