@g1cloud/bluesea 5.0.0-alpha.1

package/css/utility.scss

@@ -0,0 +1,228 @@
+@import "./variable";
+
+// width, height
+
+@mixin width-height() {
+
+  @for $index from 0 through 64 {
+    .w-#{$index} {
+      width: 1px * $index;
+    }
+    .h-#{$index} {
+      height: 1px * $index;
+    }
+  }
+
+  @for $index from 9 through 138 {
+    $value: $index * 8;
+    .w-#{$value} {
+      width: 1px * $value;
+    }
+    .h-#{$value} {
+      height: 1px * $value;
+    }
+  }
+
+  .h-full {
+    height: 100%;
+  }
+
+  .w-full {
+    width: 100%;
+  }
+}
+
+@include width-height();
+
+// margin, padding
+
+@mixin spacings-positive($prefix, $style-names...) {
+  @for $index from 0 through 32 {
+    .#{$prefix}-#{$index} {
+      @each $style-name in $style-names {
+        #{$style-name}: 1px * $index !important;
+      }
+    }
+  }
+  @for $index from 5 through 25 {
+    $value: $index * 8;
+    .#{$prefix}-#{$value} {
+      @each $style-name in $style-names {
+        #{$style-name}: 1px * $value !important;
+      }
+    }
+  }
+}
+
+@mixin spacings-negative($prefix, $style-names...) {
+  @for $step from 1 through 32 {
+    .#{$prefix}-n#{$step} {
+      @each $style-name in $style-names {
+        #{$style-name}: -1px * $step !important;
+      }
+    }
+  }
+}
+
+@mixin spacings-auto($prefix, $style-names...) {
+  .#{$prefix}-auto {
+    @each $style-name in $style-names {
+      #{$style-name}: auto !important;
+    }
+  }
+}
+
+@include spacings-positive("mt", "margin-top");
+@include spacings-positive("mb", "margin-bottom");
+@include spacings-positive("ml", "margin-left");
+@include spacings-positive("mr", "margin-right");
+@include spacings-positive("mx", "margin-left", "margin-right");
+@include spacings-positive("my", "margin-top", "margin-bottom");
+@include spacings-positive("ma", "margin-left", "margin-top", "margin-right", "margin-bottom");
+
+@include spacings-negative("mt", "margin-top");
+@include spacings-negative("mb", "margin-bottom");
+@include spacings-negative("ml", "margin-left");
+@include spacings-negative("mr", "margin-right");
+@include spacings-negative("mx", "margin-left", "margin-right");
+@include spacings-negative("my", "margin-top", "margin-bottom");
+@include spacings-negative("ma", "margin-left", "margin-top", "margin-right", "margin-bottom");
+
+@include spacings-positive("pt", "padding-top");
+@include spacings-positive("pb", "padding-bottom");
+@include spacings-positive("pl", "padding-left");
+@include spacings-positive("pr", "padding-right");
+@include spacings-positive("px", "padding-left", "padding-right");
+@include spacings-positive("py", "padding-top", "padding-bottom");
+@include spacings-positive("pa", "padding-left", "padding-top", "padding-right", "padding-bottom");
+
+@include spacings-negative("pt", "padding-top");
+@include spacings-negative("pb", "padding-bottom");
+@include spacings-negative("pl", "padding-left");
+@include spacings-negative("pr", "padding-right");
+@include spacings-negative("px", "padding-left", "padding-right");
+@include spacings-negative("py", "padding-top", "padding-bottom");
+@include spacings-negative("pa", "padding-left", "padding-top", "padding-right", "padding-bottom");
+
+@include spacings-auto("mt", "margin-top");
+@include spacings-auto("mb", "margin-bottom");
+@include spacings-auto("ml", "margin-left");
+@include spacings-auto("mr", "margin-right");
+@include spacings-auto("mx", "margin-left", "margin-right");
+@include spacings-auto("my", "margin-top", "margin-bottom");
+@include spacings-auto("ma", "margin-left", "margin-top", "margin-right", "margin-bottom");
+
+// max width, height
+@for $index from 2 through 75 {
+  $value: $index * 16;
+  .max-w-#{$value} {
+    max-width: #{$value}px !important;
+  }
+  .max-h-#{$value} {
+    max-height: #{$value}px !important;
+  }
+}
+
+// border
+
+.border {
+  border: 1px solid $color-border-light;
+}
+
+.border-top {
+  border-top: 1px solid $color-border-light;
+}
+
+.border-right {
+  border-right: 1px solid $color-border-light;
+}
+
+.border-bottom {
+  border-bottom: 1px solid $color-border-light;
+}
+
+.border-left {
+  border-left: 1px solid $color-border-light;
+}
+
+.border-top-0 {
+  border-top: none;
+}
+
+.border-right-0 {
+  border-right: none;
+}
+
+.border-bottom-0 {
+  border-bottom: none;
+}
+
+.border-left-0 {
+  border-left: none;
+}
+
+// text attributes
+
+$text-aligns: left, right, center, justify;
+@each $text-align in $text-aligns {
+  .text-#{$text-align} {
+    text-align: $text-align;
+  }
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+// code chips
+
+.code-chip-base {
+  padding: 0 8px;
+  border: 1px solid #BCC6D3;
+  border-radius: 100px;
+  background-color: white;
+  white-space: nowrap;
+
+  //&::before {
+  //  @extend .font-icon;
+  //  content: 'stroke_full';
+  //  font-size: 0.6em;
+  //  margin: 0 4px 0 -4px;
+  //  vertical-align: middle;
+  //}
+}
+
+.code-chip-red {
+  @extend .code-chip-base;
+  color: #E72F34;
+  border-color: #FA9A9E;
+  background-color: #FFE8E8;
+}
+
+.code-chip-black {
+  @extend .code-chip-base;
+  color: $color-text;
+  border-color: $color-text;
+  background-color: #FFF;
+}
+
+.code-chip-gray {
+  @extend .code-chip-base;
+  color: #8993A4;
+  border-color: #BCC6D3;
+  background-color: #FFF;
+}
+
+.code-chip-blue {
+  @extend .code-chip-base;
+  color: #2A52BE;
+  border-color: #C1CBE4;
+  background-color: #E8EEFC;
+}
+
+.code-chip-green {
+  @extend .code-chip-base;
+  color: #4FA348;
+  border-color: #7ECE78;
+  background-color: #E9FEE7;
+}

package/css/variable.scss

@@ -0,0 +1,34 @@
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+
+body {
+  font-size: var(--font-size);
+}
+
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+
+textarea {
+  font-size: var(--font-size-input);
+}
+
+$color-text: #555;
+$color-text-light: #B0B1BA;
+
+$color-icon-light: #D5D5D5;
+$color-border-light: #DBE0EF;
+$color-hover: #E8EEFC;
+
+$color-gray: #8993A4;
+$color-blue: #2A52BE;
+$color-darkblue: #00234D;
+
+$border-input: 0.8px solid $color-border-light;
+
+$color-focus: #2A52BE;
+
+$icon-font-family: "Material Symbols Outlined", monospace;