sk_fems_ui/assets/scss/layout.scss

.loading {
  z-index: 99;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.4);
  //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
}

.v-spinner {
  top: 50%;
  left: 50%;
}

::v-deep {
  .container--fluid {
    .menu-container {
      height:calc(100vh - 60px);
      overflow-y: auto;
      min-width: 200px;
      
      // v-navigation-drawer (sidebar)
      .v-navigation-drawer {
        box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
        min-width: 200px !important;
        // transform: none !important;
        // visibility: visible !important;
    
        &--fixed {
          z-index: 20;
        }
    
        .home {
          display: block;
          line-height: 0;
        }
    
        &__border {
          display: none;
        }
    
        &__append {
          padding: 0 17px;
          margin: 0 0 26px;
    
          >p {
            margin-bottom: 0;
          }
        }
    
        .v-treeview {
          padding: 0 10px;
          box-sizing: border-box;
    
          .v-treeview-node__level {
            width: 9px;
          }
    
          >.v-treeview-node {
            margin-top: 10px;
    
            &:first-child {
              margin-top: 0;
            }
    
            >.v-treeview-node__root {
              min-height: 44px !important;
            }
          }
    
          .v-treeview-node {
            .v-treeview-node__toggle {
              display: none !important;
            }
    
            &>.v-treeview-node__root:before {
              border-radius: 6px;
              z-index: -1;
            }
    
            &>.v-treeview-node__root:hover:before {
              opacity: 0 !important;
            }
    
            .v-treeview-node__children {
              .v-treeview-node__label {
                >button>span {
                  font-size: 0.875rem;
                }
              }
            }
          }
    
          .v-treeview-node--click[aria-expanded="true"] {
            &>.v-treeview-node__root:before {
              opacity: 0 !important;
            }
          }
    
          .v-treeview-node[aria-expanded="true"] {
            &>.v-treeview-node__root>.v-treeview-node__content
            >.v-treeview-node__label>button {
              >.anticon,
              >.v-icon.mdi-chevron-down {
                transform: rotate(-180deg);
              }
            }
          }
    
          .v-treeview-node__label {
            &>button {
              width: 100%;
              display: flex;
              align-items: center;
              // justify-content: center;
            }
    
            & .anticon,
            & .v-icon.mdi-chevron-down {
              margin-left: auto;
              animation-duration: 0.5s;
              font-size: 12px;
            }
          }
        }
    
        .v-treeview-node--active {
          &:before {
            opacity: 0 !important;
          }
        }
    
        &.v-navigation-drawer--mini-variant {
          .home {
            display: none;
          }
    
          .v-treeview-node__content {
            margin-left: 0;
          }
    
          .v-treeview-node__content span:not(.v-icon),
          .v-treeview-node__root>button,
          .v-treeview-node__level,
          .v-treeview-node__content .v-icon.mdi-chevron-down,
          .v-treeview-node__content .anticon {
            display: none;
          }
    
          .v-navigation-drawer__append {
            display: none;
          }
        }
      }
     }
  }

  // router-tab header
  .router-tab {
    height: 100%;

    &__header {
      align-items: flex-end;
      height: 52px;
      margin: -5px -5px 0;
      padding: 0 20px;
      box-sizing: border-box;
      border-bottom: none !important;
    }

    &-page {
      height: 100%;
    }

    & .router-tab__container {
      overflow-y: auto;
      height: calc(100vh - 110px);
      max-height: calc(100vh - 115px);
      padding: 20px;
    }

    .router-tab__slot-end {
      align-self: center;
      display: flex;
      align-items: center;

      >* {
        flex: none;
        margin-right: 6px;

        &:last-child {
          margin-right: 0;
        }
      }

      .v-menu+.v-btn {
        padding: 0 3px;
      }

      .v-btn {
        border-radius: 4px;
      }
    }

    .router-tab__nav {
      padding-left: 0;
    }

    .router-tab__scroll {
      height: 46px;
    }

    .router-tab__item {
      height: 46px;
      padding: 0 !important;

      &:first-child {
        border-left: none
      }

      &>span {
        font-size: 14px;
      }

      &.is-active {
        border-bottom: 2px solid;
        &>span {
          font-weight: 400;
        }
      }

      &+.router-tab__item {
        margin-left: 16px;
      }
      border:none;
    }

  }
}

