@vixcom/ui 1.7.1 → 1.7.3

package/src/styles/_mixins.scss

@@ -1,402 +0,0 @@
-// /* All color definition for buttons, inputs, filter-effects */
-@use 'sass:selector';
-
-@mixin unify-selector($a, $b) {
-  @at-root #{selector.unify($a, $b)} {
-    @content;
-  }
-}
-
-@mixin append-selector($a, $b) {
-  @at-root #{selector.append($a, $b)} {
-    @content;
-  }
-}
-
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin absolute-content {
-  &:not(img::before, img::after) {
-    // HACK: Safari Fix.
-    content: '';
-  }
-
-  content: '';
-  @include flex-center;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  border-radius: inherit;
-  top: 0;
-  left: 0;
-  /* z-index: -1; */
-}
-
-@mixin before-content {
-  & {
-    position: relative;
-  }
-
-  & > * {
-    /* position: relative; */
-    /* z-index: 1; */
-  }
-
-  &::before {
-    @include absolute-content();
-  }
-}
-
-@mixin after-content {
-  & {
-    position: relative;
-  }
-
-  & > * {
-    /* position: relative; */
-    /* z-index: 1; */
-  }
-
-  &::after {
-    @include absolute-content();
-  }
-}
-
-// @mixin check-child-state($child) {
-//   @at-root #{selector.unify($child, &)} {
-//     @content;
-//   }
-// }
-
-$default: #5b5b5b !default;
-$accent: #bfbfbf !default;
-$primary: #34a853 !default;
-$secondary: #5c2b6d !default;
-$white: #ffffff !default;
-$light: #f8f9fa !default;
-$black: #000000 !default;
-$dark: #343a40 !default;
-$green: #1d5c2e !default;
-$orange: #f58220 !default;
-$purple: #561843 !default;
-$red: #c54646 !default;
-$blue: #0365a3 !default;
-$yellow: #c4c400 !default;
-$gold: #ffd700 !default;
-$silver: #bfbfbf !default;
-$pink: #ed028c !default;
-$cyan: #16f1d9 !default;
-$lemon: #62ffb1 !default;
-$success: #24b624 !default;
-$warn: #ffa500 !default;
-$error: #dc3545 !default;
-$info: #17a2b8 !default;
-$muted: #7d7d7d !default;
-$background-color: #ffffff !default;
-$font-size: 0.75rem !default;
-
-$colors-mapped: () !default;
-
-$colors-mapped: map-merge(
-  (
-    // ===
-    'default':
-      (
-        bg: $default,
-        c: $white,
-      ),
-    'accent': (
-      bg: $accent,
-      c: darken($accent, 45%),
-    ),
-    'primary': (
-      bg: $primary,
-      c: $white,
-    ),
-    'secondary': (
-      bg: $secondary,
-      c: $white,
-    ),
-    'white': (
-      bg: $white,
-      c: $default,
-    ),
-    'light': (
-      bg: $light,
-      c: $dark,
-    ),
-    'black': (
-      bg: $black,
-      c: $white,
-    ),
-    'dark': (
-      bg: $dark,
-      c: $light,
-    ),
-    'silver': (
-      bg: $silver,
-      c: $white,
-    ),
-    'gold': (
-      bg: $gold,
-      c: $white,
-    ),
-    'info': (
-      bg: $info,
-      c: $white,
-    ),
-    'error': (
-      bg: $error,
-      c: $white,
-    ),
-    // 'failed': (bg: $error, c: $white),
-    // 'danger': (bg: $error, c: $white),
-    'success':
-      (
-        bg: $success,
-        c: $white,
-      ),
-    // 'successful': (bg: $success, c: $white),
-    'warn':
-      (
-        bg: $warn,
-        c: $black,
-      ),
-    // 'warning': (bg: $warn, c: $black),
-    // 'pending': (bg: $warn, c: $black),
-    'red':
-      (
-        bg: $red,
-        c: $white,
-      ),
-    'orange': (
-      bg: $orange,
-      c: $black,
-    ),
-    'yellow': (
-      bg: $yellow,
-      c: $black,
-    ),
-    'green': (
-      bg: $green,
-      c: $white,
-    ),
-    'blue': (
-      bg: $blue,
-      c: $white,
-    ),
-    'cyan': (
-      bg: $cyan,
-      c: $white,
-    ),
-    'purple': (
-      bg: $purple,
-      c: $white,
-    ),
-    // 'pink': (bg: $pink, c: $white),
-    // 'lemon': (bg: $lemon, c: $white),
-    'muted':
-      (
-        bg: $muted,
-        c: $white,
-      ),
-    // 'color-1': (bg: $primary, c: $white),
-    // 'color-2': (bg: $secondary, c: $white),
-    // 'transparent': (bg: transparent, c: $default)
-    // ===
-  ),
-  $colors-mapped
-);
-
-// /* Functions and Mixins */
-
-@mixin bg-variant($selector, $k, $v) {
-  #{$selector} {
-    color: var(--#{$k}-c, map-get($v, 'c'));
-    background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
-    border-color: hsla(
-      var(--#{$k}-hs),
-      calc(var(--#{$k}-l) - 20%),
-      var(--#{$k}-a)
-    );
-
-    // a,
-    // &.link {
-    //   &,
-    //   &:hover {
-    //     color: var(--#{$k}-c, map-get($v, 'c'));
-    //   }
-    // }
-
-    &.is-blur {
-      background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.5);
-
-      &:hover {
-        background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.75);
-      }
-    }
-
-    // [class*=-#{$k}] {
-    //   --#{$k}-hs: var(--#{$k}-c-hs);
-    // }
-  }
-  #{selector.append('a,button,.link',$selector)} {
-    &:hover {
-      background-color: hsla(
-        var(--#{$k}-hs),
-        calc(var(--#{$k}-l) - 10%),
-        var(--#{$k}-a)
-      );
-      border-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
-      color: var(--#{$k}-c, map-get($v, 'c'));
-    }
-
-    &:active {
-      background-color: hsla(
-        var(--#{$k}-hs),
-        calc(var(--#{$k}-l) - 20%),
-        var(--#{$k}-a)
-      );
-    }
-  }
-}
-
-@mixin group-bg-variant($selector, $k, $v) {
-  #{$selector} {
-    // &:hover >.active {
-    //   background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.275);
-    // }
-
-    > * {
-      color: currentColor;
-
-      :not(.active) {
-        &:hover {
-          background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.075);
-        }
-      }
-
-      .active {
-        background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.125);
-        color: hsla(
-          var(--#{$k}-hs),
-          calc(var(--#{$k}-l) - 10%),
-          var(--#{$k}-a)
-        );
-      }
-    }
-
-    &.fill,
-    &.prefill {
-      > {
-        :hover {
-          background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.25);
-        }
-
-        .active {
-          background-color: hsla(
-            var(--#{$k}-hs),
-            var(--#{$k}-l),
-            var(--#{$k}-a)
-          );
-          color: var(--#{$k}-c, map-get($v, 'c'));
-        }
-      }
-    }
-
-    &.prefill {
-      > * {
-        background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.125);
-      }
-    }
-  }
-}
-
-@mixin neon-fg-variant($selector, $k, $v) {
-  #{$selector} {
-    /* color: var(--white); */
-    text-shadow: 0 0 20px var(--#{$k}, map-get($v, 'bg')), 0 0 10px var(--white);
-  }
-}
-
-@mixin fg-variant($selector, $k, $v) {
-  #{$selector} {
-    color: var(--#{$k}, map-get($v, 'bg'));
-  }
-
-  #{selector.append('a,button,.link',$selector)} {
-    &:hover {
-      color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 10%), var(--#{$k}-a));
-    }
-
-    &:active {
-      color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 20%), var(--#{$k}-a));
-    }
-  }
-}
-
-@mixin bg-gradient-variant($selector, $k, $v) {
-  #{$selector} {
-    background-image: linear-gradient(
-      var(--#{$k}, map-get($v, 'bg')),
-      hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 20%), var(--#{$k}-a))
-    );
-    color: var(--#{$k}-c, map-get($v, 'c'));
-    border: none;
-  }
-
-  #{selector.append('a,button,.link',$selector)} {
-    &:hover {
-      background-image: linear-gradient(
-        hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) + 20%), var(--#{$k}-a)),
-        var(--#{$k}, map-get($v, 'bg'))
-      );
-      color: var(--#{$k}-c, map-get($v, 'c'));
-    }
-
-    &:active {
-      background-image: linear-gradient(
-        hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 20%), var(--#{$k}-a)),
-        var(--#{$k}, map-get($v, 'bg'))
-      );
-    }
-  }
-}
-
-@mixin bg-outline-variant($selector, $k, $v) {
-  #{$selector} {
-    background-color: transparent;
-    color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
-    border: thin solid;
-    // border-color: currentColor;
-
-    &.is-blur {
-      background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 45%), 0.5);
-    }
-  }
-
-  #{selector.unify($selector,'a,button,.link')} {
-    &:hover {
-      background-color: hsla(
-        var(--#{$k}-hs),
-        calc(var(--#{$k}-l) - 10%),
-        var(--#{$k}-a)
-      );
-      color: var(--#{$k}-c, map-get($v, 'c'));
-    }
-
-    &.active,
-    &:active {
-      background-color: hsla(
-        var(--#{$k}-hs),
-        calc(var(--#{$k}-l) - 20%),
-        var(--#{$k}-a)
-      );
-      color: var(--#{$k}-c, map-get($v, 'c'));
-    }
-  }
-}

package/src/styles/animations.scss

@@ -1,190 +0,0 @@
-.loading {
-  overflow: hidden;
-}
-
-.loading::before,
-.loading::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  border-radius: inherit;
-}
-
-.loading::before {
-  content: '';
-  background-color: inherit;
-  /* opacity: 0.75; */
-  backdrop-filter: blur(5px);
-  animation: fade-out-half 5s linear infinite alternate;
-}
-
-.loading::after {
-  content: '\f110';
-  /* font-size: 200%; */
-  font-family: 'FontAwesome';
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 1;
-  background-color: unset;
-  animation: rotate-clockwise 0.25s linear infinite;
-}
-
-.loading-anim {
-  position: relative;
-  display: block;
-  text-align: center;
-  min-width: 100%;
-  opacity: 0.75;
-  font-size: 75%;
-
-  .animi {
-    width: 50%;
-    height: 50%;
-    object-fit: contain;
-  }
-
-  &.has-logo::after {
-    content: '';
-    background-image: url('/assets/img/icon.png');
-    background-size: contain;
-    background-clip: border-box;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .ani-logo,
-  &.has-logo::after {
-    position: absolute;
-    display: block;
-    object-fit: contain;
-    top: 50%;
-    left: 50%;
-    width: 25%;
-    height: 25%;
-    transform-origin: center;
-    transform: translate(-50%, -50%);
-    // transition: transform 1s linear 1s;
-    animation: fade-out-half 5s linear infinite alternate;
-  }
-}
-
-.list-loading {
-  width: 100%;
-  height: 5rem;
-}
-
-.loading-anim-list {
-  height: 5rem;
-  text-align: center;
-
-  img {
-    height: 100%;
-    width: 100%;
-  }
-}
-
-.drop-down {
-  animation: drop-down 1.2s linear;
-}
-
-.ind-x {
-  animation: x-ind-move 1.2s ease-out backwards infinite;
-}
-
-.spin {
-  animation: rotate-clockwise 1.2s linear infinite;
-}
-
-.pulse {
-  animation: rotate-clockwise 1.2s steps(6) infinite;
-}
-
-.rotate-clockwise {
-  animation: rotate-clockwise 1.2s linear;
-}
-
-.infinite {
-  animation-iteration-count: infinite;
-}
-
-@keyframes fade-out-half {
-  from {
-    opacity: 0.5;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes x-ind-move {
-  from {
-    transform: translateX(1rem);
-  }
-}
-
-@keyframes drop-down {
-  from {
-    transform: translateY(0);
-  }
-}
-
-@keyframes rotate-clockwise {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@-webkit-keyframes rotate-clockwise {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@keyframes zoom-in-logo {
-  from {
-    transform-origin: center;
-    transform: scale(0);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
-
-.page-loading {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: #ffffffb0;
-  z-index: 1;
-
-  &.show {
-    display: flex;
-  }
-}
-
-.show,
-.collapsed {
-  &[class*='collapse-icon'],
-  [class*='collapse-icon'] {
-    transform: rotateX(-0.5turn);
-  }
-}

package/src/styles/colors.scss

@@ -1,109 +0,0 @@
-@use 'sass:math';
-@import 'mixins';
-
-/**
-* HSL Darken = level - n; Lighten = level + n.
-** Darken Color = hsl(var(--{color}-hs), calc(var(--{color}-l) - n%))
-** Lighten Color = hsl(var(--{color}-hs), calc(var(--{color}-l) + n%))
-* {color}-hs = The Hue and Saturation level of the color.
-* {color}-l = Lightness level of the color.
-* {color}-a = Alpha level of the color.
-* {color}-c = The corresponding Text color of the color, if it is used as a background.
-*/
-
-@each $k, $v in $colors-mapped {
-  // Texts
-  @include fg-variant('.text-#{$k}', $k, $v);
-  @include neon-fg-variant('.text-neon-#{$k}', $k, $v);
-  // Background
-  @include bg-variant('.bg-#{$k}', $k, $v);
-  @include bg-gradient-variant('.bg-gradient-#{$k}', $k, $v);
-  @include bg-outline-variant('.bg-outline-#{$k}', $k, $v);
-  @include group-bg-variant('.tabs-#{$k}', $k, $v);
-  @include group-bg-variant('.dots-#{$k}', $k, $v);
-
-  .border-#{$k} {
-    border-color: map-get($v, 'bg');
-  }
-}
-
-@each $v in (0, 25, 50, 75, 100) {
-  .opacity-#{$v} {
-    opacity: math.div($v, 100);
-  }
-}
-
-button,
-input {
-  &.focus,
-  &:focus-within,
-  &:focus {
-    outline: none;
-    box-shadow: none;
-  }
-}
-
-.bg-transparent,
-.btn-transparent,
-.tabs-transparent,
-.alert-transparent {
-  border: none;
-  background-color: transparent;
-  color: currentColor;
-}
-
-.bg-current,
-.btn-current,
-.tabs-current,
-.alert-current {
-  border: none;
-  background-color: currentColor;
-}
-
-.bg-inherit {
-  background-color: inherit;
-}
-
-.inactive {
-  color: #bcbccb;
-}
-
-.silhouette {
-  filter: saturate(0%) brightness(500%);
-}
-
-.shadow- {
-  &1 {
-    &::before {
-      box-shadow: var(--black) 0 3px 9px -3px;
-    }
-  }
-}
-
-.shadow-inset {
-  &-1 {
-    &::before {
-      box-shadow: inset var(--black) 0 3px 9px -3px;
-    }
-  }
-}
-
-[class*='shadow-'] {
-  position: relative;
-  z-index: 1;
-
-  > * {
-    position: relative;
-  }
-
-  @include before-content;
-}
-
-.text-unset,
-.text-color-unset {
-  color: unset;
-}
-
-.text-current {
-  color: currentColor;
-}