ngwr 0.0.3 → 0.0.7

package/styles/components/icon.scss

@@ -1,32 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$icon-prefix: #{$prefix}-icon;
-
-.#{$icon-prefix} {
-  display: inline-block;
-  color: inherit;
-  font-style: normal;
-  line-height: 0;
-  text-align: center;
-  text-transform: none;
-  vertical-align: -0.125rem;
-
-  box-sizing: content-box !important;
-
-  contain: strict;
-
-  fill: currentColor;
-  width: 1.5rem;
-  height: 1.5rem;
-
-  * {
-    line-height: 1;
-  }
-
-  svg {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-  }
-}

package/styles/components/input.scss

@@ -1,43 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$input-prefix: #{$prefix}-input;
-
-.#{$input-prefix} {
-  display: inline-flex;
-  appearance: none;
-
-  background: $color-white;
-  box-shadow: inset 0 0 0 1px $color-light;
-  border: none;
-  border-radius: $input-border-radius;
-
-  margin: 0;
-  padding: $input-padding-y $input-padding-x;
-
-  color: $color-dark;
-  font-size: $input-font-size;
-  font-weight: $input-font-weight;
-  resize: none;
-  font-family: inherit;
-
-  transition: $transition-primary;
-  width: 100%;
-
-  &::placeholder {
-
-  }
-
-  &:active,
-  &:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 1px rgba($color-primary, 0.375), 0 0 0 2px rgba($color-primary, 0.05);
-  }
-
-  &disabled,
-  &--disabled {
-    color: var(--color-medium);
-    background-color: rgba(var(--color-light-rgb), 0.5);
-    cursor: not-allowed;
-  }
-}

package/styles/components/password-input.scss

@@ -1,31 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$password-input-prefix: #{$prefix}-password-input;
-
-.#{$password-input-prefix} {
-  display: flex;
-  position: relative;
-
-  transition: $transition-primary;
-  width: 100%;
-
-  & > .wr-input {
-    padding-right: $input-padding-y + 1.5rem;
-  }
-
-  &-icon {
-    position: absolute;
-    right: $input-padding-y;
-    top: 50%;
-    transform: translateY(-50%);
-    height: 1.25rem;
-    width: 1.25rem;
-    color: $color-medium;
-
-    &:hover {
-      cursor: pointer;
-      color: $color-primary;
-    }
-  }
-}

package/styles/components/skeleton.scss

@@ -1,58 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-@keyframes shimmer {
-  0% { background-position: -400px 0;}
-  100% { background-position: 400px 0;}
-}
-
-
-$skeleton-prefix: #{$prefix}-skeleton;
-
-.#{$skeleton-prefix} {
-  --skeleton-style: var(--color-dark);
-
-  display: block;
-
-  width: 100%;
-  height: inherit;
-
-  margin-top: 4px;
-  margin-bottom: 4px;
-
-  background: rgba(var(--skeleton-style), 0.25);
-  border-radius: $border-radius-base;
-
-  line-height: 10px;
-
-  user-select: none;
-  pointer-events: none;
-
-  position: relative;
-  overflow: hidden;
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-        to right,
-        rgba(var(--skeleton-style), 0.065) 8%,
-        rgba(var(--skeleton-style), 0.135) 18%,
-        rgba(var(--skeleton-style), 0.065) 33%
-    );
-    background-size: 800px 104px;
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-    animation-iteration-count: infinite;
-    animation-name: shimmer;
-    animation-timing-function: linear;
-  }
-
-  & span {
-    display: inline-block;
-  }
-}

package/styles/components/spinner.scss

@@ -1,44 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$spinner-prefix: #{$prefix}-spin;
-
-.#{$spinner-prefix} {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    width: 1em;
-    height: 1em;
-
-    animation: rotate 2s linear infinite;
-
-    .path {
-      stroke: currentColor;
-      animation: dash 1.5s ease-in-out infinite;
-    }
-  }
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}

package/styles/components/tag.scss

