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/Footer.design.tsx |
Diffstat (limited to 'server/web/src/design/components/Footer.design.tsx')
-rw-r--r-- | server/web/src/design/components/Footer.design.tsx | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/server/web/src/design/components/Footer.design.tsx b/server/web/src/design/components/Footer.design.tsx new file mode 100644 index 0000000..a5cf586 --- /dev/null +++ b/server/web/src/design/components/Footer.design.tsx @@ -0,0 +1,132 @@ +import { IFooterDropdownContent } from '../../interfaces/design/FooterDesign.interface'; +import styled from 'styled-components'; + +export const FooterDropdown = styled('div')` + border-top: solid thin rgb(31, 93, 117); + background-color: rgb(5, 32, 58); + width: calc(100% - 1.2rem); + text-align: center; + position: fixed; + bottom: 4.45rem; + left: 0; +`; + +export const FooterDropdownToggle = styled('div')` + background-color: rgb(5, 32, 58); + color: rgb(0, 255, 255); + padding: 0.25rem 0; + cursor: pointer; +`; + +export const FooterWindowManager = styled('div')` + border-top: solid thin rgb(31, 93, 117); + background-color: rgb(5, 32, 58); + width: calc(100% - 1.2rem); + color: rgb(255, 255, 255); + -ms-overflow-style: none; + scrollbar-width: none; + white-space: nowrap; + text-align: center; + overflow-x: scroll; + overflow-y: hidden; + position: fixed; + height: 3.25rem; + bottom: 1.2rem; + left: 0; +`; + +export const FooterWindowButton = styled('button')` + border: solid thin rgb(31, 93, 117); + background-color: rgb(5, 32, 58); + margin: 0.578125rem 0.15rem; + color: rgb(255, 255, 255); + padding: 0.5rem 1.5rem; + border-radius: 5rem; + transition: 250ms; +`; + +export const FooterWindowClear = styled('button')` + border: solid thin rgb(225, 53, 57); + background-color: rgb(5, 32, 58); + margin: 0.578125rem 0.15rem; + color: rgb(255, 255, 255); + padding: 0.5rem 1.5rem; + border-radius: 5rem; + transition: 250ms; +`; + +export const FooterBlock = styled('div')` + background-color: rgb(5, 32, 58); + color: rgb(255, 255, 255); + margin: 1.1875rem 0; +`; + +export const FooterDropdownContent = styled('div') <IFooterDropdownContent>` + background-color: rgb(5, 32, 58); + overflow-y: scroll; + transition: 250ms; + padding: 0; + height: 0; + + ${({ active }: any) => + active && + ` + border-top: solid thin rgb(31, 93, 117); + padding: 0.5rem 0; + transition: 250ms; + height: 9.2rem; + + @media (min-width: 1280px) { + height: 7.2rem; + } + + @media (min-width: 2000px) { + height: 5.2rem; + } + `} +`; + +export const FooterNameSpaceButton = styled('button')` + border: solid thin rgb(225, 53, 57); + background-color: rgb(225, 53, 57); + color: rgb(255, 255, 255); + padding: 0.4rem 1rem; + border-radius: 5rem; + transition: none; + cursor: text; + + :active { + transform: none; + transition: none; + } +`; + +export const FooterDropdownButton = styled('button')` + background-color: rgb(31, 93, 117); + color: rgb(255, 255, 255); + border: rgb(31, 93, 117); + padding: 0.4rem 1rem; + border-radius: 5rem; + margin: 0.15rem; +`; + +export const FooterMenu = styled('div')` + border-top: solid thin rgb(31, 93, 117); + background-color: rgb(5, 32, 58); + width: calc(100% - 1.2rem); + color: rgb(255, 255, 255); + position: fixed; + height: 1.2rem; + bottom: 0; + left: 0; +`; + +export const FooterParagraph = styled('p')` + text-overflow: ellipsis; + padding-top: 0.15rem; + white-space: nowrap; + font-size: 0.75rem; + overflow: hidden; + height: 1.2rem; + margin-top: 0; +`; |