@g1cloud/bluesea 5.0.0-alpha.5 → 5.0.0-alpha.51

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/bluesea.scss

@@ -0,0 +1,2 @@
+@import "./bluesea-base";
+@import "../dist/style.css";

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,34 +28,94 @@
 
 .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: 3px;
+    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;
+    white-space: nowrap;
+
+    &: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;
@@ -75,9 +134,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 {
@@ -88,19 +190,49 @@
   }
 }
 
+.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;
   }
 
-  .selected {
+  > .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;
@@ -110,6 +242,10 @@
       white-space: nowrap;
     }
 
+    .placeholder {
+      color: $gray-400;
+    }
+
     .dropdown-btn {
       font-family: $icon-font-family;
       margin-right: -4px;
@@ -122,6 +258,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
@@ -156,10 +307,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;
@@ -170,3 +325,47 @@
   opacity: 0;
 }
 
+// text-description
+.text-description {
+  margin-top: 8px;
+  color: $gray-400;
+  font-size: 0.923em;
+}
+
+// drag and drop
+.bs-drop-position {
+  position: absolute;
+  border: 1px solid $primary;
+  border-radius: 2px;
+  background-color: $primary-400;
+  opacity: 0.7;
+  z-index: 100;
+
+  &.vertical {
+    left: 0;
+    width: 100%;
+    height: 8px;
+
+    &.before {
+      top: -4px;
+    }
+
+    &.after {
+      bottom: -4px;
+    }
+  }
+
+  &.horizontal {
+    left: 0;
+    width: 8px;
+    height: 100%;
+
+    &.before {
+      left: -4px;
+    }
+
+    &.after {
+      right: -4px;
+    }
+  }
+}

package/css/frame/default.scss

@@ -1,13 +1,15 @@
 @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;
 
 $header-height: 44px !default;
 
+$sidebar-menu-width: 220px !default;
+
 header.default-header {
   height: $header-height;
   background-color: $color-header-bg;
@@ -16,33 +18,60 @@ 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;
+    }
+  }
+
+  &.fixed-menu .header-logo {
+    min-width: $sidebar-menu-width - 48px;
   }
 
   .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;
+      width: $sidebar-menu-width;
+      overflow: auto;
+      padding-bottom: 100px;
     }
 
     .sidebar-menu-item {
@@ -51,33 +80,64 @@ header.default-header {
 
       a.sidebar-menu-link, div.sidebar-menu-link {
         @extend .bs-clickable;
-        display: block;
-        padding: 12px 16px;
-        color: $color-header-text;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px;
+        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;
     flex-grow: 1;
     align-self: end;
+    overflow-x: auto;
 
     .header-tab {
-      background-color: #747787;
+      background-color: $primary-400;
       padding: 0 12px;
       height: 32px;
       border-top-left-radius: 4px;
@@ -86,39 +146,48 @@ 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: 180px;
         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 {
+        .header-title {
+          mask-image: linear-gradient(to right, #000 80%, transparent 90%);
+        }
+
         .close-btn {
+          position: absolute;
+          top: 4px;
+          right: 8px;
           display: block;
         }
+
+        background-color: lighten($primary-400, 5%);
       }
 
       &.selected {
         color: $color-text;
-        background-color: white; //#E5E5E5;
+        background-color: $white;
+
+        &:hover {
+          background-color: $white;
+        }
       }
     }
   }
@@ -128,9 +197,36 @@ header.default-header {
   margin-top: $header-height;
   min-height: calc(100vh - $header-height);
 
+  &.fixed-menu {
+    padding-left: $sidebar-menu-width;
+  }
+
   .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;
+  }
+
+  &.fixed-menu .fixed-header {
+    width: calc(100% - $sidebar-menu-width);
+  }
+
+  .colored-bg {
+    flex-grow: 1;
+    background-color: $primary-100;
+
+    > .box-style {
+      background-color: $white;
+      border-radius: 10px;
+    }
+  }
 }
 
 .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,34 @@
   @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;
     }
   }
 }
@@ -109,8 +133,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 {
@@ -61,4 +61,8 @@ table {
 
 strong {
   font-weight: bold;
+}
+
+a {
+  text-underline-offset: 2px;
 }