@g1cloud/bluesea 5.0.0-alpha.1 → 5.0.0-alpha.100

package/css/bluesea-base.scss

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

package/css/bluesea.scss

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

package/css/component.scss

@@ -14,51 +14,196 @@
 }
 
 .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: $color-body-bg;
 }
 
 // input component
 .bs-input-wrap {
-  @extend .bs-box-component-wrap
+  @extend .bs-box-component-wrap;
+
+  .suffix,
+  .prefix {
+    font-size: 0.9em;
+    margin-right: 4px;
+    margin-left: 4px;
+    background-color: $color-gray-200;
+    color: $color-body-text;
+    padding: 2px 4px;
+    border-radius: 2px;
+    line-height: 1;
+    white-space: nowrap;
+
+    &:first-child {
+      margin-left: 4px;
+    }
+
+    .font-icon {
+      font-size: 0.9em;
+    }
+
+    img {
+      width: 0.9em;
+      height: 0.9em;
+    }
+  }
+}
+
+[data-theme="dark"] {
+  .bs-input-wrap {
+    .suffix,
+    .prefix {
+      img {
+        filter: invert(1);
+      }
+    }
+  }
 }
 
 .bs-input-base {
   @extend .bs-box-component-base;
+  border: 1px solid $color-border;
+  border-radius: 2px;
+  background-color: $color-body-bg;
 
-  input {
+  > input {
     border: 0;
+    border-radius: 0;
     outline: 0;
     align-self: stretch;
     flex-grow: 1;
-    padding: 0 8px;
+    flex-basis: 1em;
+    padding: 0 6px;
     background-color: transparent;
+    width: 100%;
+    color: $color-body-text;
   }
 
-  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;
+    background-color: $color-body-bg;
+    color: $color-body-text;
+  }
+
+  &:hover {
+    border-color: $color-border-hover;
   }
 
   &: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-multi-lang-text-area,
+.bs-multi-lang-rich-text,
+.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: $color-border !important;
+      background-color: $color-gray-100 !important;
+      color: $color-gray-400 !important;
+
+      > input {
+        color: $color-gray-400 !important;
+        background-color: $color-gray-100 !important;
+      }
+
+      > textarea {
+        background-color: $color-gray-100 !important;
+      }
+    }
+  }
+}
+
+// date
+.bs-date-input,
+.bs-date-range {
+
+  .view-mode {
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    &::before {
+      content: 'calendar_month';
+      width: 1em;
+      font-family: $icon-font-family;
+    }
+  }
+}
+
+.bs-date-input,
+.bs-date-range,
+.bs-calendar,
+.bs-calendar-range {
+  .extra-dates {
+    color: $color-body-text;
+    margin-top: 4px;
+
+    .extra-date {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: .8125rem;
+
+      &::before {
+        content: 'globe';
+        width: 1em;
+        font-family: $icon-font-family;
+      }
+    }
+  }
+}
+
+.bs-calendar,
+.bs-calendar-range {
+  .extra-dates {
+    padding-top: 8px;
+    border-top: 1px solid $color-border;
   }
 }
 
 // checkbox, radio-button component
 .bs-checkbox-base {
   display: inline-block;
-  color: $color-text;
+  color: $color-body-text;
 
   input {
     appearance: none;
@@ -70,12 +215,55 @@
       font-size: 20px;
       vertical-align: middle;
       cursor: pointer;
-      color: $color-text;
+      color: $color-body-text;
+    }
+
+    &:hover {
+      color: $color-gray-500;
+
+      & ~ label {
+        color: $color-gray-500;
+      }
     }
 
     &: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: $color-gray-400 !important;
+    }
+
+    & input ~ label {
+      color: $color-gray-400 !important;
+    }
   }
 
   label {
@@ -86,26 +274,76 @@
   }
 }
 
+.bs-checkbox-group,
+.bs-radio-button-group {
+  &.modified {
+    input::before {
+      color: $purple !important;
+    }
+
+    input ~ label {
+      color: $purple !important;
+    }
+  }
+
+  &.disabled {
+    & input::before {
+      color: $color-gray-400 !important;
+    }
+
+    & input ~ label {
+      color: $color-gray-400 !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: $color-body-bg;
+  color: $color-body-text;
+  min-width: 64px;
+
+  &:hover > .selected {
+    border-color: $color-border-hover;
+  }
 
   &:focus > .selected {
     border-color: $color-focus;
   }
 
-  .selected {
+  > .selected {
     @extend .bs-box-component-base;
-    padding: 0 8px;
-    min-width: 50px;
+    border: 1px solid $color-border;
+    border-radius: 2px;
+    padding: 0 6px;
+    min-width: 100%;
     cursor: pointer;
     display: flex;
 
     .label {
       flex-grow: 1;
       white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .placeholder {
+      color: $gray-400;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .dropdown-btn {
@@ -120,6 +358,38 @@
   &.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: $color-border !important;
+    background-color: $color-gray-100 !important;
+    color: $color-gray-500 !important;
+  }
+
+  .small-progress {
+    font-family: $icon-font-family;
+    font-size: 0.9em;
+    position: absolute;
+    left: 100%;
+    top: 0;
+    padding: 0 2px;
+    color: $gray-400;
+    animation: spin 1s linear infinite;
+  }
+}
+
+// field error
+.bs-field-error {
+  color: $color-error;
+  margin-top: 4px;
 }
 
 // button style
@@ -142,16 +412,26 @@
 
 // utility
 .component-shadow-base {
-  box-shadow: 2px 2px 8px #eee;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, .1);
+}
+
+[data-theme="dark"] {
+  .component-shadow-base {
+    box-shadow: 2px 2px 8px rgba(255, 255, 255, .1);
+  }
 }
 
 .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;
@@ -162,3 +442,67 @@
   opacity: 0;
 }
 
+// text-description
+.text-description {
+  margin-top: 2px;
+  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;
+    }
+  }
+}
+
+.bs-droppable-horizontal {
+  transition: transform 0.3s ease;
+
+  &.bs-dropping-before,
+  &.bs-dropping-after-following {
+    transform: translateX(12px);
+    z-index: 1;
+  }
+
+  &.bs-dropping-after,
+  &.bs-dropping-before-preceding {
+    transform: translateX(-12px);
+    z-index: 1;
+  }
+}
+
+.bs-dragging-source {
+  opacity: 0.5;
+}

package/css/font.scss

@@ -1,3 +1,3 @@
-body, input, textarea {
+body, input, textarea, button {
   font-family: 'Noto Sans', 'Noto Sans KR', 'Noto Sans JP', 'Arial', sans-serif;
 }