Skip to content

Commit e563161

Browse files
matowdevmatowdev
committed
[PRAC/cont] Correct logic for adding icons (more)
Exclude spans, chg to ::before/after logic in "add-modal" contact btn. Worth noting: - not full states/transitions synchronization, i.e. the button and icons. core: B-3 / JS-BL
1 parent 3680b33 commit e563161

File tree

3 files changed

+62
-87
lines changed

3 files changed

+62
-87
lines changed

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm-add.css‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,13 @@
7979
/* media queries, any-hover */
8080

8181
@media (any-hover: hover) {
82-
.crm__add-btn:hover:not(:active) {
83-
color: var(--white);
84-
background-color: var(--light-purple);
85-
}
86-
87-
.crm__add-btn:hover::before {
88-
opacity: 0;
89-
}
90-
9182
.crm__add-btn:hover:not(:active)::after {
9283
background-image: url('../images/add-client-white.svg');
9384
opacity: 1;
9485
}
86+
87+
.crm__add-btn:hover:not(:active) {
88+
color: var(--white);
89+
background-color: var(--light-purple);
90+
}
9591
}

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/modal-add.css‎

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -338,91 +338,92 @@
338338
opacity: 0;
339339
}
340340

341-
.modal__add-btn {
341+
.modal-btn {
342342
margin: 0;
343343
border: none;
344344
padding: 0;
345-
font-family: var(--open-sans), sans-serif;
346-
font-weight: var(--semi-bold);
347-
font-size: var(--default-fs);
348345
background: transparent;
349346
outline: none;
350-
overflow: hidden;
351-
transition-property: color, background-color;
352-
transition-duration: var(--short);
353-
transition-timing-function: ease;
354347
}
355348

356349
.modal__add-body-add-btn {
357-
position: relative;
358350
display: flex;
359351
justify-content: flex-end;
360352
align-items: center;
353+
position: relative;
354+
border: none;
361355
padding: 10px 20px;
362356
min-width: 191px;
357+
font-family: var(--open-sans), sans-serif;
358+
font-weight: var(--semi-bold);
359+
font-size: var(--default-fs);
360+
transition-property: color, background-color;
361+
transition-duration: 0.2s;
362+
transition-timing-function: ease;
363363
}
364364

365-
.modal__add-body-add-btn:focus-visible:not(:hover) {
366-
color: var(--cold-purple);
365+
.modal__add-body-add-btn::before,
366+
.modal__add-body-add-btn::after {
367+
content: "";
368+
position: absolute;
369+
left: 20px;
370+
width: 19px;
371+
height: 19px;
372+
background-repeat: no-repeat;
373+
background-position: center;
374+
background-size: contain;
375+
transition: opacity 0.2s ease;
367376
}
368377

369-
.modal__add-body-add-btn:focus-visible:not(:hover) .stroke-add-modal-icon {
370-
opacity: 0;
378+
.modal__add-body-add-btn::before {
379+
background-image: url('../images/add-plus-stroke.svg');
380+
opacity: 1;
371381
}
372382

373-
.modal__add-body-add-btn:focus-visible:not(:hover) .fill-add-modal-icon {
374-
opacity: 1;
383+
.modal__add-body-add-btn::after {
384+
background-image: url('../images/add-plus-fill.svg');
385+
opacity: 0;
375386
}
376387

377-
.modal__add-body-add-btn:focus-visible:active {
378-
color: var(--light-purple);
388+
.modal__add-body-add-btn:focus-visible::before {
389+
opacity: 0;
379390
}
380391

381-
.modal__add-body-add-btn:active:not(:disabled) {
382-
color: var(--light-purple);
392+
.modal__add-body-add-btn:focus-visible::after {
393+
opacity: 1;
383394
}
384395

385-
.modal__add-body-add-btn:active:not(:disabled) .stroke-add-modal-icon {
396+
.modal__add-body-add-btn:active::before {
386397
opacity: 0;
387398
}
388399

389-
.modal__add-body-add-btn:active:not(:disabled) .fill-add-modal-icon {
400+
.modal__add-body-add-btn:active::after {
390401
opacity: 1;
391402
}
392403

393-
.modal__add-body-add-btn:disabled .stroke-add-modal-icon {
404+
.modal__add-body-add-btn:disabled::before {
394405
opacity: 0;
395406
}
396407

397-
.modal__add-body-add-btn:disabled .stroke-gray-add-modal-icon {
408+
.modal__add-body-add-btn:disabled::after {
409+
background-image: url('../images/add-plus-stroke-gray.svg');
398410
opacity: 1;
399411
}
400412

401-
.add-modal-btn-margin {
402-
margin-bottom: 15px;
403-
}
404-
405-
.modal__add-body-btn-icon {
406-
position: absolute;
407-
left: 20px;
408-
width: 19px;
409-
height: 19px;
410-
transition: opacity var(--short) ease;
413+
.modal__add-body-add-btn:focus-visible:not(:hover) {
414+
color: var(--cold-purple);
411415
}
412416

413-
.stroke-add-modal-icon {
414-
background: url("../images/add-plus-stroke.svg") no-repeat center / contain;
415-
opacity: 1;
417+
.modal__add-body-add-btn:focus-visible:active {
418+
color: var(--light-purple);
416419
}
417420

418-
.stroke-gray-add-modal-icon {
419-
background: url("../images/add-plus-stroke-gray.svg") no-repeat center / contain;
420-
opacity: 0;
421+
.modal__add-body-add-btn:active:not(:disabled) {
422+
color: var(--light-purple);
421423
}
422424

423-
.fill-add-modal-icon {
424-
background: url("../images/add-plus-fill.svg") no-repeat center / contain;
425-
opacity: 0;
425+
.add-modal-btn-margin {
426+
margin-bottom: 15px;
426427
}
427428

428429
.modal__add-body-save-btn {
@@ -432,6 +433,9 @@
432433
max-width: 150px;
433434
color: var(--white);
434435
background-color: var(--main-purple);
436+
transition-property: color, background-color;
437+
transition-duration: 0.2s;
438+
transition-timing-function: ease;
435439
}
436440

437441
.modal__add-body-save-btn:focus-visible:not(:hover) {
@@ -471,18 +475,19 @@
471475
/* media queries, any-hover */
472476

473477
@media (any-hover: hover) {
474-
.modal__add-body-add-btn:hover:not(:active):not(:disabled) {
475-
color: var(--cold-purple);
476-
}
477-
478-
.modal__add-body-add-btn:hover:not(:active):not(:disabled) .stroke-add-modal-icon {
478+
.modal__add-body-add-btn:hover:not(:active):not(:disabled)::before {
479479
opacity: 0;
480480
}
481481

482-
.modal__add-body-add-btn:hover:not(:active):not(:disabled) .fill-add-modal-icon {
482+
.modal__add-body-add-btn:hover:not(:active):not(:disabled)::after {
483+
background-image: url('../images/add-plus-fill.svg');
483484
opacity: 1;
484485
}
485486

487+
.modal__add-body-add-btn:hover:not(:active):not(:disabled) {
488+
color: var(--cold-purple);
489+
}
490+
486491
.modal__add-body-add-contact-item:hover:not(:active) {
487492
background-color: var(--select-gray);
488493
}

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js‎

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -260,10 +260,6 @@
260260
const addModalBodyAddContactsWrap = document.createElement('div');
261261
const addModalBodyAddContactsRowWrap = document.createElement('div');
262262
const addModalBodyAddBtn = document.createElement('button');
263-
const addModalBodyAddBtnStrokeIcon = document.createElement('span');
264-
const addModalBodyAddBtnStrokeIconGray = document.createElement('span');
265-
const addModalBodyAddBtnFillIcon = document.createElement('span');
266-
const addModalBodyAddBtnText = document.createElement('span');
267263
const addModalBodySaveBtn = document.createElement('button');
268264
const addModalFooter = document.createElement('div');
269265
const addModalFooterCancelBtn = document.createElement('button');
@@ -354,28 +350,12 @@
354350
'modal__add-body-add-contacts-row-wrap',
355351
'd-none'
356352
);
357-
addModalBodyAddBtn.classList.add('modal__add-body-add-btn', 'modal__add-btn');
358-
addModalBodyAddBtnStrokeIcon.classList.add(
359-
'modal__add-body-btn-icon',
360-
'stroke-add-modal-icon'
361-
);
362-
addModalBodyAddBtnStrokeIconGray.classList.add(
363-
'modal__add-body-btn-icon',
364-
'stroke-gray-add-modal-icon'
365-
);
366-
addModalBodyAddBtnFillIcon.classList.add(
367-
'modal__add-body-btn-icon',
368-
'fill-add-modal-icon'
369-
);
370-
addModalBodyAddBtnText.classList.add('modal__add-body-add-btn-text');
371-
addModalBodySaveBtn.classList.add(
372-
'modal__add-body-save-btn',
373-
'modal__add-btn'
374-
);
353+
addModalBodyAddBtn.classList.add('modal__add-body-add-btn', 'modal-btn');
354+
addModalBodySaveBtn.classList.add('modal__add-body-save-btn', 'modal-btn');
375355
addModalFooter.classList.add('modal__add-footer', 'modal-footer');
376356
addModalFooterCancelBtn.classList.add(
377357
'modal__add-footer-cancel-btn',
378-
'modal__add-btn'
358+
'modal-btn'
379359
);
380360

381361
addBtn.setAttribute('id', 'add-btn');
@@ -439,7 +419,7 @@
439419
addModalBodyPatronymicInputLabel.textContent = 'Отчество';
440420
addModalBodyPatronymicFeedback.textContent =
441421
'Введены не корректные данные.. исключите: английские буквы, цифры!';
442-
addModalBodyAddBtnText.textContent = 'Добавить контакт';
422+
addModalBodyAddBtn.textContent = 'Добавить контакт';
443423
addModalBodySaveBtn.textContent = 'Сохранить';
444424
addModalFooterCancelBtn.textContent = 'Отмена';
445425

@@ -467,12 +447,6 @@
467447
addModalBodyNameInputWrap,
468448
addModalBodyPatronymicInputWrap
469449
);
470-
addModalBodyAddBtn.append(
471-
addModalBodyAddBtnStrokeIcon,
472-
addModalBodyAddBtnStrokeIconGray,
473-
addModalBodyAddBtnFillIcon,
474-
addModalBodyAddBtnText
475-
);
476450
addModalBodyAddContactsWrap.append(
477451
addModalBodyAddContactsRowWrap,
478452
addModalBodyAddBtn

0 commit comments

Comments
 (0)