trm-tmpl 4.0.1 → 5.0.0

package/scss/mixins.scss

@@ -1,193 +1,193 @@
-@use "sass:string";
-@use './variables' as vars;
-
-@mixin setBgImage($url, $width, $height) {
-    @include setSizeImage($width,  $height);
-    background-image: $url;
-}
-
-@mixin setSizeImage($width, $height) {
-    background: transparent no-repeat 100% 100%;
-    background-size: contain;
-    width: $width;
-    height: $height;
-}
-
-@mixin flexCol($gap: 10px, $justify-content: flex-start, $align-items: flex-start) {
-    display: flex;
-    flex-direction: column;
-    gap: $gap;
-    justify-content: $justify-content;
-    align-items: $align-items;
-}
-
-@mixin flexRow($gap: 10px, $justify-content: flex-start, $align-items: center) {
-    display: flex;
-    flex-direction: row;
-    gap: $gap;
-    justify-content: $justify-content;
-    align-items: $align-items;
-}
-
-@mixin font($size: 15px, $line-h: 20px, $weight: 500, $color: black) {
-    font-weight: $weight;
-    font-size: $size;
-    line-height: $line-h;
-    color: $color;
-}
-
-@mixin ellipsis {
-    white-space: normal;
-    overflow: hidden;
-    max-width: 100%;
-    text-overflow: ellipsis;
-}
-
-@mixin skeleton() {
-    .loader, .skeleton-loader {
-        @content;
-    }
-}
-
-@mixin input() {
-    border: 1px solid var(--trm-input-border-color);
-    border-radius: 10px;
-    width: 100%;
-    box-sizing: border-box;
-
-    min-height: 46px;
-    padding: 12px 20px;
-    @include font(14px, 20px, 500);
-    @include tablet {
-        min-height: 50px;
-        padding: 13px 20px;
-        @include font(15px, 22px, 500);
-    }
-    &:hover {
-        border-color: var(--trm-input-border-color--hover);
-    }
-
-    &:focus, &:active {
-        box-shadow: 0 0 0 2px var(--trm-input-border-color--focus);
-        outline: none;
-    }
-    @content;
-}
-
-@mixin additional-flag-icon($country) {
-    .fi-#{$country} {
-        background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/flags/#{$country}.svg);
-    }
-}
-
-// Breakpoints
-
-$trm-bp-low-tablet-down: 481px;
-$trm-bp-tablet-down: 768px;
-$trm-bp-landscape-tablet-down: 900px;
-$trm-bp-desktop-down: 1281px;
-$trm-bp-large-desktop-down: 1921px;
-
-@mixin tablet-low() {
-    @media (min-width: $trm-bp-low-tablet-down) {
-        @content;
-    }
-}
-
-@mixin tablet() {
-    @media (min-width: $trm-bp-tablet-down) {
-        @content;
-    }
-}
-
-@mixin tablet-large() {
-    @media (min-width: $trm-bp-landscape-tablet-down) {
-        @content;
-    }
-}
-
-@mixin desktop() {
-    @media (min-width: $trm-bp-desktop-down) {
-        @content;
-    }
-}
-
-@mixin desktop-large() {
-    @media (min-width: $trm-bp-large-desktop-down) {
-        @content;
-    }
-}
-
-@mixin headerCard() {
-    &__info {
-        background: #F5F5F5;
-        border-radius: 16px;
-        padding: 20px 24px;
-        @include flexCol(10px);
-
-        &__name {
-            margin: 0;
-            @include font(16px, 20px, 500);
-        }
-
-        &__desc {
-            margin: 0;
-            @include font(15px, 22px, 400, var(--color-base-350));
-        }
-    }
-}
-
-
-$ps_name: advcash, alfabank, alipay, alipay_plus, applepay, argentina_bank, atf24, baloto, beeline, blik, boleto, brazil_bank, card, carga_virtual, cash, cashtocode, codi, comepay, cup, cup_bank, cup_p2p, deposit_express, direct_banking_europe, dotpay, ecopayz, eps, giropay, gmmoney, internal_gamemoney, googlepay, ideal, indonesia_bank, indonesia_bank_transfer, internal, jeton, jeton_voucher, kassa24, link, local_card_brazil, local_card_mexico, loterica, malaysia_bank, megafon, mexico_bank, momopay, moneta, mts, multibanco, neosurf, neteller, nupay, onecard, oxxo, pagoefectivo, pagoexpress, pagofacil, paypal, paysafecard, picpay, pix, philippines_bank, promptpay, promsviaz, przelewy24, qiwi, rapid, rapipago, redpagos, sberbank, sbp, sepa, servipag, skinify, skinpay, skinsback, skrill, sofort, spei, store_mexico, tele2, thailand_bank, thailand_bank_transfer, tinkoff, trustly, vietnam_bank, vietnam_bank_qr, vietnam_bank_transfer, webpay, wechat, wme, wmr, wmu, wmz, zen_wallet, yandex, wallester, bitcoin, tron, ethereum, tether, tether_trc20, mercado_pago, mirpay, mbway;
-
-@mixin load_PS_icons($ps_name: $ps_name) {
-    .ps-icon {
-        @each $name in $ps_name {
-            $icon_name: $name;
-            @if ($name == jeton_voucher) {
-                $icon_name: jeton;
-            }
-            @if ($name == local_card_brazil) {
-                $icon_name: brazil_bank;
-            }
-            @if ($name == thailand_bank_transfer) {
-                $icon_name: thailand_bank;
-            }
-            @if ($name == indonesia_bank_transfer) {
-                $icon_name: indonesia_bank;
-            }
-            @if ($name == vietnam_bank_qr or $name == vietnam_bank_transfer) {
-                $icon_name: vietnam_bank;
-            }
-            @if ($name == internal_gamemoney or $name == internal) {
-                $icon_name: gmmoney;
-            }
-            @if ($name == tether_trc20) {
-                $icon_name: tether;
-            }
-            @if ($name == wme or $name == wmr or $name == wmu or $name == wmz) {
-                $icon_name: webmoney;
-            }
-            &-#{$name} {
-                background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/pay/#{$icon_name}.svg) !important;
-            }
-        }
-    }
-}
-
-
-$currencies: RUB, USD, EUR, BTC, ETH, USDT, TRX, CNY, BRL, MXN, UAH, KZT, GBP;
-@mixin load_currency_icons($currencies: $currencies) {
-    .trm-icon {
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-        @each $curr in $currencies {
-            &.trm-curr-#{string.to-lower-case($curr)} {
-                background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/currencies/#{string.to-lower-case($curr)}.svg);
-                background-repeat: no-repeat;
-                background-size: contain;
-            }
-        }
-    }
-}
+@use "sass:string";
+@use './variables' as vars;
+
+@mixin setBgImage($url, $width, $height) {
+    @include setSizeImage($width,  $height);
+    background-image: $url;
+}
+
+@mixin setSizeImage($width, $height) {
+    background: transparent no-repeat 100% 100%;
+    background-size: contain;
+    width: $width;
+    height: $height;
+}
+
+@mixin flexCol($gap: 10px, $justify-content: flex-start, $align-items: flex-start) {
+    display: flex;
+    flex-direction: column;
+    gap: $gap;
+    justify-content: $justify-content;
+    align-items: $align-items;
+}
+
+@mixin flexRow($gap: 10px, $justify-content: flex-start, $align-items: center) {
+    display: flex;
+    flex-direction: row;
+    gap: $gap;
+    justify-content: $justify-content;
+    align-items: $align-items;
+}
+
+@mixin font($size: 15px, $line-h: 20px, $weight: 500, $color: black) {
+    font-weight: $weight;
+    font-size: $size;
+    line-height: $line-h;
+    color: $color;
+}
+
+@mixin ellipsis {
+    white-space: normal;
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+}
+
+@mixin skeleton() {
+    .loader, .skeleton-loader {
+        @content;
+    }
+}
+
+@mixin input() {
+    border: 1px solid var(--trm-input-border-color);
+    border-radius: 10px;
+    width: 100%;
+    box-sizing: border-box;
+
+    min-height: 46px;
+    padding: 12px 20px;
+    @include font(14px, 20px, 500);
+    @include tablet {
+        min-height: 50px;
+        padding: 13px 20px;
+        @include font(15px, 22px, 500);
+    }
+    &:hover {
+        border-color: var(--trm-input-border-color--hover);
+    }
+
+    &:focus, &:active {
+        box-shadow: 0 0 0 2px var(--trm-input-border-color--focus);
+        outline: none;
+    }
+    @content;
+}
+
+@mixin additional-flag-icon($country) {
+    .fi-#{$country} {
+        background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/flags/#{$country}.svg);
+    }
+}
+
+// Breakpoints
+
+$trm-bp-low-tablet-down: 481px;
+$trm-bp-tablet-down: 768px;
+$trm-bp-landscape-tablet-down: 900px;
+$trm-bp-desktop-down: 1281px;
+$trm-bp-large-desktop-down: 1921px;
+
+@mixin tablet-low() {
+    @media (min-width: $trm-bp-low-tablet-down) {
+        @content;
+    }
+}
+
+@mixin tablet() {
+    @media (min-width: $trm-bp-tablet-down) {
+        @content;
+    }
+}
+
+@mixin tablet-large() {
+    @media (min-width: $trm-bp-landscape-tablet-down) {
+        @content;
+    }
+}
+
+@mixin desktop() {
+    @media (min-width: $trm-bp-desktop-down) {
+        @content;
+    }
+}
+
+@mixin desktop-large() {
+    @media (min-width: $trm-bp-large-desktop-down) {
+        @content;
+    }
+}
+
+@mixin headerCard() {
+    &__info {
+        background: #F5F5F5;
+        border-radius: 16px;
+        padding: 20px 24px;
+        @include flexCol(10px);
+
+        &__name {
+            margin: 0;
+            @include font(16px, 20px, 500);
+        }
+
+        &__desc {
+            margin: 0;
+            @include font(15px, 22px, 400, var(--color-base-350));
+        }
+    }
+}
+
+
+$ps_name: advcash, alfabank, alipay, alipay_plus, applepay, argentina_bank, atf24, baloto, beeline, blik, boleto, brazil_bank, card, carga_virtual, cash, cashtocode, codi, comepay, cup, cup_bank, cup_p2p, deposit_express, direct_banking_europe, dotpay, ecopayz, eps, giropay, gmmoney, internal_gamemoney, googlepay, ideal, indonesia_bank, indonesia_bank_transfer, internal, jeton, jeton_voucher, kassa24, link, local_card_brazil, local_card_mexico, loterica, malaysia_bank, megafon, mexico_bank, momopay, moneta, mts, multibanco, neosurf, neteller, nupay, onecard, oxxo, pagoefectivo, pagoexpress, pagofacil, paypal, paysafecard, picpay, pix, philippines_bank, promptpay, promsviaz, przelewy24, qiwi, rapid, rapipago, redpagos, sberbank, sbp, sepa, servipag, skinify, skinpay, skinsback, skrill, sofort, spei, store_mexico, tele2, thailand_bank, thailand_bank_transfer, tinkoff, trustly, vietnam_bank, vietnam_bank_qr, vietnam_bank_transfer, webpay, wechat, wme, wmr, wmu, wmz, zen_wallet, yandex, wallester, bitcoin, tron, ethereum, tether, tether_trc20, mercado_pago, mirpay, mbway;
+
+@mixin load_PS_icons($ps_name: $ps_name) {
+    .ps-icon {
+        @each $name in $ps_name {
+            $icon_name: $name;
+            @if ($name == jeton_voucher) {
+                $icon_name: jeton;
+            }
+            @if ($name == local_card_brazil) {
+                $icon_name: brazil_bank;
+            }
+            @if ($name == thailand_bank_transfer) {
+                $icon_name: thailand_bank;
+            }
+            @if ($name == indonesia_bank_transfer) {
+                $icon_name: indonesia_bank;
+            }
+            @if ($name == vietnam_bank_qr or $name == vietnam_bank_transfer) {
+                $icon_name: vietnam_bank;
+            }
+            @if ($name == internal_gamemoney or $name == internal) {
+                $icon_name: gmmoney;
+            }
+            @if ($name == tether_trc20) {
+                $icon_name: tether;
+            }
+            @if ($name == wme or $name == wmr or $name == wmu or $name == wmz) {
+                $icon_name: webmoney;
+            }
+            &-#{$name} {
+                background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/pay/#{$icon_name}.svg) !important;
+            }
+        }
+    }
+}
+
+
+$currencies: RUB, USD, EUR, BTC, ETH, USDT, TRX, CNY, BRL, MXN, UAH, KZT, GBP;
+@mixin load_currency_icons($currencies: $currencies) {
+    .trm-icon {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+        @each $curr in $currencies {
+            &.trm-curr-#{string.to-lower-case($curr)} {
+                background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/currencies/#{string.to-lower-case($curr)}.svg);
+                background-repeat: no-repeat;
+                background-size: contain;
+            }
+        }
+    }
+}