@@ -1,70 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$tag-prefix: #{$prefix}-tag;
-
-.#{$tag-prefix} {
-  display: inline-block;
-  height: auto;
-
-  white-space: nowrap;
-
-  font-family: $font-family;
-  font-size: 0.75rem;
-  font-weight: 600;
-
-  line-height: 1rem;
-  vertical-align: middle;
-
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-
-  margin-right: 0.25rem;
-
-  user-select: none;
-  transition: $transition-primary;
-
-  pointer-events: none;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &--hoverable {
-    pointer-events: all;
-  }
-
-  &--round {
-    border-radius: $btn-round-border-radius;
-  }
-
-  @each $color, $value in $theme-colors {
-    &.#{$tag-prefix}-#{$color} {
-      @include tag-colors-generate($value);
-    }
-
-    &.#{$tag-prefix}-#{$color} {
-      &.#{$tag-prefix}--outline {
-        @include tag-outline-colors-generate($value);
-      }
-    }
-
-    &.#{$tag-prefix}-#{$color} {
-      &.#{$tag-prefix}--transparent {
-        @include tag-transparent-colors-generate($value);
-      }
-    }
-  }
-
-  & > wr-icon {
-    width: 0.75rem;
-    height: 0.75rem;
-    margin-right: 0.125rem;
-  }
-
-  & > wr-spin {
-    width: 0.75rem;
-    height: 0.75rem;
-    margin-right: 0.125rem;
-  }
-}

package/styles/components/tooltip.scss

@@ -1,60 +0,0 @@
-@import '../vars';
-@import '../mixins';
-
-$tooltip-prefix: #{$prefix}-tooltip;
-
-.#{$tooltip-prefix} {
-  display: block;
-
-  font-family: $font-family;
-  font-size: 0.75rem;
-  font-weight: 400;
-
-  line-height: 1.2;
-
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-
-  margin-bottom: 0.5rem;
-
-  color: $color-white;
-  background: $color-dark;
-
-  transition: $transition-primary;
-
-  position: relative;
-
-  &:after {
-    content: '';
-
-    position: absolute;
-    bottom: -0.25rem;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    width: 0;
-    height: 0;
-    border-left: 0.25rem solid transparent;
-    border-right: 0.25rem solid transparent;
-
-    border-top: 0.25rem solid $color-dark;
-  }
-
-  &__wrapper {
-    cursor: pointer;
-  }
-
-  opacity: 1;
-  animation: fade-in 0.125s linear forwards;
-
-  @keyframes fade-in {
-    0% {
-      transform: translateY(0.5rem);
-      opacity: 0
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-}

package/styles/functions.scss

@@ -1,184 +0,0 @@
-@function to-rgb($value) {
-  @return red($value), green($value), blue($value);
-}
-
-@function map-loop($map, $func, $args...) {
-  $_map: ();
-
-  @each $key, $value in $map {
-    // allow to pass the $key and $value of the map as an function argument
-    $_args: ();
-    @each $arg in $args {
-      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
-    }
-
-    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
-  }
-
-  @return $_map;
-}
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
-
-@function color-contrast($background, $color-contrast-dark: $color-dark, $color-contrast-light: $color-white, $min-contrast-ratio: 4.5) {
-  $foregrounds: $color-contrast-light, $color-contrast-dark, $color-white, $color-black;
-  $max-ratio: 0;
-  $max-ratio-color: null;
-
-  @each $color in $foregrounds {
-    $contrast-ratio: contrast-ratio($background, $color);
-    @if $contrast-ratio > $min-contrast-ratio {
-      @return $color;
-    } @else if $contrast-ratio > $max-ratio {
-      $max-ratio: $contrast-ratio;
-      $max-ratio-color: $color;
-    }
-  }
-
-  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
-
-  @return $max-ratio-color;
-}
-
-@function contrast-ratio($background, $foreground: $color-light) {
-  $l1: luminance($background);
-  $l2: luminance(opaque($background, $foreground));
-
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
-}
-@function luminance($color) {
-  $rgb: (
-    "r": red($color),
-    "g": green($color),
-    "b": blue($color)
-  );
-
-  @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
-    $rgb: map-merge($rgb, ($name: $value));
-  }
-
-  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
-}
-
-// Return opaque color
-// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
-@function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
-}
-
-@function tint-color($color, $weight) {
-  @return mix(white, $color, $weight);
-}
-
-// Shade a color: mix a color with black
-@function shade-color($color, $weight) {
-  @return mix(black, $color, $weight);
-}
-
-// Shade the color if the weight is positive, else tint it
-@function shift-color($color, $weight) {
-  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
-}
-// scss-docs-end color-functions
-
-// Return valid calc
-@function add($value1, $value2, $return-calc: true) {
-  @if $value1 == null {
-    @return $value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 + $value2;
-  }
-
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
-}
-
-@function subtract($value1, $value2, $return-calc: true) {
-  @if $value1 == null and $value2 == null {
-    @return null;
-  }
-
-  @if $value1 == null {
-    @return -$value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 - $value2;
-  }
-
-  @if type-of($value2) != number {
-    $value2: unquote("(") + $value2 + unquote(")");
-  }
-
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
-}
-
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-  }
-  $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
-  );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
-  }
-  @return $result;
-}
-
-@function valid-radius($radius) {
-  $return: ();
-  @each $value in $radius {
-    @if type-of($value) == number {
-      $return: append($return, max($value, 0));
-    } @else {
-      $return: append($return, $value);
-    }
-  }
-  @return $return;
-}
-
-// scss-docs-start border-radius-mixins
-@mixin border-radius($radius: $border-radius-base, $fallback-border-radius: false) {
-  border-radius: valid-radius($radius);
-}
-
-

