apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign calendar

Browse Source
This commit is contained in:
Никита Губарь
2024-04-04 17:31:28 +03:00
parent 3e54f947b4
commit 90274e8b17
13 changed files with 162 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/Calendar/calendarComponent.scss
View File

@ -23,10 +23,14 @@
.calendar__hours {
margin: 0 5px;
line-height: 0;
font-size: 22px;
font-weight: 500;
display: flex;
align-items: center;
span {
font-size: 22px;
font-weight: 500;
}
}
}
@ -54,21 +58,33 @@
}
&-box {
background-color: #e5f1fb;
height: 47px;
display: flex;
align-items: center;
margin-left: 20px;
cursor: pointer;
margin: 0 15px;
padding: 0 20px;
border-radius: 5px;
font-weight: 400;
font-size: 16px;
color: #406128;
img {
margin: 0px 10px;
width: 12px;
height: 12px;
&:first-child {
transform: rotate(180deg);
margin: 0;
}
width: 17px;
height: 17px;
margin: 0 10px 0 0;
}
}
&-arrow {
display: flex;
align-items: center;
cursor: pointer;
height: 47px;
padding: 0 8px;
background-color: #e5f1fb;
border-radius: 5px;
span {
color: #18586e;
@ -107,12 +123,9 @@
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
p {
color: #398208;
font-size: 25px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
color: #9babc5;
font-size: 14px;
font-weight: 500;
text-align: center;
}
}
@ -127,24 +140,48 @@
button {
margin: 0 auto;
width: 125px;
height: 42px;
width: 135px;
height: 82px;
padding: 0px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border-radius: 10px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-top: 20px;
font-size: 1.2em;
text-align: center;
.form-date {
width: 100%;
padding: 5px 0 0 15px;
height: 100%;
}
.form-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: #eff5fa 2px solid;
.form-hours {
display: none;
}
}
a {
color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 12px;
font-weight: 400;
font-size: 16px;
height: 100%;
@media (max-width: 500px) {
font-size: 10px;
@ -152,20 +189,6 @@
}
}
img {
width: 16px;
height: 16px;
margin: 0 5px 0 0;
@media (max-width: 968px) {
margin-right: 2px;
@media (max-width: 610px) {
display: none;
}
}
}
@media (max-width: 1200px) {
width: 110px;
}
@ -214,17 +237,6 @@
}
}
.calendar__icon {
margin-right: 10px;
margin-top: -4px;
}
@media (max-width: 575.98px) {
.calendar__icon {
display: none;
}
}
.select-days {
border-style: dashed !important;
@ -246,7 +258,44 @@
}
.before {
background-color: #e5f9b6 !important;
background-color: #ffffff !important;
.form-date {
height: 35% !important;
}
.form-box {
background-color: #fafbfe;
.form-hours {
color: #6dd077;
background-color: #6dd0772f;
border-spacing: 10px;
border-radius: 5px;
display: flex !important;
flex-direction: row;
width: 95%;
font-weight: 400;
font-size: 14px;
padding: 0 7px;
position: relative;
span {
color: #1458dd;
font-weight: 700;
font-size: 14px;
margin: auto;
}
}
.form-hours::before {
content: "";
position: absolute;
top: 10%;
left: 0;
height: 75%;
border-left: 2px solid #6dd077;
border-radius: 5px;
}
}
}
.pass {
@ -271,18 +320,25 @@
align-items: center;
column-gap: 16px;
font-size: 16px;
font-weight: 500;
font-weight: 400;
position: relative;
.select {
background-color: #e5f1fb;
color: #406128;
border-radius: 5px;
border: 2px solid #c4c4c4;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
padding: 5px 8px;
padding: 15px;
cursor: pointer;
text-align: center;
}
.hint {
color: #6f6f6f;
font-size: 14px;
font-weight: 300;
margin: 0 0 0 20px;
}
.close {
cursor: pointer;
margin-left: 8px;