Skip to content

Commit 991ecd5

Browse files
matowdevmatowdev
committed
[PROJ-18.4/cont] layout-content-element
Adding "main/content" element. Initial structure. Styling. FS-dev: B-3 / JS basic
1 parent 9241b13 commit 991ecd5

File tree

7 files changed

+324
-38
lines changed

7 files changed

+324
-38
lines changed

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/css/content.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,38 @@
11
.content {
2+
display: flex;
3+
flex-direction: column;
4+
row-gap: 30px;
25
border-top-right-radius: var(--default-br, 10px);
36
border-bottom-right-radius: var(--default-br, 10px);
47
padding: 45px;
58
width: 100%;
69
background: var(--bg-main-page, #F3F6FD);
710
}
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-4-layout-content-element/css/habbit-days.css‎

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

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/css/progress-bar.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.progress-bar {
2+
display: flex;
3+
flex-direction: column;
4+
row-gap: 12px;
5+
width: 100%;
6+
max-width: 235px;
7+
}
8+
9+
.progress-bar__heading-wrap {
10+
display: flex;
11+
justify-content: space-between;
12+
padding-top: 7px;
13+
}
14+
15+
.progress-bar__text {
16+
color: var(--add-color-6, #232360);
17+
}
18+
19+
.progress-bar__percent {
20+
padding-right: 10px;
21+
font-size: 12px;
22+
color: var(--add-color-3, #768396);
23+
}
24+
25+
.progress-bar__scale-wrap {
26+
position: relative;
27+
font-size: 0;
28+
line-height: 0;
29+
}
30+
31+
.progress-bar__scale {
32+
display: inline-block;
33+
border-radius: 4px;
34+
width: 100%;
35+
height: 5px;
36+
background: var(--add-color-9, #E6E9ED);
37+
}
38+
39+
.progress-bar__value {
40+
position: absolute;
41+
left: 0;
42+
border-radius: 4px;
43+
width: 80%;
44+
height: 5px;
45+
background: var(--add-color-5, #5051F9);
46+
}
47+
48+
/* media queries, any-hover */
49+
50+
@media (max-width: 768px) {
51+
.progress-bar {
52+
padding-left: 8px;
53+
}
54+
55+
.progress-bar__heading-wrap {
56+
padding-top: 0;
57+
}
58+
}

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/css/sidebar.css‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@
4242
will-change: background;
4343
}
4444

45+
.sidebar__nav-btn:focus-visible {
46+
outline-color: var(--add-color-11, #a87ae4);
47+
}
48+
4549
.sidebar__nav-btn_active {
4650
background: var(--add-color-5, #5051F9);
4751
}
@@ -78,6 +82,10 @@
7882
will-change: background;
7983
}
8084

85+
.sidebar__add-btn:focus-visible {
86+
outline-color: var(--add-color-11, #a87ae4);
87+
}
88+
8189
.sidebar__add-btn-icon {
8290
transition-property: filter;
8391
transition-duration: var(--short, 0.3s);
@@ -87,6 +95,13 @@
8795

8896
/* media queries, any-hover */
8997

98+
@media (max-width: 768px) {
99+
.sidebar {
100+
padding-right: 10px;
101+
padding-left: 10px;
102+
}
103+
}
104+
90105
@media (any-hover: hover) {
91106
.sidebar__nav-btn:hover {
92107
background: var(--add-color-7, #6A6AFB);
@@ -97,7 +112,7 @@
97112
}
98113

99114
.sidebar__add-btn:hover {
100-
background: var(--add-color-1, #8899A8);
115+
background: var(--add-color-11, #a87ae4);
101116
}
102117

103118
.sidebar__add-btn:hover .sidebar__add-btn-icon {

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/css/style.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@
44
@import url("app.css");
55
@import url("sidebar.css");
66
@import url("content.css");
7+
@import url("progress-bar.css");
8+
@import url("habbit-days.css");

‎full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/css/variables.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333
--add-color-6: #232360;
3434
--add-color-7: #6A6AFB;
3535
--add-color-8: #E7EBFB;
36+
--add-color-9: #E6E9ED;
37+
--add-color-10: #FBFAFF;
38+
--add-color-11: #a87ae4;
3639

3740
/* style */
3841
--default-br: 10px;
@@ -46,4 +49,8 @@
4649

4750
/* media queries */
4851

49-
@media (min-width: 576px) {}
52+
@media (max-width: 768px) {
53+
:root {
54+
--app-padding: 10px;
55+
}
56+
}

0 commit comments

Comments
 (0)