@evotor-dev/ui-kit 6.0.1

package/styles/icons.scss

@@ -0,0 +1,173 @@
+/* CUSTOM FONTS ICONS*/
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+.icon-add:before,
+.icon-add_balance:before,
+.icon-analytics:before,
+.icon-arrow-left:before,
+.icon-arrow-right:before,
+.icon-attention:before,
+.icon-cancel:before,
+.icon-cancel-round:before,
+.icon-card:before,
+.icon-cash:before,
+.icon-check:before,
+.icon-check-round:before,
+.icon-check-round-filled:before,
+.icon-checks:before,
+.icon-close:before,
+.icon-close-docs:before,
+.icon-close-round:before,
+.icon-close_docs:before,
+.icon-delete:before,
+.icon-delete-round-filled:before,
+.icon-discount:before,
+.icon-doc:before,
+.icon-down:before,
+.icon-edit:before,
+.icon-empty:before,
+.icon-facebook:before,
+.icon-file:before,
+.icon-history:before,
+.icon-in:before,
+.icon-info:before,
+.icon-instagram:before,
+.icon-left:before,
+.icon-list:before,
+.icon-love:before,
+.icon-magazine:before,
+.icon-mail:before,
+.icon-mastercard-securecode:before,
+.icon-minus-button:before,
+.icon-money:before,
+.icon-o-k:before,
+.icon-ok:before,
+.icon-oops:before,
+.icon-payment:before,
+.icon-payment-black:before,
+.icon-pdf:before,
+.icon-place:before,
+.icon-plus:before,
+.icon-plus-button:before,
+.icon-question:before,
+.icon-refound:before,
+.icon-right:before,
+.icon-safety:before,
+.icon-settings:before,
+.icon-sms:before,
+.icon-star:before,
+.icon-star-grey:before,
+.icon-stars:before,
+.icon-tech_spec_1:before,
+.icon-tech_spec_3:before,
+.icon-tech_spec_37:before,
+.icon-tech_spec_43:before,
+.icon-tech_spec_48:before,
+.icon-tech_spec_52:before,
+.icon-terminal:before,
+.icon-terminals:before,
+.icon-time:before,
+.icon-triangle:before,
+.icon-twitter:before,
+.icon-up:before,
+.icon-user:before,
+.icon-user-filled:before,
+.icon-v-k:before,
+.icon-vbv:before,
+.icon-wait:before,
+.icon-workers:before,
+.icon-youtube:before,
+.icon-zip:before,
+.icon-zoom:before {
+    display: inline-block;
+    font-weight: normal;
+    font-family: "fontcustom";
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-transform: none;
+    text-decoration: inherit;
+    text-rendering: optimizeLegibility;
+}
+
+.icon-add:before { content: "\f100"; }
+.icon-add_balance:before { content: "\f141"; }
+.icon-analytics:before { content: "\f101"; }
+.icon-arrow-left:before { content: "\f12e"; }
+.icon-arrow-right:before { content: "\f12f"; }
+.icon-attention:before { content: "\f102"; }
+.icon-cancel:before { content: "\f103"; }
+.icon-cancel-round:before { content: "\f126"; }
+.icon-card:before { content: "\f136"; }
+.icon-cash:before { content: "\f14a"; }
+
+.icon-check:before { content: "\f104"; }
+.icon-check-round:before { content: "\f124"; }
+.icon-check-round-filled:before { content: "\f144"; }
+.icon-checks:before { content: "\f13a"; }
+.icon-close:before { content: "\f105"; }
+.icon-close-docs:before { content: "\f106"; }
+.icon-close-round:before { content: "\f146"; }
+.icon-close_docs:before { content: "\f142"; }
+.icon-delete:before { content: "\f107"; }
+.icon-delete-round-filled:before { content: "\f145"; }
+.icon-discount:before { content: "\f108"; }
+.icon-doc:before { content: "\f109"; }
+.icon-down:before { content: "\f10a"; }
+.icon-edit:before { content: "\f10b"; }
+.icon-empty:before { content: "\f14f"; }
+.icon-facebook:before { content: "\f127"; }
+.icon-file:before { content: "\f10c"; }
+.icon-history:before { content: "\f148"; }
+.icon-in:before { content: "\f128"; }
+.icon-info:before { content: "\f10d"; }
+.icon-instagram:before { content: "\f129"; }
+.icon-left:before { content: "\f10e"; }
+.icon-list:before { content: "\f10f"; }
+.icon-love:before { content: "\f110"; }
+.icon-magazine:before { content: "\f13b"; }
+.icon-mail:before { content: "\f111"; }
+.icon-mastercard-securecode:before { content: "\f134"; }
+.icon-minus-button:before { content: "\f161"; }
+.icon-money:before { content: "\f112"; }
+.icon-o-k:before { content: "\f12a"; }
+.icon-ok:before { content: "\f113"; }
+.icon-oops:before { content: "\f13f"; }
+.icon-payment:before { content: "\f114"; }
+.icon-payment-black:before { content: "\f140"; }
+.icon-pdf:before { content: "\f150"; }
+.icon-place:before { content: "\f115"; }
+.icon-plus:before { content: "\f139"; }
+.icon-plus-button:before { content: "\f162"; }
+.icon-question:before { content: "\f116"; }
+.icon-refound:before { content: "\f138"; }
+.icon-right:before { content: "\f117"; }
+.icon-safety:before { content: "\f118"; }
+.icon-settings:before { content: "\f119"; }
+.icon-sms:before { content: "\f11a"; }
+.icon-star:before { content: "\f11b"; }
+.icon-star-grey:before { content: "\f125"; }
+.icon-stars:before { content: "\f11c"; }
+.icon-tech_spec_1:before { content: "\f130"; }
+.icon-tech_spec_3:before { content: "\f132"; }
+.icon-tech_spec_37:before { content: "\f13d"; }
+.icon-tech_spec_43:before { content: "\f13e"; }
+.icon-tech_spec_48:before { content: "\f14d"; }
+.icon-tech_spec_52:before { content: "\f14e"; }
+.icon-terminal:before { content: "\f11d"; }
+.icon-terminals:before { content: "\f13c"; }
+.icon-time:before { content: "\f11e"; }
+.icon-triangle:before { content: "\f14c"; }
+.icon-twitter:before { content: "\f12b"; }
+.icon-up:before { content: "\f11f"; }
+.icon-user:before { content: "\f120"; }
+.icon-user-filled:before { content: "\f14b"; }
+.icon-v-k:before { content: "\f12c"; }
+.icon-vbv:before { content: "\f135"; }
+.icon-wait:before { content: "\f151"; }
+.icon-workers:before { content: "\f121"; }
+.icon-youtube:before { content: "\f12d"; }
+.icon-zip:before { content: "\f152"; }
+.icon-zoom:before { content: "\f122"; }
+