@each $theme in dark, light {
  @include theme($theme);
  
  .v-application.#{$theme}-mode {
    ::v-deep {

      ::-webkit-scrollbar {
        width: 4px;
        border-radius: 3px;
      }
  
      ::-webkit-scrollbar-track {
        background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
      }
  
      ::-webkit-scrollbar-thumb {
        width: 4px;
        border-radius: 3px;
        background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
        background-clip: content-box;
      }

      .header {
        background-color: map-deep-get($config, #{$theme}, "header-backgroud");
        border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
      }

      .btn-header {
        background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
        border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
        color: map-deep-get($config, #{$theme}, "v-btn-header-text");
      }

      .container--fluid {
        background-color: map-deep-get($config, #{$theme}, "container-fluid");
        .menu-container {
          border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
          .v-navigation-drawer__append {
            >p {
              color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
            }
          }
        }
      }
  
      .v-navigation-drawer {
        background: map-deep-get($config, #{$theme}, "menu-bg-color");
      }

      .v-treeview {
        .v-treeview-node+.v-treeview-node {
          margin-top: 2px;
        }
  
        .v-treeview-node__root+.v-treeview-node__children {
          margin-top: 2px;
        }
  
        &>.v-treeview-node {
          .v-treeview-node__root {
            border-radius: 8px;
            &:hover {
              background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
            }
            .v-treeview-node__content {
              .v-icon,
              .v-treeview-node__label {
                color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
              }
              
              .anticon.anticon-down {
                color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
              }
            }
          }
  
          &[aria-expanded="true"]{
            // Level 1
            &>.v-treeview-node__root {
              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
              border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
              color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
  
              &:before {
                background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
              }
  
              .v-treeview-node__content {
                .v-treeview-node__label {
                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
                }
  
                .v-icon:first-child,
                .v-icon:first-child::before,
                .anticon.anticon-down {
                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
                }
                
              }
            }
  
            &>.v-treeview-node__children {
              // Level 2
              .v-treeview-node__root {
                color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
  
                &:hover {
                  background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
                }
                
                .v-treeview-node__content {
                  .v-icon,
                  .v-icon::before {
                    color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
                  }
                }
              }
  
              &>[aria-expanded="true"] >.v-treeview-node__root,
              .v-treeview-node__root.v-treeview-node--active {
                background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
                .v-treeview-node__content {
                  .v-treeview-node__label {
                    color: map-deep-get($config, #{$theme}, "card-title-color");
                  }
  
                  .v-icon,
                  .v-icon::before,
                  .anticon.anticon-down {
                    color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
                  }
                }
              }
              
              // Level 3
              .v-treeview-node__children {
                .v-treeview-node {
                  >.v-treeview-node__root {
                    .v-treeview-node__content {
                      .v-treeview-node__label {
                        color: map-deep-get($config, #{$theme}, "card-default-color");
                      }
                    }
  
                    *:hover,
                    :hover {
                      border-width: 0;
                    }
  
                    &:hover {
                      border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
                      border-radius: 8px;
                      background-color: rgba(0, 0, 0, 0);
                      .v-treeview-node__content {
                        .v-treeview-node__label {
                          color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
                        }
                      }
  
                    }
  
                    &.v-treeview-node--active {
                      // color: map-deep-get($config, #{$theme}, "card-title-color");
                      background-color: rgba(0, 0, 0, 0);
                      .v-treeview-node__content {
                        .v-treeview-node__label {
                          color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
                        }
        
                        .v-icon,
                        .v-icon::before,
                        .anticon {
                          color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
                        }
                      }
                    }
  
                  }
                }
  
              }
  
            }
          }
        }
      }

    }
  }
}