diff options
| author | Sam Nystrom <sam@samnystrom.dev> | 2024-03-13 05:03:22 +0000 |
|---|---|---|
| committer | Sam Nystrom <sam@samnystrom.dev> | 2024-03-13 20:17:07 -0400 |
| commit | 052cc1a5a4668d7cb17fb273a022aa5b820d1faa (patch) | |
| tree | dbce2d2d10bb8c3cc81e38beeb2c1a3c8268c2f8 /src/components/Button.css | |
| parent | 570f47670bf9f361eeb073b9124be56465498c83 (diff) | |
refactor: move styles into separate components
Diffstat (limited to 'src/components/Button.css')
| -rw-r--r-- | src/components/Button.css | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/Button.css b/src/components/Button.css new file mode 100644 index 0000000..210d131 --- /dev/null +++ b/src/components/Button.css @@ -0,0 +1,54 @@ +@scope (.__Button) { + :scope { + width: 100%; + min-width: fit-content; + height: 3rem; + padding: 0 1rem; + + /* Necessary for <a> */ + display: flex; + align-items: center; + + font-size: 1rem; + text-align: start; + text-decoration: none; + + cursor: pointer; + + border: 1px solid var(--button-border, var(--button-base)); + background-color: var(--button-base); + color: var(--button-text); + + &:hover { + background-color: var(--button-hover); + color: var(--button-hover-text, var(--button-text)); + } + + &:focus { + outline: 2px solid var(--primary); + border-color: var(--base); + background-color: var(--button-focus, var(--button-base)); + color: var(--button-focus-text, var(--button-text)); + } + + &.primary { + --button-base: var(--primary); + --button-text: var(--text); + --button-hover: color-mix(in srgb, var(--text) 10%, var(--button-base)); + } + &.outline { + --button-base: transparent; + --button-text: var(--primary); + --button-border: var(--primary); + --button-hover: var(--primary); + --button-hover-text: var(--text); + --button-focus: var(--button-hover); + --button-focus-text: var(--button-hover-text); + } + &.ghost { + --button-base: transprent; + --button-text: var(--text); + --button-hover: var(--surface); + } + } +}
\ No newline at end of file |