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