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

package/scss/utility.scss

@@ -1,816 +0,0 @@
-@use "./variable" as *;
-
-// width, height
-
-@mixin width-height() {
-
-  @for $index from 0 through 64 {
-    .w-#{$index} {
-      width: 1px * $index !important;
-    }
-    .h-#{$index} {
-      height: 1px * $index !important;
-    }
-  }
-
-  @for $index from 9 through 138 {
-    $value: $index * 8;
-    .w-#{$value} {
-      width: 1px * $value !important;
-    }
-    .h-#{$value} {
-      height: 1px * $value !important;
-    }
-  }
-
-  .h-full {
-    height: 100% !important;
-  }
-
-  .w-full {
-    width: 100% !important;
-  }
-}
-
-@include width-height();
-
-// margin, padding
-
-@mixin spacings-positive($prefix, $style-names...) {
-  @for $index from 0 through 48 {
-    .#{$prefix}-#{$index} {
-      @each $style-name in $style-names {
-        #{$style-name}: 1px * $index !important;
-      }
-    }
-  }
-  @for $index from 7 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 48 {
-    .#{$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 1 through 7 {
-  $value: $index * 4;
-  .max-w-#{$value} {
-    max-width: #{$value}px !important;
-  }
-  .max-h-#{$value} {
-    max-height: #{$value}px !important;
-  }
-}
-
-@for $index from 2 through 80 {
-  $value: $index * 16;
-  .max-w-#{$value} {
-    max-width: #{$value}px !important;
-  }
-  .max-h-#{$value} {
-    max-height: #{$value}px !important;
-  }
-}
-
-// min width, height
-@for $index from 1 through 7 {
-  $value: $index * 4;
-  .min-w-#{$value} {
-    min-width: #{$value}px !important;
-  }
-  .min-h-#{$value} {
-    min-height: #{$value}px !important;
-  }
-}
-
-@for $index from 2 through 80 {
-  $value: $index * 16;
-  .min-w-#{$value} {
-    min-width: #{$value}px !important;
-  }
-  .min-h-#{$value} {
-    min-height: #{$value}px !important;
-  }
-}
-
-.min-w-0 {
-  min-width: 0 !important;
-}
-
-.min-h-0 {
-  min-height: 0 !important;
-}
-
-// display
-
-@mixin display() {
-  $display-styles: none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex;
-  @each $display-style in $display-styles {
-    .d-#{$display-style} {
-      display: $display-style !important;
-    }
-  }
-}
-
-@include display();
-
-// overflow
-
-@mixin overflow() {
-  $overflows: auto, hidden, visible !default;
-  @each $value in $overflows {
-    .overflow-#{$value} {
-      overflow: $value !important;
-    }
-    .overflow-y-#{$value} {
-      overflow-y: $value !important;
-    }
-    .overflow-x-#{$value} {
-      overflow-x: $value !important;
-    }
-  }
-}
-
-@include overflow();
-
-// visibility
-
-.visible {
-  visibility: visible !important;
-}
-
-.invisible {
-  visibility: hidden !important;
-}
-
-// position
-
-@mixin position() {
-  $positions: static, relative, absolute, fixed, sticky !default;
-  @each $position in $positions {
-    .position-#{$position} {
-      position: $position !important;
-    }
-  }
-}
-
-@include position();
-
-// top|right|bottom|left|inset
-
-@mixin position-element($from, $to, $step) {
-  @for $index from $from through $to {
-    $value: $index * $step;
-
-    .top-#{$value} {
-      top: 1px * $value !important;
-    }
-    .right-#{$value} {
-      right: 1px * $value !important;
-    }
-    .bottom-#{$value} {
-      bottom: 1px * $value !important;
-    }
-    .left-#{$value} {
-      left: 1px * $value !important;
-    }
-    .inset-#{$value} {
-      inset: 1px * $value !important;
-    }
-    .inset-x-#{$value} {
-      right: 1px * $value !important;
-      left: 1px * $value !important;
-    }
-    .inset-y-#{$value} {
-      top: 1px * $value !important;
-      bottom: 1px * $value !important;
-    }
-  }
-}
-
-@include position-element(0, 32, 1);
-
-@mixin position-element-negative($from, $to, $step) {
-  @for $index from $from through $to {
-    $value: $index * $step;
-
-    .top-n#{$value} {
-      top: -1px * $value !important;
-    }
-    .right-n#{$value} {
-      right: -1px * $value !important;
-    }
-    .bottom-n#{$value} {
-      bottom: -1px * $value !important;
-    }
-    .left-n#{$value} {
-      left: -1px * $value !important;
-    }
-    .inset-n#{$value} {
-      inset: -1px * $value !important;
-    }
-    .inset-x-n#{$value} {
-      right: -1px * $value !important;
-      left: -1px * $value !important;
-    }
-    .inset-y-n#{$value} {
-      top: -1px * $value !important;
-      bottom: -1px * $value !important;
-    }
-  }
-}
-
-@include position-element-negative(0, 32, 1);
-
-// z-index
-
-@mixin z-index() {
-  @for $index from 0 through 10 {
-    .z-index-#{$index} {
-      z-index: $index !important;
-    }
-  }
-  @for $index from 2 through 10 {
-    $value: $index * 10;
-    .z-index-#{$value} {
-      z-index: $value !important;
-    }
-  }
-}
-
-@include z-index();
-
-// shadow
-
-.shadow {
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2) !important;
-}
-
-// opacity
-
-.opacity-0 {
-  opacity: 0 !important;
-}
-
-.opacity-10 {
-  opacity: .1 !important;
-}
-
-.opacity-50 {
-  opacity: .5 !important;
-}
-
-.opacity-70 {
-  opacity: .7 !important;
-}
-
-.opacity-100 {
-  opacity: 1 !important;
-}
-
-
-// flex
-@mixin flex-style() {
-
-  .flex-row {
-    flex-direction: row !important;
-  }
-  .flex-column {
-    flex-direction: column !important;
-  }
-  .flex-row-reverse {
-    flex-direction: row-reverse !important;
-  }
-  .flex-column-reverse {
-    flex-direction: column-reverse !important;
-  }
-
-  .flex-wrap {
-    flex-wrap: wrap !important;
-  }
-  .flex-nowrap {
-    flex-wrap: nowrap !important;
-  }
-  .flex-wrap-reverse {
-    flex-wrap: wrap-reverse !important;
-  }
-  .flex-fill {
-    flex: 1 1 auto !important;
-  }
-
-  @for $index from 1 through 12 {
-    $percent: 8.3333333333% * $index; // 100% / 12
-    .flex-basis-#{$index} {
-      flex: 0 0 $percent !important;
-    }
-  }
-
-  .flex-basis-full {
-    flex-basis: 100% !important;
-  }
-  .flex-basis-0 {
-    flex-basis: 0 !important;
-  }
-  .flex-basis-auto {
-    flex-basis: auto !important;
-  }
-
-
-  .justify-content-start {
-    justify-content: flex-start !important;
-  }
-  .justify-content-end {
-    justify-content: flex-end !important;
-  }
-  .justify-content-center {
-    justify-content: center !important;
-  }
-  .justify-content-between {
-    justify-content: space-between !important;
-  }
-  .justify-content-around {
-    justify-content: space-around !important;
-  }
-
-  .align-items-start {
-    align-items: flex-start !important;
-  }
-  .align-items-end {
-    align-items: flex-end !important;
-  }
-  .align-items-center {
-    align-items: center !important;
-  }
-  .align-items-baseline {
-    align-items: baseline !important;
-  }
-  .align-items-stretch {
-    align-items: stretch !important;
-  }
-
-  .align-content-start {
-    align-content: flex-start !important;
-  }
-  .align-content-end {
-    align-content: flex-end !important;
-  }
-  .align-content-center {
-    align-content: center !important;
-  }
-  .align-content-between {
-    align-content: space-between !important;
-  }
-  .align-content-around {
-    align-content: space-around !important;
-  }
-  .align-content-stretch {
-    align-content: stretch !important;
-  }
-
-  .align-self-auto {
-    align-self: auto !important;
-  }
-  .align-self-start {
-    align-self: flex-start !important;
-  }
-  .align-self-end {
-    align-self: flex-end !important;
-  }
-  .align-self-center {
-    align-self: center !important;
-  }
-  .align-self-baseline {
-    align-self: baseline !important;
-  }
-  .align-self-stretch {
-    align-self: stretch !important;
-  }
-}
-
-@include flex-style();
-
-@mixin gap() {
-  @for $index from 0 through 32 {
-    .gap-#{$index} {
-      gap: 1px * $index !important;
-    }
-    .gap-x-#{$index} {
-      column-gap: 1px * $index !important;
-    }
-    .gap-y-#{$index} {
-      row-gap: 1px * $index !important;
-    }
-  }
-}
-
-@include gap();
-
-@mixin order-style() {
-  @for $index from 0 to 13 {
-    .order-#{$index} {
-      order: $index !important;
-    }
-  }
-
-  .order-first {
-    order: 0 !important;
-  }
-
-  .order-last {
-    order: 13 !important;
-  }
-}
-
-@include order-style();
-
-//float
-@mixin float-style() {
-  .float-left {
-    float: left !important;
-  }
-  .float-right {
-    float: right !important;
-  }
-  .float-none {
-    float: none !important;
-  }
-}
-
-@include float-style();
-
-//clearfix
-@mixin clearfix() {
-  &::after {
-    display: block;
-    clear: both;
-    content: "";
-  }
-}
-
-.clearfix {
-  @include clearfix();
-}
-
-
-// border
-
-.border {
-  border: 1px solid var(--border-light) !important;
-}
-
-.border-top {
-  border-top: 1px solid var(--border-light) !important;
-}
-
-.border-right {
-  border-right: 1px solid var(--border-light) !important;
-}
-
-.border-bottom {
-  border-bottom: 1px solid var(--border-light) !important;
-}
-
-.border-left {
-  border-left: 1px solid var(--border-light) !important;
-}
-
-.border-0 {
-  border: none !important;
-}
-
-.border-top-0 {
-  border-top: none !important;
-}
-
-.border-right-0 {
-  border-right: none !important;
-}
-
-.border-bottom-0 {
-  border-bottom: none !important;
-}
-
-.border-left-0 {
-  border-left: none !important;
-}
-
-@for $index from 0 through 11 {
-  .border-w-#{$index} {
-    border-width: 1px * $index !important;
-  }
-}
-
-// Border-radius
-
-.rounded {
-  border-radius: var(--border-radius) !important;
-}
-
-.rounded-top {
-  border-top-left-radius: var(--border-radius) !important;
-  border-top-right-radius: var(--border-radius) !important;
-}
-
-.rounded-right {
-  border-top-right-radius: var(--border-radius) !important;
-  border-bottom-right-radius: var(--border-radius) !important;
-}
-
-.rounded-bottom {
-  border-bottom-right-radius: var(--border-radius) !important;
-  border-bottom-left-radius: var(--border-radius) !important;
-}
-
-.rounded-left {
-  border-top-left-radius: var(--border-radius) !important;
-  border-bottom-left-radius: var(--border-radius) !important;
-}
-
-.rounded-sm {
-  border-radius: var(--border-radius-sm) !important;
-}
-
-.rounded-lg {
-  border-radius: var(--border-radius-lg) !important;
-}
-
-@for $index from 0 through 31 {
-  .rounded-#{$index} {
-    border-radius: 1px * $index !important;
-  }
-
-  .rounded-top-#{$index} {
-    border-top-left-radius: 1px * $index !important;
-    border-top-right-radius: 1px * $index !important;
-  }
-
-  .rounded-right-#{$index} {
-    border-top-right-radius: 1px * $index !important;
-    border-bottom-right-radius: 1px * $index !important;
-  }
-
-  .rounded-bottom-#{$index} {
-    border-bottom-right-radius: 1px * $index !important;
-    border-bottom-left-radius: 1px * $index !important;
-  }
-
-  .rounded-left-#{$index} {
-    border-top-left-radius: 1px * $index !important;
-    border-bottom-left-radius: 1px * $index !important;
-  }
-
-  .rounded-top-left-#{$index} {
-    border-top-left-radius: 1px * $index !important;
-  }
-
-  .rounded-top-right-#{$index} {
-    border-top-right-radius: 1px * $index !important;
-  }
-
-  .rounded-bottom-left-#{$index} {
-    border-bottom-left-radius: 1px * $index !important;
-  }
-
-  .rounded-bottom-right-#{$index} {
-    border-bottom-right-radius: 1px * $index !important;
-  }
-}
-
-.rounded-circle {
-  border-radius: var(--rounded-circle) !important;
-}
-
-.rounded-pill {
-  border-radius: var(--rounded-pill) !important;
-}
-
-
-// text attributes
-
-@mixin text-style() {
-  $text-aligns: left, right, center, justify;
-  @each $text-align in $text-aligns {
-    .text-#{$text-align} {
-      text-align: $text-align !important;
-    }
-  }
-
-  $text-spaces: normal, nowrap, pre-wrap;
-  @each $text-space in $text-spaces {
-    .text-#{$text-space} {
-      white-space: $text-space !important;
-    }
-  }
-
-  $text-decorations: none, underline;
-  @each $text-decoration in $text-decorations {
-    .text-decoration-#{$text-decoration} {
-      text-decoration: $text-decoration !important;
-    }
-  }
-}
-
-@include text-style();
-
-.text-break {
-  word-break: break-word !important;
-  word-wrap: break-word !important;
-}
-
-.text-ellipsis {
-  text-overflow: ellipsis !important;
-}
-
-.text-clip {
-  text-overflow: clip !important;
-}
-
-.text-truncate {
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-}
-
-.text-line-clamp {
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical !important;
-  white-space: normal !important;
-}
-
-
-// vertical-align
-$vertical-aligns: baseline, top, middle, bottom, text-bottom, text-top;
-@each $vertical-align in $vertical-aligns {
-  .align-#{$vertical-align} {
-    vertical-align: $vertical-align !important;
-  }
-}
-
-// 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: var(--red);
-  border-color: var(--red);
-  background-color: var(--red-bg);
-}
-
-.code-chip-black {
-  @extend .code-chip-base;
-  color: var(--body-text);
-  border-color: var(--body-text);
-  background-color: var(--body-bg);
-}
-
-.code-chip-gray {
-  @extend .code-chip-base;
-  color: var(--gray);
-  border-color: var(--gray-500);
-  background-color: var(--gray-bg);
-}
-
-.code-chip-blue {
-  @extend .code-chip-base;
-  color: var(--blue);
-  border-color: var(--blue);
-  background-color: var(--blue-bg);
-}
-
-.code-chip-green {
-  @extend .code-chip-base;
-  color: var(--green);
-  border-color: var(--green);
-  background-color: var(--green-bg);
-}
-
-.code-chip-purple {
-  @extend .code-chip-base;
-  color: var(--purple);
-  border-color: var(--purple);
-  background-color: var(--purple-bg);
-}
-
-.code-chip-orange {
-  @extend .code-chip-base;
-  color: var(--orange);
-  border-color: var(--orange);
-  background-color: var(--orange-bg);
-}
-
-.bg-transparent {
-  background-color: transparent !important;
-}
-
-// background-color, text-color, border-color
-@mixin color() {
-  .bg-transparent {
-    background-color: transparent !important;
-  }
-
-  @each $name, $color in $colors {
-    .bg-#{$name} {
-      background-color: #{$color} !important;
-    }
-
-    .text-#{$name} {
-      color: #{$color} !important;
-    }
-
-    .border-#{$name} {
-      border-color: #{$color} !important;
-    }
-  }
-}
-
-@include color();
-
-// Cursor
-.cursor-pointer {
-  cursor: pointer !important;
-}
-
-.cursor-default {
-  cursor: default !important;
-}
-
-.focus-outline-none:focus {
-  outline: none !important;
-}