@bwg-ui/core 1.2.16 → 1.2.17

package/dist/styles/layout.css

@@ -125,13 +125,6 @@
   border-radius: var(--border-radius-sm);
   font-size: 13px;
   color: var(--sidebar-segmented-text);
-  .ant-segmented-group {
-    gap: 5px;
-  }
-  .ant-segmented-item-selected {
-    color: var(--text-high);
-    font-weight: var(--font-weight-semibold);
-  }
 }
 .sider-search-ipt {
   background: var(--sidebar-search-bg);
@@ -140,11 +133,11 @@
   color: var(--sidebar-search-text);
   font-size: 13px;
   font-weight: var(--font-weight-medium);
-    .anticon-search svg {
-    width: 20px;
-    height: 20px;
-  }
 }
+.sider-segmented .ant-segmented-group {
+  gap: 5px;
+}
+
 /* Ant Design 메뉴 스타일 오버라이드 */
 
 .sider-menu .ant-menu-item {
@@ -221,23 +214,25 @@
 }
 .sider-menu .ant-menu-item-active.ant-menu-item-only-child {
   background-color: var(--sidebar-menu-selected-bg);
-  &:hover {
-    background-color: var(--sidebar-menu-selected-bg) !important;
-  }
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 3px;
-    height: 100%;
-    background: var(--sidebar-menu-selected-bar);
-  }
-  .ant-menu-title-content {
-    font-weight: var(--font-weight-medium);
-    color: var(--sidebar-primary-text);
-  }
 }
+.sider-menu .ant-menu-item-active.ant-menu-item-only-child:hover {
+  background-color: var(--sidebar-menu-selected-bg) !important;
+}
+.sider-menu .ant-menu-item-active.ant-menu-item-only-child::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: var(--sidebar-menu-selected-bar);
+}
+.sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content {
+  font-weight: var(--font-weight-medium);
+  color: var(--sidebar-primary-text);
+}
+
+
 /* 1레벨 스타일 */
 .sider-menu > .ant-menu-item > .ant-menu-item-icon + span,
 .sider-menu > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span {
@@ -282,18 +277,12 @@
 .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub > .ant-menu-submenu-open > .ant-menu-submenu-title {
   margin-bottom: 5px;
 }
+
 /* 열린 메뉴 상위 텍스트 색상 */
 .ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-title-content {
   color: var(--text-high);
   font-weight: var(--font-weight-semibold);
 }
-/* 3레벨 ul 스타일 */
-.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub {
-
-}
-.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub {
-  
-}
 
 /* 서브메뉴 내부 모든 요소 배경색 */
 .ant-layout-sider .ant-menu-sub .ant-menu-item,
@@ -355,6 +344,10 @@
     font-size: 12px !important;
     padding-left: 30px !important;
 }
+/* 4레벨 ul 스타일 */
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-open .ant-menu-sub {
+  /* background: var(--sidebar-last-open-menu-group-bg) !important; */
+}
 
 /* 메뉴 아이콘 색상 */
 .ant-layout-sider .ant-menu-item .anticon,
@@ -562,16 +555,18 @@
 }
 .sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div {
   position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: -10px;
-    width: 4px;
-    height: 1px;
-    background-color: var(--sidebar-menu-bullet);
-  }
 }
+.sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -10px;
+  width: 4px;
+  height: 1px;
+  background-color: var(--sidebar-menu-bullet);
+}
+
+
 .sider-content .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content > div::before {
     background-color: var(--sidebar-menu-bullet-active);  
 }
@@ -580,16 +575,15 @@
 .sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title {
   padding: 0 10px !important;
   margin-bottom: 15px;
-  &:hover {
-    background-color: transparent !important;
-  }
-  &[aria-expanded="true"] {
-    .anticon {
-      background: var(--sidebar-active-icon-bg);
-      color: var(--primary-color) !important;
-    }
-  }
 }
+.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title:hover {
+  background-color: transparent !important;  
+}
+.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title[aria-expanded="true"] .anticon {
+  background: var(--sidebar-active-icon-bg);
+  color: var(--primary-color) !important;
+}
+
 /* 사이드바 segemented */
 .sider-segmented .ant-segmented-item-label {
   display: flex;
@@ -665,26 +659,22 @@
   background-color: rgba(0, 0, 0, 0.2) !important;
 }
 
-
 /* 사이드바 스크롤바 스타일링 */
 .sider-menu::-webkit-scrollbar,
 .sider-menu-container::-webkit-scrollbar {
   width: 6px;
 }
-
 .sider-menu::-webkit-scrollbar-track,
 .sider-menu-container::-webkit-scrollbar-track {
   background: transparent;
   border-radius: 3px;
 }
-
 .sider-menu::-webkit-scrollbar-thumb,
 .sider-menu-container::-webkit-scrollbar-thumb {
   background: #d9d9d9;
   border-radius: 3px;
   border: 1px solid #f0f0f0;
 }
-
 .sider-menu::-webkit-scrollbar-thumb:hover,
 .sider-menu-container::-webkit-scrollbar-thumb:hover {
   background: #bfbfbf;
@@ -696,7 +686,6 @@
   scrollbar-color: #d9d9d9 #f0f0f0;
 }
 
-
 /* 컨텐츠 컨테이너 스타일 */
 .content-container {
   display: flex;
@@ -711,29 +700,24 @@
   flex: 1;
   height: calc(100vh - 45px);
 }
-
 .content-header {
   margin-bottom: 24px;
   padding-bottom: 16px;
   border-bottom: 1px solid #f0f0f0;
 }
-
 .content-title {
   font-size: 24px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
 }
-
 .content-description {
   color: #666;
   margin-top: 8px;
 }
