ngwr 0.0.1

package/styles/components/_index.scss

@@ -0,0 +1,15 @@
+@import 'alert';
+@import 'button';
+@import 'card';
+@import 'divider';
+@import 'dropdown';
+@import 'extended-input';
+@import 'form';
+@import 'heading';
+@import 'icon';
+@import 'input';
+@import 'password-input';
+@import 'skeleton';
+@import 'spinner';
+@import 'tag';
+@import 'tooltip';

package/styles/components/alert.scss

@@ -0,0 +1,28 @@
+@import '../vars';
+@import '../mixins';
+
+$alert-prefix: #{$prefix}-alert;
+
+.#{$alert-prefix} {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  margin-bottom: 0.5rem;
+
+  word-wrap: break-word;
+  font-size: $font-size-base;
+  font-weight: $font-weight-base;
+  line-height: $line-height-base;
+
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+
+  user-select: none;
+
+  @each $color, $value in $theme-colors {
+    &.#{$alert-prefix}-#{$color} {
+      @include alert-colors-generate($value);
+    }
+  }
+}

package/styles/components/button.scss

@@ -0,0 +1,115 @@
+@import '../vars';
+@import '../mixins';
+
+$btn-prefix: #{$prefix}-btn;
+
+.#{$btn-prefix} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: auto;
+
+  padding: calc(#{$btn-padding-y} + 1px) $btn-padding-x;
+  border-radius: $btn-border-radius;
+
+  font-family: $font-family;
+  //line-height: $btn-line-height;
+  text-align: center;
+  vertical-align: middle;
+
+  cursor: pointer;
+  user-select: none;
+
+  position: relative;
+
+  transition: $transition-primary;
+
+  &__text {
+    font-size: $btn-font-size;
+    font-weight: $btn-font-weight;
+  }
+
+  &--block {
+    width: 100%;
+  }
+
+  &--rounded {
+    border-radius: $btn-round-border-radius;
+    padding: $btn-round-padding-y $btn-round-padding-x;
+  }
+
+  & > wr-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.375rem;
+  }
+
+  & > wr-spin {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--small {
+    padding: 0.25rem 0.5rem;
+
+    .#{$btn-prefix} {
+      &__text {
+        font-size: $btn-font-size / 1.25;
+      }
+    }
+
+    & > wr-icon {
+      width: 0.75rem;
+      height: 0.75rem;
+      margin-right: 0.25rem;
+    }
+  }
+
+  &--loading {
+    pointer-events: none;
+
+    .#{$btn-prefix} {
+      &__text {
+        opacity: 0;
+      }
+    }
+
+    & > wr-icon {
+      opacity: 0;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .#{$btn-prefix}-#{$color} {
+    @include button-variant($value);
+
+    &:disabled,
+    &.#{$btn-prefix}--disabled {
+      color: var(--color-medium);
+      background-color: var(--color-light);
+      box-shadow: none;
+      pointer-events: none;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .#{$btn-prefix}-#{$color} {
+    &.#{$btn-prefix}--outlined {
+      @include button-outline-variant($value);
+
+      &:disabled,
+      &.#{$btn-prefix}--disabled {
+        color: var(--color-medium);
+        background-color: transparent;
+        box-shadow: inset 0 0 0 1px var(--color-light);
+        pointer-events: none;
+      }
+    }
+  }
+}

package/styles/components/card.scss

@@ -0,0 +1,41 @@
+@import '../vars';
+@import '../mixins';
+
+$card-prefix: #{$prefix}-card;
+
+.#{$card-prefix} {
+  display: flex;
+  flex-direction: column;
+  align-content: baseline;
+  justify-content: center;
+
+  background: $color-white;
+  border-radius: 0.75rem;
+
+  padding: 1.5rem 1.25rem;
+  box-shadow: $shadow-1-down;
+
+  &--hoverable {
+    transition: $transition-base;
+
+    &:hover {
+      cursor: pointer;
+      box-shadow: $box-shadow-base;
+
+      .#{$card-prefix}__title {
+        color: $color-secondary;
+      }
+    }
+  }
+
+  &__title {
+    color: $color-dark;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1;
+
+    margin-bottom: 0.5rem;
+
+    transition: $transition-base;
+  }
+}

package/styles/components/divider.scss

@@ -0,0 +1,19 @@
+@import '../vars';
+@import '../mixins';
+
+$divider-prefix: #{$prefix}-divider;
+
+.#{$divider-prefix} {
+  display: block;
+
+  width: 100%;
+  height: 1px;
+
+  margin-top: 4px;
+  margin-bottom: 4px;
+
+  background: $color-light;
+
+  user-select: none;
+  pointer-events: none;
+}

package/styles/components/dropdown.scss

