Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

responsive design

Browse source
This commit is contained in:
Chneemann 2024-04-02 17:07:22 +02:00
parent 52bcb022a2
commit 653f3fed49
2 changed files with 146 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
src/app/components/contacts/contact-edit/contact-edit.component.scss
View file

@ -14,13 +14,14 @@ section {
.dialog {
background-color: var(--white);
width: 760px;
height: 550px;
height: auto;
border-radius: 26px;
border: 2px solid rgba($color: #000000, $alpha: 0.1);
}
.header {
display: flex;
align-items: center;
background-color: var(--bgSidebar);
height: 72px;
padding: 24px;
@ -75,3 +76,85 @@ section {
align-items: center;
width: 70%;
}
@media screen and (max-width: 800px) {
.dialog {
width: 560px;
position: relative;
}
.badge {
position: absolute;
top: 125px;
right: 40px;
}
.content {
flex-direction: column-reverse;
}
.header {
height: 42px;
img {
width: 34px;
height: 46px;
}
p {
font-size: 50px;
}
}
}
@media screen and (max-width: 600px) {
.dialog {
width: 360px;
}
.badge {
top: 65px;
right: 120px;
}
.content {
flex-direction: column-reverse;
margin-top: 20px;
.circle {
width: 80px;
height: 80px;
.initials {
font-size: 32px;
font-weight: 500;
color: var(--white);
text-shadow: 1px 1px 2px var(--black);
}
}
}
.header {
height: 60px;
align-items: normal;
p {
font-size: 28px;
}
img {
display: none;
}
}
}
@media screen and (max-width: 400px) {
.dialog {
width: 280px;
}
.badge {
top: 65px;
right: 95px;
}
.header {
p {
font-size: 22px;
}
}
}

84
src/app/components/contacts/contact-form/contact-form.component.scss
View file

@ -37,6 +37,29 @@ span {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
}
}
.btn-save {
padding: 12px;
margin: 12px 12px;
border-radius: 10px;
border: 1px solid var(--black) !important;
background-color: var(--light-gray);
font-size: 23px;
font-weight: 400;
transition: 125ms ease-in-out;
&:hover:not(:disabled) {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
background-color: var(--light-blue) !important;
border: 1px solid var(--light-blue) !important;
cursor: pointer;
}
&:not(:disabled) {
background-color: var(--very-dark-blue) !important;
color: var(--white);
}
&:hover {
cursor: default;
}
}
input {
background-color: var(--white);
border: 1px solid var(--gray);
@ -69,29 +92,46 @@ span {
width: 111px;
height: 57px;
margin: 0 24px;
font-size: 21px;
font-weight: 400;
padding-bottom: 12px;
}
.btn-save {
padding: 15px 30px;
margin-top: 12px;
border-radius: 10px;
border-color: var(--black);
background-color: var(--light-gray);
font-size: 23px;
font-weight: 400;
transition: 125ms ease-in-out;
&:hover:not(:disabled) {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
background-color: var(--light-blue) !important;
cursor: pointer;
}
&:not(:disabled) {
background-color: var(--very-dark-blue) !important;
color: var(--white);
}
&:hover {
cursor: default;
@media screen and (max-width: 800px) {
.name {
flex-direction: column;
width: 60%;
}
}
@media screen and (max-width: 600px) {
.name {
width: 100%;
}
.contact-formular {
min-width: 0;
input {
width: 85%;
font-size: 18px;
}
}
}
@media screen and (max-width: 400px) {
.contact-formular {
width: 270px;
input {
width: 80%;
font-size: 16px;
}
.btn-delete {
font-size: 18px;
}
.btn-save {
font-size: 18px;
}
}
.btn {
margin: 0 6px;
}
}