@bwg-ui/core 1.0.0

package/dist/styles/components.css

@@ -0,0 +1,785 @@
+/* 컴포넌트별 스타일 */
+
+/* 버튼 컴포넌트 */
+.btn-primary {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: var(--text-white);
+  transition: var(--transition-normal);
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-medium);
+}
+
+/* 버튼 기본 스타일 */
+.bwg-btn,
+.bwg-title-box-right .bwg-btn {
+  font-size: 13px;
+  height: 30px;
+  padding: 0px 12px;
+  border-radius: var(--border-radius-sm);
+  font-weight: var(--font-weight-medium);
+}
+.bwg-title-box-right .bwg-btn {
+  border-color: var(--button-default-border);
+}
+.bwg-btn.ant-btn-variant-solid {
+  background: var(--button-solid);
+  color: var(--button-default);
+  border: 0;
+}
+.bwg-btn.ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
+  background: var(--button-solid-hover);
+  border-color: var(--button-solid-hover);
+}
+.bwg-btn.ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover {
+  border-color: var(--button-primary);
+  border-color: var();
+  color: var(--button-primary);
+}
+
+
+/* 공통 버튼 테마 적용 - BwgView의 공통 버튼 영역에만 적용 */
+.bwg-view .permission-buttons .ant-btn-primary {
+  background-color: var(--button-primary) !important;
+  border-color: var(--button-primary) !important;
+  color: var(--text-white) !important;
+}
+
+.bwg-view .permission-buttons .ant-btn-primary:hover {
+  background-color: var(--button-primary-hover) !important;
+  border-color: var(--button-primary-hover) !important;
+}
+
+.bwg-view .permission-buttons .ant-btn-primary:active {
+  background-color: var(--button-primary-active) !important;
+  border-color: var(--button-primary-active) !important;
+}
+
+.bwg-view .permission-buttons .bwg-btn.ant-btn-default {
+  background-color: var(--button-default) !important;
+  border-color: var(--button-permission-border) !important;
+  color: var(--text-secondary) !important;
+}
+
+.bwg-view .permission-buttons .ant-btn-default:hover {
+  background-color: var(--button-default) !important;
+  border-color: var(--button-primary) !important;
+  color: var(--button-primary) !important;
+}
+
+/* 다크 테마일 때 공통 버튼 텍스트 흰색 */
+[data-theme='dark'] .bwg-view .permission-buttons .ant-btn-default {
+  color: var(--text-white) !important;
+}
+
+[data-theme='dark'] .bwg-view .permission-buttons .ant-btn-default:hover {
+  color: var(--text-white) !important;
+}
+
+
+
+/* 입력 컴포넌트 */
+.input-field {
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  transition: var(--transition-normal);
+}
+
+.input-field:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  outline: none;
+}
+
+/* 카드 컴포넌트 */
+.card {
+  background: var(--bg-primary);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-light);
+  padding: var(--spacing-lg);
+  transition: var(--transition-normal);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-medium);
+  transform: translateY(-2px);
+}
+
+/* 로딩 스피너 */
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-lg);
+}
+
+/* 에러 메시지 */
+.error-message {
+  color: #ff4d4f;
+  background-color: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  margin: var(--spacing-sm) 0;
+}
+
+/* 성공 메시지 */
+.success-message {
+  color: #52c41a;
+  background-color: #f6ffed;
+  border: 1px solid #b7eb8f;
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  margin: var(--spacing-sm) 0;
+}
+
+/* BwgTitleBox 스타일 */
+.bwg-title-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-height: 30px;
+  margin-bottom: 15px;
+}
+
+.bwg-title-box-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.bwg-title-box-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bwg-title-box .ant-typography {
+  margin: 0;
+  span {
+    margin-left: 10px;
+  }
+}
+
+.ant-typography {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-bold);
+}
+.bwg-title-box-right .bwg-button-group .ant-flex {
+  gap: 6px !important;
+}
+.bwg-title-box-right .ant-btn.ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
+.bwg-title-box-right .ant-btn.ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):active {
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+/* 뷰 컨테이너 스타일 */
+.view-container {
+  height: 100%;
+}
+
+.view-wrapper {
+  background: #f5f5f5;
+  width: 100%;
+  height: 100%;
+  display: flex; /* 또는 grid */
+  flex-direction: column; /* 세로로 배치되는 경우 */
+  gap: 5px;
+}
+
+/* BwgView 헤더 스타일 */
+.bwgview-header-container {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-xxl);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-primary);
+  padding: 15px 23px;
+}
+
+.bwgview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bwgview-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+ > .ant-space-gap-col-middle {
+  column-gap: 0;
+ }
+}
+
+.bwgview-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.bwgview-header-right .ant-space {
+  padding-right: 7px;
+  column-gap: 10px;
+  .ant-divider-vertical {
+    border-inline-start: 1px solid #cecece;
+  }
+}
+.bwgview-content {
+  height: inherit;
+  flex: 1 1;
+}
+.bwgview-header-right .ant-btn {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.bwgview-content-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  &.hz-layout {
+    flex-direction: row;
+
+    &.layout-left {
+      justify-content: flex-start;
+    }
+    &.layout-center {
+      justify-content: center;
+    }
+    &.layout-right {
+      justify-content: flex-end;
+    }
+    &.layout-between {
+      justify-content: space-between;
+    }
+    &.layout-around {
+      justify-content: space-around;
+    }
+
+    &.vertical-top {
+      align-items: start;
+    }
+    &.vertical-center {
+      align-items: center;
+    }
+    &.vertical-bottom {
+      align-items: end;
+    }
+  }
+
+  &.vt-layout {
+    flex-direction: column;
+    &.layout-left {
+      align-items: flex-start;
+    }
+    &.layout-center {
+      align-items: center;
+    }
+    &.layout-right {
+      align-items: flex-end;
+    }
+
+    &.vertical-top {
+      justify-content: start;
+    }
+    &.vertical-center {
+      justify-content: center;
+    }
+    &.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 {
+    align-items: flex-start;
+  }
+  &.content-box-center {
+    align-items: center;
+  }
+  &.content-box-right {
+    align-items: flex-end;
+  }
+
+}
+/* 250826 고현아 추가 */
+.none-box-st {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+}
+.gap10 {
+  gap: 10px;
+}
+.gap20 {
+  gap: 20px;
+}
+
+/* Collapse 헤더 제거 */
+.searchbox-collapse .ant-collapse-header {
+  display: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  min-height: 0 !important;
+  height: 0 !important;
+  line-height: 0 !important;
+  width: 100% !important;
+}
+
+/* Collapse 전체 간격 줄이기 */
+.searchbox-collapse .ant-collapse-item {
+  margin-bottom: 4px; /* 기본은 16px 정도 → 줄이기 */
+  border-bottom: none; /* 필요 시 선 제거 */
+}
+
+/* Collapse 패널 헤더 패딩 제거 */
+.searchbox-collapse .ant-collapse-header {
+  padding: 4px 8px 4px 16px !important;
+}
+
+/* Collapse 본문 컨텐츠 여백 줄이기 */
+.searchbox-collapse .ant-collapse-content > .ant-collapse-content-box {
+  padding: 12px 7px 0 10px !important;
+}
+/* searchBox 내부 폼 인라인으로 변경 */
+.searchbox-collapse .form-component-wrapper .ant-row {
+  flex-flow: nowrap;
+}
+
+
+.pageMenuNm {
+  padding-right: 8px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  line-height: 32px;
+}
+
+.bookmark-icon {
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 5px;
+  font-size: 20px;
+  color: #FFC352;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.bookmark-icon:hover {
+  color: #FFCE21;
+}
+.page-num-tag {
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  margin-inline-end: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 26px;
+  border-color: #B2D1FF;
+  background: #ddf1ff;
+  color: #4887E5;
+  border-radius: 5px;
+}
+.page-num-tag + .menu-help-btn {
+  margin-left: 6px;
+}
+.menu-help-btn {
+  width: 23px !important;
+  height: 23px !important;
+  border-radius: var(--border-radius-sm) !important;
+}
+
+.bwgHelpIcon {
+  display: block;
+  width: 23px;
+  height: 23px;
+  background-image: url(./assets/images/contents/icon/ico-menu-help.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+
+/* BwgCmptArea 컴포넌트 스타일 */
+.form-component-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.form-component-wrapper > * {
+  width: 100% !important;
+}
+
+/* Select 컴포넌트 특별 처리 */
+.form-component-wrapper .ant-select {
+  width: 100% !important;
+  border-color: var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+}
+
+.form-component-wrapper .ant-select-selector {
+  width: 100% !important;
+  border-color: var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+}
+.ant-select {
+  border-radius: var(--border-radius-sm);
+}
+
+/* DatePicker 컴포넌트 특별 처리 */
+.form-component-wrapper .ant-picker {
+  width: 100% !important;
+  border-color: var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+
+}
+
+/* Input 컴포넌트 특별 처리 */
+.form-component-wrapper .ant-input {
+  width: 100% !important;
+  border-color: var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+}
+
+/* TextArea 컴포넌트 특별 처리 */
+.form-component-wrapper .ant-input-textarea {
+  width: 100% !important;
+  border-color: var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+}
+
+/* Button 컴포넌트는 원래 크기 유지 */
+.form-component-wrapper .ant-btn {
+  width: auto !important;
+}
+
+/* Space 컴포넌트 내부 버튼들 */
+.form-component-wrapper .ant-space {
+  width: 100% !important;
+}
+
+.form-component-wrapper .ant-space .ant-btn {
+  width: auto !important;
+}
+
+/* BwgCmptArea 컴포넌트 공통 스타일 변경 */
+.form-component-wrapper .ant-form-item .ant-form-item-label label {
+  color: var(--text-primary);
+  > span {
+    font-weight: var(--font-weight-semibold) !important;
+  }
+} 
+
+/* bwgForm 공통 스타일 */
+.bwg-form .ant-form-item {
+  margin-bottom: 10px;
+}
+.bwg-form .ant-form-item .ant-form-item-label label {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+/* ERP 공통 폼 스타일 */
+.erp-cmm-form {
+  width: 100%;
+}
+
+.erp-cmm-form .ant-flex {
+  width: 100%;
+}
+
+/* sub Form 스타일 */
+.sub-form .ant-form-item .ant-form-item-label label {
+  color: #9a9a9a;
+  font-weight: var(--font-weight-semibold);
+}
+
+.ant-tabs,
+.ant-tabs-content,
+.ant-tabs-tabpane,
+.ant-carousel {
+  width: 100%;
+  height: 100%;
+}
+
+.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;
+        }
+      }
+    }
+  }
+}
+
+.ant-space-compact.block {
+  width: 100%;
+}
+
+/* 그리드 검색 박스 */
+.grid-search-box {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 200px;
+  height: auto;
+  padding: 5px;
+  opacity: 1;
+  background: var(--bg-primary);
+  z-index: 100;
+  transform: translateY(0px);
+  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 .anticon-search {
+  color: #777;
+  font-size: var(--font-size-md);
+}
+.bwg-tag {
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+  line-height: 23px;
+  margin-inline-end: 0;
+  border-radius: 50px;
+  padding-inline: 13px;
+}
+.bwg-tag.ant-tag-blue {
+  color: #2589F4;
+  background: #E2F4FF;
+  border-color: #CAE6FB;
+}
+
+
+/* BwgDrawer 헤더 테마 적용 */
+.main-drawer .ant-drawer-header {
+  padding: 28px 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;
+}
+.main-drawer .ant-drawer-header .bwg-btn {
+  width: 30px;
+  height: 30px;
+  font-size: 17px;
+  color: #565656;
+  border-radius: 5px;
+}
+.main-drawer .ant-drawer-header .bwg-btn:hover {
+  background-color: #E1E3FB;
+}
+
+/* 다크 테마일 때 Drawer 헤더 */
+[data-theme='dark'] .main-drawer .ant-drawer-header {
+  background-color: #1f1f1f !important;
+  color: var(--text-white) !important;
+}
+
+[data-theme='dark'] .main-drawer .ant-drawer-header .ant-drawer-title {
+  color: var(--text-white) !important;
+}
+
+[data-theme='dark'] .main-drawer .ant-drawer-header .ant-drawer-close {
+  color: var(--text-white) !important;
+}
+
+[data-theme='dark'] .main-drawer .ant-drawer-header .ant-drawer-close:hover {
+  color: #40a9ff !important;
+  background-color: #303030 !important;
+}
+
+/* 블루 테마일 때 Drawer 헤더 */
+[data-theme='blue'] .main-drawer .ant-drawer-header {
+  background-color: #1890ff !important;
+  color: var(--text-white) !important;
+}
+
+[data-theme='blue'] .main-drawer .ant-drawer-header .ant-drawer-title {
+  color: var(--text-white) !important;
+}
+
+[data-theme='blue'] .main-drawer .ant-drawer-header .ant-drawer-close {
+  color: var(--text-white) !important;
+}
+
+[data-theme='blue'] .main-drawer .ant-drawer-header .ant-drawer-close:hover {
+  color: var(--text-white) !important;
+  background-color: #40a9ff !important;
+}
+
+/* 모던 테마일 때 Drawer 헤더 */
+[data-theme='modern'] .main-drawer .ant-drawer-header {
+  background-color: var(--drawer-header-bg);
+  color: var(--text-primary);
+}
+
+[data-theme='modern'] .main-drawer .ant-drawer-header .ant-drawer-title {
+  color: var(--text-primary);
+}
+
+[data-theme='modern'] .main-drawer .ant-drawer-header .ant-drawer-close {
+  color: #565656 !important;
+}
+
+[data-theme='modern'] .main-drawer .ant-drawer-header .ant-drawer-close:hover {
+  background-color: #E1E3FB !important;
+}
+
+/* Drawer footer */
+.main-drawer .ant-drawer-footer {
+  padding: 18px 40px;
+  border-top: 1px solid var(--button-light-border);
+  background: var(--bg-tertiary);
+}
+.main-drawer .ant-drawer-footer .bwg-btn {
+  height: var(--button-custom-height);
+  min-width: 74px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
+}
+.main-drawer .ant-drawer-footer .bwg-btn.ant-btn-variant-outlined {
+  border-color: var(--button-light-border);
+}
+.main-drawer .ant-drawer-footer .bwg-btn.ant-btn-variant-outlined:hover {
+  border-color: var(--button-primary-hover);
+  color: var(--button-primary-active);
+}
+.main-drawer .ant-drawer-footer .bwg-btn.ant-btn-variant-outlined:not(.bwg-btn.ant-btn-variant-solid) {
+  color: var(--primary-color);
+}
+.drawer-footer-btn-group {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}