@@ -0,0 +1,128 @@
+@import '../vars';
+@import '../mixins';
+
+$dropdown-prefix: #{$prefix}-dropdown;
+
+.#{$dropdown-prefix} {
+  @include reset-component();
+
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  z-index: $zindex-dropdown;
+  display: block;
+
+  &::before {
+    position: absolute;
+    top: -$popover-distance + $popover-arrow-width;
+    right: 0;
+    bottom: -$popover-distance + $popover-arrow-width;
+    left: -7px;
+    z-index: -9999;
+    opacity: 0.0001;
+    content: ' ';
+  }
+
+  &-trigger {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &-wrap {
+    position: relative;
+  }
+
+  &-hidden,
+  &-menu-hidden,
+  &-menu-submenu-hidden {
+    display: none;
+  }
+
+  &-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    position: relative;
+    margin: 0;
+    padding: 1rem;
+    text-align: left;
+    list-style-type: none;
+    background-color: $dropdown-menu-bg;
+    background-clip: padding-box;
+    border-radius: $border-radius-base;
+    outline: none;
+    box-shadow: $box-shadow-base;
+
+    &-submenu-popup {
+      position: absolute;
+      z-index: $zindex-dropdown;
+      background: transparent;
+      box-shadow: none;
+      transform-origin: 0 0;
+
+      ul,
+      li {
+        list-style: none;
+      }
+
+      ul {
+        margin-right: 0.3em;
+        margin-left: 0.3em;
+      }
+    }
+
+    // ======================= Item Content =======================
+    &-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      color: $color-dark;
+      transition: all 0.15s linear;
+
+      &:hover {
+        color: $color-secondary;
+      }
+    }
+
+    &-item,
+    &-submenu-title {
+      clear: both;
+      font-weight: normal;
+      white-space: nowrap;
+      cursor: pointer;
+      margin: 0 0 1rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+    }
+  }
+
+  &.#{$dropdown-prefix}-slide-down-enter,
+  &.#{$dropdown-prefix}-slide-down-appear,
+  &.#{$dropdown-prefix}-slide-down-enter,
+  &.#{$dropdown-prefix}-slide-down-appear,
+  &.#{$dropdown-prefix}-slide-down-enter,
+  &.#{$dropdown-prefix}-slide-down-appear {
+    animation-name: antSlideUpIn;
+  }
+}
+
+.wr-dropdown-menu {
+  & > ul {
+    list-style: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.wr-dropdown {
+  top: 0;
+  left: 0;
+  position: relative;
+  width: 100%;
+  margin-top: 6px;
+  margin-bottom: 6px;
+}

package/styles/components/extended-input.scss

@@ -0,0 +1,64 @@
+@import '../vars';
+@import '../mixins';
+
+$extended-input-prefix: #{$prefix}-extended-input;
+
+.#{$extended-input-prefix} {
+  display: flex;
+  align-items: center;
+
+  overflow: hidden;
+
+  transition: $transition-primary;
+  width: 100%;
+
+  &--has-suffix {
+    & > .wr-input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  &--has-prefix {
+    & > .wr-input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &-suffix,
+  &-prefix {
+    display: inline-flex;
+    align-items: center;
+    background: rgba($color-light, 0.5);
+    border: 1px solid $color-light;
+
+    padding-left: $input-padding-y;
+    padding-right: $input-padding-y;
+
+    height: 100%;
+    max-width: 50%;
+
+    user-select: none;
+    pointer-events: none;
+
+    &__text {
+      color: $color-medium;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &-suffix {
+    border-top-right-radius: $input-border-radius;
+    border-bottom-right-radius: $input-border-radius;
+    border-left: 0;
+  }
+
+  &-prefix {
+    border-top-left-radius: $input-border-radius;
+    border-bottom-left-radius: $input-border-radius;
+    border-right: 0;
+  }
+}

package/styles/components/form.scss

@@ -0,0 +1,85 @@
+@import '../vars';
+@import '../mixins';
+
+$form-prefix: #{$prefix}-form;
+$input-prefix: #{$prefix}-input;
+$password-input-prefix: #{$prefix}-password-input;
+$extended-input-prefix: #{$prefix}-extended-input;
+
+.#{$form-prefix} {
+  &-item {
+    @include column;
+    margin-bottom: 1rem;
+
+    & > * {
+      width: 100%;
+    }
+
+    & > label {
+      display: inline-flex;
+      align-items: center;
+      color: $color-medium;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1;
+      margin-bottom: 0.5rem;
+      transition: $transition-base;
+
+      & > nz-switch {
+        margin-left: 0.5rem;
+      }
+
+      & > nz-radio-group {
+        margin-left: 0.5rem;
+
+        .ant-radio-button-wrapper {
+          font-size: 0.625rem;
+          height: 0.825rem !important;
+          line-height: calc(1rem - 4px) !important;
+
+          &:first-child {
+            border-top-left-radius: 50rem;
+            border-bottom-left-radius: 50rem;
+          }
+          &:last-child {
+            border-top-right-radius: 50rem;
+            border-bottom-right-radius: 50rem;
+          }
+        }
+      }
+    }
+
+    &--has-error {
+      & > label {
+        color: $color-danger;
+      }
+      & .#{$input-prefix} {
+        box-shadow: inset 0 0 0 1px $color-danger;
+      }
+      & .#{$extended-input-prefix} {
+        &-suffix,
+        &-prefix {
+          border-color: $color-danger;
+          background: rgba($color-danger, 0.25);
+
+          &__text {
+            color: $color-danger;
+          }
+        }
+      }
+
+      & > nz-select {
+        .ant-select-selector {
+          box-shadow: inset 0 0 0 1px $color-danger;
+        }
+      }
+    }
+  }
+
+  &-error {
+    color: $color-danger;
+    font-size: 0.75rem;
+    opacity: 0.75;
+    margin-top: 0.25rem;
+  }
+}

package/styles/components/heading.scss

@@ -0,0 +1,25 @@
+@import '../vars';
+
+small {
+  font-size: 0.75rem;
+  color: inherit;
+  opacity: 0.75;
+}
+
+.h1,.h2,.h3,.h4,.h5,.h6 {
+  color: $heading-color;
+  font-family: $headings-font-family;
+  font-style: $headings-font-style;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+}
+
+@each $heading, $font-size in $heading-sizes {
+  .h#{$heading} {
+    font-size: $font-size;
+  }
+
+  h#{$heading} {
+    @extend .h#{$heading};
+  }
+}

package/styles/components/icon.scss

@@ -0,0 +1,32 @@
+@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

@@ -0,0 +1,43 @@
+@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

@@ -0,0 +1,31 @@
+@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

@@ -0,0 +1,58 @@
+@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;
+  }
+}