@vixcom/ui 1.1.0 → 1.3.0

package/styles/_mixins.scss

@@ -1,309 +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) {
-    // 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;
-    }
-  }
-}