156 lines
2.5 KiB
SCSS
156 lines
2.5 KiB
SCSS
@use '../../../../styles/variables' as *;
|
|
|
|
.checkout-page {
|
|
min-height: 100vh;
|
|
padding: 14px 16px 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
background: $bg;
|
|
}
|
|
|
|
.checkout-page__empty-card {
|
|
background: $card;
|
|
border-radius: $r-lg;
|
|
box-shadow: $shadow-sm;
|
|
padding: 48px 20px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.checkout-page__empty-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: $text-3;
|
|
}
|
|
|
|
.checkout-page__empty-desc {
|
|
font-size: 13px;
|
|
color: $text-4;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.checkout-page__empty-btn {
|
|
margin-top: 20px;
|
|
height: 38px;
|
|
padding: 0 24px;
|
|
border-radius: 19px;
|
|
background: $primary;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.checkout-page__scene-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
background: $border;
|
|
border-radius: 10px;
|
|
padding: 3px;
|
|
}
|
|
|
|
.checkout-page__scene-tab {
|
|
flex: 1;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: $text-3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&--active {
|
|
background: $card;
|
|
color: $primary-dark;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
}
|
|
|
|
.checkout-page__oc-card {
|
|
background: $card;
|
|
border-radius: $r-lg;
|
|
box-shadow: $shadow-sm;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.checkout-page__oc-card-body {
|
|
padding: 16px 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.checkout-page__store {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 18px;
|
|
}
|
|
|
|
.checkout-page__store-icon {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: $r-sm;
|
|
background: $primary-light;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.checkout-page__store-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.checkout-page__store-name {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: $text-1;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.checkout-page__store-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.checkout-page__mode-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
background: $primary-lighter;
|
|
color: $primary-dark;
|
|
}
|
|
|
|
.checkout-page__store-hint {
|
|
font-size: 11px;
|
|
color: $text-4;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.checkout-page__field-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: $text-1;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.checkout-page__field-gap {
|
|
margin-top: 10px;
|
|
}
|