task 17075 | переделал h-attention
This commit is contained in:
web_103.2 committed
1 parent
ee73d51a36
commit
b9ad461abe
2 files changed
+33
-55
No files matched your search
@@ -6161,24 +6161,21 @@ h4 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.h-attention {
|
.h-attention {
|
||||||
--attention-color: var(--color-red);
|
margin: 24px 0;
|
||||||
--attention-bg: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
|
||||||
--attention-icon-bg: color-mix(in srgb, var(--color-red) 15%, var(--color-light));
|
padding: 32px 40px 32px 32px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 28px 0;
|
|
||||||
padding: 24px 28px;
|
|
||||||
border-radius: 16px;
|
|
||||||
background: var(--attention-bg);
|
background: var(--attention-bg);
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-attention--warning {
|
.h-attention--warning {
|
||||||
--attention-color: var(--color-red);
|
--attention-bg: rgba(226, 10, 23, 0.10);
|
||||||
--attention-bg: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
--attention-icon-bg: rgba(226, 10, 23, 0.10);
|
||||||
--attention-icon-bg: color-mix(in srgb, var(--color-red) 15%, var(--color-light));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-attention--info {
|
.h-attention--info {
|
||||||
@@ -6194,57 +6191,38 @@ h4 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.h-attention__icon {
|
.h-attention__icon {
|
||||||
display: flex;
|
flex-shrink: 0;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 0 0 48px;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: var(--attention-icon-bg);
|
|
||||||
color: var(--attention-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-attention__icon span {
|
width: 40px;
|
||||||
font-family: Arial, sans-serif;
|
height: 40px;
|
||||||
font-size: 30px;
|
|
||||||
font-weight: 700;
|
border-radius: 50%;
|
||||||
line-height: 1;
|
|
||||||
|
background: var(--attention-icon-bg);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-attention__content {
|
.h-attention__content {
|
||||||
flex: 1;
|
font-size: 20px;
|
||||||
min-width: 0;
|
line-height: 150%; /* 30px */
|
||||||
font-size: 16px;
|
letter-spacing: -0.2px;
|
||||||
line-height: 1.65;
|
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-attention__content p {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-attention__content p + p {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-attention__content a {
|
|
||||||
color: var(--attention-color);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-attention__content > :last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
@media (max-width: 767.98px) {
|
||||||
.h-attention{
|
.h-attention{
|
||||||
padding: 12px 14px;
|
padding: 16px 16px 16px 12px;
|
||||||
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-attention__content{
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: -0.14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-article-quote {
|
.h-article-quote {
|
||||||
|
|||||||
@@ -6,9 +6,9 @@ if (is_array($attention)) {
|
|||||||
}
|
}
|
||||||
$text = $fields['text'] ?? '';
|
$text = $fields['text'] ?? '';
|
||||||
$variants = [
|
$variants = [
|
||||||
'red' => ['class' => 'warning', 'icon' => '!', 'title' => 'Важно!'],
|
'red' => ['class' => 'warning', 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="4" height="20" viewBox="0 0 4 20" fill="none"> <path d="M2.00001 1.90735e-06C2.56667 1.90735e-06 3.04201 0.192003 3.42601 0.576002C3.81001 0.960003 4.00134 1.43467 4 2V10C4 10.5667 3.808 11.0413 3.424 11.424C3.04 11.8067 2.56534 11.9987 2.00001 12C1.43467 12.0013 0.960007 11.8093 0.576007 11.424C0.192007 11.0387 6.89653e-06 10.564 6.89653e-06 10V2C6.89653e-06 1.43333 0.192007 0.958002 0.576007 0.574001C0.960007 0.190002 1.43467 -0.00133324 2.00001 1.90735e-06ZM2.00001 16C2.56667 16 3.04201 16.192 3.42601 16.576C3.81001 16.96 4.00134 17.4347 4 18C3.99867 18.5653 3.80667 19.04 3.424 19.424C3.04134 19.808 2.56667 20 2.00001 20C1.43334 20 0.958674 19.808 0.576007 19.424C0.193341 19.04 0.00134023 18.5653 6.89653e-06 18C-0.00132644 17.4347 0.190674 16.9593 0.576007 16.574C0.96134 16.1887 1.43601 15.9973 2.00001 16Z" fill="#E20A17"/> </svg>', 'title' => 'Важно!'],
|
||||||
'yellow' => ['class' => 'info', 'icon' => 'i', 'title' => 'Полезная информация'],
|
'yellow' => ['class' => 'info', 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="4" height="20" viewBox="0 0 4 20" fill="none"> <path d="M2.00001 20C2.56667 20 3.04201 19.808 3.42601 19.424C3.81001 19.04 4.00134 18.5653 4 18V10C4 9.43333 3.808 8.95866 3.424 8.576C3.04 8.19333 2.56534 8.00133 2.00001 8C1.43467 7.99866 0.960007 8.19067 0.576007 8.576C0.192007 8.96133 6.89653e-06 9.436 6.89653e-06 10V18C6.89653e-06 18.5667 0.192007 19.042 0.576007 19.426C0.960007 19.81 1.43467 20.0013 2.00001 20ZM2.00001 4C2.56667 4 3.04201 3.808 3.42601 3.424C3.81001 3.04 4.00134 2.56533 4 2C3.99867 1.43467 3.80667 0.96 3.424 0.576C3.04134 0.192 2.56667 0 2.00001 0C1.43334 0 0.958674 0.192 0.576007 0.576C0.193341 0.96 0.00134023 1.43467 6.89653e-06 2C-0.00132644 2.56533 0.190674 3.04067 0.576007 3.426C0.96134 3.81133 1.43601 4.00267 2.00001 4Z" fill="#ED760E"/> </svg>', 'title' => 'Полезная информация'],
|
||||||
'green' => ['class' => 'success', 'icon' => '✓', 'title' => 'Рекомендация'],
|
'green' => ['class' => 'success', 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 20 15" fill="none"> <path d="M19.4672 0.532533C18.7571 -0.177511 17.6062 -0.177511 16.8962 0.532533L7.27259 10.1561L3.10355 5.98707C2.39351 5.27703 1.24258 5.27703 0.532533 5.98707C-0.177511 6.69712 -0.177511 7.84805 0.532533 8.55809L5.98707 14.0126C6.69713 14.7225 7.8481 14.7226 8.5581 14.0126L19.4672 3.10355C20.1772 2.39356 20.1771 1.24259 19.4672 0.532533Z" fill-rule="evenodd" clip-rule="evenodd" fill="#0D9D00"/> </svg>', 'title' => 'Рекомендация'],
|
||||||
];
|
];
|
||||||
$variant = $variants[$attention] ?? $variants['red'];
|
$variant = $variants[$attention] ?? $variants['red'];
|
||||||
?>
|
?>
|
||||||
@@ -16,7 +16,7 @@ $variant = $variants[$attention] ?? $variants['red'];
|
|||||||
<?php if ($text !== '') : ?>
|
<?php if ($text !== '') : ?>
|
||||||
<div class="h-attention h-attention--<?php echo esc_attr($variant['class']); ?>">
|
<div class="h-attention h-attention--<?php echo esc_attr($variant['class']); ?>">
|
||||||
<div class="h-attention__icon">
|
<div class="h-attention__icon">
|
||||||
<span><?php echo esc_html($variant['icon']); ?></span>
|
<?php echo $variant['icon']; ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-attention__content">
|
<div class="h-attention__content">
|
||||||
<?php echo wpautop(wp_kses_post($text)); ?>
|
<?php echo wpautop(wp_kses_post($text)); ?>
|
||||||
|
|||||||
Reference in new issue
Block a user