fix: style 복구

home_dir/www/ksvc/inc/css/scss/component/_search.scss

@@ -82,7 +82,7 @@
 .table-header .button-container{
   width: 100%;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   
 }
 
@@ -100,7 +100,5 @@
 
 // table container
 .table-container .button-box{
-  justify-content: end;
+  justify-content: flex-end;
 }
-
-

home_dir/www/ksvc/inc/css/scss/component/_sidebar.scss

@@ -3,36 +3,57 @@
   width: 100%;
   overflow-y: auto;
   height: 100%;
-
+  border-right: solid 1px #e9e9e9;
-  border-right: solid 1px $gray-002;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background: white;
-
-  position: absolute;
-  top: 0;
-  left: 0;
 }
 
-.container.on {
+.container.on .side-nav {
-  .side-nav {
   width: 88px;
-
+  overflow-y: visible;
-    .fold-btn-container {
+  align-items: center;
-      padding-left: 25%;
+}
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container {
+  position: static;
+}
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li {
+  position: relative;
+}
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li span.fancytree-expander, .container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li span.fancytree-title {
+  display: none;
+}
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li span.fancytree-custom-icon {
+  margin: 0;
+}
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li ul {
+  position: absolute;
+  display: block;
+  left: 56px;
+  top: 0;
+  width: 250px;
+  background: #e9e9e9;
+  z-index: 2;
+  min-height: 52px;
+  max-height: 294px;
+  overflow: auto;
+}
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li ul li span.fancytree-title {
+  color: black;
+  display: block;
+}
+.container.on .side-nav .fold-btn-container {
+  margin: 0 0 30px 0;
+  padding-left: 0;
   width: auto;
-
+}
-      .fold-btn {
+.container.on .side-nav .fold-btn-container .fold-btn {
   transform: rotate(180deg);
 }
-    }
+.container.on .main-part {
-  }
-
-  .main-part{
   width: calc(100% - 88px);
 }
-}
 
 .side-nav .fold-btn-container {
   margin-bottom: 30px;
@@ -52,126 +73,66 @@
   cursor: pointer;
 }
 
-.side-nav .side-menu{
+.side-nav .side-menu ul.fancytree-plain.fancytree-container {
-
-  ul.fancytree-plain.fancytree-container{
   border: none;
   padding: 0px;
-
-    > li > span{
-      border-bottom: solid 1px $gray-002;
 }
-    li {
+.side-nav .side-menu ul.fancytree-plain.fancytree-container > li > span {
+  border-bottom: solid 1px #e9e9e9;
+}
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li {
   min-height: 72px;
-      
+}
-
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li > span {
-      > span{
   height: 72px;
   display: inline-flex;
   align-items: center;
-
+}
-        &:hover, &:active{
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li > span:hover span.fancytree-title, .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span:active span.fancytree-title {
-          span.fancytree-title{
   color: #3c3c3c;
   background-color: transparent;
   border: none;
 }
-        }
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li > span > span {
-
-        > span{
-          // 글자
   color: #3c3c3c;
   font-size: 15px;
-
+}
-          // 아이콘
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li > span > span.fancytree-custom-icon {
-          &.fancytree-custom-icon{
   color: #98A7FA;
   font-size: 24px;
 }
-        }
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li > span.fancytree-node.fancytree-active span.fancytree-title {
-
-        // 활성화된 메뉴
-        &.fancytree-node.fancytree-active{
-
-          span.fancytree-title{
   color: #3c3c3c;
   background-color: transparent;
   border: none;
 }
-
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li > span.fancytree-node.fancytree-active:hover span.fancytree-title, .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span.fancytree-node.fancytree-active:active span.fancytree-title {
-          &:hover, &:active{
-            span.fancytree-title{
   color: #3c3c3c;
   background-color: transparent;
   border: none;
 }
-          }
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li ul {
-        }
-      }
-
-
-
-      // 서브 메뉴
-      ul{
   padding: 0px;
-
+}
-        li{
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li {
   min-height: 48px;
-          border-bottom: 1px solid $blue-003;
+  border-bottom: 1px solid #E1E4F9;
-
+}
-          > span{
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li > span {
   height: 48px;
+  width: -moz-fit-content;
   width: fit-content;
   padding-left: 1.5em;
-            span.fancytree-title{
+}
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li > span span.fancytree-title {
   font-size: 14px;
-              color: $blue-001;
+  color: #4A5ED2;
 }
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li:hover {
+  background-color: #E1E4F9;
 }
-
+.side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li:hover span.fancytree-title {
-          &:hover{
+  color: #4A5ED2;
-            background-color: $blue-003;
-
-            span.fancytree-title{
-              color: $blue-001;
-            }
-          }
-        }
-      }
-  
-    }
-  }
-
-}
-
-
-
-.side-nav .side-menu {
-}
-
-.side-nav .side-menu ul {
-}
-
-.side-nav .side-menu ul li {
-}
-
-.side-nav .side-menu ul li span {
-}
-
-.side-nav .side-menu > ul {
-}
-
-.side-nav .side-menu > ul li span{
-
-}
-
-.side-nav .side-menu > ul li.on {
-}
-
-
-
-.side-nav .side-menu > ul > li > ul {
-
 }
 
 .side-nav .side-menu > ul > li > ul > li {
@@ -179,7 +140,34 @@
 }
 
 .side-nav .side-menu > ul > li > ul > li > span {
-  color: $blue-001;
+  color: #4A5ED2;
   font-size: 14px;
   font-weight: 400;
 }
+
+.menu-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.menu-icon.base-icon {
+  background-image: url("../img/icon-shield.png");
+}
+.menu-icon.filed-icon {
+  background-image: url("../img/icon-industry.png");
+}
+.menu-icon.production-icon {
+  background-image: url("../img/icon-engineering.png");
+}
+.menu-icon.system-icon {
+  background-image: url("../img/icon-gear.png");
+}
+.menu-icon.insp-icon {
+  background-image: url("../img/icon-clipboard.svg");
+  width: 22px;
+  height: 22px;
+  margin-left: 0.6em;
+}
+.menu-icon.facility-icon {
+  background-image: url("../img/icon-cone.svg");
+}

home_dir/www/ksvc/inc/css/style.css

@@ -397,21 +397,58 @@ header .status-menu ul li a {
   flex-direction: column;
   justify-content: space-between;
   background: white;
-  position: absolute;
-  top: 0;
-  left: 0;
 }
 
 .container.on .side-nav {
   width: 88px;
+  overflow-y: visible;
+  align-items: center;
 }
+
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container {
+  position: static;
+}
+
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li {
+  position: relative;
+}
+
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li span.fancytree-expander, .container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li span.fancytree-title {
+  display: none;
+}
+
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li span.fancytree-custom-icon {
+  margin: 0;
+}
+
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li ul {
+  position: absolute;
+  display: block;
+  left: 56px;
+  top: 0;
+  width: 250px;
+  background: #e9e9e9;
+  z-index: 2;
+  min-height: 52px;
+  max-height: 294px;
+  overflow: auto;
+}
+
+.container.on .side-nav .side-menu ul.fancytree-plain.fancytree-container > li ul li span.fancytree-title {
+  color: black;
+  display: block;
+}
+
 .container.on .side-nav .fold-btn-container {
-  padding-left: 25%;
+  margin: 0 0 30px 0;
+  padding-left: 0;
   width: auto;
 }
+
 .container.on .side-nav .fold-btn-container .fold-btn {
   transform: rotate(180deg);
 }
+
 .container.on .main-part {
   width: calc(100% - 88px);
 }
@@ -438,60 +475,74 @@ header .status-menu ul li a {
   border: none;
   padding: 0px;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container > li > span {
   border-bottom: solid 1px #e9e9e9;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li {
   min-height: 72px;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span {
   height: 72px;
   display: inline-flex;
   align-items: center;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span:hover span.fancytree-title, .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span:active span.fancytree-title {
   color: #3c3c3c;
   background-color: transparent;
   border: none;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span > span {
   color: #3c3c3c;
   font-size: 15px;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span > span.fancytree-custom-icon {
   color: #98A7FA;
   font-size: 24px;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span.fancytree-node.fancytree-active span.fancytree-title {
   color: #3c3c3c;
   background-color: transparent;
   border: none;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span.fancytree-node.fancytree-active:hover span.fancytree-title, .side-nav .side-menu ul.fancytree-plain.fancytree-container li > span.fancytree-node.fancytree-active:active span.fancytree-title {
   color: #3c3c3c;
   background-color: transparent;
   border: none;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li ul {
   padding: 0px;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li {
   min-height: 48px;
   border-bottom: 1px solid #E1E4F9;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li > span {
   height: 48px;
   width: -moz-fit-content;
   width: fit-content;
   padding-left: 1.5em;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li > span span.fancytree-title {
   font-size: 14px;
   color: #4A5ED2;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li:hover {
   background-color: #E1E4F9;
 }
+
 .side-nav .side-menu ul.fancytree-plain.fancytree-container li ul li:hover span.fancytree-title {
   color: #4A5ED2;
 }
@@ -506,6 +557,39 @@ header .status-menu ul li a {
   font-weight: 400;
 }
 
+.menu-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.menu-icon.base-icon {
+  background-image: url("../img/icon-shield.png");
+}
+
+.menu-icon.filed-icon {
+  background-image: url("../img/icon-industry.png");
+}
+
+.menu-icon.production-icon {
+  background-image: url("../img/icon-engineering.png");
+}
+
+.menu-icon.system-icon {
+  background-image: url("../img/icon-gear.png");
+}
+
+.menu-icon.insp-icon {
+  background-image: url("../img/icon-clipboard.svg");
+  width: 22px;
+  height: 22px;
+  margin-left: 0.6em;
+}
+
+.menu-icon.facility-icon {
+  background-image: url("../img/icon-cone.svg");
+}
+
 .table-header {
   width: 100%;
   margin-top: 25px;
@@ -575,7 +659,7 @@ header .status-menu ul li a {
 .table-header .button-container {
   width: 100%;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 .button-box {
@@ -589,7 +673,7 @@ header .status-menu ul li a {
 }
 
 .table-container .button-box {
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 ::-webkit-scrollbar {