@vixcom/ui 1.1.0 → 1.3.0

package/{styles → src/styles}/animations.scss

@@ -1,191 +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);
-  }
+.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);
+  }
 }

package/{styles → src/styles}/colors.scss

@@ -1,117 +1,118 @@
-@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 $app-colors-mapped {
-  // Texts
-  @include mapped-color-variant('.text-#{$k}', $k, $v);
-  @include mapped-neon-color-variant('.text-neon-#{$k}', $k, $v);
-  // Background
-  @include mapped-bg-color-variant('.bg-#{$k}', $k, $v);
-  @include mapped-g-color-variant('.bg-g-#{$k}', $k, $v);
-  @include mapped-tabs-variant('.tabs-#{$k}', $k, $v);
-  @include mapped-alert-variant('.alert-#{$k}', $k, $v);
-  @include mapped-outline-variant('.bg-outline-#{$k}', $k, $v);
-  // Buttons
-  @include mapped-bg-color-variant('.btn-#{$k}', $k, $v);
-  @include mapped-g-color-variant('.btn-g-#{$k}', $k, $v);
-  @include mapped-outline-variant('.btn-outline-#{$k}', $k, $v);
-  // Badges
-  @include mapped-bg-color-variant('.badge-#{$k}', $k, $v);
-  @include mapped-outline-variant('.badge-outline-#{$k}', $k, $v);
-
-  .border-#{$k} {
-    border-color: map-get($v, 'bg')
-  }
-}
-
-@each $v in (0, 25, 50, 75, 100) {
-  .opacity-#{$v} {
-    opacity: $v/100;
-  }
-}
-
-button,
-input {
-
-  &.focus,
-  &:focus-within,
-  &:focus {
-    outline: none;
-    box-shadow: none !important
-  }
-}
-
-.bg-transparent,
-.btn-transparent,
-.tabs-transparent,
-.alert-transparent {
-  border: none;
-  background-color: transparent !important;
-  color: currentColor !important;
-}
-
-.bg-current,
-.btn-current,
-.tabs-current,
-.alert-current {
-  border: none;
-  background-color: currentColor;
-  // color: currentColor !important;
-}
-
-.inactive {
-  color: #BCBCCB
-}
-
-
-.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;
-}
-
-input,
-input::placeholder,
-input::-webkit-input-placeholder {
-  color: currentColor !important
-}
-
-.text-unset,
-.text-color-unset {
-  color: unset
-}
-
-.text-current {
-  color: currentColor
-}
+@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 $app-colors-mapped {
+  // Texts
+  @include mapped-color-variant('.text-#{$k}', $k, $v);
+  @include mapped-neon-color-variant('.text-neon-#{$k}', $k, $v);
+  // Background
+  @include mapped-bg-color-variant('.bg-#{$k}', $k, $v);
+  @include mapped-g-color-variant('.bg-g-#{$k}', $k, $v);
+  @include mapped-tabs-variant('.tabs-#{$k}', $k, $v);
+  @include mapped-alert-variant('.alert-#{$k}', $k, $v);
+  @include mapped-outline-variant('.bg-outline-#{$k}', $k, $v);
+  // Buttons
+  @include mapped-bg-color-variant('.btn-#{$k}', $k, $v);
+  @include mapped-g-color-variant('.btn-g-#{$k}', $k, $v);
+  @include mapped-outline-variant('.btn-outline-#{$k}', $k, $v);
+  // Badges
+  @include mapped-bg-color-variant('.badge-#{$k}', $k, $v);
+  @include mapped-outline-variant('.badge-outline-#{$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;
+}
+
+.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;
+}
+
+input,
+input::placeholder,
+input::-webkit-input-placeholder {
+  color: currentColor;
+}
+
+.text-unset,
+.text-color-unset {
+  color: unset;
+}
+
+.text-current {
+  color: currentColor;
+}