UNPKG

@creit.tech/stellar-wallets-kit

Version:
1 lines 4.3 kB
{"version":3,"file":"styles.cjs","sources":["../../../src/components/button/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonContainer = css`\n .btn-container {\n position: relative;\n }\n`;\n\nexport const buttonStyles = css`\n .btn {\n background: none;\n border: none;\n border-radius: var(--button-border-radius, 0.5rem);\n cursor: pointer;\n padding: var(--button-padding, 0.5rem 1.25rem);\n display: flex;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n line-height: 100%;\n margin: 0;\n font-family: 'Open Sans', arial, sans-serif;\n }\n\n .btn svg {\n width: 1rem;\n height: auto;\n margin-left: 0.5rem;\n }\n\n @media (prefers-color-scheme: light) {\n .btn {\n background-color: var(--button-bg-color, #fcfcfc);\n color: var(--button-text-color, #181818);\n border: solid var(--button-text-color, #181818) 1px;\n }\n\n .btn svg circle,\n .btn svg path {\n stroke: var(--button-text-color, #181818);\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .btn {\n background-color: var(--button-bg-color, #161616);\n color: var(--button-text-color, #fcfcfc);\n border: solid var(--button-text-color, #fcfcfc) 1px;\n }\n\n .btn svg circle,\n .btn svg path {\n stroke: var(--button-text-color, #fcfcfc);\n }\n }\n`;\n\nexport const dropdownWrapper = css`\n .dropdown-wrapper {\n position: absolute;\n top: 110%;\n right: 0;\n box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25);\n z-index: 900;\n border-radius: 0.75rem;\n padding: 2rem;\n width: 18rem;\n display: flex;\n flex-direction: column;\n font-family: 'Open Sans', arial, sans-serif;\n }\n\n .dropdown-profile {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-bottom: 2rem;\n }\n\n .dropdown-text-solid {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n .dropdown-text {\n font-size: 0.875rem;\n line-height: 1.125rem;\n }\n\n .dropdown-action-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n\n .dropdown-action-button {\n padding: 0.4rem;\n border-radius: 0.25rem;\n border: none;\n background: none;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n }\n\n .dropdown-close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n font-size: 1.25rem;\n cursor: pointer;\n }\n\n @media (prefers-color-scheme: light) {\n .dropdown-wrapper {\n background-color: var(--button-bg-color, #fcfcfc);\n border: solid 1px var(--button-solid-text-color, #000000);\n }\n\n .dropdown-text-solid,\n .dropdown-action-button,\n .dropdown-close {\n color: var(--button-solid-text-color, #000000);\n }\n\n .dropdown-text {\n color: var(--button-text-color, #181818);\n }\n\n svg circle,\n svg path {\n stroke: var(--button-text-color, #181818);\n }\n\n .dropdown-action-button {\n border: 1px solid var(--button-text-color, #181818);\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .dropdown-wrapper {\n background-color: var(--button-bg-color, #161616);\n border: solid 1px var(--button-solid-text-color, #ededed);\n }\n\n .dropdown-text-solid,\n .dropdown-action-button,\n .dropdown-close {\n color: var(--button-solid-text-color, #ededed);\n }\n\n .dropdown-text {\n color: var(--button-text-color, #a0a0a0);\n }\n\n svg circle,\n svg path {\n stroke: var(--button-text-color, #fcfcfc);\n }\n\n .dropdown-action-button {\n border: 1px solid var(--button-text-color, #a0a0a0);\n }\n }\n`;\n"],"names":["css"],"mappings":";;;;AAEO,MAAM,eAAe,GAAGA,OAAG,CAAA;;;;;AAM3B,MAAM,YAAY,GAAGA,OAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDxB,MAAM,eAAe,GAAGA,OAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}