Skip to content

Commit b993841

Browse files
matowdevmatowdev
committed
[PROJ-18.13/st] hiding-showing-pop-up-window
Adding/copying files from the previous realization. FS-dev: B-3 / JS basic
1 parent 55250d1 commit b993841

36 files changed

+1997
-0
lines changed

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-13-hiding-showing-pop-up-window/README.md‎

Whitespace-only changes.

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-13-hiding-showing-pop-up-window/css/app.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.app {
2+
display: flex;
3+
margin: 20px auto;
4+
border: 2px solid var(--main-border-color, #E7EBFB);
5+
border-radius: var(--default-br, 10px);
6+
padding: var(--app-padding, 30px);
7+
max-width: var(--app-max-width, 1440px);
8+
}

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-13-hiding-showing-pop-up-window/css/content.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.content {
2+
display: flex;
3+
flex-direction: column;
4+
row-gap: 30px;
5+
border-top-right-radius: var(--default-br, 10px);
6+
border-bottom-right-radius: var(--default-br, 10px);
7+
padding: 45px;
8+
width: 100%;
9+
background: var(--bg-main-page, #F3F6FD);
10+
}
11+
12+
.content__header {
13+
display: flex;
14+
justify-content: space-between;
15+
}
16+
17+
.content__title {
18+
padding-left: 8px;
19+
font-size: 30px;
20+
line-height: 100%;
21+
}
22+
23+
/* media queries, any-hover */
24+
25+
@media (max-width: 992px) {
26+
.content {
27+
padding-right: 30px;
28+
padding-left: 30px;
29+
}
30+
}
31+
32+
@media (max-width: 768px) {
33+
.content__header {
34+
flex-direction: column;
35+
align-items: flex-start;
36+
row-gap: 20px;
37+
}
38+
}

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-13-hiding-showing-pop-up-window/css/fonts.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* comfortaa, light - 300 - cyrillic_latin */
2+
@font-face {
3+
font-family: "Comfortaa";
4+
font-style: normal;
5+
font-weight: 300;
6+
font-display: swap;
7+
src: url("../fonts/comfortaa-v47-cyrillic_latin-300.woff2") format("woff2");
8+
}
9+
10+
/* comfortaa, regular - 400 - cyrillic_latin */
11+
@font-face {
12+
font-family: "Comfortaa";
13+
font-style: normal;
14+
font-weight: 400;
15+
font-display: swap;
16+
src: url("../fonts/comfortaa-v47-cyrillic_latin-regular.woff2") format("woff2");
17+
}
18+
19+
/* comfortaa, medium - 500 - cyrillic_latin */
20+
@font-face {
21+
font-family: "Comfortaa";
22+
font-style: normal;
23+
font-weight: 500;
24+
font-display: swap;
25+
src: url("../fonts/comfortaa-v47-cyrillic_latin-500.woff2") format("woff2");
26+
}
27+
28+
/* comfortaa, semi bold - 600 - cyrillic_latin */
29+
@font-face {
30+
font-family: "Comfortaa";
31+
font-style: normal;
32+
font-weight: 600;
33+
font-display: swap;
34+
src: url("../fonts/comfortaa-v47-cyrillic_latin-600.woff2") format("woff2");
35+
}
36+
37+
/* comfortaa, bold - 700 - cyrillic_latin */
38+
@font-face {
39+
font-family: "Comfortaa";
40+
font-style: normal;
41+
font-weight: 700;
42+
font-display: swap;
43+
src: url("../fonts/comfortaa-v47-cyrillic_latin-700.woff2") format("woff2");
44+
}

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-13-hiding-showing-pop-up-window/css/habbit-days.css‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
.habbit-days__list {
2+
display: flex;
3+
flex-direction: column;
4+
row-gap: 12px;
5+
width: 100%;
6+
}
7+
8+
.habbit-days__item {
9+
display: flex;
10+
justify-content: flex-start;
11+
align-items: center;
12+
border-radius: var(--default-br, 10px);
13+
min-height: 60px;
14+
background: var(--add-color-0, #fff);
15+
overflow: hidden;
16+
}
17+
18+
.habbit-days__label {
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
align-self: stretch;
23+
flex-shrink: 0;
24+
border-right: 1px solid var(--add-color-8, #E7EBFB);
25+
padding: 15px;
26+
width: 100%;
27+
max-width: 130px;
28+
font-weight: var(--medium, 500);
29+
text-align: center;
30+
background: var(--add-color-10, #FBFAFF);
31+
}
32+
33+
.habbit-days__comment-wrap {
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
align-self: stretch;
38+
padding: 15px 10px 15px 25px;
39+
width: 100%;
40+
}
41+
42+
.habbit-days__comment {
43+
font-weight: var(--medium, 500);
44+
font-size: 16px;
45+
line-height: 130%;
46+
color: var(--secondary-color, #23235F);
47+
}
48+
49+
.habbit-days__delete-btn {
50+
display: flex;
51+
justify-content: center;
52+
align-items: center;
53+
flex-shrink: 0;
54+
border: none;
55+
border-radius: var(--main-br-radius, 10px);
56+
width: 40px;
57+
height: 30px;
58+
background: transparent;
59+
overflow: hidden;
60+
cursor: pointer;
61+
transition-property: border-radius, background;
62+
transition-duration: var(--short, 0.3s);
63+
transition-timing-function: ease-in-out;
64+
will-change: border-radius, background;
65+
}
66+
67+
.habbit-days__delete-btn:focus-visible {
68+
outline-color: var(--add-color-11, #a87ae4);
69+
}
70+
71+
.habbit-days__form {
72+
display: flex;
73+
align-items: center;
74+
align-self: stretch;
75+
gap: 15px 10px;
76+
padding: 10px 15px 10px 25px;
77+
width: 100%;
78+
}
79+
80+
.habbit-days__form-input {
81+
flex: 1;
82+
border: 1px solid var(--main-border-color, #E7EBFB);
83+
border-radius: var(--main-br-radius, 10px);
84+
padding-right: 15px;
85+
padding-left: 50px;
86+
height: 100%;
87+
font-family: var(--default-ff), sans-serif;
88+
font-weight: var(--medium, 500);
89+
font-size: 16px;
90+
color: var(--secondary-color, #23235F);
91+
background: url('../images/comment-icon.svg') no-repeat 22px center / 18px 18px;
92+
caret-color: var(--add-color-11, #a87ae4);
93+
}
94+
95+
.habbit-days__form-input::placeholder {
96+
font-weight: var(--regular, 400);
97+
font-size: 14px;
98+
color: var(--add-color-1, #8899A8);
99+
}
100+
101+
.habbit-days__form-input:focus-visible {
102+
outline-color: var(--add-color-11, #a87ae4);
103+
}
104+
105+
.comment-error {
106+
outline: 2px solid var(--add-color-12, #bd0b22);
107+
}
108+
109+
.habbit-days__form-btn {
110+
display: flex;
111+
justify-content: center;
112+
align-items: center;
113+
align-self: stretch;
114+
border: none;
115+
border-radius: var(--main-br-radius, 10px);
116+
padding: 10px 20px;
117+
width: 100%;
118+
max-width: 120px;
119+
font-family: var(--default-ff), sans-serif;
120+
font-weight: var(--medium, 500);
121+
font-size: 13px;
122+
line-height: normal;
123+
text-align: center;
124+
color: var(--add-color-5, #5051F9);
125+
background: var(--add-color-4, #EDECFE);
126+
cursor: pointer;
127+
transition-property: color, background;
128+
transition-duration: var(--short, 0.3s);
129+
transition-timing-function: ease-in-out;
130+
will-change: color, background;
131+
}
132+
133+
.habbit-days__form-btn:focus-visible {
134+
outline-color: var(--add-color-11, #a87ae4);
135+
}
136+
137+
/* media queries, any-hover */
138+
139+
@media (max-width: 992px) {
140+
.habbit-days__label {
141+
padding-right: 10px;
142+
padding-left: 10px;
143+
max-width: 110px;
144+
}
145+
146+
.habbit-days__comment {
147+
font-size: 14px;
148+
}
149+
}
150+
151+
@media (max-width: 768px) {
152+
.habbit-days__item {
153+
flex-direction: column;
154+
}
155+
156+
.habbit-days__label {
157+
border-right: none;
158+
border-bottom: 1px solid var(--add-color-8, #E7EBFB);
159+
max-width: 100%;
160+
}
161+
162+
.habbit-days__form-input {
163+
min-height: 40px;
164+
}
165+
}
166+
167+
@media (any-hover: hover) {
168+
.habbit-days__delete-btn:hover {
169+
border-radius: var(--main-br-radius, 10px);
170+
background: var(--add-color-8, #E7EBFB);
171+
}
172+
173+
.habbit-days__form-btn:hover {
174+
color: var(--add-color-0, #fff);
175+
background: var(--add-color-11, #a87ae4);
176+
}
177+
}

0 commit comments

Comments
 (0)