package/styles/grid.scss

@@ -1,177 +0,0 @@
-$breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px,
-  xga: 1600px,
-  fhd: 1920px,
-  rt: 2560px
-);
-
-$displays: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px,
-  xga: 1530px,
-  fhd: 1830px,
-  rt: 2470px
-);
-
-$columns: 12 !default;
-$gutter: 1.5rem !default;
-$container-padding-x: $gutter * .5 !default;
-
-@function breakpoint-min($name) {
-  $min: map-get($breakpoints, $name);
-  @return if($min != 0, $min, null);
-}
-
-@function breakpoint-infix($name) {
-  @return if(breakpoint-min($name) == null, "", "-#{$name}");
-}
-
-@mixin media-breakpoint-up($name) {
-  $min: breakpoint-min($name);
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-.container,
-.container-fluid {
-  width: 100%;
-  padding-right: $container-padding-x;
-  padding-left: $container-padding-x;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-@each $breakpoint, $container-max-width in $displays {
-  .container-#{$breakpoint} {
-    @extend .container-fluid;
-  }
-
-  @include media-breakpoint-up($breakpoint) {
-    %responsive-container-#{$breakpoint} {
-      max-width: $container-max-width;
-    }
-
-    $extend-breakpoint: true;
-
-    @each $name, $width in $breakpoints {
-      @if ($extend-breakpoint) {
-        .container#{breakpoint-infix($name)} {
-          @extend %responsive-container-#{$breakpoint};
-        }
-
-        @if ($breakpoint == $name) {
-          $extend-breakpoint: false;
-        }
-      }
-    }
-  }
-}
-
-@mixin make-row() {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: calc(-.5 * #{$gutter});
-  margin-left: calc(-.5 * #{$gutter});
-}
-
-.row {
-  @include make-row();
-}
-
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error 'Cannot divide by 0';
-  }
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-  }
-  $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
-  );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
-  }
-  @return $result;
-}
-
-@mixin make-col($size) {
-  box-sizing: border-box;
-  max-width: 100%;
-  padding-right: calc(#{$gutter} * .5);
-  padding-left: calc(#{$gutter} * .5);
-  flex: 0 0 auto;
-  width: percentage(divide($size, $columns));
-}
-
-@mixin row-cols($count) {
-  > * {
-    flex: 0 0 auto;
-    width: divide(100%, $count);
-  }
-}
-
-.col {
-  box-sizing: border-box;
-  max-width: 100%;
-  padding-right: calc(#{$gutter} * .5);
-  padding-left: calc(#{$gutter} * .5);
-  flex: 0 0 auto;
-}
-
-@each $breakpoint in map-keys($breakpoints) {
-  $infix: breakpoint-infix($breakpoint);
-
-  @include media-breakpoint-up($breakpoint) {
-    .col#{$infix} {
-      flex: 1 0 0;
-    }
-
-    @if $columns > 0 {
-      @for $i from 1 through $columns {
-        .col#{$infix}-#{$i} {
-          @include make-col($i);
-        }
-      }
-    }
-  }
-}
-