diff --git a/assets/css/hmcts-webchat-gds-v3.css b/assets/css/hmcts-webchat-gds-v3.css index c9cb6cf..29b141f 100644 --- a/assets/css/hmcts-webchat-gds-v3.css +++ b/assets/css/hmcts-webchat-gds-v3.css @@ -1128,7 +1128,7 @@ input[type="number"] { button, input[type="submit"] { - background-color: #00823b !important; + background-color: #00703c !important; background-image: none !important; border-color: transparent !important; color: #ffffff !important; @@ -1137,10 +1137,30 @@ input[type="submit"] { width: calc(100% - 40px) !important; } -button:hover, button:focus, -input[type="submit"]:hover, +button:hover, +input[type="submit"]:hover { + background-color: #005a30 !important; +} + +button:focus, input[type="submit"]:focus { - background-color: #00682f !important; + border-color: #ffdd00 !important; + box-shadow: inset 0 0 0 1px #ffdd00 !important; + outline: 3px solid transparent; +} + +button:focus:not(:active):not(:hover), +input[type="submit"]:focus:not(:active):not(:hover) { + background-color: #ffdd00 !important; + border-color: #ffdd00 !important; + box-shadow: 0 2px 0 #0b0c0c !important; + color: #0b0c0c !important; +} + +button:active, +input[type="submit"]:active { + box-shadow: 0 2px 0 #002d18; + outline: 0; } input[type="text"], diff --git a/assets/javascript/hmcts-webchat.js b/assets/javascript/hmcts-webchat.js index baca4ab..ccedbd8 100644 --- a/assets/javascript/hmcts-webchat.js +++ b/assets/javascript/hmcts-webchat.js @@ -44,7 +44,7 @@ function parseText(text) { } function webchat_init(customParams) { - const version = '0.3.4'; + const version = '0.3.5'; const requiredParams = [ 'uuid', 'tenant', diff --git a/assets/sass/hmcts-webchat-gds-v3.scss b/assets/sass/hmcts-webchat-gds-v3.scss index f0f3361..c7347c9 100644 --- a/assets/sass/hmcts-webchat-gds-v3.scss +++ b/assets/sass/hmcts-webchat-gds-v3.scss @@ -7,7 +7,7 @@ @import "node_modules/govuk-frontend-3/govuk/components/label/label"; @import "node_modules/govuk-frontend-3/govuk/components/textarea/textarea"; -$govuk-button-colour: #00823b; // sass-lint:disable no-color-literals +$govuk-button-colour: govuk-colour("green");; // sass-lint:disable no-color-literals $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%); $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%); $govuk-button-text-colour: govuk-colour("white"); @@ -24,10 +24,27 @@ input[type="submit"] { margin-top: 10px !important; width: calc(100% - 40px) !important; - &:hover, - &:focus { + &:hover { background-color: $govuk-button-hover-colour !important; } + + &:focus { + border-color: govuk-colour("yellow") !important; + box-shadow: inset 0 0 0 1px govuk-colour("yellow") !important; + outline: 3px solid transparent; + + &:not(:active):not(:hover) { + background-color: govuk-colour("yellow") !important; + border-color: govuk-colour("yellow") !important; + box-shadow: 0 2px 0 govuk-colour("black") !important; + color: govuk-colour("black") !important; + } + } + + &:active { + box-shadow: 0 2px 0 $govuk-button-shadow-colour; + outline: 0; + } } input[type="text"], diff --git a/package.json b/package.json index 49dbdc5..21afe00 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hmcts/ctsc-web-chat", - "version": "0.3.4", + "version": "0.3.5", "description": "HMCTS CTSC Web Chat", "repository": { "type": "git",