@vixcom/ui 1.0.0

package/styles/_mixins.scss

@@ -0,0 +1,309 @@
+// /* 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) {
+    // Safari Fix.
+    content: '';
+  }
+
+  content: '';
+  @include flex-center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  border-radius: inherit;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}
+
+@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: #FFDF00 !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;
+$border-color: #E4E4E4 !default;
+$card-shadow: 0 1px 30px -10px transparentize($black, 0.5) !default;
+$font-size: 0.75rem;
+
+$app-colors-mapped: () !default;
+
+$app-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)
+    // ===
+  ), $app-colors-mapped);
+
+// /* Functions and Mixins */
+
+@mixin mapped-bg-color-variant($selector, $k, $v) {
+  #{$selector} {
+    background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a)) !important;
+    color: var(--#{$k}-c, map-get($v, "c")) !important;
+    border-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 20%), var(--#{$k}-a));
+
+    &.is-blur {
+      background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.5) !important;
+
+      &:hover {
+        background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.75) !important;
+      }
+    }
+
+    // [class*=-#{$k}] {
+    //   --#{$k}-hs: var(--#{$k}-c-hs);
+    // }
+  }
+
+  a#{$selector},
+  #{$selector}.link,
+  button#{$selector} {
+    &:hover {
+      background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 10%), var(--#{$k}-a)) !important;
+      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)) !important;
+    }
+  }
+}
+
+@mixin mapped-tabs-variant($selector, $k, $v) {
+  #{$selector} {
+    // &:hover .tab.active {
+    //   background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.275);
+    // }
+
+    .tab {
+      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 {
+      .tab {
+        &: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 {
+      .tab {
+        background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.125);
+      }
+    }
+
+
+  }
+}
+
+@mixin mapped-neon-color-variant($selector, $k, $v) {
+  #{$selector} {
+    /* color: var(--white) !important; */
+    text-shadow: 0 0 20px var(--#{$k}, map-get($v, "bg")),
+    0 0 10px var(--white);
+  }
+}
+
+@mixin mapped-color-variant($selector, $k, $v) {
+  #{$selector} {
+    color: var(--#{$k}, map-get($v, "bg")) !important;
+  }
+
+  a#{$selector},
+  button#{$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 mapped-g-color-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))) !important;
+    color: var(--#{$k}-c, map-get($v, "c"));
+    border: none;
+  }
+
+  a#{$selector},
+  button#{$selector} {
+    &:hover {
+      background-image: linear-gradient(hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) + 20%), var(--#{$k}-a)), var(--#{$k}, map-get($v, "bg"))) !important;
+      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"))) !important;
+    }
+  }
+}
+
+@mixin mapped-alert-variant($selector, $k, $v) {
+  #{$selector} {
+    background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) + 45%), var(--#{$k}-a)) !important;
+    color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 45%), var(--#{$k}-a)) !important;
+    border-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a)) !important;
+
+    &.is-blur:not(:hover) {
+      background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) + 45%), 0.5) !important;
+    }
+  }
+}
+
+@mixin mapped-outline-variant($selector, $k, $v) {
+  #{$selector} {
+    background-color: transparent !important;
+    color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a)) !important;
+    border: thin solid;
+    // border-color: currentColor !important;
+
+    &.is-blur {
+      background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 45%), 0.5) !important;
+    }
+  }
+
+  a#{$selector},
+  #{$selector}.link,
+  button#{$selector},
+  #{$selector}:focus,
+  #{$selector}:focus-within {
+    &:hover {
+      background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 10%), var(--#{$k}-a)) !important;
+      color: var(--#{$k}-c, map-get($v, "c")) !important;
+    }
+
+    &.active,
+    &:active {
+      background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 20%), var(--#{$k}-a)) !important;
+      color: var(--#{$k}-c, map-get($v, "c")) !important;
+    }
+  }
+}

package/styles/animations.scss

@@ -0,0 +1,191 @@
+.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' !important;
+  /* font-size: 200%; */
+  font-family: 'FontAwesome';
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1 !important;
+  background-color: unset !important;
+  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);
+  }
+}