package/styles/keyframes.scss

@@ -0,0 +1,37 @@
+$animation-speed: 1000ms;
+
+@keyframes evo-fx-blink {
+    50% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@mixin animation($delay: 0ms) {
+    animation: evo-fx-blink $animation-speed ease infinite $delay;
+}
+
+/* used for .skeleton__bone*/
+@keyframes gradient {
+    0% {
+        background-position: 0 50%;
+    }
+    50% {
+        background-position: 50vw 50%;
+    }
+    100% {
+        background-position: 100vw 50%;
+    }
+}

package/styles/main.scss

@@ -0,0 +1,19 @@
+@import 'reset.scss';
+@import 'icons.scss';
+@import 'variables.scss';
+@import 'mixins.scss';
+@import 'globals.scss';
+/*components*/
+@import './components/evo-grid.scss';
+@import './components/evo-alert.scss';
+@import './components/evo-button-loader.scss';
+@import './components/evo-button-wrapper.scss';
+@import './components/evo-card.scss';
+@import './components/evo-link.scss';
+@import './components/evo-list.scss';
+@import './components/evo-title.scss';
+@import './components/evo-icon.scss';
+@import './components/evo-table.scss';
+@import './components/evo-form.scss';
+@import './components/evo-dropdown.scss';
+@import './components/skeleton.scss';

package/styles/mixins.scss

@@ -0,0 +1,208 @@
+@import 'variables.scss';
+
+/* @include clearfix();*/
+@mixin clearfix() {
+    &:after {
+        content: '';
+        display: block;
+        clear: both;
+    }
+}
+
+/* @include clear-ul();*/
+@mixin clear-ul() {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* @include clear-btn();*/
+@mixin clear-btn() {
+    padding: 0;
+    overflow: visible;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    background: none;
+    border: 0;
+    -webkit-appearance: none;
+    user-select: none;
+
+    &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+    }
+}
+
+@mixin media-mobile {
+    @media (max-width: #{$media-tablet - 1}) {
+        @content;
+    }
+}
+
+/* media mixins - mobile first*/
+@mixin media-tablet {
+    @media (min-width: #{$media-tablet}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-s {
+    @media (min-width: #{$media-desktop-s}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-m {
+    @media (min-width: #{$media-desktop-m}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-l {
+    @media (min-width: #{$media-desktop-l}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-xl {
+    @media (min-width: #{$media-desktop-xl}) {
+        @content;
+    }
+}
+
+/*title mixins*/
+@mixin title {
+    color: #333F48;
+    font-weight: 700;
+    font-family: $font-secondary;
+}
+
+@mixin h1 {
+    font-size: 30px;
+    line-height: 38px;
+
+    @include media-desktop-s {
+        font-size: 36px;
+        line-height: 44px;
+    }
+}
+
+@mixin h2 {
+    font-size: 24px;
+    line-height: 32px;
+
+    @include media-desktop-s {
+        font-size: 30px;
+        line-height: 38px;
+    }
+}
+
+@mixin h3 {
+    font-size: 18px;
+    line-height: 26px;
+
+    @include media-desktop-s {
+        font-size: 24px;
+        line-height: 32px;
+    }
+}
+
+@mixin h4 {
+    font-size: 14px;
+    line-height: 22px;
+
+    @include media-desktop-s {
+        font-size: 18px;
+        line-height: 26px;
+    }
+}
+
+
+/**
+ * @deprecated
+ */
+@mixin input {
+    @include evo-input(normal, default);
+}
+
+/**
+ * size: normal | small
+ * theme: default | rounded
+ */
+@mixin evo-input($size: normal, $theme: default) {
+    --evo-input-height: 48px;
+    --evo-input-border-radius: 4px;
+
+    @if ($size == small) {
+        @if ($theme == default) {
+            --evo-input-height: 32px;
+        } @else if ($theme == rounded) {
+            --evo-input-height: 40px;
+        }
+    }
+
+    @if ($theme == rounded) {
+        --evo-input-border-radius: 256px;
+    }
+
+    display: flex;
+    align-items: center;
+    height: var(--evo-input-height);
+    color: $color-text;
+    font-weight: normal;
+    font-size: 16px;
+    font-family: $font;
+    white-space: nowrap;
+    background-color: $color-white;
+    border: 1px solid $color-disabled;
+    border-radius: var(--evo-input-border-radius);
+    outline: none;
+    transition: color .3s, box-shadow .3s, background .3s, border .3s;
+}
+
+@mixin evo-input-focused {
+    border: solid 1px $color-secondary-lighter;
+}
+
+@mixin evo-input-disabled {
+    color: $color-text-subscription;
+    background-color: $color-background-grey !important;
+    cursor: default;
+    pointer-events: none;
+}
+
+/**
+ * @deprecated
+ */
+@mixin evo-input-valid {
+}
+
+@mixin evo-input-invalid {
+    border-color: $color-error !important;
+}
+
+@mixin evo-control-states {
+    $self: &;
+
+    &_focused {
+        @include evo-input-focused;
+    }
+
+    &_disabled {
+        @include evo-input-disabled;
+    }
+
+    &_invalid {
+        @include evo-input-invalid;
+    }
+}
+
+@mixin hide-scroll {
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}