styles
This commit is contained in:
@@ -2,10 +2,7 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
||||||
<div class="card__header">
|
<div class="card__header">
|
||||||
<h1 class="card__title">
|
<h1 class="card__title">Оплата через СБП</h1>
|
||||||
{{ 'create.title' | translate }}
|
|
||||||
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
|
|
||||||
</h1>
|
|
||||||
<p class="card__subtitle">{{ 'create.subtitle' | translate }}</p>
|
<p class="card__subtitle">{{ 'create.subtitle' | translate }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -111,8 +108,7 @@
|
|||||||
@if (loading()) {
|
@if (loading()) {
|
||||||
{{ 'create.creating' | translate }}
|
{{ 'create.creating' | translate }}
|
||||||
} @else {
|
} @else {
|
||||||
{{ 'create.create_btn' | translate }}
|
{{ 'create.create_btn' | translate }}
|
||||||
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
|
|
||||||
}
|
}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|||||||
@@ -41,19 +41,15 @@
|
|||||||
|
|
||||||
// ─── Methods row ────────────────────────────────────────────────────────────
|
// ─── Methods row ────────────────────────────────────────────────────────────
|
||||||
.methods {
|
.methods {
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
&::-webkit-scrollbar { display: none; }
|
gap: 8px;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
}
|
|
||||||
|
&::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
@media (max-width: 360px) {
|
@media (max-width: 360px) {
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
@@ -73,11 +69,8 @@
|
|||||||
transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
|
transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
flex: 0 0 72px;
|
flex: 0 0 72px;
|
||||||
width: 72px;
|
width: 72px;
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 360px) {
|
@media (max-width: 360px) {
|
||||||
height: 52px;
|
height: 52px;
|
||||||
@@ -119,17 +112,14 @@
|
|||||||
// ─── Currency chips ─────────────────────────────────────────────────────────
|
// ─── Currency chips ─────────────────────────────────────────────────────────
|
||||||
.currencies {
|
.currencies {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
&::-webkit-scrollbar { display: none; }
|
gap: 8px;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
}
|
|
||||||
|
&::-webkit-scrollbar { display: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip {
|
.chip {
|
||||||
|
|||||||
@@ -3,10 +3,7 @@
|
|||||||
|
|
||||||
<!-- Brand -->
|
<!-- Brand -->
|
||||||
<a class="site-header__brand" routerLink="/" (click)="closeMenu()">
|
<a class="site-header__brand" routerLink="/" (click)="closeMenu()">
|
||||||
<img src="/logo_small.png" alt="fastCHECK" width="32" height="32" />
|
<img src="/logo_small.png" alt="SBP Pay" width="22" height="22" />
|
||||||
<span class="site-header__wordmark">
|
|
||||||
<span class="wm-fast">fast</span><span class="wm-check">CHECK</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Desktop nav -->
|
<!-- Desktop nav -->
|
||||||
@@ -71,7 +68,7 @@
|
|||||||
<div class="mobile-overlay" (click)="closeMenu()">
|
<div class="mobile-overlay" (click)="closeMenu()">
|
||||||
<nav class="mobile-panel" (click)="$event.stopPropagation()" [attr.aria-label]="'header.aria_menu' | translate">
|
<nav class="mobile-panel" (click)="$event.stopPropagation()" [attr.aria-label]="'header.aria_menu' | translate">
|
||||||
<div class="mobile-panel__header">
|
<div class="mobile-panel__header">
|
||||||
<span class="mobile-panel__title">fastCHECK</span>
|
<span class="mobile-panel__title">SBP Pay</span>
|
||||||
<button type="button" class="mobile-panel__close" (click)="closeMenu()" [attr.aria-label]="'header.aria_close' | translate">
|
<button type="button" class="mobile-panel__close" (click)="closeMenu()" [attr.aria-label]="'header.aria_close' | translate">
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||||
|
|||||||
@@ -32,8 +32,8 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 32px;
|
width: 22px;
|
||||||
height: 32px;
|
height: 22px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user