How to properly override style of Angular tree?

Question

I am trying to apply ACE Admin theme style to angular-tree-component.

Now my tree looks like this:

However, I would like to apply styles from the guide to make a tree like this:

So it can be achieved through The Angular tree guide. The Angular tree guide says, if you want to make a tree with plus and minus(ACE Admin theme) then:

Surround your tree with a class, and add your custom style to your style.scss file. Scope all the custom rules under your custom class - and that's it!

So I've created .ace style (Surround your tree with a class like guide says):

.ace { }

Then I put all elements of style ACE Admin theme inside of .ace class(Scope all the custom rules under your custom class like guide says):

.ace div.tree {
     padding-left: 0;
     margin-left: -5px
}
...

and my tree:

 <tree-root 
  [ngClass]="'ace'"
  [nodes]="nodes"
  [options]="options"
></tree-root>

I think it should be really simple, however I cannot apply the Ace Admin Style. Sorry about the lack of basic CSS understanding.

I've created a plunker to show what I have. The basic style is applied, however ACE Admin theme is not applied.

What am I doing wrong?

Answer 1

It is necessary to add class expand-tree to all tree and add specific style div.angular-tree-component.

Click to see a work example at plunker.

The whole style looks like this:

.expand-tree .tree-children.tree-children-no-padding { padding-left: 0 }
.expand-tree .tree-children { padding-left: 20px; overflow: hidden }
.expand-tree .node-drop-slot { display: block; height: 2px }
.expand-tree .node-drop-slot.is-dragging-over { background: #ddffee; height: 20px; border: 2px dotted #888; }
.expand-tree .toggle-children-wrapper-expanded .toggle-children { transform: rotate(90deg) }
.expand-tree .toggle-children-wrapper-collapsed .toggle-children { transform: rotate(0); }
.expand-tree .toggle-children-wrapper {
  padding: 2px 3px 5px 1px;
}
/* tslint:disable */
.expand-tree .toggle-children {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzRkRFQjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRkRFQjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5iogFwAAAGhJREFUeNpiYGBgKABigf///zOQg0EARH4A4gZyDIIZ8B/JoAJKDIDhB0CcQIkBRBtEyABkgxwoMQCGD6AbRKoBGAYxQgXIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC');
  height: 8px;
  width: 9px;
  background-size: contain;
  display: inline-block;
  position: relative;
  top: 1px;
  background-repeat: no-repeat;
  background-position: center;
}
.expand-tree .toggle-children-placeholder {
  display: inline-block;
  height: 10px;
  width: 10px;
  position: relative;
  top: 1px;
  padding-right: 3px;
}
.expand-tree .node-content-wrapper {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 2px;
  transition: background-color .15s,box-shadow .15s;
}
.expand-tree .node-wrapper {display: flex; align-items: flex-start;}
.expand-tree .node-content-wrapper-active,
.expand-tree .node-content-wrapper.node-content-wrapper-active:hover,
.expand-tree .node-content-wrapper-active.node-content-wrapper-focused {
  background: #beebff;
}
.expand-tree .node-content-wrapper-focused { background: #e7f4f9 }
.expand-tree .node-content-wrapper:hover { background: #f7fbff }
.expand-tree .node-content-wrapper-active, .node-content-wrapper-focused, .node-content-wrapper:hover {
  box-shadow: inset 0 0 1px #999;
}
.expand-tree .node-content-wrapper.is-dragging-over { background: #ddffee; box-shadow: inset 0 0 1px #999; }
.expand-tree .node-content-wrapper.is-dragging-over-disabled { opacity: 0.5 }

.expand-tree tree-viewport {
  height: 100%;
  overflow: auto;
  display: block;
}
.expand-tree .tree-children { padding-left: 20px }
.expand-tree .empty-tree-drop-slot .node-drop-slot { height: 20px; min-width: 100px }
.expand-tree .angular-tree-component {
  width: 100%;
  position:relative;
  display: inline-block;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently not supported by any browser */
}

tree-root .angular-tree-component-rtl {
  direction: rtl;
}
tree-root .angular-tree-component-rtl .toggle-children-wrapper-collapsed .toggle-children {
  transform: rotate(180deg) !important;
}
tree-root .angular-tree-component-rtl .tree-children {
  padding-right: 20px;
  padding-left: 0;
}

li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

.expand-tree div.angular-tree-component div.tree-children::before,
.expand-tree div.angular-tree-component::before {
  content: "";
  position: absolute;
  border-left: 1px dotted #23527c;
  height: 100%;
  top: -10px;
  left: 6px
}

.expand-tree div.angular-tree-component {
  padding: 0;
  margin: 0;
}

.expand-tree div.angular-tree-component div.tree-children {
  position: relative;
  padding-left: 0;
  margin-left: 16px
}

.expand-tree div.angular-tree-component div.tree-children::before {
  left: 5px
}

.expand-tree .node-drop-slot {height:2px;}

.expand-tree div.angular-tree-component tree-node>div>.node-wrapper {
  margin-left: 24px
}

.expand-tree div.angular-tree-component tree-node>div>.node-wrapper>.node-content-wrapper {
  margin-left: 4px
}

.expand-tree div.angular-tree-component tree-node>div.tree-node-leaf .node-wrapper {
  margin-left: 0;
  position: relative;
}

.expand-tree div.angular-tree-component tree-node>div::before {
  content: "";
  position: absolute;
  border-bottom: 1px dotted #23527c;
  width: 7px;
  margin-top: 12px;
  left: 6px
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper {
  width: 13px;
  height: 13px;
  border: 1px solid #23527c;
  position: relative;
  margin-top: 5px;
  margin-left: 14px;
  display: inline-block;
  background-color: #fff;
  z-index: 1
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper::before {
  content: "";
  display: inline-block;
  width: 7px;
  border-top: 1px solid #23527c;
  position: absolute;
  top: 5px;
  left: 2px
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
  content: "";
  display: inline-block;
  height: 7px;
  border-left: 1px solid #23527c;
  position: absolute;
  top: 2px;
  left: 5px
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper .toggle-children {
  display: none
}

.expand-tree div.angular-tree-component tree-node>div .node-content-wrapper {
  margin: 0;
  padding: 0 0 0 4px;
  box-shadow: none;
  background: none;
}

.expand-tree div.angular-tree-component>tree-node>div::before {
  left: 14px
}

and tree root:

<tree-root 
  [ngClass]="expand-tree"
  [nodes]="nodes"
  [options]="options"
></tree-root>