diff options
author | AL-LCL <alvin@alvinhavel.com> | 2023-05-19 10:39:49 +0200 |
---|---|---|
committer | AL-LCL <alvin@alvinhavel.com> | 2023-05-19 10:39:49 +0200 |
commit | 58ebd3bc0f00c532e97e9a5571471ffab87934ba (patch) | |
tree | 6e099e59af07206df6edf2b0c585d0c5a466d4bd /server/web/src/design/components/Card.design.tsx |
Diffstat (limited to 'server/web/src/design/components/Card.design.tsx')
-rw-r--r-- | server/web/src/design/components/Card.design.tsx | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/server/web/src/design/components/Card.design.tsx b/server/web/src/design/components/Card.design.tsx new file mode 100644 index 0000000..2eb67a3 --- /dev/null +++ b/server/web/src/design/components/Card.design.tsx @@ -0,0 +1,60 @@ +import styled from 'styled-components'; + +export const CardContainer = styled('div')` + border: solid thin rgb(31, 113, 145); + background-color: rgb(5, 32, 58); + // CONSTANT : left & right borders + left & right margin + width: calc(100% - 1.125rem); + color: rgb(255, 255, 255); + border-radius: 0.5rem; + display: inline-block; + margin: 0.5rem; + + @media (min-width: 992px) { + width: 46.5%; + } +`; + +export const CardHeader = styled('div')` + border-bottom: solid thin rgb(31, 113, 145); + padding: 0.5rem 0.5rem 0.625rem 0.5rem; + border-top-right-radius: 0.5rem; + border-top-left-radius: 0.5rem; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.9rem; + text-align: left; + overflow: hidden; +`; + +export const CardFooter = styled('div')` + border-top: solid thin rgb(31, 113, 145); + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; + grid-template-columns: 1fr 1fr; + display: grid; +`; + +export const CardFooterItem = styled('div')` + border-right: solid thin rgb(31, 113, 145); + justify-content: center; + align-items: center; + font-size: 0.65rem; + padding: 0.5rem 0; + cursor: pointer; + display: grid; + + :hover { + background-color: rgb(0, 55, 117); + transition: 250ms; + } + + :first-child { + border-bottom-left-radius: 0.5rem; + } + + :last-child { + border-bottom-right-radius: 0.5rem; + border-right: none; + } +`; |