@g1cloud/bluesea 5.0.0-alpha.3 → 5.0.0-alpha.30

package/css/bluesea-base.scss

@@ -2,4 +2,6 @@
 @import "./font";
 @import "./utility";
 @import "./layout";
+@import "./transition";
 @import "./frame/default";
+@import "./user-text";

package/css/component.scss

@@ -14,12 +14,11 @@
 }
 
 .bs-box-component-base {
-  border: 1px solid $color-border-light;
-  border-radius: 4px;
-  height: 28px;
+  height: 26px;
   display: inline-flex;
   align-items: center;
   justify-content: left;
+  background-color: white;
 }
 
 // input component
@@ -29,33 +28,93 @@
 
 .bs-input-base {
   @extend .bs-box-component-base;
+  border: 1px solid $color-border;
+  border-radius: 2px;
+  background-color: $white;
 
-  input {
+  > input {
     border: 0;
+    border-radius: 0;
     outline: 0;
     align-self: stretch;
     flex-grow: 1;
-    padding: 0 8px;
+    padding: 0 6px;
     background-color: transparent;
     width: 100%;
   }
 
-  textarea {
+  > textarea {
     border: 0;
     border-radius: 4px;
     outline: 0;
     align-self: stretch;
     flex-grow: 1;
-    padding: 8px;
+    padding: 6px;
     line-height: 1.4;
     font-family: sans-serif;
   }
 
+  > .suffix,
+    .prefix {
+    font-size: 0.9em;
+    margin-right: 4px;
+    background-color: $gray-200;
+    padding: 2px 4px;
+    border-radius: 2px;
+    line-height: 1;
+
+    &:first-child {
+      margin-left: 4px;
+    }
+  }
+
+  &:hover {
+    border-color: $black;
+  }
+
   &:has(:focus) {
     border-color: $color-focus;
+    border-width: 1px;
+  }
+}
+
+.bs-text-input,
+.bs-number-input,
+.bs-price-input,
+.bs-date-input,
+.bs-date-range,
+.bs-multi-lang-text-input,
+.bs-text-area,
+.bs-rich-text {
+  &.modified {
+    .input-area {
+      border-color: $purple !important;
+    }
+  }
+
+  &.error {
+    .input-area {
+      border-color: $danger !important;
+
+      > input {
+        color: $danger !important;
+      }
+    }
+  }
+
+  &.disabled {
+    .input-area {
+      border-color: $gray-400 !important;
+      background-color: $gray-100 !important;
+
+      > input {
+        color: $gray-400 !important;
+      }
+    }
   }
 }
 
+
 // checkbox, radio-button component
 .bs-checkbox-base {
   display: inline-block;
@@ -74,9 +133,52 @@
       color: $color-text;
     }
 
+    &:hover {
+      color: $black;
+
+      & ~ label {
+        color: $black;
+      }
+    }
+
     &:focus::before {
       color: $color-focus;
     }
+
+    &:focus ~ label {
+      color: $color-focus;
+    }
+
+  }
+
+  &.modified {
+    & input::before {
+      color: $purple !important;
+    }
+
+    & input ~ label {
+      color: $purple !important;
+    }
+  }
+
+  &.error {
+    & input::before {
+      color: $danger !important;
+    }
+
+    & input ~ label {
+      color: $danger !important;
+    }
+  }
+
+  &.disabled {
+    & input::before {
+      color: $gray-400 !important;
+    }
+
+    & input ~ label {
+      color: $gray-400 !important;
+    }
   }
 
   label {
@@ -87,11 +189,39 @@
   }
 }
 
