diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-12-25 15:44:50 +0000 |
|---|---|---|
| committer | Joe Carstairs <jcarstairs@scottlogic.com> | 2024-01-29 10:51:47 +0000 |
| commit | 078d2d370d8cb45381b7cf793d99a63dd4c064a4 (patch) | |
| tree | c924ce4f39ec3144791b88060222434d01e81bfb /scss | |
| parent | 7e5fd083800f4c029853dc8ca1f749342deaff31 (diff) | |
33 / WebAuthn (#57)
* Working message on sign-up form
* Disables form nicely when processing request
* Updates README
* Better error logging in verifyRegistrationResponse()
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/custom-properties/_colours.scss | 4 | ||||
| -rw-r--r-- | scss/modules/_btn.scss | 15 | ||||
| -rw-r--r-- | scss/values/_colours.scss | 15 |
3 files changed, 31 insertions, 3 deletions
diff --git a/scss/custom-properties/_colours.scss b/scss/custom-properties/_colours.scss index dadb50e..efa9cdc 100644 --- a/scss/custom-properties/_colours.scss +++ b/scss/custom-properties/_colours.scss @@ -7,6 +7,8 @@ --background-highlight-color: #{colours.$primary-90}; --special-text-color: #{colours.$secondary-90}; --special-text-highlight-color: #{colours.$secondary-10}; + --neutral-text-color: #{colours.$neutral-50}; + --neutral-background-color: #{colours.$neutral-30}; } :is(main, article) { @@ -16,6 +18,8 @@ --background-highlight-color: #{colours.$primary-10}; --special-text-color: #{colours.$secondary-40}; --special-text-highlight-color: #{colours.$secondary-90}; + --neutral-text-color: #{colours.$neutral-70}; + --neutral-background-color: #{colours.$neutral-95}; } :is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { diff --git a/scss/modules/_btn.scss b/scss/modules/_btn.scss index b906262..45e292f 100644 --- a/scss/modules/_btn.scss +++ b/scss/modules/_btn.scss @@ -7,12 +7,13 @@ padding-inline: var(--spacing-inline-md); padding-block: var(--spacing-block-sm); background-color: transparent; + cursor: pointer; transition: background-color 100ms, transform 100ms; } -:is(button, .btn):is(:hover, :focus, :focus-visible, :focus-within, :active) { +:is(button, .btn):is(:hover, :focus, :focus-visible, :focus-within, :active):not(:is(:disabled, [disabled])) { box-shadow: none; outline: none; color: var(--text-highlight-color); @@ -23,12 +24,12 @@ transform 300ms; } -:is(button, .btn):is(:focus, :focus-visible, :focus-within) { +:is(button, .btn):is(:focus, :focus-visible, :focus-within):not(:is(:disabled, [disabled])) { border-color: var(--special-text-highlight-color); border-style: dotted; } -:is(button, .btn):active { +:is(button, .btn):active:not(:is(:disabled), [disabled]) { transform: scale(1.1, 1.1); } @@ -38,3 +39,11 @@ a.btn { text-decoration: none; } +:is(button, .btn):is(:disabled, [disabled]) { + color: var(--neutral-text-color); + background-color: var(--neutral-background-color); + border-color: var(--neutral-text-color); + cursor: initial; +} + + diff --git a/scss/values/_colours.scss b/scss/values/_colours.scss index 40db6e8..5c00e7d 100644 --- a/scss/values/_colours.scss +++ b/scss/values/_colours.scss @@ -32,3 +32,18 @@ $secondary-98: #e4fffb; $secondary-99: #f2fffc; $secondary-100: #ffffff; +$neutral-0: #000; +$neutral-10: #03020f; +$neutral-20: #141327; +$neutral-30: #2c2b41; +$neutral-40: #45455d; +$neutral-50: #61607a; +$neutral-60: #7d7d98; +$neutral-70: #9b9bb7; +$neutral-80: #bbbbd7; +$neutral-90: #dbdbf8; +$neutral-95: #ecedff; +$neutral-98: #f7f8ff; +$neutral-99: #fbfbff; +$neutral-100: #fff; + |