-
 .content-body {
   height: 100%;
 }
-
 .bwg-view {
   gap: 20px;
   padding: 20px 30px 26px;
@@ -746,31 +730,24 @@
     z-index: 1001;
     transition: left 0.3s ease;
   }
-
   .side-wrapper.mobile-open {
     left: 0;
   }
-
-
   .header-wrapper {
     padding: 0 16px;
     gap: 12px;
   }
-
   .header-search {
     width: 200px;
   }
-
   .header-search .ant-auto-complete {
     width: 100% !important;
   }
-
   .header-title {
     font-size: var(--font-size-md);
     flex: 1;
     text-align: center;
   }
-
   .header-right {
     gap: 8px;
   }
@@ -780,7 +757,6 @@
 .menu-tab-wrapper {
   background: var(--bg-primary);
 }
-
 .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav {
   margin: 0;
   padding: 10px 34px 0 29px;
@@ -799,14 +775,12 @@
   flex: 1 !important;
   align-items: flex-end;
 }
-
 .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-list {
   display: flex;
   align-items: center;
   height: 100%;
   flex-wrap: nowrap;
 }
-
 .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab {
   height: 100%;
   border-radius: 10px 10px 0 0;
@@ -818,20 +792,18 @@
   font-size: var(--font-size-sm);
   color: #777;
   border: 0;
-  .ant-tabs-tab-remove {
-    width: 20px;
-    height: 20px;
-    margin-right: 0;
-    margin-left: 10px;
-    color: #A1A1A1;
-  }
 }
-
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab .ant-tabs-tab-remove {
+  width: 20px;
+  height: 20px;
+  margin-right: 0;
+  margin-left: 10px;
+  color: #a1a1a1;
+}
 .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
   background: #dbdeec;
   color: var(--text-secondary);
 }
-
 .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab-active {
   background: var(--bg-primary);
   border: 2px solid var(--primary-color);
@@ -857,14 +829,12 @@
   overflow: hidden;
   padding-bottom: 13px;
 }
-
 .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content > div {
   display: flex !important;
   align-items: center !important;
   gap: 4px !important;
   flex-wrap: nowrap !important;
 }
-
 .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn {
   height: 20px !important;
   width: 20px !important;
@@ -876,30 +846,21 @@
   color: #bdbdbd;
   box-shadow: none !important;
 }
-
 .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:hover {
   color: #5E5E5E;
 }
-
 .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   background: none;
 }
-
 .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .menu-tabs-close-btn {
   margin-left: 11px;
 }
-
 .menu-nav-wrapper {
   display: flex;
   align-items: center;
   gap: 4px;
-
-  .menu-nav-buttons {
-  }
-  .menu-nav-tooltip {
-  }
 }
 
 /* landing-wrap */
@@ -1078,7 +1039,6 @@
   background-position: center;
   background-color: transparent !important;
 }
-
 .quick-tab-drag-btn {
   position: absolute;
   bottom: 9px;
@@ -1103,20 +1063,18 @@
   align-items: center;
   border-radius: var(--border-radius-lg);
   text-align: center;
-  
-  .quick-tab-items-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .quick-tab-items-icon .anticon { 
-    font-size: 28px;
-  }
-  .quick-tab-items:last-child {
-    margin-bottom: 0;
-  }
 }
-
+.quick-tab-item-inner .quick-tab-items-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.quick-tab-item-inner .quick-tab-items-icon .anticon {
+  font-size: 28px;
+}
+.quick-tab-item-inner .quick-tab-items:last-child {
+  margin-bottom: 0;
+}
 .quick-tab-items-icon:has(.quick-overtime) {
   background: #EFEBFF;
 }
@@ -1126,7 +1084,6 @@
 .quick-tab-items-icon:has(.quick-holiday) {
   background: #FFF0F5;
 }
-
 .quick-tab-items-title {
   font-size: 13px;
   font-weight: var(--font-weight-semibold);
@@ -1134,23 +1091,30 @@
   word-break: keep-all;
   color: var(--text-primary);
 }
-
+.quick-tab-add-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.quick-tab-add-icon:hover {
+  background: rgb(28 ,24 ,37 , 0.2);
+}
 /* 퀵메뉴 스크롤 스타일 */
 .quick-tab-items-wrap::-webkit-scrollbar {
   width: 4px;
 }
-
 .quick-tab-items-wrap::-webkit-scrollbar-track {
   background: transparent;
   border-radius: 3px;
 }
-
 .quick-tab-items-wrap::-webkit-scrollbar-thumb {
   background: #d9d9d9;
   border-radius: 3px;
   border: 1px solid #f0f0f0;
 }
-
 .quick-tab-items-wrap::-webkit-scrollbar-thumb:hover {
   background: #bfbfbf;
 }
@@ -1198,7 +1162,6 @@
   box-shadow: 0 0 0 2px rgb(205 196 255 / 10%);
 }
 
-
 .bwg-load-indicator { position: absolute !important; inset: 0 !important; z-index: 40; }
 
 /* ────────────────────── 로딩 오버레이 (WAVE 스타일) ────────────────────── */
@@ -1209,4 +1172,5 @@
 .bwg-load-indicator .bwg-load-wave span:nth-child(3) { animation-delay: 240ms; }
 @keyframes rg-bounceY { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(0); } }
 .bwg-load-indicator .bwg-load-title { font-weight: 700; letter-spacing: .06em; font-size: 16px; color: #3b3b3b; }
-.bwg-load-indicator .bwg-load-sub { font-size: 13px; color: #7a7a7a; }
+.bwg-load-indicator .bwg-load-sub { font-size: 13px; color: #7a7a7a; }
+