Skip to content

Commit d119c53

Browse files
matowdevmatowdev
committed
[PRAC/cont] Add "bootstrap-icons" files
Replacing all btn icons realized by ::before/after to Bootstrap's "i". Worth noting: - the possibilities, the potential of Bootstrap.. really awesome! core: B-3 / JS-BL
1 parent e563161 commit d119c53

File tree

2,061 files changed

+13461
-172
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,061 files changed

+13461
-172
lines changed

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

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
position: relative;
1818
border: 1px solid var(--main-purple);
1919
padding: 12px 25px;
20+
padding-right: 29px;
2021
min-width: 217px;
2122
font-family: var(--open-sans), sans-serif;
2223
font-weight: var(--semi-bold);
@@ -25,40 +26,15 @@
2526
background: transparent;
2627
outline: none;
2728
transition-property: border, color, background-color;
28-
transition-duration: 0.2s;
29+
transition-duration: var(--short);
2930
transition-timing-function: ease;
3031
}
3132

32-
.crm__add-btn::before,
33-
.crm__add-btn::after {
34-
content: "";
33+
.crm__add-btn-icon {
3534
position: absolute;
36-
left: 22px;
37-
width: 22px;
38-
height: 16px;
39-
background-repeat: no-repeat;
40-
background-position: center;
41-
background-size: contain;
42-
transition: opacity 0.2s ease;
43-
}
44-
45-
.crm__add-btn::before {
46-
background-image: url('../images/add-client.svg');
47-
opacity: 1;
48-
}
49-
50-
.crm__add-btn::after {
51-
opacity: 0;
52-
}
53-
54-
.crm__add-btn:focus-visible::after {
55-
background-image: url('../images/add-client-white.svg');
56-
opacity: 1;
57-
}
58-
59-
.crm__add-btn:active::after {
60-
background-image: url('../images/add-client-gray.svg');
61-
opacity: 1;
35+
top: 8px;
36+
left: 27px;
37+
font-size: 20px;
6238
}
6339

6440
.crm__add-btn:focus-visible:not(:hover) {
@@ -79,11 +55,6 @@
7955
/* media queries, any-hover */
8056

8157
@media (any-hover: hover) {
82-
.crm__add-btn:hover:not(:active)::after {
83-
background-image: url('../images/add-client-white.svg');
84-
opacity: 1;
85-
}
86-
8758
.crm__add-btn:hover:not(:active) {
8859
color: var(--white);
8960
background-color: var(--light-purple);

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

Lines changed: 73 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,64 @@
129129
color: var(--text-gray);
130130
}
131131

132+
.modal-btn {
133+
margin: 0;
134+
border: none;
135+
padding: 0;
136+
background: transparent;
137+
outline: none;
138+
}
139+
140+
.modal__add-body-add-btn {
141+
display: flex;
142+
justify-content: flex-end;
143+
align-items: center;
144+
position: relative;
145+
border: none;
146+
padding: 10px 20px;
147+
min-width: 191px;
148+
font-family: var(--open-sans), sans-serif;
149+
font-weight: var(--semi-bold);
150+
font-size: var(--default-fs);
151+
transition-property: color, background-color;
152+
transition-duration: var(--short);
153+
transition-timing-function: ease;
154+
}
155+
156+
.modal__add-body-add-btn-icon {
157+
position: absolute;
158+
top: 10px;
159+
left: 22px;
160+
font-size: 15px;
161+
color: var(--main-purple);
162+
opacity: 0;
163+
transition: opacity var(--short) ease;
164+
}
165+
166+
.modal__add-body-add-btn-icon.plus-circle-stroke {
167+
opacity: 1;
168+
}
169+
170+
.modal__add-body-add-btn:focus-visible:not(:hover) {
171+
color: var(--cold-purple);
172+
}
173+
174+
.modal__add-body-add-btn:focus-visible:active {
175+
color: var(--light-purple);
176+
}
177+
178+
.modal__add-body-add-btn:active:not(:disabled) {
179+
color: var(--light-purple);
180+
}
181+
182+
.modal__add-body-add-btn:disabled .modal__add-body-add-btn-icon {
183+
color: var(--gray);
184+
}
185+
186+
.add-modal-btn-margin {
187+
margin-bottom: 15px;
188+
}
189+
132190
.modal__add-body-add-contacts-wrap {
133191
display: flex;
134192
flex-direction: column;
@@ -278,154 +336,37 @@
278336
width: 27px;
279337
background: var(--select-gray);
280338
outline: none;
281-
transition-property: border, box-shadow;
282-
transition-duration: 0.2s;
339+
transition-property: border, color, box-shadow;
340+
transition-duration: var(--short);
283341
transition-timing-function: ease;
284342
}
285343

286-
.modal__add-body-add-x-btn:before,
287-
.modal__add-body-add-x-btn:after {
288-
content: '';
344+
.modal__add-body-add-x-btn-icon {
289345
position: absolute;
290346
top: 50%;
291347
left: 50%;
292348
transform: translate(-50%, -50%);
293-
width: 20px;
294-
height: 20px;
295-
background-repeat: no-repeat;
296-
background-position: center;
297-
background-size: contain;
298-
transition: opacity 0.2s ease;
299-
/* отработка клика и на arrow-icon */
300-
pointer-events: none;
301-
}
302-
303-
.modal__add-body-add-x-btn:before {
304-
background-image: url('../images/delete-contact-btn-gray.svg');
305-
opacity: 1;
306-
}
307-
308-
.modal__add-body-add-x-btn:after {
309-
background-image: url('../images/delete-contact-btn-red.svg');
310-
opacity: 0;
349+
font-size: 15px;
350+
color: var(--gray);
351+
transition: color var(--short) ease;
311352
}
312353

313-
.modal__add-body-add-x-btn:focus-visible {
354+
.modal__add-body-add-x-btn:focus-visible:not(:active) {
314355
border-color: var(--bootstrap-red);
315356
box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
316357
z-index: 1;
317358
}
318359

319-
.modal__add-body-add-x-btn:focus-visible::before {
320-
opacity: 0;
321-
}
322-
323-
.modal__add-body-add-x-btn:focus-visible:after {
324-
opacity: 1;
360+
.modal__add-body-add-x-btn:focus-visible:not(:active) .modal__add-body-add-x-btn-icon {
361+
color: var(--bootstrap-red);
325362
}
326363

327-
.modal__add-body-add-x-btn:active {
364+
.modal__add-body-add-x-btn:active:not(:focus-visible) {
328365
border-color: var(--gray);
329366
box-shadow: 0 0 0 .25rem rgba(200, 197, 209, 0.25);
330367
z-index: 1;
331368
}
332369

333-
.modal__add-body-add-x-btn:active:before {
334-
opacity: 1;
335-
}
336-
337-
.modal__add-body-add-x-btn:active:after {
338-
opacity: 0;
339-
}
340-
341-
.modal-btn {
342-
margin: 0;
343-
border: none;
344-
padding: 0;
345-
background: transparent;
346-
outline: none;
347-
}
348-
349-
.modal__add-body-add-btn {
350-
display: flex;
351-
justify-content: flex-end;
352-
align-items: center;
353-
position: relative;
354-
border: none;
355-
padding: 10px 20px;
356-
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;
363-
}
364-
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;
376-
}
377-
378-
.modal__add-body-add-btn::before {
379-
background-image: url('../images/add-plus-stroke.svg');
380-
opacity: 1;
381-
}
382-
383-
.modal__add-body-add-btn::after {
384-
background-image: url('../images/add-plus-fill.svg');
385-
opacity: 0;
386-
}
387-
388-
.modal__add-body-add-btn:focus-visible::before {
389-
opacity: 0;
390-
}
391-
392-
.modal__add-body-add-btn:focus-visible::after {
393-
opacity: 1;
394-
}
395-
396-
.modal__add-body-add-btn:active::before {
397-
opacity: 0;
398-
}
399-
400-
.modal__add-body-add-btn:active::after {
401-
opacity: 1;
402-
}
403-
404-
.modal__add-body-add-btn:disabled::before {
405-
opacity: 0;
406-
}
407-
408-
.modal__add-body-add-btn:disabled::after {
409-
background-image: url('../images/add-plus-stroke-gray.svg');
410-
opacity: 1;
411-
}
412-
413-
.modal__add-body-add-btn:focus-visible:not(:hover) {
414-
color: var(--cold-purple);
415-
}
416-
417-
.modal__add-body-add-btn:focus-visible:active {
418-
color: var(--light-purple);
419-
}
420-
421-
.modal__add-body-add-btn:active:not(:disabled) {
422-
color: var(--light-purple);
423-
}
424-
425-
.add-modal-btn-margin {
426-
margin-bottom: 15px;
427-
}
428-
429370
.modal__add-body-save-btn {
430371
align-self: center;
431372
margin-bottom: 5px;
@@ -434,7 +375,7 @@
434375
color: var(--white);
435376
background-color: var(--main-purple);
436377
transition-property: color, background-color;
437-
transition-duration: 0.2s;
378+
transition-duration: var(--short);
438379
transition-timing-function: ease;
439380
}
440381

@@ -475,12 +416,11 @@
475416
/* media queries, any-hover */
476417

477418
@media (any-hover: hover) {
478-
.modal__add-body-add-btn:hover:not(:active):not(:disabled)::before {
419+
.modal__add-body-add-btn:hover:not(:active):not(:disabled) .modal__add-body-add-btn-icon.plus-circle-stroke {
479420
opacity: 0;
480421
}
481422

482-
.modal__add-body-add-btn:hover:not(:active):not(:disabled)::after {
483-
background-image: url('../images/add-plus-fill.svg');
423+
.modal__add-body-add-btn:hover:not(:active):not(:disabled) .modal__add-body-add-btn-icon.plus-circle-fill {
484424
opacity: 1;
485425
}
486426

@@ -506,12 +446,8 @@
506446
z-index: 10;
507447
}
508448

509-
.modal__add-body-add-x-btn:hover:not(:active):before {
510-
opacity: 0;
511-
}
512-
513-
.modal__add-body-add-x-btn:hover:not(:active):after {
514-
opacity: 1;
449+
.modal__add-body-add-x-btn:hover:not(:active) .modal__add-body-add-x-btn-icon {
450+
color: var(--bootstrap-red);
515451
}
516452

517453
.modal__add-body-save-btn:hover:not(:active) {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="icon" href="images/favicon.png" type="image/png" sizes="32x32">
99
<link rel="stylesheet" href="css/normalize.css">
1010
<link rel="stylesheet" href="libs/bootstrap-v5.3.3/bootstrap.min.css">
11+
<link rel="stylesheet" href="libs/bootstrap-icons-v1.11.3/font/bootstrap-icons.css">
1112
<link rel="stylesheet" href="libs/tippy-v6.3.7/tippy.min.css">
1213
<link rel="stylesheet" href="libs/tippy-v6.3.7/animations/scale.css">
1314
<link rel="stylesheet" href="css/style.css">

0 commit comments

Comments
 (0)