зеркало из https://github.com/mozilla/fxa.git
feat(settings): Add CSS animations for recovery key graphics
Because: * Add a touch of whimsy, standardize image style * Respect user preference for reduced motion This commit: * Add animations for the recovery key flow graphics (password, recovery key, recovery key hint) * Update images used in recovery key creation flow * Remove unused images * Add tailwind utility to stop all svg animations if user prefers reduced motion Closes #FXA-10205
This commit is contained in:
Valerie Pomerleau
Родитель
1bbf07d1d0
Коммит
c4533f8665
|
|
@ -88,7 +88,7 @@ export const DataBlock = ({
|
|||
) : (
|
||||
<span
|
||||
className={classNames({
|
||||
'flex flex-col self-center align-middle grow pe-5': isInline,
|
||||
'flex flex-col self-center align-middle grow pe-4': isInline,
|
||||
})}
|
||||
>
|
||||
{value}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import base32Encode from 'base32-encode';
|
|||
import { logViewEvent } from '../../../lib/metrics';
|
||||
import { AuthUiErrors } from '../../../lib/auth-errors/auth-errors';
|
||||
import InputPassword from '../../InputPassword';
|
||||
import { LockImage } from '../../images';
|
||||
import { PasswordImage } from '../../images';
|
||||
import Banner, { BannerType } from '../../Banner';
|
||||
import { RecoveryKeyAction } from '../PageRecoveryKeyCreate';
|
||||
import { Link } from '@reach/router';
|
||||
|
|
@ -122,7 +122,7 @@ export const FlowRecoveryKeyConfirmPwd = ({
|
|||
<p className="w-full text-center">{bannerText}</p>
|
||||
</Banner>
|
||||
)}
|
||||
<LockImage className="mx-auto my-4" />
|
||||
<PasswordImage className="mx-auto my-4" />
|
||||
|
||||
<FtlMsg id="flow-recovery-key-confirm-pwd-heading-v2">
|
||||
<h2 className="font-bold text-xl">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { FlowContainer } from '../FlowContainer';
|
||||
import { ProgressBar } from '../ProgressBar';
|
||||
import { SecurityShieldImage } from '../../images';
|
||||
import { RecoveryKeyImage } from '../../images';
|
||||
import { ShieldIconListItem, KeyIconListItem } from '../../IconListItem';
|
||||
import { FtlMsg } from 'fxa-react/lib/utils';
|
||||
import { logViewEvent } from '../../../lib/metrics';
|
||||
|
|
@ -48,7 +48,7 @@ export const FlowRecoveryKeyInfo = ({
|
|||
}}
|
||||
>
|
||||
<ProgressBar currentStep={1} numberOfSteps={4} />
|
||||
<SecurityShieldImage className="mx-auto my-6" />
|
||||
<RecoveryKeyImage className="mx-auto my-6" />
|
||||
{action === RecoveryKeyAction.Create ? (
|
||||
<FtlMsg id="flow-recovery-key-info-header">
|
||||
<h2 className="font-bold text-xl mb-4">
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ security-shield-aria-label =
|
|||
# Used for an image of a single key.
|
||||
recovery-key-image-aria-label =
|
||||
.aria-label = Illustration to represent an account recovery key.
|
||||
lock-image-aria-label =
|
||||
.aria-label = An illustration of a lock
|
||||
password-image-aria-label =
|
||||
.aria-label = An illustration to represent typing in a password.
|
||||
lightbulb-aria-label =
|
||||
.aria-label = Illustration to represent creating a storage hint.
|
||||
email-code-image-aria-label =
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
До Ширина: | Высота: | Размер: 7.4 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 8.9 KiB |
|
|
@ -0,0 +1,160 @@
|
|||
<svg width="240" height="155" viewBox="0 0 240 155" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.asterisk-1 {
|
||||
animation: asterisk1Animation 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.asterisk-2 {
|
||||
animation: asterisk2Animation 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.asterisk-3 {
|
||||
animation: asterisk3Animation 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.asterisk-4 {
|
||||
animation: asterisk4Animation 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes asterisk1Animation {
|
||||
0% { fill: #0090ED; }
|
||||
10% { fill: #0090ED; }
|
||||
20% { fill: white; }
|
||||
80% { fill: white; }
|
||||
100% { fill: #0090ED; }
|
||||
}
|
||||
|
||||
@keyframes asterisk2Animation {
|
||||
0% { fill: #0090ED; }
|
||||
20% { fill: #0090ED; }
|
||||
30% { fill: white; }
|
||||
80% { fill: white; }
|
||||
100% { fill: #0090ED; }
|
||||
}
|
||||
|
||||
@keyframes asterisk3Animation {
|
||||
0% { fill: #0090ED; }
|
||||
30% { fill: #0090ED; }
|
||||
40% { fill: white; }
|
||||
80% { fill: white; }
|
||||
100% { fill: #0090ED; }
|
||||
}
|
||||
|
||||
@keyframes asterisk4Animation {
|
||||
0% { fill: #0090ED; }
|
||||
40% { fill: #0090ED; }
|
||||
50% { fill: white; }
|
||||
80% { fill: white; }
|
||||
100% { fill: #0090ED; }
|
||||
}
|
||||
|
||||
.lock {
|
||||
transform-origin: 62px 102px;
|
||||
animation: rotateLock 5s infinite ease-out;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
transform-origin: 115px 62px;
|
||||
animation: scaleStar 2.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
transform-origin: 86px 55px;
|
||||
animation: scaleStar 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
transform-origin: 110px 35px;
|
||||
animation: scaleStar 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes scaleStar {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateLock {
|
||||
0%, 70% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
80%, 100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<g filter="url(#filter0_d_5165_11582)">
|
||||
<path d="M136.886 50.891C136.692 50.891 136.5 50.9011 136.307 50.9056C136.307 50.9007 136.308 50.8959 136.308 50.891C136.308 33.8304 122.443 20 105.341 20C91.4525 20 79.7 29.1205 75.7729 41.6845C72.8083 40.1271 69.4339 39.2413 65.8505 39.2413C54.0711 39.2413 44.5221 48.7669 44.5221 60.5175C44.5221 62.4317 44.7796 64.2852 45.2548 66.0498C43.1152 65.1017 40.7524 64.5641 38.2603 64.5641C28.7277 64.5641 21 72.2729 21 81.782C21 91.2912 28.7277 99 38.2603 99H136.886C150.204 99 161 88.2305 161 74.9455C161 61.6604 150.204 50.891 136.886 50.891Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_5165_11582)">
|
||||
<path d="M118.602 70.8526C118.752 70.8526 118.9 70.8603 119.049 70.8638C119.049 70.8601 119.048 70.8563 119.048 70.8526C119.048 57.6792 129.744 47 142.937 47C153.651 47 162.717 54.0424 165.747 63.7438C168.034 62.5412 170.637 61.8572 173.401 61.8572C182.488 61.8572 189.854 69.2124 189.854 78.2856C189.854 79.7637 189.656 81.1949 189.289 82.5574C190.94 81.8253 192.762 81.4102 194.685 81.4102C202.039 81.4102 208 87.3626 208 94.7051C208 102.048 202.039 108 194.685 108H118.602C108.328 108 100 99.6843 100 89.4262C100 79.1682 108.328 70.8526 118.602 70.8526Z" fill="white"/>
|
||||
</g>
|
||||
<!-- Star Group 1 (Upper Star) -->
|
||||
<g class="star-1">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.158 72.4934C104.154 72.3084 104.215 72.1278 104.332 71.9837C104.448 71.8397 104.611 71.7415 104.793 71.7067C106.344 71.4261 110.627 70.414 112.09 68.974C113.553 67.534 114.542 63.2509 114.813 61.6775C114.846 61.4957 114.943 61.3317 115.087 61.2152C115.23 61.0987 115.411 61.0375 115.595 61.0427V72.4934H104.158Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.543 61.0422C115.729 61.0429 115.908 61.1094 116.05 61.2298C116.191 61.3502 116.285 61.5168 116.316 61.7001C116.578 63.2412 117.54 67.4553 118.989 69.0149C120.438 70.5745 124.744 71.4808 126.396 71.7752C126.577 71.8108 126.741 71.909 126.858 72.0527C126.975 72.1965 127.037 72.3767 127.035 72.5619H115.534L115.543 61.0422Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.603 72.4944V83.9451C115.417 83.9396 115.239 83.8716 115.097 83.7522C114.955 83.6328 114.858 83.469 114.821 83.2873C114.54 81.7185 113.528 77.371 112.088 75.9264C110.648 74.4818 106.36 73.5295 104.81 73.2673C104.628 73.2379 104.463 73.145 104.343 73.0052C104.224 72.8653 104.158 72.6876 104.157 72.5036L115.603 72.4944Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.035 72.4944C127.042 72.6817 126.978 72.8648 126.856 73.0072C126.734 73.1496 126.563 73.2408 126.377 73.2627C124.813 73.5295 120.451 74.4864 118.988 75.9356C117.525 77.3848 116.578 81.6863 116.315 83.3241C116.289 83.5107 116.196 83.6816 116.054 83.8057C115.913 83.9298 115.731 83.9989 115.542 84.0003V72.499L127.035 72.4944Z" fill="#007BED"/>
|
||||
</g>
|
||||
|
||||
<!-- Star Group 2 (Middle Star) -->
|
||||
<g class="star-2">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M66.3897 55.499C66.3844 55.1803 66.4907 54.8697 66.6902 54.6211C66.8897 54.3725 67.1698 54.2014 67.4821 54.1374C70.1596 53.6293 77.5519 51.9121 80.077 49.4277C82.6021 46.9432 84.3091 39.5509 84.7918 36.8328C84.8509 36.519 85.02 36.2367 85.2687 36.0365C85.5173 35.8362 85.8292 35.7313 86.1483 35.7404V55.499H66.3897Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M86.0412 35.7399C86.361 35.7396 86.6703 35.8537 86.9135 36.0614C87.1566 36.2691 87.3175 36.5569 87.3672 36.8729C87.8245 39.5351 89.4807 46.8055 91.9855 49.4982C94.4903 52.191 101.898 53.7507 104.763 54.2334C105.079 54.2933 105.363 54.4628 105.566 54.7119C105.768 54.9611 105.877 55.2739 105.871 55.595H86.0564L86.0412 35.7399Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M86.1483 55.4983V75.2569C85.8291 75.2473 85.5224 75.1302 85.2781 74.9246C85.0337 74.719 84.8659 74.4368 84.802 74.1239C84.3193 71.4159 82.5716 63.9169 80.0871 61.4223C77.6027 58.9277 70.2053 57.2867 67.5227 56.8497C67.2104 56.7961 66.9268 56.6345 66.7216 56.393C66.5164 56.1516 66.4025 55.8457 66.3999 55.5288L86.1483 55.4983Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.871 55.4983C105.88 55.8217 105.768 56.137 105.558 56.3829C105.348 56.6289 105.053 56.788 104.733 56.8294C102.04 57.2867 94.5103 58.9328 91.9852 61.4376C89.4601 63.9423 87.8242 71.36 87.3669 74.19C87.3229 74.511 87.1646 74.8054 86.921 75.0191C86.6774 75.2328 86.3649 75.3515 86.0409 75.3534V55.4983H105.871Z" fill="#007BED"/>
|
||||
</g>
|
||||
|
||||
<!-- Star Group 3 (Lower Star) -->
|
||||
<g class="star-3">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M102.304 34.5404C102.302 34.4192 102.343 34.3013 102.418 34.2065C102.494 34.1117 102.6 34.046 102.718 34.0205C103.744 33.8365 106.564 33.174 107.526 32.2217C108.487 31.2694 109.14 28.4539 109.329 27.4141C109.352 27.296 109.416 27.1897 109.509 27.114C109.602 27.0383 109.72 26.9979 109.84 27.0001V34.5404H102.304Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.802 27.0047C109.925 27.0051 110.043 27.0487 110.136 27.1278C110.23 27.2069 110.292 27.3165 110.313 27.4372C110.483 28.4539 111.118 31.228 112.07 32.2539C113.023 33.2798 115.861 33.8779 116.952 34.0665C117.071 34.0892 117.179 34.1532 117.257 34.2474C117.334 34.3416 117.376 34.4599 117.375 34.5818H109.802V27.0047Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.84 34.5398V42.0847C109.719 42.08 109.602 42.0349 109.51 41.9565C109.417 41.8781 109.354 41.771 109.329 41.6522C109.14 40.6171 108.478 37.7556 107.526 36.7941C106.573 35.8325 103.753 35.2161 102.732 35.0459C102.612 35.0262 102.503 34.9644 102.425 34.8717C102.346 34.7789 102.304 34.6612 102.304 34.5398H109.84Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M117.375 34.5398C117.378 34.6639 117.335 34.7849 117.254 34.8792C117.174 34.9735 117.061 35.0346 116.938 35.0505C115.912 35.2207 113.036 35.851 112.07 36.8079C111.104 37.7648 110.483 40.5987 110.313 41.6752C110.298 41.8009 110.238 41.917 110.144 42.0017C110.05 42.0864 109.929 42.1339 109.802 42.1353V34.5398H117.375Z" fill="#007BED"/>
|
||||
</g>
|
||||
<rect x="74" y="101" width="98" height="21" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M62.2297 90C56.58 90 52 94.58 52 100.23V122.564C52 128.214 56.58 132.794 62.2297 132.794H148.309L167.799 148.09C169.071 149.088 170.888 147.921 170.509 146.349L167.233 132.758C172.48 132.322 176.603 127.925 176.603 122.564V100.23C176.603 94.58 172.023 90 166.373 90H62.2297Z" fill="#0090ED"/>
|
||||
<g filter="url(#filter2_d_5165_11582)">
|
||||
<circle cx="62" cy="101" r="20" fill="white"/>
|
||||
</g>
|
||||
<path class="lock" d="M69.4686 99.5822C69.4686 99.4454 69.4142 99.3142 69.3175 99.2175C69.2207 99.1207 69.0895 99.0664 68.9526 99.0664H54.5153C54.3786 99.0666 54.2475 99.121 54.1509 99.2177C54.0543 99.3144 54 99.4455 54 99.5822C54 99.5822 54 105.145 54 109H57.8779H61.7557H69.4686V99.5822ZM54 110.485C54 110.621 54.0543 110.752 54.1509 110.849C54.2476 110.946 54.3786 111 54.5153 111H68.9526C69.0203 111 69.0874 110.987 69.15 110.961C69.2126 110.935 69.2695 110.897 69.3174 110.849C69.3654 110.801 69.4034 110.745 69.4293 110.682C69.4552 110.619 69.4686 110.552 69.4686 110.485V109H61.7557H57.8779H54C54 109.403 54 110.485 54 110.485ZM58.5329 96.8007C58.5329 95.946 58.8724 95.1262 59.4768 94.5218C60.0812 93.9174 60.901 93.5779 61.7557 93.5779C62.6105 93.5779 63.4302 93.9174 64.0346 94.5218C64.639 95.1262 64.9786 95.946 64.9786 96.8007V99.5H67.5564V96.8007C67.5564 96.039 67.4064 95.2847 67.1149 94.5809C66.8234 93.8771 66.3961 93.2376 65.8575 92.699C65.3188 92.1603 64.6793 91.7331 63.9756 91.4416C63.2718 91.15 62.5175 91 61.7557 91C60.2173 91 58.7418 91.6111 57.654 92.699C56.5661 93.7868 55.955 95.2623 55.955 96.8007V99.5H58.5329V96.8007Z" fill="#1CC5A0"/>
|
||||
<path class="asterisk-1" d="M89.8553 116.969L89.8431 117.178C89.7963 117.982 90.4357 118.66 91.241 118.66C92.045 118.66 92.6839 117.984 92.6392 117.182L92.6273 116.968C92.5546 115.663 93.9903 114.824 95.0913 115.529L95.3944 115.723C96.0538 116.144 96.9314 115.935 97.3292 115.261C97.739 114.566 97.4696 113.67 96.7447 113.317L96.5551 113.224C95.3742 112.648 95.3742 110.965 96.5551 110.39L96.7447 110.297C97.4695 109.944 97.739 109.047 97.3292 108.353C96.9314 107.679 96.0538 107.469 95.3944 107.891L95.0912 108.085C93.9903 108.789 92.5546 107.95 92.6273 106.645L92.6392 106.432C92.6839 105.629 92.045 104.954 91.241 104.954C90.4357 104.954 89.7963 105.631 89.8431 106.435L89.8553 106.645C89.9312 107.948 88.4979 108.787 87.3984 108.084L87.097 107.891C86.4373 107.469 85.5591 107.679 85.1611 108.353C84.7513 109.048 85.0202 109.944 85.7445 110.298L85.933 110.39C87.1117 110.967 87.1117 112.647 85.933 113.223L85.7445 113.315C85.0201 113.67 84.7513 114.566 85.1611 115.26C85.5591 115.935 86.4373 116.144 87.097 115.722L87.3984 115.529C88.4978 114.826 89.9312 115.666 89.8553 116.969Z" fill="white"/>
|
||||
<path class="asterisk-2" d="M112.454 116.969L112.442 117.178C112.395 117.982 113.035 118.66 113.84 118.66C114.644 118.66 115.283 117.984 115.238 117.182L115.226 116.968C115.154 115.663 116.589 114.824 117.69 115.529L117.993 115.723C118.653 116.144 119.53 115.935 119.928 115.261C120.338 114.566 120.069 113.67 119.344 113.317L119.154 113.224C117.973 112.648 117.973 110.965 119.154 110.39L119.344 110.297C120.069 109.944 120.338 109.047 119.928 108.353C119.53 107.679 118.653 107.469 117.993 107.891L117.69 108.085C116.589 108.789 115.154 107.95 115.226 106.645L115.238 106.432C115.283 105.629 114.644 104.954 113.84 104.954C113.035 104.954 112.395 105.631 112.442 106.435L112.454 106.645C112.53 107.948 111.097 108.787 109.997 108.084L109.696 107.891C109.036 107.469 108.158 107.679 107.76 108.353C107.35 109.048 107.619 109.944 108.344 110.298L108.532 110.39C109.711 110.967 109.711 112.647 108.532 113.223L108.343 113.315C107.619 113.67 107.35 114.566 107.76 115.26C108.158 115.935 109.036 116.144 109.696 115.722L109.997 115.529C111.097 114.826 112.53 115.666 112.454 116.969Z" fill="white"/>
|
||||
<path class="asterisk-3" d="M134.454 116.969L134.442 117.178C134.395 117.982 135.035 118.66 135.84 118.66C136.644 118.66 137.283 117.984 137.238 117.182L137.226 116.968C137.154 115.663 138.589 114.824 139.69 115.529L139.993 115.723C140.653 116.144 141.53 115.935 141.928 115.261C142.338 114.566 142.069 113.67 141.344 113.317L141.154 113.224C139.973 112.648 139.973 110.965 141.154 110.39L141.344 110.297C142.069 109.944 142.338 109.047 141.928 108.353C141.53 107.679 140.653 107.469 139.993 107.891L139.69 108.085C138.589 108.789 137.154 107.95 137.226 106.645L137.238 106.432C137.283 105.629 136.644 104.954 135.84 104.954C135.035 104.954 134.395 105.631 134.442 106.435L134.454 106.645C134.53 107.948 133.097 108.787 131.997 108.084L131.696 107.891C131.036 107.469 130.158 107.679 129.76 108.353C129.35 109.048 129.619 109.944 130.344 110.298L130.532 110.39C131.711 110.967 131.711 112.647 130.532 113.223L130.343 113.315C129.619 113.67 129.35 114.566 129.76 115.26C130.158 115.935 131.036 116.144 131.696 115.722L131.997 115.529C133.097 114.826 134.53 115.666 134.454 116.969Z" fill="white"/>
|
||||
<path class="asterisk-4" d="M156.454 116.969L156.442 117.178C156.395 117.982 157.035 118.66 157.84 118.66C158.644 118.66 159.283 117.984 159.238 117.182L159.226 116.968C159.154 115.663 160.589 114.824 161.69 115.529L161.993 115.723C162.653 116.144 163.53 115.935 163.928 115.261C164.338 114.566 164.069 113.67 163.344 113.317L163.154 113.224C161.973 112.648 161.973 110.965 163.154 110.39L163.344 110.297C164.069 109.944 164.338 109.047 163.928 108.353C163.53 107.679 162.653 107.469 161.993 107.891L161.69 108.085C160.589 108.789 159.154 107.95 159.226 106.645L159.238 106.432C159.283 105.629 158.644 104.954 157.84 104.954C157.035 104.954 156.395 105.631 156.442 106.435L156.454 106.645C156.53 107.948 155.097 108.787 153.997 108.084L153.696 107.891C153.036 107.469 152.158 107.679 151.76 108.353C151.35 109.048 151.619 109.944 152.344 110.298L152.532 110.39C153.711 110.967 153.711 112.647 152.532 113.223L152.343 113.315C151.619 113.67 151.35 114.566 151.76 115.26C152.158 115.935 153.036 116.144 153.696 115.722L153.997 115.529C155.097 114.826 156.53 115.666 156.454 116.969Z" fill="white"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_5165_11582" x="-11" y="-14" width="204" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5165_11582"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5165_11582" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_5165_11582" x="68" y="13" width="172" height="125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5165_11582"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5165_11582" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_5165_11582" x="10" y="51" width="104" height="104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5165_11582"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5165_11582" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 16 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 5.4 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
До Ширина: | Высота: | Размер: 5.2 KiB После Ширина: | Высота: | Размер: 8.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="239" height="180" fill="none"><style>@keyframes smallCloudAnimation{0%{transform:translateX(-70px)}to{transform:translateX(0)}}@keyframes bulbLeftEyeAnimation{0%,10%{fill:#00b3f4}20%,to{fill:#fff}}@keyframes bulbMouthAnimation{0%,30%{fill:#00b3f4}40%,to{fill:#fff}}@keyframes bulbRightEyeAnimation{0%,20%{fill:#00b3f4}30%,to{fill:#fff}}@keyframes pinkLineAnimation{0%,to{stroke-dashoffset:6;stroke-dasharray:10}50%{stroke-dashoffset:0;stroke-dasharray:10}}.pinkLine{animation:pinkLineAnimation 2s linear infinite}</style><g filter="url(#filter0_d_5169_13123)"><path fill="#fff" d="M125.052 55.506c.137 0 .273.007.409.01v-.01c0-11.877 9.804-21.506 21.898-21.506 9.821 0 18.132 6.35 20.909 15.097a15.2 15.2 0 0 1 7.016-1.701c8.33 0 15.083 6.632 15.083 14.812 0 1.333-.183 2.624-.519 3.852a12.3 12.3 0 0 1 4.947-1.034c6.74 0 12.205 5.367 12.205 11.987S201.535 89 194.795 89h-69.743C115.634 89 108 81.502 108 72.253s7.634-16.747 17.052-16.747" style="animation:smallCloudAnimation 3s 1 ease-in-out"/></g><g filter="url(#filter1_d_5169_13123)"><path fill="#fff" d="M163.614 79.41c-.221 0-.438.011-.658.017l.001-.017c0-19.004-15.746-34.41-35.17-34.41-15.773 0-29.12 10.16-33.58 24.155a24.54 24.54 0 0 0-11.27-2.722c-13.378 0-24.223 10.611-24.223 23.7 0 2.133.293 4.197.833 6.163a19.9 19.9 0 0 0-7.944-1.655C40.776 94.641 32 103.228 32 113.82 32 124.413 40.776 133 51.603 133h112.011C178.739 133 191 121.004 191 106.205c0-14.798-12.261-26.795-27.386-26.795" class="bigCloud"/></g><rect width="22" height="5" x="115" y="156" fill="#0090ED" rx="2.5"/><rect width="24" height="5" x="114" y="149" fill="#0090ED" rx="2.5"/><path fill="#00B3F4" d="M119.549 143.851h12.709a6.715 6.715 0 0 0 6.632-5.583l1.218-7.759a22.71 22.71 0 0 0 6.39-27.495 22.7 22.7 0 0 0-6.22-7.918c-5.344-4.345-12.353-6.023-19.229-4.602-8.877 1.852-15.927 9.126-17.547 18.098-1.516 8.396 1.549 16.59 8.007 21.573l1.408 8.103a6.72 6.72 0 0 0 6.632 5.583" class="bulb"/><path fill="#fff" d="m119.385 107.759.704 3.028h-2.994l.704-3.028-2.34 2.11-1.459-2.582 2.994-.894-2.994-.943 1.535-2.532 2.264 2.11-.704-3.028h2.994l-.73 3.078 2.366-2.16 1.484 2.582-3.095.918 3.095.919-1.535 2.532z" style="animation:bulbLeftEyeAnimation 3s ease-in-out"/><path fill="#fff" d="M132.546 119c.803 0 1.467.656 1.322 1.446a7.997 7.997 0 0 1-10.929 5.945 8 8 0 0 1-4.807-5.945c-.145-.79.519-1.446 1.322-1.446s1.434.664 1.66 1.434q.077.262.182.515a5.1 5.1 0 0 0 1.103 1.652 5.1 5.1 0 0 0 5.55 1.103 5.1 5.1 0 0 0 1.652-1.103 5.1 5.1 0 0 0 1.285-2.167c.226-.77.857-1.434 1.66-1.434" style="animation:bulbMouthAnimation 3s ease-in-out"/><path fill="#fff" d="m133.385 107.759.704 3.028h-2.994l.704-3.028-2.34 2.11-1.459-2.582 2.994-.894-2.994-.943 1.535-2.532 2.264 2.11-.704-3.028h2.994l-.73 3.078 2.366-2.16 1.484 2.582-3.095.918 3.095.919-1.535 2.532z" style="animation:bulbRightEyeAnimation 3s ease-in-out"/><path stroke="#E31587" stroke-linecap="round" stroke-width="4" d="M95 113H85M102 90l-8-7M126 82V70M151 91l8-7M158 113h10" class="pinkLine"/><defs><filter id="filter0_d_5169_13123" width="239" height="119" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="16"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5169_13123"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_5169_13123" result="shape"/></filter><filter id="filter1_d_5169_13123" width="223" height="152" x="0" y="11" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="16"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5169_13123"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_5169_13123" result="shape"/></filter></defs></svg>
|
||||
|
После Ширина: | Высота: | Размер: 4.2 KiB |
|
|
@ -0,0 +1,95 @@
|
|||
<svg width="239" height="180" viewBox="0 0 239 180" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.smallCloud {
|
||||
animation: smallCloudAnimation 3s 1 ease-in-out;
|
||||
}
|
||||
|
||||
.bulbLeftEye {
|
||||
animation: bulbLeftEyeAnimation 3s ease-in-out;
|
||||
}
|
||||
|
||||
.bulbMouth {
|
||||
animation: bulbMouthAnimation 3s ease-in-out;
|
||||
}
|
||||
|
||||
.bulbRightEye {
|
||||
animation: bulbRightEyeAnimation 3s ease-in-out;
|
||||
}
|
||||
|
||||
.pinkLine {
|
||||
animation: pinkLineAnimation 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes smallCloudAnimation {
|
||||
0% { transform: translateX(-70px); }
|
||||
100% { transform: translateX(0px); }
|
||||
}
|
||||
|
||||
@keyframes bulbLeftEyeAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
10% { fill: #00B3F4; }
|
||||
20% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
|
||||
@keyframes bulbMouthAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
30% { fill: #00B3F4; }
|
||||
40% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
|
||||
@keyframes bulbRightEyeAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
20% { fill: #00B3F4; }
|
||||
30% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
|
||||
@keyframes pinkLineAnimation {
|
||||
0% { stroke-dashoffset: 6; stroke-dasharray: 10 }
|
||||
50% { stroke-dashoffset: 0; stroke-dasharray: 10 }
|
||||
100% { stroke-dashoffset: 6; stroke-dasharray: 10 }
|
||||
|
||||
}
|
||||
</style>
|
||||
<g filter="url(#filter0_d_5169_13123)">
|
||||
<path class="smallCloud" d="M125.052 55.5064C125.189 55.5064 125.325 55.5134 125.461 55.5166C125.461 55.5132 125.461 55.5098 125.461 55.5064C125.461 43.6287 135.265 34 147.359 34C157.18 34 165.491 40.3497 168.268 49.0968C170.364 48.0125 172.75 47.3958 175.284 47.3958C183.614 47.3958 190.367 54.0276 190.367 62.2084C190.367 63.541 190.184 64.8315 189.848 66.06C191.361 65.3999 193.032 65.0256 194.795 65.0256C201.535 65.0256 207 70.3925 207 77.0128C207 83.6331 201.535 89 194.795 89H125.052C115.634 89 108 81.5022 108 72.2532C108 63.0042 115.634 55.5064 125.052 55.5064Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_5169_13123)">
|
||||
<path class="bigCloud" d="M163.614 79.4103C163.393 79.4103 163.176 79.4214 162.956 79.4265C162.956 79.4211 162.957 79.4157 162.957 79.4103C162.957 60.406 147.211 45 127.787 45C112.014 45 98.6665 55.1595 94.2064 69.1549C90.8394 67.42 87.007 66.4333 82.9373 66.4333C69.5593 66.4333 58.7144 77.0442 58.7144 90.1334C58.7144 92.2657 59.0068 94.3304 59.5465 96.2959C57.1166 95.2398 54.4331 94.641 51.6027 94.641C40.7764 94.641 32 103.228 32 113.82C32 124.413 40.7764 133 51.6027 133H163.614C178.739 133 191 121.004 191 106.205C191 91.4067 178.739 79.4103 163.614 79.4103Z" fill="white" />
|
||||
</g>
|
||||
<rect x="115" y="156" width="22" height="5" rx="2.5" fill="#0090ED"/>
|
||||
<rect x="114" y="149" width="24" height="5" rx="2.5" fill="#0090ED"/>
|
||||
<path class="bulb" d="M119.549 143.851H132.258C133.845 143.854 135.381 143.294 136.595 142.272C137.809 141.25 138.622 139.832 138.89 138.268L140.108 130.509C142.768 128.394 144.92 125.708 146.404 122.651C147.888 119.594 148.667 116.242 148.683 112.843C148.699 109.445 147.953 106.086 146.498 103.014C145.043 99.9426 142.917 97.2367 140.278 95.0961C134.934 90.7508 127.925 89.0731 121.049 90.494C112.172 92.3456 105.122 99.6195 103.502 108.592C101.986 116.988 105.051 125.182 111.509 130.165L112.917 138.268C113.185 139.832 113.997 141.251 115.211 142.273C116.425 143.295 117.962 143.855 119.549 143.851Z" fill="#00B3F4"/>
|
||||
<path class="bulbLeftEye" d="M119.385 107.759L120.089 110.787H117.095L117.799 107.759L115.459 109.869L114 107.287L116.994 106.393L114 105.45L115.535 102.918L117.799 105.028L117.095 102H120.089L119.359 105.078L121.725 102.918L123.209 105.5L120.114 106.418L123.209 107.337L121.674 109.869L119.385 107.759Z" fill="white"/>
|
||||
<path class="bulbMouth" d="M132.546 119C133.349 119 134.013 119.656 133.868 120.446C133.767 120.998 133.607 121.54 133.391 122.061C132.989 123.032 132.4 123.914 131.657 124.657C130.914 125.4 130.032 125.989 129.061 126.391C128.091 126.793 127.051 127 126 127C124.949 127 123.909 126.793 122.939 126.391C121.968 125.989 121.086 125.4 120.343 124.657C119.6 123.914 119.011 123.032 118.609 122.061C118.393 121.54 118.233 120.998 118.132 120.446C117.987 119.656 118.651 119 119.454 119C120.257 119 120.888 119.664 121.114 120.434C121.165 120.609 121.226 120.78 121.296 120.949C121.551 121.566 121.927 122.128 122.399 122.601C122.872 123.073 123.434 123.449 124.051 123.704C124.669 123.96 125.331 124.092 126 124.092C126.669 124.092 127.331 123.96 127.949 123.704C128.566 123.449 129.128 123.073 129.601 122.601C130.073 122.128 130.449 121.566 130.704 120.949C130.774 120.78 130.835 120.609 130.886 120.434C131.112 119.664 131.743 119 132.546 119Z" fill="white"/>
|
||||
<path class="bulbRightEye" d="M133.385 107.759L134.089 110.787H131.095L131.799 107.759L129.459 109.869L128 107.287L130.994 106.393L128 105.45L129.535 102.918L131.799 105.028L131.095 102H134.089L133.359 105.078L135.725 102.918L137.209 105.5L134.114 106.418L137.209 107.337L135.674 109.869L133.385 107.759Z" fill="white"/>
|
||||
<path class="pinkLine" d="M95 113L85 113" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="pinkLine" d="M102 90L94 83" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="pinkLine" d="M126 82L126 70" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="pinkLine" d="M151 91L159 84" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="pinkLine" d="M158 113L168 113" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_5169_13123" x="0" y="0" width="239" height="119" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5169_13123"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5169_13123" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_5169_13123" x="0" y="11" width="223" height="152" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5169_13123"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5169_13123" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 6.9 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
До Ширина: | Высота: | Размер: 22 KiB |
|
|
@ -10,11 +10,10 @@ import {
|
|||
HeartsBrokenImage,
|
||||
HeartsVerifiedImage,
|
||||
LightbulbImage,
|
||||
LockImage,
|
||||
PasswordImage,
|
||||
MailImage,
|
||||
RecoveryCodesImage,
|
||||
RecoveryKeyImage,
|
||||
SecurityShieldImage,
|
||||
TwoFactorAuthImage,
|
||||
} from '.';
|
||||
import { withLocalization } from 'fxa-react/lib/storybooks';
|
||||
|
|
@ -26,11 +25,10 @@ export default {
|
|||
HeartsBrokenImage,
|
||||
HeartsVerifiedImage,
|
||||
LightbulbImage,
|
||||
LockImage,
|
||||
PasswordImage,
|
||||
MailImage,
|
||||
RecoveryCodesImage,
|
||||
RecoveryKeyImage,
|
||||
SecurityShieldImage,
|
||||
TwoFactorAuthImage,
|
||||
},
|
||||
decorators: [withLocalization],
|
||||
|
|
@ -46,12 +44,10 @@ export const Key = () => <RecoveryKeyImage />;
|
|||
|
||||
export const Lightbulb = () => <LightbulbImage />;
|
||||
|
||||
export const Lock = () => <LockImage />;
|
||||
export const Password = () => <PasswordImage />;
|
||||
|
||||
export const Mail = () => <MailImage />;
|
||||
|
||||
export const RecoveryCodes = () => <RecoveryCodesImage />;
|
||||
|
||||
export const SecurityShield = () => <SecurityShieldImage />;
|
||||
|
||||
export const TwoFactorAuth = () => <TwoFactorAuthImage />;
|
||||
|
|
|
|||
|
|
@ -9,10 +9,9 @@ import { ReactComponent as RecoveryCodes } from './graphic_recovery_codes.svg';
|
|||
import { ReactComponent as TwoFactorAuth } from './graphic_two_factor_auth.svg';
|
||||
import { ReactComponent as PushFactorAuth } from './graphic_push_factor_auth.svg';
|
||||
import { ReactComponent as Mail } from './graphic_mail.svg';
|
||||
import { ReactComponent as SecurityShield } from './graphic_security_shield.svg';
|
||||
import { ReactComponent as Key } from './graphic_recovery_key.svg';
|
||||
import { ReactComponent as Lock } from './graphic_lock.svg';
|
||||
import { ReactComponent as Lightbulb } from './graphic_lightbulb.svg';
|
||||
import { ReactComponent as Key } from './graphic_recovery_key.min.svg';
|
||||
import { ReactComponent as Password } from './graphic_password.min.svg';
|
||||
import { ReactComponent as Lightbulb } from './graphic_recovery_key_hint.min.svg';
|
||||
import { ReactComponent as EmailCode } from './graphic_email_code.svg';
|
||||
import { ReactComponent as CircleCheckOutline } from './icon-circle-check-outline.svg';
|
||||
|
||||
|
|
@ -44,7 +43,7 @@ type PreparedImageProps =
|
|||
| PreparedImageAriaVisibleProps;
|
||||
|
||||
export const PreparedImage = (props: PreparedImageProps) => {
|
||||
const { className = 'w-3/5 mx-auto', ariaHidden, Image } = props;
|
||||
const { className = 'm-auto w-3/5', ariaHidden, Image } = props;
|
||||
const showAriaLabel =
|
||||
!ariaHidden && props?.ariaLabel && props?.ariaLabelFtlId;
|
||||
|
||||
|
|
@ -55,11 +54,7 @@ export const PreparedImage = (props: PreparedImageProps) => {
|
|||
<Image role="img" aria-label={props.ariaLabel} {...{ className }} />
|
||||
</FtlMsg>
|
||||
) : (
|
||||
<Image
|
||||
className={className}
|
||||
aria-hidden
|
||||
data-testid="aria-hidden-image"
|
||||
/>
|
||||
<Image aria-hidden data-testid="aria-hidden-image" {...{ className }} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
@ -124,29 +119,20 @@ export const MailImage = ({ className, ariaHidden }: ImageProps) => (
|
|||
/>
|
||||
);
|
||||
|
||||
export const SecurityShieldImage = ({ className, ariaHidden }: ImageProps) => (
|
||||
<PreparedImage
|
||||
ariaLabel="Illustration to represent an account recovery key."
|
||||
ariaLabelFtlId="security-shield-aria-label"
|
||||
Image={SecurityShield}
|
||||
{...{ className, ariaHidden }}
|
||||
/>
|
||||
);
|
||||
|
||||
export const RecoveryKeyImage = ({ className, ariaHidden }: ImageProps) => (
|
||||
<PreparedImage
|
||||
ariaLabel="Illustration to represent an account recovery key."
|
||||
ariaLabelFtlId="recovery-key-image-aria-label"
|
||||
Image={Key}
|
||||
{...{ className, ariaHidden }}
|
||||
{...{ ariaHidden, className }}
|
||||
/>
|
||||
);
|
||||
|
||||
export const LockImage = ({ className, ariaHidden }: ImageProps) => (
|
||||
export const PasswordImage = ({ className, ariaHidden }: ImageProps) => (
|
||||
<PreparedImage
|
||||
ariaLabel="Illustration of a lock."
|
||||
ariaLabelFtlId="lock-image-aria-label"
|
||||
Image={Lock}
|
||||
ariaLabel="Illustration to represent typing in a password."
|
||||
ariaLabelFtlId="password-image-aria-label"
|
||||
Image={Password}
|
||||
{...{ className, ariaHidden }}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -61,4 +61,14 @@ progress[value]::-moz-progress-bar {
|
|||
.break-word {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* This global setting ensures that all animated SVGs are paused if a user prefers reduced motion.
|
||||
Media queries that are directly added to SVG styles are lost when the SVG is imported as a react component */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
svg,
|
||||
svg * {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче