Skip to content

Commit 7e1c502

Browse files
matowdevmatowdev
committed
[PRAC/cont] Add styles for modal window "add-btn"
Finishing styling modal window for "Add client" btn, accord template. Worth noting: - possible future corrections.. entering fixed dimensions (to exclude permanent offsets in footer). core: B-3 / JS-BL
1 parent 4bf9332 commit 7e1c502

File tree

6 files changed

+264
-14
lines changed

6 files changed

+264
-14
lines changed

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,14 @@
2525
max-width: 580px;
2626
}
2727

28-
.crm__search-form,
29-
.crm__search-form input,
30-
.crm__search-form input[type="text"] {
28+
.crm__search-form .crm__search-input[type="text"] {
3129
font-family: var(--open-sans), sans-serif;
30+
font-weight: var(--semi-bold);
3231
font-size: var(--default-fs);
32+
color: var(--black);
3333
}
3434

35-
.crm__search-form,
36-
.crm__search-form input::placeholder {
35+
.crm__search-form .crm__search-input::placeholder {
3736
color: var(--text-gray);
3837
}
3938

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

Lines changed: 193 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,12 @@
4040
}
4141

4242
.modal__add-header .modal__add-header-x-btn:focus {
43-
box-shadow: 0 0 0 0.25rem var(--bootstrap-red);
44-
opacity: 0.5;
43+
box-shadow: 0 0 0 .25rem var(--bootstrap-red);
44+
opacity: .5;
45+
}
46+
47+
.modal__add-body {
48+
margin-bottom: 95px;
4549
}
4650

4751
.modal__add-body-form {
@@ -50,8 +54,195 @@
5054
row-gap: 30px;
5155
}
5256

57+
.modal__add-body-form .modal__add-body-input[type="text"] {
58+
font-family: var(--open-sans), sans-serif;
59+
font-weight: var(--semi-bold);
60+
font-size: var(--default-fs);
61+
}
62+
63+
.modal__add-body-form .modal__add-body-input::placeholder {
64+
color: var(--text-gray);
65+
}
66+
67+
.modal__add-body-input-wrap {
68+
position: relative;
69+
}
70+
71+
.modal__add-body-input-wrap .modal__add-body-span {
72+
position: absolute;
73+
top: 50%;
74+
font-size: 16px;
75+
color: #a86cf3;
76+
transform: translateY(-50%);
77+
pointer-events: none;
78+
visibility: hidden;
79+
}
80+
81+
.modal__add-body-input-wrap input:placeholder-shown+.modal__add-body-span {
82+
visibility: visible;
83+
}
84+
85+
.modal__add-body-input-wrap .add-surname-input-span {
86+
left: 67px;
87+
}
88+
89+
.modal__add-body-input-wrap .add-name-input-span {
90+
left: 31px;
91+
}
92+
5393
.modal__add-body-input {
5494
border: none;
5595
border-bottom: 1px solid var(--gray);
5696
border-radius: 0;
97+
padding: 4px 2px 4px 1px;
98+
caret-color: var(--main-purple);
99+
}
100+
101+
.modal__add-body-input:focus {
102+
border-color: var(--main-purple);
103+
/* тень только снизу */
104+
box-shadow: 0 .25rem 0 rgba(152, 115, 255, .25);
105+
outline: none;
106+
}
107+
108+
.modal__add-body-input.is-invalid:focus {
109+
border-color: var(--bootstrap-red);
110+
/* тень только снизу */
111+
box-shadow: 0 .25rem 0 rgba(220, 53, 69, .25);
112+
outline: none;
113+
}
114+
115+
.modal__add-footer {
116+
display: flex;
117+
flex-direction: column;
118+
}
119+
120+
.modal__add-footer-add-btn-wrap {
121+
position: absolute;
122+
bottom: 132px;
123+
display: flex;
124+
justify-content: center;
125+
margin: 0;
126+
width: 100%;
127+
background-color: rgba(200, 197, 209, .3);
128+
}
129+
130+
.modal__add-btn {
131+
margin: 0;
132+
border: none;
133+
padding: 0;
134+
font-family: var(--open-sans), sans-serif;
135+
font-weight: var(--semi-bold);
136+
font-size: var(--default-fs);
137+
background: transparent;
138+
outline: none;
139+
overflow: hidden;
140+
transition-property: color, background-color;
141+
transition-duration: var(--short);
142+
transition-timing-function: ease;
143+
}
144+
145+
.modal__add-footer-add-btn {
146+
position: relative;
147+
display: flex;
148+
justify-content: flex-end;
149+
align-items: center;
150+
padding: 10px 20px;
151+
min-width: 191px;
152+
}
153+
154+
.modal__add-footer-add-btn:focus-visible:not(:hover) {
155+
color: var(--main-purple);
156+
}
157+
158+
.modal__add-footer-add-btn:focus-visible:not(:hover) .stroke-add-modal-icon {
159+
opacity: 0;
160+
}
161+
162+
.modal__add-footer-add-btn:focus-visible:not(:hover) .fill-add-modal-icon {
163+
opacity: 1;
164+
}
165+
166+
.modal__add-footer-add-btn:focus-visible:active {
167+
color: var(--light-purple);
168+
}
169+
170+
.modal__add-footer-add-btn:active {
171+
color: var(--light-purple);
172+
}
173+
174+
.modal__add-footer-btn-icon {
175+
position: absolute;
176+
left: 20px;
177+
width: 19px;
178+
height: 19px;
179+
transition: opacity var(--short) ease;
180+
}
181+
182+
.stroke-add-modal-icon {
183+
background: url("../images/add-plus-stroke.svg") no-repeat center / contain;
184+
opacity: 1;
185+
}
186+
187+
.fill-add-modal-icon {
188+
background: url("../images/add-plus-fill.svg") no-repeat center / contain;
189+
opacity: 0;
190+
}
191+
192+
193+
.modal__add-footer-save-btn {
194+
margin-bottom: 5px;
195+
padding: 17px 35px;
196+
min-width: 150px;
197+
color: var(--white);
198+
background-color: var(--main-purple);
199+
}
200+
201+
.modal__add-footer-save-btn:focus-visible:not(:hover) {
202+
background-color: var(--dark-purple);
203+
}
204+
205+
.modal__add-footer-save-btn:focus-visible:active {
206+
background-color: var(--gray);
207+
}
208+
209+
.modal__add-footer-save-btn:active {
210+
background-color: var(--gray);
211+
}
212+
213+
.modal__add-footer-cancel-btn {
214+
font-weight: var(--regular);
215+
text-decoration-line: underline;
216+
}
217+
218+
.modal__add-footer-cancel-btn:focus-visible {
219+
color: var(--dark-purple);
220+
}
221+
222+
.modal__add-footer-cancel-btn:focus-visible:active {
223+
color: var(--gray);
224+
}
225+
226+
.modal__add-footer-cancel-btn:active {
227+
color: var(--gray);
228+
}
229+
230+
/* media queries, any-hover */
231+
232+
@media (any-hover: hover) {
233+
.modal__add-footer-add-btn:hover:not(:active) {
234+
color: var(--main-purple);
235+
}
236+
237+
.modal__add-footer-add-btn:hover:not(:active) .stroke-add-modal-icon {
238+
opacity: 0;
239+
}
240+
241+
.modal__add-footer-add-btn:hover:not(:active) .fill-add-modal-icon {
242+
opacity: 1;
243+
}
244+
245+
.modal__add-footer-save-btn:hover:not(:active) {
246+
background-color: var(--light-purple);
247+
}
57248
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
--main-purple: #9873FF;
2222
--light-purple: #B89EFF;
2323
--dark-purple: #8052FF;
24+
--specific-purple: #7B61FF;
2425
--gray: #C8C5D1;
2526
--text-gray: #B0B0B0;
2627
--specific-gray: #85859b;

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/images/add-plus-fill.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/images/add-plus-stroke.svg‎

Lines changed: 10 additions & 0 deletions
Loading

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

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -238,16 +238,21 @@
238238
const addModalBodyForm = document.createElement('form');
239239
const addModalBodySurnameInputWrap = document.createElement('div');
240240
const addModalBodySurnameInput = document.createElement('input');
241+
const addModalBodySurnameSpan = document.createElement('span');
241242
const addModalBodySurnameFeedback = document.createElement('div');
242243
const addModalBodyNameInputWrap = document.createElement('div');
243244
const addModalBodyNameInput = document.createElement('input');
245+
const addModalBodyNameSpan = document.createElement('span');
244246
const addModalBodyNameFeedback = document.createElement('div');
245247
const addModalBodyPatronymicInputWrap = document.createElement('div');
246248
const addModalBodyPatronymicInput = document.createElement('input');
247249
const addModalBodyPatronymicFeedback = document.createElement('div');
248250
const addModalFooter = document.createElement('div');
249251
const addModalFooterAddBtnWrap = document.createElement('div');
250252
const addModalFooterAddBtn = document.createElement('button');
253+
const addModalFooterAddBtnStrokeIcon = document.createElement('span');
254+
const addModalFooterAddBtnFillIcon = document.createElement('span');
255+
const addModalFooterAddBtnText = document.createElement('span');
251256
const addModalFooterSaveBtn = document.createElement('button');
252257
const addModalFooterCancelBtn = document.createElement('button');
253258

@@ -274,6 +279,10 @@
274279
'add-surname-input',
275280
'form-control'
276281
);
282+
addModalBodySurnameSpan.classList.add(
283+
'modal__add-body-span',
284+
'add-surname-input-span'
285+
);
277286
addModalBodySurnameFeedback.classList.add(
278287
'modal__add-body-input-feedback',
279288
'surname-input-feedback',
@@ -288,6 +297,10 @@
288297
'add-name-input',
289298
'form-control'
290299
);
300+
addModalBodyNameSpan.classList.add(
301+
'modal__add-body-span',
302+
'add-name-input-span'
303+
);
291304
addModalBodyNameFeedback.classList.add(
292305
'modal__add-body-input-feedback',
293306
'name-input-feedback',
@@ -309,9 +322,27 @@
309322
);
310323
addModalFooter.classList.add('modal__add-footer', 'modal-footer');
311324
addModalFooterAddBtnWrap.classList.add('modal__add-footer-add-btn-wrap');
312-
addModalFooterAddBtn.classList.add('modal__add-footer-add-btn');
313-
addModalFooterSaveBtn.classList.add('modal__add-footer-save-btn');
314-
addModalFooterCancelBtn.classList.add('modal__add-footer-cancel-btn');
325+
addModalFooterAddBtn.classList.add(
326+
'modal__add-footer-add-btn',
327+
'modal__add-btn'
328+
);
329+
addModalFooterAddBtnStrokeIcon.classList.add(
330+
'modal__add-footer-btn-icon',
331+
'stroke-add-modal-icon'
332+
);
333+
addModalFooterAddBtnFillIcon.classList.add(
334+
'modal__add-footer-btn-icon',
335+
'fill-add-modal-icon'
336+
);
337+
addModalFooterAddBtnText.classList.add('modal__add-footer-add-btn-text');
338+
addModalFooterSaveBtn.classList.add(
339+
'modal__add-footer-save-btn',
340+
'modal__add-btn'
341+
);
342+
addModalFooterCancelBtn.classList.add(
343+
'modal__add-footer-cancel-btn',
344+
'modal__add-btn'
345+
);
315346

316347
addBtn.setAttribute('id', 'add-btn');
317348
addBtn.setAttribute('type', 'button');
@@ -357,7 +388,9 @@
357388
'Введены не корректные данные.. исключите: английские буквы, цифры!';
358389
addModalBodyPatronymicFeedback.textContent =
359390
'Введены не корректные данные.. исключите: английские буквы, цифры!';
360-
addModalFooterAddBtn.textContent = 'Добавить контакт';
391+
addModalBodySurnameSpan.textContent = '*';
392+
addModalBodyNameSpan.textContent = '*';
393+
addModalFooterAddBtnText.textContent = 'Добавить контакт';
361394
addModalFooterSaveBtn.textContent = 'Сохранить';
362395
addModalFooterCancelBtn.textContent = 'Отмена';
363396

@@ -366,10 +399,12 @@
366399
addModalHeader.append(addModalHeaderTitle, addModalHeaderXBtn);
367400
addModalBodySurnameInputWrap.append(
368401
addModalBodySurnameInput,
402+
addModalBodySurnameSpan,
369403
addModalBodySurnameFeedback
370404
);
371405
addModalBodyNameInputWrap.append(
372406
addModalBodyNameInput,
407+
addModalBodyNameSpan,
373408
addModalBodyNameFeedback
374409
);
375410
addModalBodyPatronymicInputWrap.append(
@@ -382,6 +417,11 @@
382417
addModalBodyPatronymicInputWrap
383418
);
384419
addModalBody.append(addModalBodyForm);
420+
addModalFooterAddBtn.append(
421+
addModalFooterAddBtnStrokeIcon,
422+
addModalFooterAddBtnFillIcon,
423+
addModalFooterAddBtnText
424+
);
385425
addModalFooterAddBtnWrap.append(addModalFooterAddBtn);
386426
addModalFooter.append(
387427
addModalFooterAddBtnWrap,
@@ -492,7 +532,7 @@
492532
if (
493533
/[^а-яА-ЯёЁ\s-]/.test(target.value) ||
494534
(target.value.match(/-/g) || []).length > 1 ||
495-
/\s{2,}/.test(target.value)
535+
/\s{1,}/.test(target.value)
496536
) {
497537
target.classList.add('is-invalid');
498538

@@ -502,8 +542,7 @@
502542
} else if ((target.value.match(/-/g) || []).length > 1) {
503543
invalidFeed.textContent = 'Некорректный ввод! Только ОДИН дефис!';
504544
} else {
505-
invalidFeed.textContent =
506-
'Некорректный ввод! Только ОДИН пробел между словами!';
545+
invalidFeed.textContent = 'Некорректный ввод! Никаких пробелов!';
507546
}
508547
} else {
509548
target.classList.remove('is-invalid');

0 commit comments

Comments
 (0)