diff --git a/app/assets/stylesheets/new_design/_placeholders.scss b/app/assets/stylesheets/new_design/_placeholders.scss index 53e98918e..2dc8cbaad 100644 --- a/app/assets/stylesheets/new_design/_placeholders.scss +++ b/app/assets/stylesheets/new_design/_placeholders.scss @@ -1,3 +1,4 @@ +@import "colors"; @import "constants"; %horizontal-list { @@ -17,3 +18,10 @@ animation-fill-mode: forwards; animation-duration: 0.3s; } + +%outline { + &:active, + &:focus { + outline: 3px solid $blue; + } +} diff --git a/app/assets/stylesheets/new_design/buttons.scss b/app/assets/stylesheets/new_design/buttons.scss index a36b7a719..e66e2c9fa 100644 --- a/app/assets/stylesheets/new_design/buttons.scss +++ b/app/assets/stylesheets/new_design/buttons.scss @@ -1,7 +1,10 @@ @import "colors"; @import "constants"; +@import "placeholders"; .button { + @extend %outline; + display: inline-block; padding: 8px 16px; border-radius: 30px; @@ -20,11 +23,6 @@ text-decoration: none; } - &:active, - &:focus { - outline: none; - } - &:disabled { opacity: 0.5; filter: saturate(50%); diff --git a/app/assets/stylesheets/new_design/custom_reset.scss b/app/assets/stylesheets/new_design/custom_reset.scss index 054f1c141..f1825a12e 100644 --- a/app/assets/stylesheets/new_design/custom_reset.scss +++ b/app/assets/stylesheets/new_design/custom_reset.scss @@ -1,3 +1,6 @@ +@import "colors"; +@import "placeholders"; + html, body { height: 100%; @@ -14,5 +17,7 @@ html { } a { + @extend %outline; + text-decoration: none; } diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index f12f5681a..8136b53e9 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -1,5 +1,6 @@ @import "constants"; @import "colors"; +@import "placeholders"; .form { h1 { @@ -177,6 +178,8 @@ input[type=checkbox], input[type=radio] { + @extend %outline; + margin-left: 5px; margin-right: 4px; margin-bottom: 2 * $default-padding; diff --git a/app/assets/stylesheets/new_design/landing.scss b/app/assets/stylesheets/new_design/landing.scss index f6bec1754..1b18fea58 100644 --- a/app/assets/stylesheets/new_design/landing.scss +++ b/app/assets/stylesheets/new_design/landing.scss @@ -365,6 +365,11 @@ $cta-panel-button-border-size: 2px; color: #FFFFFF; text-decoration: none; } + + &:active, + &:focus { + outline: 3px solid #FFFFFF; + } } .cta-panel-button-blue {