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

reports create, refactoring

Browse Source
This commit is contained in:
kurpfish
2021-11-30 16:00:58 +02:00
parent 76c46067ef
commit 4629bc74a9
61 changed files with 26047 additions and 3865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
src/components/Calendar/calendarComponent.scss Normal file
View File

@ -0,0 +1,263 @@
.calendar-component {
position: relative;
margin-top: 80px;
margin-bottom: 60px;
background-color: #f9f9f9;
padding-left: 68px;
padding-right: 54px;
padding-top: 48px;
padding-bottom: 94px;
&__header {
display: flex;
h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.5em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
}
&-box {
display: flex;
align-items: center;
margin-left: 40px;
img {
width: 6px;
height: 6px;
}
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-left: 10px;
cursor: pointer;
}
}
}
&__rectangle {
margin: 36px 0;
img {
width: 100%;
}
}
&__body {
div {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
p {
color: #398208;
font-family: 'GT Eesti Pro Display';
font-size: 25px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: center;
}
}
}
&__form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
button {
margin: 0 auto;
width: 125px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-top: 20px;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
}
}
@media (max-width: 1200px) {
.calendar-component {
&__form {
button {
width: 100px;
height: 40px;
}
}
}
}
@media (max-width: 968px) {
.calendar-component {
margin-bottom: 40px;
padding: 28px 0 48px 0;
&__header {
h3 {
position: absolute;
top: -10%;
left: 25%;
}
&-box {
margin-left: 20px;
}
}
&__rectangle {
margin: 24px 0;
}
&__form {
button {
width: 72px;
height: 40px;
img {
display: none;
}
}
}
}
}
@media (max-width: 768px) {
.calendar-component__form > button {
width: 70px;
height: 40px;
img {
display: none;
}
}
}
@media (max-width: 540.98px) {
.calendar-component__form > button {
width: 68px;
height: 40px;
}
}
@media (max-width: 520.98px) {
.calendar-component__form > button {
width: 66px;
height: 40px;
}
}
@media (max-width: 500.98px) {
.calendar-component__form > button {
width: 64px;
height: 40px;
}
}
@media (max-width: 480.98px) {
.calendar-component__form > button {
width: 60px;
height: 40px;
}
}
@media (max-width: 460.98px) {
.calendar-component__form > button {
width: 56px;
height: 40px;
}
}
@media (max-width: 440.98px) {
.calendar-component__form > button {
width: 52px;
height: 40px;
}
}
@media (max-width: 428.98px) {
.calendar-component__form > button {
width: 50px;
height: 40px;
}
}
@media (max-width: 414.98px) {
.calendar-component__form > button {
width: 49px;
height: 40px;
}
}
@media (max-width: 395.98px) {
.calendar-component__form > button {
width: 46px;
height: 40px;
}
}
@media (max-width: 350.98px) {
.calendar-component__form > button {
width: 44px;
height: 40px;
}
}
@media (max-width: 349.98px) {
.calendar-component__form > button {
width: 42px;
height: 40px;
}
}
@media (max-width: 346.98px) {
.calendar-component__form > button {
width: 40px;
height: 40px;
}
}
.calendar__icon {
margin-right: 10px;
margin-top: -4px;
}
@media (max-width: 575.98px) {
.calendar__icon {
display: none;
}
}
.before {
background-color: #f0f7e0 !important;
}
.today {
font-weight: bold !important;
border: 1px solid #398208 !important;
}
.selected {
background-color: #f9f9c3 !important;
}