CSS tree

by lpugin

HTML

<div class="vrv-wrapper">
  <div class="vrv-tree">
    <div class="vrv-node-label">root</div>
    <div class="vrv-node-children">
      <div class="vrv-tree-node">
        <div class="vrv-node-label">1</div>
      </div>
      <div class="vrv-tree-node">
        <div class="vrv-node-label">2</div>
      </div>
      <div class="vrv-tree-node open">
        <div class="vrv-node-label">
          <input type="checkbox">
          <span>label</span>
          
        </div>
        <div class="vrv-node-children">
          <div class="vrv-tree-node">
            <div class="vrv-node-label">3.1</div>
          </div>
          <div class="vrv-tree-node">
            <div class="vrv-node-label">3.2</div>
          </div>
          <div class="vrv-tree-node open">
            <div class="vrv-node-label">3.3</div>
            <div class="vrv-tree-children">
              <div class="vrv-tree-node">
                <div class="vrv-node-label">3.3.1</div>
              </div>
              <div class="vrv-tree-node">
                <div class="vrv-node-label">3.3.2</div>
              </div>
              <div class="vrv-tree-node">
                <div class="vrv-node-label">3.3.3</div>
              </div>
            </div>
          </div>
        </div>
        <div class="vrv-tree-node">
          <div class="vrv-node-label">4</div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

////////////////////////////////////////////////////////////////////////
// To change dark / light theme - also rename icons directories
////////////////////////////////////////////////////////////////////////
$dark-theme: true;

$background: lightgrey;
$background-light: lighten($background, 10%);
$background-extra-light: lighten($background, 20%);
$background-active: darken($background, 20%);
$background-toggled: darken($background, 10%);
$background-border: darken($background, 10%);
$text-color: black;
$dialog-color: lighten($background, 10%);
$dialog-background: rgba(245, 245, 245, 0.8);
$doc-background: whitesmoke;
$disabled-opacity: 0.2;
$primary: #8B0000;

$hover-filter: invert(100%);
$filtered-primary: invert($primary);
$filtered-background-grey-active: invert($background-active);

@if $dark-theme ==true {
    $background: rgb(60, 60, 60);
    $background-light: lighten($background, 10%);
    $background-extra-light: lighten($background, 20%);
    $background-active: darken($background, 15%);
    $background-toggled: darken($background, 10%);
    $background-border: lighten($background, 10%);
    $text-color: white;
    $dialog-color: rgb(50, 50, 50);
    $dialog-background: rgba(95, 95, 95, 0.8);
    $doc-background: grey;
    $disabled-opacity: 0.5;

    $hover-filter: invert(0%);
    $filtered-primary: $primary;
    $filtered-background-grey-active: $background-active;
}

////////////////////////////////////////////////////////////////////////
// Some dimensions
////////////////////////////////////////////////////////////////////////

$toolbar-height: 36px;
$menu-height: 18px;
$statusbar-height: 20px;
$editor-tool-panel-width: 300px;
$editor-keyboard-height: 110px;
$btn-height: 40px;
$dialog-gh-list-height: 350px;

$z-index-valid: 5;
$z-index-menu: 6;
$z-index-dialog: 7;
$z-index-notification: 8;
$z-index-tooltip: 9;

$font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

////////////////////////////////////////////////////////////////////////
//...