Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Padding and Text alignment

Browse source
This commit is contained in:
Neshura 2023-03-15 21:27:40 +01:00
parent 31bd014abf
commit 94223fd80c
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
1 changed files with 6 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/styles/cards/mobile.tsx
View file

@ -18,9 +18,10 @@ const Card = styled.div`
width: 30rem; width: 30rem;
min-height: 10rem; min-height: 10rem;
max-height: 15rem; max-height: 15rem;
margin-bottom: 2rem;
// themeing // themeing
border-top: 0.125rem solid; border-top: 0.25rem solid;
border-radius: 10px; border-radius: 10px;
color: ${({ theme }) => theme.colors.primary}; color: ${({ theme }) => theme.colors.primary};
@ -202,11 +203,11 @@ const CardDescriptionCommon = css`
// content visible when expanded // content visible when expanded
const CardDescriptionWrap = styled.div` const CardDescriptionWrap = styled.div`
${CardDescriptionCommon} ${CardDescriptionCommon}
padding: 0 0.5rem; padding: 0 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
overflow-y: scroll; overflow-y: scroll;
scrollbar-width: thin; scrollbar-width: thin;
width: 100%;
p { p {
margin-top: 0; margin-top: 0;
@ -218,6 +219,7 @@ const CardDescriptionExtended = styled.p`
${CardDescriptionCommon} ${CardDescriptionCommon}
margin: 0; margin: 0;
margin-bottom: 0.9rem; margin-bottom: 0.9rem;
width: 100%;
` `
const CardDescription = ({ content }: { content: Service }) => { const CardDescription = ({ content }: { content: Service }) => {
@ -240,16 +242,6 @@ const CardDescription = ({ content }: { content: Service }) => {
return ret; return ret;
} }
const CardDescriptionCollapsed = styled.p`
max-height: 0rem;
visibility: hidden;
${CardDescriptionCommon}
text-align: center;
transition-property: max-height, visibility;
transition-delay: 2s;
`
// exported Card Elements // exported Card Elements
//####################### //#######################
@ -270,7 +262,7 @@ export const ServiceCardMobile = ({ content }: { content: Service }) => {
else { else {
card = ( card = (
<Card> <Card>
<CardTitle content={content}/> <CardTitle content={content} href={""}/>
<CardDescription content={content}/> <CardDescription content={content}/>
</Card> </Card>
) )