@bwg-ui/core 1.2.15 → 1.2.17

package/dist/styles/components.css

@@ -21,6 +21,7 @@
   font-size: 13px;
   height: 30px;
   padding: 0px 12px;
+  gap: 4px;
   border-radius: var(--border-radius-sm);
   font-weight: var(--font-weight-medium);
   line-height: inherit;
@@ -33,6 +34,7 @@
   background: var(--button-solid);
   color: var(--button-default);
   border-color: var(--button-primary);
+  box-shadow: none;
 }
 .bwg-btn.ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
   background: var(--button-solid-hover);
@@ -47,43 +49,46 @@
   color: var(--text-disabled);
   background: var(--text-disabled-bg);
 }
-
+.bwg-btn .ant-btn-icon {
+  display: flex;
+  align-items: center;
+}
 /* 공통 버튼 테마 적용 - BwgView의 공통 버튼 영역에만 적용 */
-.bwg-view .permission-buttons .ant-btn-primary {
+.bwg-view .permission-buttons .ant-btn-primary:not(:disabled):not(.ant-btn-disabled) {
   background-color: var(--button-primary);
   border-color: var(--button-primary);
   color: var(--text-white);
 }
 
-.bwg-view .permission-buttons .ant-btn-primary:hover {
+.bwg-view .permission-buttons .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover {
   background-color: var(--button-primary-hover);
   border-color: var(--button-primary-hover);
 }
 
-.bwg-view .permission-buttons .ant-btn-primary:active {
+.bwg-view .permission-buttons .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):active {
   background-color: var(--button-primary-active);
   border-color: var(--button-primary-active);
 }
 
-.bwg-view .permission-buttons .bwg-btn.ant-btn-default {
+.bwg-view .permission-buttons .bwg-btn.ant-btn-default:not(:disabled):not(.ant-btn-disabled) {
   background-color: var(--button-default);
   border-color: var(--button-permission-border);
   color: var(--text-secondary);
 }
 
-.bwg-view .permission-buttons .ant-btn-default:hover {
+.bwg-view .permission-buttons .ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
   background-color: var(--button-default);
   border-color: var(--button-primary);
   color: var(--button-primary);
 }
 
 /* 에러 버튼 */
-.bwgview-header-right .bwg-error-btn,
-.bwg-title-box-right .bwg-error-btn {
+.bwgview-header-right .bwg-error-btn:not(:disabled):not(.ant-btn-disabled),
+.bwg-title-box-right .bwg-error-btn:not(:disabled):not(.ant-btn-disabled) {
   border-color: var(--button-error) !important;
   color: var(--button-error) !important;
 }
-.bwg-error-btn.ant-btn-variant-solid:not(:disabled) {
+.bwg-error-btn.ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled) {
   background: var(--button-error);
   color: var(--button-default);
   border-color: var(--button-error);
@@ -93,15 +98,15 @@
   border-color: var(--button-error);
 }
 .bwg-error-btn.ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover {
-  border-color: var(--button-error-default-hover);
-  color: var(--button-error-default-hover);
+  border-color: var(--button-error-default-hover) !important;
+  color: var(--button-error-default-hover) !important;
 }
-.bwg-view .permission-buttons .bwg-error-btn.ant-btn-default {
+.bwg-view .permission-buttons .bwg-error-btn.ant-btn-default:not(:disabled):not(.ant-btn-disabled) {
   background-color: var(--button-default);
   border-color: var(--button-error-permission-border);
   color: var(--text-secondary);
 }
-.bwg-view .permission-buttons .bwg-error-btn.ant-btn-default:hover {
+.bwg-view .permission-buttons .bwg-error-btn.ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
   background-color: var(--button-default);
   border-color: var(--button-error);
   color: var(--button-error);
@@ -248,9 +253,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
- > .ant-space-gap-col-middle {
+}
+.bwgview-header-left > .ant-space-gap-col-middle {
   column-gap: 0;
- }
 }
 
 .bwgview-header-right {
@@ -261,9 +266,9 @@
 .bwgview-header-right .ant-space {
   padding-right: 7px;
   column-gap: 10px;
-  .ant-divider-vertical {
-    border-inline-start: 1px solid #cecece;
-  }
+}
+.bwgview-header-right .ant-space .ant-divider-vertical {
+   border-inline-start: 1px solid #cecece;
 }
 .bwgview-content {
   height: inherit;
@@ -279,8 +284,7 @@
   width: 100%;
   height: 100%;
   display: flex;
-
-  &.hz-layout {
+  /* &.hz-layout {
     flex-direction: row;
 
     &.layout-left {
@@ -331,27 +335,70 @@
     &.vertical-bottom {
       justify-content: end;
     }
-  }
+  } */
+}
+.bwgview-content-layout.hz-layout {
+  flex-direction: row;
+}
+.bwgview-content-layout.hz-layout.layout-left {
+  justify-content: flex-start;
+}
+.bwgview-content-layout.hz-layout.layout-center {
+  justify-content: center;
+}
+.bwgview-content-layout.hz-layout.layout-right {
+  justify-content: flex-end;
+}
+.bwgview-content-layout.hz-layout.layout-around {
+  justify-content: space-around;
+}
+.bwgview-content-layout.hz-layout.layout-between {
+  justify-content: space-between;
+}
+.bwgview-content-layout.hz-layout.vertical-top {
+  align-items: start;
+}
+.bwgview-content-layout.hz-layout.vertical-center {
+  align-items: center;
+}
+.bwgview-content-layout.hz-layout.vertical-bottom {
+  align-items: end;
+}
+.bwgview-content-layout.vt-layout {
+  flex-direction: column;
+}
+.bwgview-content-layout.vt-layout.layout-left {
+  align-items: flex-start;
+}
+.bwgview-content-layout.vt-layout.layout-center {
+  align-items: center;
 }
+.bwgview-content-layout.vt-layout.layout-right {
+  align-items: flex-end;
+}
+.bwgview-content-layout.vt-layout.vertical-top {
+  justify-content: start;
+}
+.bwgview-content-layout.vt-layout.vertical-center {
+  justify-content: center;
+}
+.bwgview-content-layout.vt-layout.vertical-bottom {
+  justify-content: end;
+}
+
+
+
 
 .bwgview-content-box {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-
-  /* 250826 고현아 추가 */
   border-radius: 15px;
   border: 1px solid var(--border-color);
   padding: 20px 20px 15px;
   background: var(--bg-primary);
 
-  &.box-st {
-    /* border: 1px solid #ddd !important;
-    padding: 10px 12px !important;
-    border-radius: 8px !important; */
-  }
-
-  &.content-box-left {
+  /* &.content-box-left {
     align-items: flex-start;
   }
   &.content-box-center {
@@ -359,7 +406,7 @@
   }
   &.content-box-right {
     align-items: flex-end;
-  }
+  } */
 
 }
 /* content layout , content box 커스텀 클래스 */
@@ -572,10 +619,10 @@
 /* BwgCmptArea 컴포넌트 공통 스타일 변경 */
 .form-component-wrapper .ant-form-item .ant-form-item-label label {
   color: var(--text-primary);
-  > span {
-    font-weight: var(--font-weight-semibold) !important;
-  }
 } 
+.form-component-wrapper .ant-form-item .ant-form-item-label label > span {
+  font-weight: var(--font-weight-semibold) !important;
+}
 
 /* bwgForm 공통 스타일 */
 .bwg-form .ant-form-item {
@@ -600,6 +647,7 @@
   font-weight: var(--font-weight-semibold);
 }
 
+/* tab 스타일 */
 .ant-tabs,
 .ant-tabs-content,
 .ant-tabs-tabpane,
@@ -607,70 +655,64 @@
   width: 100%;
   height: 100%;
 }
+.ant-tabs-top > .ant-tabs-nav::before {
+  border-color: #ccc;
+}
+
 
 .between-vertical-btn-group {
   display: flex;
   justify-content: center;
   height: 100%;
-  button {
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border-color: #e3e3e3;
-  }
-  &.upDown {
-    button {
-      margin: 0 3px;
-      &.btn-up {
-        background: url(./assets/images/contents/btn/btn-up.png) no-repeat
-          center;
-        &:hover,
-        &:active {
-          border-color: var(--primary-color);
-          background: var(--primary-color) url(./assets/images/contents/btn/btn-up-on.png)
-            no-repeat center;
-        }
-      }
-      &.btn-down {
-        background: url(./assets/images/contents/btn/btn-down.png) no-repeat
-          center;
-        &:hover,
-        &:active {
-          border-color: var(--primary-color);
-          background: var(--primary-color) url(./assets/images/contents/btn/btn-down-on.png)
-            no-repeat center;
-        }
-      }
-    }
-  }
-  &.leftRight {
-    flex-direction: column;
-    button {
-      margin: 3px 0;
-      &.btn-left {
-        background: url(./assets/images/contents/btn/btn-left.png) no-repeat
-          center;
-        &:hover,
-        &:active {
-          border-color: var(--primary-color);
-          background: var(--primary-color) url(./assets/images/contents/btn/btn-left-on.png)
-            no-repeat center;
-        }
-      }
-      &.btn-right {
-        background: url(./assets/images/contents/btn/btn-right.png) no-repeat
-          center;
-        &:hover,
-        &:active {
-          border-color: var(--primary-color);
-          background: var(--primary-color) url(./assets/images/contents/btn/btn-right-on.png)
-            no-repeat center;
-        }
-      }
-    }
-  }
+}
+.between-vertical-btn-group button {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-color: #e3e3e3;
+}
+.between-vertical-btn-group .upDown button {
+  margin: 0 3px;
+}
+.between-vertical-btn-group .upDown button .btn-up {
+  background: url(./assets/images/contents/btn/btn-up.png) no-repeat center;
+}
+.between-vertical-btn-group .upDown button .btn-up:hover,
+.between-vertical-btn-group .upDown button .btn-up:active {
+  border-color: var(--primary-color);
+  background: var(--primary-color) url(./assets/images/contents/btn/btn-up-on.png) no-repeat center;
+}
+.between-vertical-btn-group .upDown button .btn-down {
+  background: url(./assets/images/contents/btn/btn-down.png) no-repeat center;
+}
+.between-vertical-btn-group .upDown button .btn-down:hover,
+.between-vertical-btn-group .upDown button .btn-down:active {
+  border-color: var(--primary-color);
+  background: var(--primary-color) url(./assets/images/contents/btn/btn-down-on.png) no-repeat center;
+}
+.between-vertical-btn-group .leftRight {
+  flex-direction: column;
+}
+.between-vertical-btn-group .leftRight button {
+  margin: 3px 0;
+}
+.between-vertical-btn-group .leftRight button .btn-left {
+  background: url(./assets/images/contents/btn/btn-left.png) no-repeat center;
+}
+.between-vertical-btn-group .leftRight button .btn-left:hover,
+.between-vertical-btn-group .leftRight button .btn-left:active {
+ border-color: var(--primary-color);
+ background: var(--primary-color) url(./assets/images/contents/btn/btn-left-on.png) no-repeat center;
 }
 
+.between-vertical-btn-group .leftRight button .btn-right {
+  background: url(./assets/images/contents/btn/btn-right.png) no-repeat
+}
+.between-vertical-btn-group .leftRight button .btn-right:hover,
+.between-vertical-btn-group .leftRight button .btn-right:active  {
+  border-color: var(--primary-color);
+  background: var(--primary-color) url(./assets/images/contents/btn/btn-right-on.png) no-repeat center;
+}
 .ant-space-compact.block {
   width: 100%;
 }
@@ -690,40 +732,40 @@
   transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 50px;
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
-  .ant-flex {
-    gap: 5px;
-    align-items: center;
-  }
-  .ant-input {
-    border-radius: 50px 0 0 50px;
-    border: 0;
-    height: 32px !important;
-    padding: 0 5px;
-  }
-  .ant-space-compact .ant-btn {
-    border-radius: 50%;
-    border: 0;
-    box-shadow: none;
-    &:hover,
-    &:active {
-      color: var(--primary-color);
-    }
-  }
-  .ant-flex > .ant-btn {
-    background: var(--button-solid);
-    box-shadow: none;
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    flex-shrink: 0;
-    font-size: 15px;
-    line-height: 30px;
-    color: var(--text-white);
-  }
-  .ant-flex > .ant-btn:hover {
-    background: var(--button-solid-hover);
-    color: var(--button-default);
-  }
+}
+.grid-search-box .ant-input {
+  border-radius: 50px 0 0 50px;
+  border: 0;
+  height: 32px !important;
+  padding: 0 5px;
+}
+.grid-search-box .ant-space-compact .ant-btn {
+  border-radius: 50%;
+  border: 0;
+  box-shadow: none;
+}
+.grid-search-box .ant-space-compact .ant-btn:hover,
+.grid-search-box .ant-space-compact .ant-btn:active {
+  color: var(--primary-color);
+}
+.grid-search-box .ant-flex > .ant-btn {
+  background: var(--button-solid);
+  box-shadow: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  font-size: 15px;
+  line-height: 30px;
+  color: var(--text-white);
+}
+.grid-search-box .ant-flex > .ant-btn:hover {
+  background: var(--button-solid-hover);
+  color: var(--button-default);
+}
+.grid-search-box .ant-flex {
+  gap: 5px;
+  align-items: center;
 }
 .grid-search-box .anticon-search {
   color: #777;
@@ -742,25 +784,20 @@
   background: #E2F4FF;
   border-color: #CAE6FB;
 }
-
-
 /* BwgDrawer 헤더 테마 적용 */
 .main-drawer .ant-drawer-header {
-  padding: 28px 40px;
+  padding: 22px 40px;
   background-color: var(--drawer-header-bg);
   color: var(--text-primary);
   border-bottom: 1px solid #ececec;
 }
-
 .main-drawer .ant-drawer-header .ant-drawer-title {
   font-size: var(--font-size-xl) !important;
   color: var(--text-primary);
 }
-
 .main-drawer .ant-drawer-header .ant-drawer-close {
   color: #565656 !important;
 }
-
 .main-drawer .ant-drawer-header .ant-drawer-close:hover {
   background-color: #E1E3FB;
 }
@@ -899,6 +936,11 @@
 .bwg-form-item .ant-row {
   flex-wrap: nowrap !important;
 }
+.bwg-form:has(.bwg-editor-wrap),
+.ant-form:has(.bwg-editor-wrap) {
+  display: flex;
+  flex-direction: column;
+}
 
 .bwg-ogrn-tree .ant-tree .ant-tree-treenode {
   width: 100%;
@@ -928,4 +970,37 @@
 }
 .bwg-ogrn-tree .ant-tree-checkbox-checked:not(.ant-tree-checkbox-disabled):hover .ant-tree-checkbox-inner {
   background-color: var(--check-primary-active);
-}
+}
+/* 북마크 */
+.bookmark-title-icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
+.bookmark-title-icon.saved {
+  background: url(./assets/images/contents/icon/ico-save-bookmark.svg) no-repeat center;
+}
+.bookmark-title-icon.add {
+  background: url(./assets/images/contents/icon/ico-add-bookmark.svg) no-repeat center;
+}
+.bookmark-folder-modal-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+.bookmark-folder-modal-icon.ico-new-folder {
+  background: url(./assets/images/contents/icon/ico-new-folder.svg) no-repeat center;
+}
+.bookmark-folder-modal-icon.ico-edit-folder {
+  background: url(./assets/images/contents/icon/ico-edit-folder.svg) no-repeat center;
+}
+/* BwgEditer */
+.ql-container {
+  min-height: 0;
+}
+.ql-toolbar.ql-snow {
+  border-bottom: 0;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 1px solid #ccc;
+}