ngx-sfc-common 0.0.0-watch

package/styles/_mixins-delimeter.scss

@@ -0,0 +1,21 @@
+@mixin delimeter-color($direction, $slice, $value-common, $value-dark) {
+  @include theme-value(
+    border-image,
+    linear-gradient(to $direction, $value-common) $slice,
+    linear-gradient(to $direction, $value-dark) $slice
+  );
+}
+
+@mixin delimeter-same-as-default() {
+  ::ng-deep sfc-delimeter {
+    &.horizontal {
+      &::before {
+        @include delimeter-color(right, 100% 1, $delimeter-common-color, $delimeter-common-color);
+      }
+
+      &::after {
+        @include delimeter-color(left, 100% 1, $delimeter-common-color, $delimeter-common-color);
+      }
+    }
+  }
+}

package/styles/_mixins-scroll.scss

@@ -0,0 +1,38 @@
+@mixin scroll($selector: "::ng-deep") {
+  #{$selector} ::-webkit-scrollbar {
+    @include square-size(0.375em);
+  }
+
+  #{$selector} ::-webkit-scrollbar-track {
+    border-radius: 0.625em;
+    background: $color-4;
+  }
+
+  #{$selector} ::-webkit-scrollbar-thumb {
+    border-radius: 0.625em;
+    background: rgb(0 0 0 / 20%);
+  }
+
+  #{$selector} ::-webkit-scrollbar-thumb:hover {
+    background: rgb(0 0 0 / 40%);
+  }
+
+  #{$selector} ::-webkit-scrollbar-thumb:active {
+    background: rgb(0 0 0 / 60%);
+  }
+}
+
+@mixin scroll-round-bordered($selector: "::ng-deep") {
+  #{$selector} ::-webkit-scrollbar {
+    width: 1em;
+  }
+
+  #{$selector} ::-webkit-scrollbar-thumb {
+    border: 0.35em solid rgb(0 0 0 / 0%);
+    background-clip: padding-box;
+  }
+
+  #{$selector} ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}

package/styles/_mixins.scss

@@ -0,0 +1,46 @@
+@mixin square-size($value, $multiplier: 1) {
+  width: $value * $multiplier;
+  height: $value * $multiplier;
+}
+
+@mixin theme-value($property, $value-common, $value-dark: null, $selector: "&") {
+  @if not $value-dark {
+    $value-dark: $value-common;
+  }
+
+  #{$selector},
+  :host-context(.sfc-default-theme) #{$selector} {
+    #{$property}: $value-common;
+  }
+  :host-context(.sfc-dark-theme) #{$selector} {
+    #{$property}: $value-dark;
+  }
+}
+
+@mixin visibility($show) {
+  @if $show {
+    visibility: visible;
+    opacity: 1;
+  } @else {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+@mixin center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin center-wrap() {
+  @include center;
+
+  flex-wrap: wrap;
+}
+
+@mixin not-first-not-last {
+  &:not(:first-child, :last-child) {
+    @content;
+  }
+}

package/styles/_variables.scss

@@ -0,0 +1,12 @@
+@import "./themes/default";
+@import "./themes/dark";
+@import "./themes/yellow";
+@import "./colors";
+
+$transition-duration-default: 0.5s;
+$transition-timing-function-default: ease;
+$modal-border-radius: 3px;
+$delimeter-common-color: rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 30%) 47%, rgb(0 0 0 / 30%) 53%, rgb(0 0 0 / 30%) 100%;
+$delimeter-dark-color: rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 40%) 47%, rgb(255 255 255 / 40%) 53%,
+  rgb(255 255 255 / 40%) 100%;
+$font-family-default: arial, helvetica, sans-serif;

package/styles/themes/_dark.scss

@@ -0,0 +1,17 @@
+// default
+$color-dark: #ccd1d9 !default;
+$color-disabled-dark: #656d78 !default;
+$background-gradient-dark: linear-gradient(
+  to right,
+  rgb(255 255 255 / 0%) 0%,
+  rgb(255 255 255 / 40%) 17%,
+  rgb(255 255 255 / 40%) 83%,
+  rgb(255 255 255 / 0%) 100%
+) !default;
+$background-gradient-vertical-dark: linear-gradient(
+  to bottom,
+  rgb(255 255 255 / 0%) 0%,
+  rgb(255 255 255 / 40%) 17%,
+  rgb(255 255 255 / 40%) 83%,
+  rgb(255 255 255 / 0%) 100%
+) !default;

package/styles/themes/_default.scss

@@ -0,0 +1,18 @@
+// default
+$color-default: #545e61 !default;
+$color-hover-default: #2bbbad !default;
+$color-disabled-default: #bdbdbd !default;
+$background-gradient-default: linear-gradient(
+  to right,
+  rgb(0 0 0 / 0%) 0%,
+  rgb(0 0 0 / 30%) 17%,
+  rgb(0 0 0 / 30%) 83%,
+  rgb(0 0 0 / 0%) 100%
+) !default;
+$background-gradient-vertical-default: linear-gradient(
+  to bottom,
+  rgb(0 0 0 / 0%) 0%,
+  rgb(0 0 0 / 30%) 17%,
+  rgb(0 0 0 / 30%) 83%,
+  rgb(0 0 0 / 0%) 100%
+) !default;

package/styles/themes/_yellow.scss

@@ -0,0 +1,3 @@
+$color-default: #545e61;
+$color-hover-default: #ffce54;
+$color-dark: #fff;