package/scss/skeleton.scss

@@ -1,68 +1,68 @@
-@use './mixins';
-
-.trm-skeleton {
-	display: flex;
-	flex-direction: column;
-
-	&--hor {
-		flex-direction: row;
-	}
-
-    .skeleton-loader {
-        border-radius: 16px !important;
-        outline: none;
-        background-color: var(--color-base-50) !important;
-        border: 1px solid var(--color-base-50) !important;
-        animation-duration: 2s !important;
-        margin-bottom: 0 !important;
-    }
-}
-
-.trm-skeleton {
-    gap: 20px !important;
-    @include mixins.skeleton {
-        height: 80px !important;
-    }
-}
-
-.trm-skeleton-fields {
-    @include mixins.flexCol(20px, flex-start, stretch);
-    .trm-skeleton-field {
-        @include mixins.flexCol(10px, flex-start, stretch);
-        &__label {
-            @include mixins.skeleton {
-                height: 18px !important;
-                max-width: 125px !important;
-            }
-        }
-        &__control {
-            @include mixins.skeleton {
-                height: 46px !important;
-                @include mixins.tablet-low {
-                    height: 50px !important;
-                }
-            }
-        }
-    }
-}
-
-.trm-skeleton-group {
-    @include mixins.flexCol(32px, flex-start, stretch);
-    &__form {
-        gap: 20px !important;
-        @include mixins.skeleton {
-            height: 80px !important;
-        }
-    }
-    &__header {
-        @include mixins.skeleton {
-            height: 120px !important;
-        }
-    }
-    &__actions {
-        gap: 10px !important;
-        @include mixins.skeleton {
-            height: 48px !important;
-        }
-    }
-}
+@use './mixins';
+
+.trm-skeleton {
+	display: flex;
+	flex-direction: column;
+
+	&--hor {
+		flex-direction: row;
+	}
+
+    .skeleton-loader {
+        border-radius: 16px !important;
+        outline: none;
+        background-color: var(--color-base-50) !important;
+        border: 1px solid var(--color-base-50) !important;
+        animation-duration: 2s !important;
+        margin-bottom: 0 !important;
+    }
+}
+
+.trm-skeleton {
+    gap: 20px !important;
+    @include mixins.skeleton {
+        height: 80px !important;
+    }
+}
+
+.trm-skeleton-fields {
+    @include mixins.flexCol(20px, flex-start, stretch);
+    .trm-skeleton-field {
+        @include mixins.flexCol(10px, flex-start, stretch);
+        &__label {
+            @include mixins.skeleton {
+                height: 18px !important;
+                max-width: 125px !important;
+            }
+        }
+        &__control {
+            @include mixins.skeleton {
+                height: 46px !important;
+                @include mixins.tablet-low {
+                    height: 50px !important;
+                }
+            }
+        }
+    }
+}
+
+.trm-skeleton-group {
+    @include mixins.flexCol(32px, flex-start, stretch);
+    &__form {
+        gap: 20px !important;
+        @include mixins.skeleton {
+            height: 80px !important;
+        }
+    }
+    &__header {
+        @include mixins.skeleton {
+            height: 120px !important;
+        }
+    }
+    &__actions {
+        gap: 10px !important;
+        @include mixins.skeleton {
+            height: 48px !important;
+        }
+    }
+}

