prettier buttons

This commit is contained in:
Stepan Usatiuk
2023-12-17 23:53:13 +01:00
parent f9af46f2eb
commit 422db0ec71
5 changed files with 52 additions and 20 deletions

View File

@@ -1,3 +1,5 @@
@import "./common";
#Home { #Home {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -49,9 +51,7 @@
padding-left: 1rem; padding-left: 1rem;
font-size: 1.15rem; font-size: 1.15rem;
border-radius: 7px; @include border-shadow;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.05), 2px 2px 0px 0px rgba(0, 0, 0, 0.025);
&.active { &.active {
background-color: #EFEFEF; background-color: #EFEFEF;

View File

@@ -1,3 +1,5 @@
@import "./common";
.post { .post {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -8,15 +10,14 @@
margin: 1rem 0; margin: 1rem 0;
min-height: 3rem; min-height: 3rem;
@include border-shadow;
&.postEditing { &.postEditing {
padding: 0; padding: 0;
&:focus-within {
border-color: mediumpurple;
outline: solid mediumpurple 2px;
}
min-height: 6rem; min-height: 6rem;
border: 1px solid #D0D0D0;
@include post-editor;
} }
.text { .text {
@@ -25,6 +26,7 @@
.footer { .footer {
margin-top: 0.3rem; margin-top: 0.3rem;
margin-bottom: -0.3rem;
font-size: 0.7rem; font-size: 0.7rem;
color: #A0A0A0; color: #A0A0A0;

View File

@@ -1,14 +1,18 @@
@import "./common";
.profileView { .profileView {
min-width: 100%; min-width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.profileInfo { .profileInfo {
min-width: 100%; min-width: 100%;
border-bottom: solid gray 1px; border-bottom: solid gray 1px;
border-right: solid gray 1px; border-right: solid gray 1px;
border-bottom-right-radius: 7px; border-bottom-right-radius: 7px;
padding: 2rem; padding: 2rem;
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.05), 2px 2px 0px 0px rgba(0, 0, 0, 0.025);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -29,14 +33,10 @@
margin: 2rem; margin: 2rem;
min-height: 6rem; min-height: 6rem;
@include border-shadow;
border: solid gray 1px; border: solid gray 1px;
border-radius: 7px;
&:focus-within {
border-color: mediumpurple;
outline: solid mediumpurple 2px;
}
@include post-editor;
} }
.posts { .posts {

View File

@@ -1,17 +1,20 @@
@import "./common";
.profileCard { .profileCard {
width: 15rem; width: 15rem;
height: 5rem; height: 5rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border: 1px solid #EFEFEF;
border-radius: 7px;
padding: 1rem; padding: 1rem;
flex: auto; flex: auto;
@include border-shadow;
.profileInfo { .profileInfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
a { a {
text-decoration: none; text-decoration: none;
color: black; color: black;
@@ -20,6 +23,7 @@ flex: auto;
.fullName { .fullName {
font-size: 1.3rem; font-size: 1.3rem;
} }
.username { .username {
} }

26
client/src/common.scss Normal file
View File

@@ -0,0 +1,26 @@
@mixin border-shadow {
border-radius: 7px;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.05), 2px 2px 0px 0px rgba(0, 0, 0, 0.025);
}
@mixin post-editor {
background-color: #E0E0E0;
button {
background-color: #E0E0E0;
cursor: pointer;
margin: 0;
padding: 0.5rem;
color: black;
font-family: inherit;
}
textarea {
background-color: white;
font-family: inherit;
font-size: inherit;
}
&:focus-within {
border-color: mediumpurple;
outline: solid mediumpurple 2px;
}
}