mirror of
https://github.com/usatiuk/y.git
synced 2025-10-28 18:37:47 +01:00
prettier buttons
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -1,26 +1,30 @@
|
|||||||
|
@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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullName{
|
.fullName {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
.username{
|
|
||||||
|
.username {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
26
client/src/common.scss
Normal file
26
client/src/common.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user