[Summary view] [Print] [Text view]

   1  // Tree select
   2  
   3  .treeselect {
   4    display: block;
   5    padding-left: 0;
   6    list-style: none;
   7  
   8    .nav-header {
   9      font-weight: $font-weight-bold;
  10      color: $gray-900;
  11    }
  12  
  13    li {
  14      position: relative;
  15      display: block;
  16      line-height: $treeselect-line-height;
  17      list-style: none;
  18  
  19      &::before {
  20        position: absolute;
  21        top: 14px;
  22        inset-inline-start: ($treeselect-indent - 15px);
  23        width: 10px;
  24        height: 1px;
  25        margin: auto;
  26        content: "";
  27        background-color: rgba(0, 0, 0, .2);
  28      }
  29  
  30      &::after {
  31        position: absolute;
  32        top: 0;
  33        bottom: 0;
  34        inset-inline-start: ($treeselect-indent - 15px);
  35        width: 1px;
  36        height: 100%;
  37        content: "";
  38        background-color: rgba(0, 0, 0, .2);
  39      }
  40  
  41      &:last-child {
  42  
  43        &::after {
  44          height: 14px;
  45        }
  46      }
  47  
  48      li {
  49        padding-inline-start: $treeselect-indent;
  50      }
  51    }
  52  
  53    > li::before,
  54    > li::after {
  55      display: none;
  56    }
  57  
  58    .#{$jicon-css-prefix}-,
  59    .#{$fa-css-prefix}- {
  60      display: none;
  61    }
  62  
  63    .treeselect-toggle {
  64      display: inline-block;
  65      padding: 0;
  66      margin-right: .1rem;
  67      text-align: center;
  68      cursor: pointer;
  69    }
  70  
  71    .treeselect-menu {
  72      display: inline-block;
  73    }
  74  
  75    .treeselect-item {
  76      display: inline-block;
  77  
  78      input {
  79        position: relative;
  80        top: 1px;
  81        margin-right: .2rem;
  82      }
  83  
  84      label {
  85        margin-bottom: 0;
  86      }
  87    }
  88  
  89    .dropdown-toggle {
  90      padding: 0 .5rem .3rem;
  91      margin-left: .5rem;
  92  
  93      &::after {
  94        margin-left: 0;
  95        font-size: 1rem;
  96        color: var(--template-text-dark);
  97      }
  98    }
  99  }
 100  
 101  .treeselect-sub {
 102    padding-left: 0;
 103  }
 104  
 105  .tree-holder {
 106  
 107    ul ul {
 108  
 109      li::before,
 110      li::after {
 111        inset-inline-start: 8px;
 112        display: block;
 113      }
 114  
 115      li::before {
 116        top: 12px;
 117      }
 118  
 119      li:last-child::after {
 120        height: 12px;
 121      }
 122    }
 123  
 124    li {
 125      line-height: 1.8rem;
 126  
 127      li {
 128        padding-inline-start: 20px;
 129      }
 130    }
 131  }