fix(resume): use design-system .btn component for PDF button
- Use btn btn--primary btn--flat btn--resume (existing pattern) - btn__icon with cv.svg mask already defined in design system - Remove all custom fab--primary overrides - Keep only btn__spinner and loading state CSS
This commit is contained in:
1 parent
f173efd339
commit
d7e717e2e7
3 files changed
+19
-36
No files matched your search
+11
-28
@@ -954,46 +954,29 @@ a.fab--secondary:visited {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── PDF download FAB icon ── */
|
||||
.fab-primary__ico--pdf {
|
||||
mask-image: url("../assets/shared/icons/cv.svg");
|
||||
-webkit-mask-image: url("../assets/shared/icons/cv.svg");
|
||||
}
|
||||
|
||||
.fab--label {
|
||||
width: auto;
|
||||
padding: 0.65rem 1.1rem;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.fab-primary__label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fab-primary__spinner {
|
||||
/* ── PDF download button: loading state ── */
|
||||
.btn__spinner {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid color-mix(in hsl, var(--on-accent) 25%, transparent);
|
||||
border-top-color: var(--on-accent);
|
||||
border-radius: 50%;
|
||||
animation: fab-primary-spin 0.6s linear infinite;
|
||||
z-index: 3;
|
||||
animation: btn-spin 0.6s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes fab-primary-spin {
|
||||
@keyframes btn-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
[data-resume-pdf-btn][data-loading="true"] .fab-primary__ico--pdf {
|
||||
[data-resume-pdf-btn][data-loading="true"] .btn__icon {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-resume-pdf-btn][data-loading="true"] .fab-primary__spinner {
|
||||
[data-resume-pdf-btn][data-loading="true"] .btn__spinner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -293,10 +293,10 @@
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<button type="button" class="fab fab--primary fab--label" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
|
||||
<span class="fab-primary__ico fab-primary__ico--pdf" aria-hidden="true"></span>
|
||||
<span class="fab-primary__label">Скачать в PDF</span>
|
||||
<span class="fab-primary__spinner" aria-hidden="true"></span>
|
||||
<button type="button" class="btn btn--primary btn--flat btn--resume" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
|
||||
<span class="btn__icon" aria-hidden="true"></span>
|
||||
<span>Скачать в PDF</span>
|
||||
<span class="btn__spinner" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<button type="button" class="fab fab--primary fab--label" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
|
||||
<span class="fab-primary__ico fab-primary__ico--pdf" aria-hidden="true"></span>
|
||||
<span class="fab-primary__label">Скачать в PDF</span>
|
||||
<span class="fab-primary__spinner" aria-hidden="true"></span>
|
||||
<button type="button" class="btn btn--primary btn--flat btn--resume" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
|
||||
<span class="btn__icon" aria-hidden="true"></span>
|
||||
<span>Скачать в PDF</span>
|
||||
<span class="btn__spinner" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
Reference in new issue
Block a user