@g1cloud/bluesea 5.0.0-beta.8 → 6.0.0-alpha.0

package/scss/frame/default.scss

@@ -1,293 +0,0 @@
-@use "../component" as *;
-
-$color-menu-bg: #464854 !default;
-$color-menu-border: #2D2E36;
-$header-height: 44px !default;
-$sidebar-menu-width: 220px !default;
-
-:root {
-  --color-menu-bg: #{$color-menu-bg};
-  --color-menu-border: #{$color-menu-border};
-  --header-height: #{$header-height};
-  --sidebar-menu-width: #{$sidebar-menu-width};
-}
-
-header.default-header {
-  height: var(--header-height);
-  background-color: var(--header-bg);
-  display: flex;
-  align-items: center;
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 200;
-
-  .header-logo {
-    @extend .bs-clickable;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    color: var(--header-text);
-    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: var(--header-text);
-      color: var(--header-bg);
-      font-size: 1em;
-      font-weight: 700;
-    }
-  }
-
-  &.fixed-menu .header-logo {
-    min-width: calc(var(--sidebar-menu-width) - 48px);
-  }
-
-  .sidebar-menu {
-    width: 48px;
-    align-self: stretch;
-
-    .menu-btn {
-      @extend .bs-clickable;
-      font-size: 1.375rem;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: var(--header-height);
-      max-width: var(--header-height);
-      line-height: var(--header-height);
-      color: var(--header-text);
-      margin-left: 8px;
-    }
-
-    .menu-container {
-      position: absolute;
-      background-color: var(--color-menu-bg);
-      height: calc(100vh - var(--header-height));
-      width: var(--sidebar-menu-width);
-      overflow: auto;
-      padding-bottom: 100px;
-    }
-
-    .sidebar-menu-item {
-      border-top: 1px solid var(--color-menu-border);
-      color: var(--header-text);
-
-      a.sidebar-menu-link, div.sidebar-menu-link {
-        @extend .bs-clickable;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 12px;
-        color: #A9A9AE;
-        text-decoration: none;
-
-        .font-icon {
-          font-size: .8rem;
-        }
-      }
-
-      .sidebar-submenu {
-        padding: 8px 16px 8px 8px;
-        background-color: var(--color-menu-border);
-
-        > 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: var(--gray-400);
-          }
-
-          .font-icon {
-            margin-left: 8px;
-            font-size: .8rem;
-
-            &.filled {
-              color: var(--secondary);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .header-tabs {
-    margin: 0 4px 0 16px;
-    display: flex;
-    align-items: end;
-    gap: 1px;
-    flex-grow: 1;
-    align-self: end;
-    overflow-x: auto;
-    scrollbar-width: none;
-
-    .header-tab {
-      background-color: var(--header-tab-bg);
-      padding: 0 12px;
-      height: 32px;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      position: relative;
-      max-width: 180px;
-      min-width: 48px;
-      color: var(--header-text);
-      cursor: pointer;
-
-      .header-title {
-        padding-right: 6px;
-        width: 50px;
-        flex-basis: 180px;
-        overflow: hidden;
-        white-space: nowrap;
-        mask-image: linear-gradient(to right, #000 85%, transparent 95%);
-      }
-
-      .close-btn {
-        @extend .bs-clickable;
-        right: 4px;
-        display: none;
-      }
-
-      &:hover {
-        .header-title {
-          mask-image: linear-gradient(to right, #000 80%, transparent 90%);
-        }
-
-        .close-btn {
-          position: absolute;
-          top: 4px;
-          right: 8px;
-          display: block;
-        }
-      }
-
-      &:hover:not(.selected) {
-        background-color: color-mix(in srgb, var(--header-tab-bg) 80%, white 20%);
-      }
-
-      &.selected {
-        color: var(--header-tab-text);
-        background-color: var(--header-tab-selected);
-
-        &:hover {
-          background-color: var(--header-tab-selected);
-        }
-      }
-    }
-  }
-
-  .header-tab-list-button {
-    align-self: end;
-
-    .tab-list-button {
-      min-width: 20px;
-      height: 32px;
-      padding: 4px 2px;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      color: var(--header-text);
-      background-color: var(--header-tab-bg);
-      user-select: none;
-      cursor: pointer;
-
-      &:hover:not(:active) {
-        opacity: .8;
-      }
-
-      &:active {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-html {
-  background-color: var(--body-bg);
-}
-
-.default-body {
-  background-color: var(--body-bg);
-  color: var(--body-text);
-  margin-top: var(--header-height);
-  min-height: calc(100vh - var(--header-height));
-
-  &.fixed-menu {
-    padding-left: var(--sidebar-menu-width);
-  }
-
-  .body-tab:has(>div.h-full) {
-    height: calc(100vh - var(--header-height));
-  }
-
-  .fixed-header {
-    position: fixed;
-    width: 100%;
-    min-height: 43px;
-    border-bottom: 1px solid var(--border);
-    background-color: var(--body-bg);
-    padding: 8px 16px;
-    z-index: 10;
-  }
-
-  &.fixed-menu .fixed-header {
-    width: calc(100% - var(--sidebar-menu-width));
-  }
-
-  .colored-bg {
-    flex-grow: 1;
-    background-color: var(--colored-bg);
-
-    > .box-style {
-      background-color: var(--body-bg);
-      border-radius: 10px;
-    }
-
-    .dashboard-box-style {
-      background-color: var(--body-bg);
-      padding: 16px;
-      border-radius: 10px;
-
-      .title {
-        font-weight: 500;
-        line-height: 1;
-        margin-bottom: 8px;
-      }
-    }
-  }
-}
-
-.menu-slide-enter-active,
-.menu-slide-leave-active {
-  transition: all 0.2s ease-out;
-}
-
-.menu-slide-enter-from {
-  transform: translateX(-100%);
-}
-
-.menu-slide-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-

package/scss/layout.scss

@@ -1,192 +0,0 @@
-/* Layout Utility */
-
-.flex-row {
-  display: flex;
-  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;
-}
-
-@for $index from 0 through 8 {
-  .flex-grow-#{$index} {
-    flex-grow: $index;
-  }
-  .flex-shrink-#{$index} {
-    flex-shrink: $index;
-  }
-}
-
-@for $index from 0 through 64 {
-  .gap-#{$index} {
-    gap: 1px * $index;
-  }
-}
-
-.flex-align-start {
-  align-items: flex-start;
-}
-
-.flex-align-center {
-  align-items: center;
-}
-
-.flex-align-end {
-  align-items: flex-end;
-}
-
-.flex-content-start {
-  justify-content: flex-start;
-}
-
-.flex-content-center {
-  justify-content: center;
-}
-
-.flex-content-end {
-  justify-content: flex-end;
-}
-
-/* Bluesea Layout */
-
-.bs-layout-horizontal {
-  @extend .flex-row;
-
-  > * {
-
-  }
-}
-
-.bs-layout-horizontal-wrap {
-  @extend .bs-layout-horizontal;
-  @extend .flex-wrap;
-}
-
-.bs-layout-horizontal-inline {
-  @extend .flex-row-inline;
-}
-
-.bs-layout-vertical {
-  @extend .flex-column;
-
-  > * {
-
-  }
-}
-
-.bs-layout-vertical-wrap {
-  @extend .bs-layout-vertical;
-  @extend .flex-wrap;
-}
-
-.bs-layout-vertical-inline {
-  @extend .flex-column-inline;
-}
-
-.bs-layout-form {
-
-  border-bottom: 1px solid var(--border);
-
-  > div {
-    display: flex;
-    align-items: center;
-
-    > .title {
-      padding: 8px 16px;
-      width: 12.3076em;
-      line-height: 1.2em;
-      color: var(--body-text);
-    }
-
-    > :not(.title) {
-      padding: 8px;
-      width: 10em;
-      flex-grow: 1;
-      color: var(--body-text);
-    }
-
-    &:nth-child(odd) {
-      background-color: var(--gray-100);
-    }
-  }
-
-  &.title-w-8 > div > .title {
-    width: 8em;
-  }
-
-  &.title-w-10 > div > .title {
-    width: 10em;
-  }
-
-  &.title-w-14 > div > .title {
-    width: 14em;
-  }
-
-  &.title-w-16 > div > .title {
-    width: 16em;
-  }
-
-  &.title-w-18 > div > .title {
-    width: 18em;
-  }
-
-  &.title-w-20 > div > .title {
-    width: 20em;
-  }
-}
-
-.bs-layout-card {
-
-  > .card-title {
-    padding: 16px 0;
-    border-bottom: 0.8px solid var(--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 var(--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/scss/reset.scss

@@ -1,68 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-body {
-  line-height: 1.5;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-blockquote, q {
-  quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-// additional
-
-strong {
-  font-weight: bold;
-}
-
-a {
-  text-underline-offset: 2px;
-}

package/scss/rich-text-container.scss

@@ -1,113 +0,0 @@
-// BSRichText 의 iframe 안에 들어가는 container 스타일
-
-:root {
-  --body-bg: #ffffff;
-  --gray-400: #A9A9A9;
-  --primary: #5672EF;
-  --icon-font-family: Material Symbols Outlined, monospace;
-}
-
-.bs-rich-text-editor {
-  width: 100%;
-  box-sizing: border-box;
-  overflow: auto;
-  padding: 8px;
-  margin: 0 auto;
-  background-color: var(--body-bg);
-  align-self: center;
-  box-shadow: 2px 0 8px rgba(0, 0, 0, .2);
-
-  > .tiptap {
-    width: 100%;
-    flex-grow: 1;
-
-    &:focus {
-      outline: 0
-    }
-  }
-
-  /* table */
-  table {
-    table-layout: fixed;
-
-    td,
-    th {
-      min-width: 1em;
-      position: relative;
-
-      > * {
-        margin-bottom: 0;
-      }
-    }
-
-    th {
-      font-weight: bold;
-      text-align: left;
-    }
-
-    .selectedCell:after {
-      background: var(--gray-400);
-      opacity: 0.3;
-      content: "";
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      pointer-events: none;
-      position: absolute;
-      z-index: 1;
-    }
-
-    .column-resize-handle {
-      background-color: var(--primary);
-      bottom: -2px;
-      pointer-events: none;
-      position: absolute;
-      right: -2px;
-      top: 0;
-      width: 4px;
-      z-index: 2;
-    }
-  }
-
-  /* image */
-  img, video {
-    user-select: auto;
-
-    &.ProseMirror-selectednode {
-      outline: 3px solid var(--primary);
-      position: relative;
-      transition: outline 0.15s;
-      z-index: 1;
-    }
-  }
-
-  /* youtube */
-  span[data-youtube-video] {
-    position: relative;
-    cursor: move;
-
-    iframe {
-      user-select: auto;
-    }
-
-    &.ProseMirror-selectednode iframe {
-      outline: 3px solid var(--primary);
-      transition: outline 0.15s;
-    }
-
-    &::after {
-      content: "menu";
-      font-family: var(--icon-font-family);
-      position: absolute;
-      background-color: white;
-      border-radius: 4px;
-      padding: 4px;
-      left: 8px;
-      top: 8px;
-      font-size: 20px;
-      line-height: 1em;
-    }
-  }
-}
-