Skip to content

Commit 7e49692

Browse files
matowdevmatowdev
committed
[PROJ-18/cont] Add "sidebar" element
Adding "sidebar" element. Initial structure/layout. Styling. Worth noting: - working with images using the "filter: brightness(0) invert(1)". FS-dev: B-3 / JS basic
1 parent 9a502cb commit 7e49692

File tree

11 files changed

+240
-27
lines changed

11 files changed

+240
-27
lines changed

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/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/css/content.cssβ€Ž

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.content {
2+
border-top-right-radius: var(--default-br, 10px);
3+
border-bottom-right-radius: var(--default-br, 10px);
4+
padding: 45px;
5+
width: 100%;
6+
background: var(--bg-main-page, #F3F6FD);
7+
}

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/css/page.cssβ€Ž

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ html {
1515
}
1616

1717
*::selection {
18-
color: var(--selection-color, #fff);
18+
color: var(--selection-color, #FBFAFF);
1919
background-color: var(--selection-bg-color, #5051F9);
2020
}
2121

@@ -61,24 +61,4 @@ svg {
6161
font-size: var(--default-fs, 14px);
6262
line-height: var(--default-lh, 120%);
6363
color: var(--main-color, #000);
64-
background: var(--bg-page, #F3F6FD);
65-
}
66-
67-
/* !! Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΅Ρ‰Ρ‘ ΡƒΡ‚ΠΎΡ‡Π½ΠΈΡ‚ΡŒ.. внСсти Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρƒ */
68-
.container {
69-
margin: 0 auto;
70-
padding-right: var(--container-padding);
71-
padding-left: var(--container-padding);
72-
max-width: var(--container-max-width);
73-
}
74-
75-
.visually-hidden {
76-
position: absolute;
77-
margin: -1px;
78-
border: 0;
79-
padding: 0;
80-
width: 1px;
81-
height: 1px;
82-
overflow: hidden;
83-
clip: rect(0, 0, 0, 0);
8464
}

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/css/sidebar.cssβ€Ž

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
.sidebar {
2+
display: flex;
3+
flex-direction: column;
4+
flex-shrink: 0;
5+
border-top-left-radius: var(--default-br, 10px);
6+
border-bottom-left-radius: var(--default-br, 10px);
7+
padding: 30px;
8+
min-height: 600px;
9+
background: var(--bg-aside, #FBFAFF);
10+
}
11+
12+
.sidebar__logo-wrap {
13+
margin-bottom: 50px;
14+
}
15+
16+
.sidebar__nav {
17+
margin-bottom: 25px;
18+
}
19+
20+
.sidebar__nav-list {
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
row-gap: 25px;
25+
}
26+
27+
.sidebar__nav-btn {
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
width: 46px;
32+
height: 46px;
33+
border: none;
34+
border-radius: var(--secondary-br, 14px);
35+
padding: 10px;
36+
background: var(--add-color-0, #fff);
37+
box-shadow: var(--icon-shadow, 0 8px 14px 0 rgba(62, 107, 224, 0.12));
38+
cursor: pointer;
39+
transition-property: background;
40+
transition-duration: var(--short, 0.3s);
41+
transition-timing-function: ease-in-out;
42+
will-change: background;
43+
}
44+
45+
.sidebar__nav-btn_active {
46+
background: var(--add-color-5, #5051F9);
47+
}
48+
49+
.sidebar__nav-btn_active img {
50+
filter: brightness(0) invert(1);
51+
}
52+
53+
.sidebar__nav-icon {
54+
transition-property: filter;
55+
transition-duration: var(--short, 0.3s);
56+
transition-timing-function: ease-in-out;
57+
will-change: filter;
58+
}
59+
60+
.sidebar__add-btn-wrap {
61+
align-self: center;
62+
}
63+
64+
.sidebar__add-btn {
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
68+
width: 46px;
69+
height: 46px;
70+
border: 1px solid var(--secondary-border-color, #CAD5FF);
71+
border-radius: var(--secondary-br, 14px);
72+
padding: 12px;
73+
background: transparent;
74+
cursor: pointer;
75+
transition-property: background;
76+
transition-duration: var(--short, 0.3s);
77+
transition-timing-function: ease-in-out;
78+
will-change: background;
79+
}
80+
81+
.sidebar__add-btn-icon {
82+
transition-property: filter;
83+
transition-duration: var(--short, 0.3s);
84+
transition-timing-function: ease-in-out;
85+
will-change: filter;
86+
}
87+
88+
/* media queries, any-hover */
89+
90+
@media (any-hover: hover) {
91+
.sidebar__nav-btn:hover {
92+
background: var(--add-color-7, #6A6AFB);
93+
}
94+
95+
.sidebar__nav-btn:hover img {
96+
filter: brightness(0) invert(1);
97+
}
98+
99+
.sidebar__add-btn:hover {
100+
background: var(--add-color-1, #8899A8);
101+
}
102+
103+
.sidebar__add-btn:hover img {
104+
filter: brightness(0) invert(1);
105+
}
106+
}

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/css/style.cssβ€Ž

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
@import url("fonts.css");
22
@import url("variables.css");
33
@import url("page.css");
4+
@import url("app.css");
5+
@import url("sidebar.css");
6+
@import url("content.css");

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/css/variables.cssβ€Ž

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
:root {
2-
/* !! Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΅Ρ‰Ρ‘ ΡƒΡ‚ΠΎΡ‡Π½ΠΈΡ‚ΡŒ.. внСсти Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρƒ Π² page */
32
/* sizes */
4-
--page-min-width: 375px;
5-
--container-max-width: 1920px;
6-
--container-padding: 24px;
3+
--page-min-width: 576px;
4+
--app-max-width: 1440px;
5+
--app-padding: 30px;
76

87
/* fonts */
98
--default-ff: "Comfortaa";
@@ -19,16 +18,21 @@
1918
/* colors */
2019
--main-color: #000;
2120
--secondary-color: #23235F;
22-
--selection-color: #fff;
21+
--bg-main-page: #F3F6FD;
22+
--bg-aside: #FBFAFF;
23+
--selection-color: #FBFAFF;
2324
--selection-bg-color: #5051F9;
24-
--bg-page: #F3F6FD;
2525
--main-border-color: #E7EBFB;
26+
--secondary-border-color: #CAD5FF;
27+
--add-color-0: #fff;
2628
--add-color-1: #8899A8;
2729
--add-color-2: #94A3BD;
2830
--add-color-3: #768396;
2931
--add-color-4: #EDECFE;
3032
--add-color-5: #5051F9;
3133
--add-color-6: #232360;
34+
--add-color-7: #6A6AFB;
35+
--add-color-8: #E7EBFB;
3236

3337
/* style */
3438
--default-br: 10px;

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/images/add-icon.svgβ€Ž

Lines changed: 5 additions & 0 deletions
Loading

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/images/food-icon.svgβ€Ž

Lines changed: 11 additions & 0 deletions
Loading

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/images/gantle-icon.svgβ€Ž

Lines changed: 10 additions & 0 deletions
Loading

β€Žfull-stack-dev/3-js-basic/18-proj-habit-tracker/images/water-icon.svgβ€Ž

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
Β (0)