+.bs-checkbox-group,
+.bs-radio-button-group {
+  &.modified {
+    input::before {
+      color: $purple !important;
+    }
+
+    input ~ label {
+      color: $purple !important;
+    }
+  }
+
+  &.error {
+    input::before {
+      color: $danger !important;
+    }
+
+    input ~ label {
+      color: $danger !important;
+    }
+  }
+}
+
 // select, multi-select, tree-select
 .bs-select-wrap {
   @extend .bs-box-component-wrap;
   position: relative;
   outline: 0;
+  background-color: $white;
+
+  &:hover > .selected {
+    border-color: $black;
+  }
 
   &:focus > .selected {
     border-color: $color-focus;
@@ -99,7 +229,9 @@
 
   .selected {
     @extend .bs-box-component-base;
-    padding: 0 8px;
+    border: 1px solid $color-border;
+    border-radius: 2px;
+    padding: 0 6px;
     min-width: 50px;
     cursor: pointer;
     display: flex;
@@ -107,6 +239,10 @@
     .label {
       flex-grow: 1;
       white-space: nowrap;
+
+      &.placeholder {
+        color: $color-gray;
+      }
     }
 
     .dropdown-btn {
@@ -121,6 +257,21 @@
   &.popup-open .dropdown-btn {
     transform: rotate(180deg);
   }
+
+  &.modified > .selected {
+    border-color: $purple !important;
+  }
+
+  &.error > .selected {
+    border-color: $danger !important;
+    color: $danger !important;
+  }
+
+  &.disabled > .selected {
+    border-color: $gray-400 !important;
+    background-color: $gray-100 !important;
+    color: $gray-400 !important;
+  }
 }
 
 // field error
@@ -155,10 +306,14 @@
 .font-icon {
   font-family: $icon-font-family;
   font-size: 1rem;
+  max-width: 1em;
+
+  &.filled {
+    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
+  }
 }
 
 // transition
-
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity .3s;
@@ -167,5 +322,4 @@
 .fade-enter,
 .fade-leave-to {
   opacity: 0;
-}
-
+}

package/css/frame/default.scss

@@ -1,7 +1,7 @@
 @import "../variable";
 @import "../component";
 
-$color-header-bg: #464854 !default;
+$color-header-bg: $primary !default;
 $color-header-text: #FFFFFF !default;
 $color-menu-bg: #464854 !default;
 $color-menu-border: #2D2E36;
@@ -16,33 +16,56 @@ header.default-header {
   position: fixed;
   width: 100%;
   top: 0;
-  z-index: 100;
+  z-index: 200;
 
   .header-logo {
     @extend .bs-clickable;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
     color: $color-header-text;
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: -2px;
+    font-size: 1.2307em;
+    font-weight: 500;
+    line-height: 1;
+
+    em {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 6px;
+      padding: 2px 4px;
+      border-radius: 4px;
+      background-color: $white;
+      color: $primary-600;
+      font-size: 1em;
+      font-weight: 700;
+    }
   }
 
   .sidebar-menu {
+    width: 48px;
     align-self: stretch;
 
     .menu-btn {
       @extend .bs-clickable;
-      font-size: 28px;
+      font-size: 1.375rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
       height: $header-height;
+      max-width: $header-height;
       line-height: $header-height;
       color: $color-header-text;
-      padding: 0 8px;
+      margin-left: 8px;
     }
 
     .menu-container {
       position: absolute;
       background-color: $color-menu-bg;
       height: calc(100vh - $header-height);
-      min-width: 200px;
+      min-width: 220px;
+      overflow: auto;
+      padding-bottom: 100px;
     }
 
     .sidebar-menu-item {
@@ -51,25 +74,55 @@ header.default-header {
 
       a.sidebar-menu-link, div.sidebar-menu-link {
         @extend .bs-clickable;
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         padding: 12px 16px;
-        color: $color-header-text;
+        color: $gray-400;
         text-decoration: none;
+
+        .font-icon {
+          font-size: .8rem;
+        }
       }
 
       .sidebar-submenu {
-        padding: 8px 24px 8px 8px;
+        padding: 8px 16px 8px 8px;
         background-color: $color-menu-border;
 
-        a.sidebar-menu-link, div.sidebar-menu-link {
-          padding: 8px 16px;
+        > a.sidebar-menu-link, > div.sidebar-menu-link {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 8px 0 8px 20px;
+
+          &:before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 8px;
+            display: block;
+            width: 2px;
+            height: 2px;
+            background-color: $gray-400;
+          }
+
+          .font-icon {
+            margin-left: 8px;
+            font-size: .8rem;
+
+            &.filled {
+              color: $secondary;
+            }
+          }
         }
       }
     }
   }
 
   .header-tabs {
-    margin: 0 12px;
+    margin: 0 16px;
     display: flex;
     align-items: end;
     gap: 1px;
@@ -77,7 +130,7 @@ header.default-header {
     align-self: end;
 
     .header-tab {
-      background-color: #747787;
+      background-color: $primary-400;
       padding: 0 12px;
       height: 32px;
       border-top-left-radius: 4px;
@@ -86,39 +139,41 @@ header.default-header {
       align-items: center;
       flex-grow: 1;
       position: relative;
-      max-width: 160px;
-      min-width: 100px;
+      max-width: 180px;
+      min-width: 110px;
       color: $color-header-text;
+      cursor: pointer;
 
       .header-title {
         padding-right: 6px;
-        flex-grow: 1;
         width: 50px;
-        flex-basis: 80px;
+        flex-basis: 160px;
         overflow: hidden;
-        text-overflow: ellipsis;
         white-space: nowrap;
-        cursor: default;
+        mask-image: linear-gradient(to right, #000 85%, transparent 95%);
       }
 
       .close-btn {
         @extend .bs-clickable;
         right: 4px;
-        padding: 4px;
-        border-radius: 4px;
         display: none;
-        margin-right: -8px;
       }
 
       &:hover {
         .close-btn {
           display: block;
         }
+
+        background-color: lighten($primary-400, 5%);
       }
 
       &.selected {
         color: $color-text;
-        background-color: white; //#E5E5E5;
+        background-color: $white;
+
+        &:hover {
+          background-color: $white;
+        }
       }
     }
   }
@@ -131,6 +186,22 @@ header.default-header {
   .body-tab:has(>div.h-full) {
     height: calc(100vh - $header-height);
   }
+
+  .fixed-header {
+    position: fixed;
+    width: 100%;
+    border-bottom: 1px solid $gray-400;
+    background-color: white;
+    padding: 8px 16px;
+    z-index: 10;
+  }
+
+  .bg-full {
+    min-height: calc(100vh - $header-height);
+    padding-top: 43px;
+    padding-bottom: 80px;
+    background-color: $primary-100;
+  }
 }
 
 .menu-slide-enter-active,

package/css/layout.scss

@@ -7,11 +7,21 @@
   flex-direction: row;
 }
 
+.flex-row-inline {
+  display: inline-flex;
+  flex-direction: row;
+}
+
 .flex-column {
   display: flex;
   flex-direction: column;
 }
 
+.flex-column-inline {
+  display: inline-flex;
+  flex-direction: column;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -70,6 +80,10 @@
   @extend .flex-wrap;
 }
 
+.bs-layout-horizontal-inline {
+  @extend .flex-row-inline;
+}
+
 .bs-layout-vertical {
   @extend .flex-column;
 
@@ -83,24 +97,45 @@
   @extend .flex-wrap;
 }
 
+.bs-layout-vertical-inline {
+  @extend .flex-column-inline;
+}
+
 .bs-layout-form {
 
+  border-bottom: 1px solid $gray-200;
+
   > div {
     display: flex;
     align-items: center;
-    border-bottom: 0.8px solid $color-border-light;
 
     > .title {
-      padding: 8px 8px 8px 0;
-      width: 10em;
-      font-weight: 500;
+      padding: 8px 16px;
+      width: 12.3076em;
       line-height: 1.2em;
+      color: $black;
     }
 
     > :not(.title) {
       padding: 8px;
       width: 10em;
       flex-grow: 1;
+      color: $gray-700;
+    }
+
+    &:nth-child(odd) {
+      background-color: $gray-100;
+    }
+
+    .require {
+      margin-left: 4px;
+      color: $primary;
+    }
+
+    .text-description {
+      margin-top: 8px;
+      color: $gray-400;
+      font-size: var(--font-size-input);
     }
   }
 }
@@ -109,8 +144,38 @@
 
   > .card-title {
     padding: 16px 0;
-    border-bottom: 0.8px solid $color-darkblue;
+    border-bottom: 0.8px solid $color-border-light;
     font-size: 1.2em;
     font-weight: 500;
   }
+}
+
+$table-row-odd-color: $white;
+$table-row-even-color: $gray-100;
+
+.bs-layout-table {
+  border-collapse: collapse;
+
+  > tr > td, > tr > th, tbody > tr > td, tbody > tr > th {
+    padding: 8px;
+    border: 1px solid $color-border;
+    vertical-align: middle;
+    text-align: left;
+
+    &:first-child {
+      border-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+
+  //> tr:nth-child(odd) {
+  //  background-color: $table-row-odd-color;
+  //}
+  //
+  //> tr:nth-child(even) {
+  //  background-color: $table-row-even-color;
+  //}
 }

package/css/reset.scss

@@ -31,7 +31,7 @@ footer, header, hgroup, menu, nav, section {
 }
 
 body {
-  line-height: 1;
+  line-height: 1.5;
 }
 
 ol, ul {

package/css/transition.scss

@@ -0,0 +1,83 @@
+//
+// slide-down transition
+// css 만으로는 transition 이 동작하지 않고, SlideDownTransition 컴포넌트를 사용해야 함.
+//
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-down-enter-to,
+.slide-down-leave-from {
+  overflow: hidden;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+//
+// notification transition
+//
+.notification-enter-active,
+.notification-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.notification-enter-to,
+.notification-leave-from {
+  margin-top: 0;
+}
+
+.notification-enter-from {
+  margin-top: -35px;
+  opacity: 0;
+}
+
+.notification-leave-to {
+  opacity: 0;
+}
+
+//
+// alarm transition
+//
+.alarm-enter-active,
+.alarm-leave-active {
+  transition: all 0.3s ease-out;
+  z-index: -1;
+}
+
+.alarm-enter-to,
+.alarm-leave-from {
+  margin-top: 0;
+}
+
+.alarm-enter-from,
+.alarm-leave-to {
+  margin-bottom: -230px;
+  opacity: 0;
+}
+
+
+//
+// fade TransitionGroup
+//
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  position: absolute;
+}