package/scss/spinner.scss

@@ -1,65 +1,65 @@
-$trm-loader-delay-animation: .2s;
-
-.trm-loader-init {
-  transform: translate(-50%, -50%);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 10000;
-  width: 89.6px;
-  opacity: 1;
-  transition: visibility $trm-loader-delay-animation, opacity $trm-loader-delay-animation;
-
-  &--hide {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility $trm-loader-delay-animation, opacity $trm-loader-delay-animation;
-    animation: none;
-  }
-
-  &__pretzel {
-    stroke-dasharray: 340% 340%;
-    stroke-dashoffset: -340%;
-    animation: trm-animation 8s infinite ease;
-  }
-
-  &__icon {
-    width: 100%;
-  }
-}
-
-@keyframes trm-animation {
-  0% {
-    stroke-dashoffset: -340%;
-  }
-  50% {
-    stroke-dashoffset: 680%;
-  }
-  100% {
-    stroke-dashoffset: -340%;
-  }
-}
-
-.trm-spinner {
-  height: 20px;
-  width: 20px;
-  border: 2px solid var(--color-primary-500);
-  border-top-color: transparent;
-  border-radius: 36px;
-  animation: rotation .6s infinite linear;
-
-  &-white {
-    border: 2px solid white;
-    border-top-color: transparent;
-  }
-}
-
-
-@keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
+$trm-loader-delay-animation: .2s;
+
+.trm-loader-init {
+  transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 10000;
+  width: 89.6px;
+  opacity: 1;
+  transition: visibility $trm-loader-delay-animation, opacity $trm-loader-delay-animation;
+
+  &--hide {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility $trm-loader-delay-animation, opacity $trm-loader-delay-animation;
+    animation: none;
+  }
+
+  &__pretzel {
+    stroke-dasharray: 340% 340%;
+    stroke-dashoffset: -340%;
+    animation: trm-animation 8s infinite ease;
+  }
+
+  &__icon {
+    width: 100%;
+  }
+}
+
+@keyframes trm-animation {
+  0% {
+    stroke-dashoffset: -340%;
+  }
+  50% {
+    stroke-dashoffset: 680%;
+  }
+  100% {
+    stroke-dashoffset: -340%;
+  }
+}
+
+.trm-spinner {
+  height: 20px;
+  width: 20px;
+  border: 2px solid var(--color-primary-500);
+  border-top-color: transparent;
+  border-radius: 36px;
+  animation: rotation .6s infinite linear;
+
+  &-white {
+    border: 2px solid white;
+    border-top-color: transparent;
+  }
+}
+
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}