| /* |
| * Copyright (c) 2010-2020 BSI Business Systems Integration AG. |
| * All rights reserved. This program and the accompanying materials |
| * are made available under the terms of the Eclipse Public License v1.0 |
| * which accompanies this distribution, and is available at |
| * http://www.eclipse.org/legal/epl-v10.html |
| * |
| * Contributors: |
| * BSI Business Systems Integration AG - initial API and implementation |
| */ |
| .outline.tree { |
| |
| &.in-background > .tree-data > .tree-node.selected { |
| background-color: @outline-in-background-selection-background-color; |
| color: @outline-in-background-selection-color; |
| } |
| |
| & > .tree-data { |
| padding-top: @outline-data-padding-top; |
| |
| & > .scrollbar { |
| #scout.scrollbar-y-padding(2px, 0); |
| } |
| |
| & > .key-box { |
| top: 7px; |
| } |
| |
| & > .tree-node, |
| & > .animation-wrapper > .tree-node { |
| background-color: transparent; |
| cursor: pointer; |
| border: 0; |
| |
| /* padding-right is used to leave some space for the scrollbar */ |
| padding: @outline-node-padding-y @outline-node-padding-right @outline-node-padding-y @outline-node-padding-left; |
| |
| &.group { |
| background-color: @outline-group-background-color; |
| } |
| |
| & > .text { |
| font-size: @outline-font-size; |
| } |
| |
| & > .image-icon { |
| margin-top: auto; |
| } |
| |
| & > .font-icon { |
| line-height: @outline-node-font-icon-line-height; |
| font-size: @outline-node-font-icon-size; |
| color: @outline-node-font-icon-color; |
| } |
| |
| & > .menubar { |
| border: 0; |
| background-color: inherit; |
| } |
| |
| & > .tree-node-control { |
| padding-top: @outline-node-control-padding-y; |
| padding-left: @outline-node-control-padding-left; |
| line-height: @outline-node-control-line-height; |
| color: @outline-node-control-color; |
| |
| &::before { |
| font-size: @outline-node-control-size; |
| } |
| |
| &:hover { |
| color: @highlight-color; |
| } |
| } |
| |
| &.selected { |
| color: @outline-selection-color; |
| background-color: @outline-selection-background-color; |
| border: 0; |
| |
| & > .font-icon, |
| & > .tree-node-control { |
| color: fade(@outline-selection-color, 70%); |
| } |
| } |
| } |
| } |
| } |
| |
| .outline-title { |
| cursor: pointer; |
| color: @outline-title-color; |
| font-size: 19px; |
| padding: 0 @outline-title-padding-right 0 @outline-title-padding-left; |
| border-bottom: 1px solid @outline-title-border-color; |
| display: flex; |
| align-items: center; |
| height: @outline-title-height; |
| |
| & > .icon { |
| padding-right: @outline-title-icon-padding-right; |
| } |
| |
| & > .key-box { |
| top: 19px; |
| } |
| |
| & > .text { |
| flex-grow: 1; |
| #scout.overflow-ellipsis-nowrap(); |
| } |
| |
| & > .menubar { |
| background-color: transparent; |
| border: none; |
| width: auto; |
| flex-grow: 0; |
| margin-right: -10px; |
| |
| & > .menubar-box > .menu-item.last { |
| margin-right: 0; |
| } |
| } |
| } |
| |
| /* bread crumb style (different colors and bigger font and arrow than original breadcrumb style) */ |
| .outline.tree.breadcrumb { |
| |
| & > .outline-title { |
| margin: 0; |
| border-bottom-color: @outline-breadcrumb-border-color; |
| |
| &.touch:active { |
| background-color: @outline-breadcrumb-node-active-background-color; |
| } |
| } |
| |
| &.node-selected > .outline-title { |
| border-bottom-color: @outline-breadcrumb-ancestor-border-color; |
| } |
| |
| & > .tree-data { |
| padding-top: 0; |
| |
| & > .tree-node, |
| & > .animation-wrapper > .tree-node { |
| border-bottom: 1px solid @outline-breadcrumb-border-color; |
| padding: @outline-breadcrumb-node-padding-y @outline-breadcrumb-node-padding-x; |
| |
| &.group { |
| background-color: transparent; |
| } |
| |
| &.child-of-selected { |
| background-color: @outline-breadcrumb-child-background-color; |
| |
| &:active { |
| background-color: @outline-breadcrumb-child-active-background-color; |
| } |
| } |
| |
| &.ancestor-of-selected { |
| border-bottom-color: @outline-breadcrumb-ancestor-border-color; |
| |
| &::before { |
| display: none; |
| } |
| |
| &::after { |
| display: none; |
| } |
| } |
| |
| &:active { |
| background-color: @outline-breadcrumb-node-active-background-color; |
| } |
| |
| &.selected { |
| background-color: @outline-selection-background-color; |
| color: @outline-selection-color; |
| cursor: default; |
| |
| &::before { |
| border-top-color: @outline-selection-background-color; |
| border-width: 8px 13px 0 13px; |
| bottom: -8px; |
| } |
| |
| &::after { |
| border-width: 0; |
| border-top-color: @outline-selection-background-color; |
| } |
| } |
| |
| &.selected > .text, |
| &.ancestor-of-selected > .text { |
| & > .compact-cell-header > .compact-cell-title > .right { |
| // Don't show title suffix |
| display: none; |
| } |
| |
| & > .compact-cell-content.has-header { |
| // Don't show the content if there is a header |
| display: none; |
| } |
| } |
| } |
| } |
| |
| &:focus > .tree-data, |
| &.focused > .tree-data { |
| |
| & > .tree-node, |
| & > .animation-wrapper > .tree-node { |
| |
| &.parent-of-selected { |
| border-color: @outline-breadcrumb-border-color; |
| } |
| |
| &.parent-of-selected::before { |
| border-color: transparent; |
| } |
| |
| &.selected { |
| border-color: @outline-breadcrumb-border-color; |
| } |
| |
| &.selected::before { |
| border-top-color: @outline-selection-background-color; |
| } |
| } |
| } |
| } |
| |
| .compact.outline.breadcrumb { |
| & > .outline-title { |
| padding-left: @compact-outline-title-padding-x; |
| padding-right: @compact-outline-title-padding-x; |
| |
| & > .menubar { |
| margin-right: -@menubar-item-icononly-padding-x; |
| } |
| } |
| |
| & > .tree-data { |
| |
| & > .tree-node { |
| padding: 0; |
| |
| & > .text { |
| display: inline-block; |
| padding: @compact-outline-node-padding-y @compact-outline-node-padding-x; |
| } |
| |
| & > .icon { |
| padding: @compact-outline-node-padding-y 0 @compact-outline-node-padding-y @compact-outline-node-padding-x; |
| } |
| |
| & > .node-menubar { |
| position: absolute; |
| right: 0; |
| top: 0; |
| width: auto; |
| padding: @compact-outline-node-padding-y - 7px @compact-outline-node-padding-x - @menubar-item-icononly-padding-x 0 0; |
| } |
| |
| & > .detail-menubar { |
| padding: 0 @compact-outline-node-padding-x @compact-outline-node-padding-y @compact-outline-node-padding-x; |
| margin-left: -@menubar-item-icononly-padding-x; |
| |
| & > .menubar-box > .menu-item { |
| padding-left: @menubar-item-icononly-padding-x; |
| padding-right: @menubar-item-icononly-padding-x; |
| margin-left: @menubar-item-icononly-margin-x; |
| margin-right: @menubar-item-icononly-margin-x; |
| |
| &.first { |
| margin-left: 0; |
| } |
| |
| &.last { |
| margin-right: 0; |
| } |
| } |
| } |
| |
| & > .form { |
| & > .root-group-box > .group-box-body { |
| padding-left: @compact-outline-node-padding-x - @mandatory-indicator-width; |
| padding-right: @compact-outline-node-padding-x; |
| } |
| |
| & > .right-padding-invisible > .group-box-body { |
| padding-right: 0; |
| } |
| } |
| |
| &.selected { |
| display: block; |
| background-color: transparent; |
| color: @desktop-navigation-color; |
| |
| & > .text { |
| font-weight: bold; |
| } |
| |
| &::before { |
| border-top-color: @outline-breadcrumb-border-color; |
| border-width: 6px 12px 0 12px; |
| bottom: -7px; |
| } |
| |
| &::after { |
| border-top-color: @desktop-navigation-body-background-color; |
| border-width: 6px 12px 0 12px; |
| bottom: -6px; |
| } |
| } |
| |
| &.child-of-selected.animate-prev-selected { |
| #scout.animation-name(tree-node-prev-selection); |
| #scout.animation-duration(0.6s); |
| #scout.animation-timing-function(ease-in); |
| } |
| |
| &.compact-root:not(.selected) { |
| display: none; |
| } |
| } |
| |
| &.detail-content-visible > .tree-node > .menubar { |
| padding-bottom: 0; |
| } |
| } |
| |
| & > .tree-data > .tree-node.selected.has-tile-overview { |
| &.compact-root { |
| & > .text, |
| & > .icon { |
| display: none; |
| } |
| } |
| |
| background-color: transparent; |
| color: @desktop-navigation-color; |
| border-bottom: 0; |
| |
| &::before, |
| &::after { |
| display: none; |
| } |
| |
| & .tile-overview-content { |
| margin-left: 20px; |
| } |
| |
| & .tile-overview-title { |
| display: none; |
| } |
| |
| & > .form { |
| background-color: transparent; |
| |
| & > .tile-overview-content { |
| margin-top: 0; |
| } |
| } |
| |
| & .menu-item { |
| color: @desktop-navigation-color; |
| } |
| |
| & ~ .child-of-selected { |
| // Hide child nodes when tile overview is shown |
| display: none; |
| } |
| } |
| } |
| |
| /*** Previous Selection Animation ***/ |
| |
| .keyframes-tree-node-prev-selection() { |
| 00% { |
| background-color: @outline-breadcrumb-child-active-background-color; |
| } |
| 100% { |
| background-color: @outline-breadcrumb-child-background-color; |
| } |
| } |
| |
| @-webkit-keyframes tree-node-prev-selection { |
| .keyframes-tree-node-prev-selection(); |
| } |
| |
| /* NOSONAR */ |
| @keyframes tree-node-prev-selection { |
| .keyframes-tree-node-prev-selection(); |
| } |
| |
| /* NOSONAR */ |
