diff --git a/mon-pix/app/components/module/element/flashcards/_flashcards-card.scss b/mon-pix/app/components/module/element/flashcards/_flashcards-card.scss index ef033475a4e..c7e0a2e27d9 100644 --- a/mon-pix/app/components/module/element/flashcards/_flashcards-card.scss +++ b/mon-pix/app/components/module/element/flashcards/_flashcards-card.scss @@ -15,6 +15,15 @@ box-shadow: 0 12px 24px 0 rgb(7 20 46 / 12%); } +/* To get higher specifity than `.modulix-passage h3` we double classes usage */ +.element-flashcards-intro-card { + .element-flashcards-intro-card { + &__title { + @extend %pix-title-s; + } + } +} + .element-flashcards-card { &__content { display: flex; diff --git a/mon-pix/app/components/module/element/flashcards/_flashcards.scss b/mon-pix/app/components/module/element/flashcards/_flashcards.scss index af50547cb8b..363204a2b01 100644 --- a/mon-pix/app/components/module/element/flashcards/_flashcards.scss +++ b/mon-pix/app/components/module/element/flashcards/_flashcards.scss @@ -88,6 +88,11 @@ &:active { background: var(--pix-error-100); } + + &:focus, + &:focus-visible { + outline: var(--pix-error-500) solid var(--button-border-size-hover); + } } &--almost { @@ -105,6 +110,11 @@ &:active { background: var(--pix-warning-100); } + + &:focus, + &:focus-visible { + outline: var(--pix-warning-900) solid var(--button-border-size-hover); + } } &--yes { @@ -122,6 +132,11 @@ &:active { background: var(--pix-success-100); } + + &:focus, + &:focus-visible { + outline: var(--pix-success-700) solid var(--button-border-size-hover); + } } } } diff --git a/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs b/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs index 23544bd51b9..1d56a2c4c7b 100644 --- a/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs +++ b/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs @@ -9,9 +9,7 @@ import { t } from 'ember-intl'; {{/if}} -
-

{{@title}}

-
+

{{@title}}