diff --git a/packages/components/src/components/treeview/_treeview.scss b/packages/components/src/components/treeview/_treeview.scss index 604ea373079d..92cb936d34c6 100644 --- a/packages/components/src/components/treeview/_treeview.scss +++ b/packages/components/src/components/treeview/_treeview.scss @@ -35,24 +35,34 @@ @include focus-outline('outline'); } - .#{$prefix}--tree-node--disabled { - color: $disabled-02; - background-color: $disabled-01; - pointer-events: none; + .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label { + outline: none; } - .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover { + .#{$prefix}--tree-node--disabled, + .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover, + .#{$prefix}--tree-node--disabled + .#{$prefix}--tree-node__label:hover + .#{$prefix}--tree-node__label__details { + color: $disabled-02; background-color: $disabled-01; } .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon, - .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon { + .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon, + .#{$prefix}--tree-node--disabled + .#{$prefix}--tree-node__label:hover + .#{$prefix}--tree-parent-node__toggle-icon, + .#{$prefix}--tree-node--disabled + .#{$prefix}--tree-node__label:hover + .#{$prefix}--tree-node__icon { fill: $disabled-02; } + .#{$prefix}--tree-node--disabled, .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon:hover { - cursor: default; + cursor: not-allowed; } .#{$prefix}--tree-node__label { @@ -62,10 +72,21 @@ min-height: rem(32px); &:hover { + color: $text-01; background-color: $hover-ui; } } + .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details { + color: $text-01; + } + + .#{$prefix}--tree-node__label:hover + .#{$prefix}--tree-parent-node__toggle-icon, + .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon { + fill: $icon-01; + } + .#{$prefix}--tree-leaf-node { display: flex; padding-left: $spacing-08; @@ -101,7 +122,7 @@ .#{$prefix}--tree-parent-node__toggle-icon { transform: rotate(-90deg); transition: all $duration--fast-02 motion(standard, productive); - fill: $icon-01; + fill: $icon-02; } .#{$prefix}--tree-parent-node__toggle-icon--expanded { @@ -110,7 +131,7 @@ .#{$prefix}--tree-node__icon { margin-right: $spacing-03; - fill: $icon-01; + fill: $icon-02; } .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label { @@ -122,6 +143,15 @@ } } + .#{$prefix}--tree-node--selected + > .#{$prefix}--tree-node__label + .#{$prefix}--tree-parent-node__toggle-icon, + .#{$prefix}--tree-node--selected + > .#{$prefix}--tree-node__label + .#{$prefix}--tree-node__icon { + fill: $icon-01; + } + .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label { position: relative; @@ -131,7 +161,7 @@ left: 0; width: rem(4px); height: 100%; - background-color: $interactive-01; + background-color: $interactive-04; content: ''; } } diff --git a/packages/react/src/components/TreeView/TreeView-story.js b/packages/react/src/components/TreeView/TreeView-story.js index 509a9beb4d22..3bedf17d6a26 100644 --- a/packages/react/src/components/TreeView/TreeView-story.js +++ b/packages/react/src/components/TreeView/TreeView-story.js @@ -17,6 +17,7 @@ import { } from '@storybook/addon-knobs'; import { InlineNotification } from '../Notification'; import TreeView, { TreeNode } from '../TreeView'; +import './story.scss'; const sizes = { default: 'default', diff --git a/packages/react/src/components/TreeView/story.scss b/packages/react/src/components/TreeView/story.scss new file mode 100644 index 000000000000..2c5e6b9c2144 --- /dev/null +++ b/packages/react/src/components/TreeView/story.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +.bx--tree { + width: 16rem; +}