diff --git a/app/assets/stylesheets/02_utils.scss b/app/assets/stylesheets/02_utils.scss index 301314aa2..29477e617 100644 --- a/app/assets/stylesheets/02_utils.scss +++ b/app/assets/stylesheets/02_utils.scss @@ -143,6 +143,20 @@ vertical-align: super; } +// Labels that we only want for screen readers +// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/ +.sr-only { + border: none; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + width: 1px; + overflow: hidden; + position: absolute !important; + word-wrap: normal !important; +} + // generate spacer utility like bootstrap my-2 -> margin-left/right: 2 * $default-spacer // using $direction.key as css modifier, $direction.values to set css properties // scale it using $steps diff --git a/app/assets/stylesheets/labels.scss b/app/assets/stylesheets/labels.scss index cabf6fc87..cdfa65a5e 100644 --- a/app/assets/stylesheets/labels.scss +++ b/app/assets/stylesheets/labels.scss @@ -1,13 +1,13 @@ -// Labels that we only want for screen readers -// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/ -.sr-only { - border: none; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - margin: -1px; - width: 1px; - overflow: hidden; - position: absolute !important; - word-wrap: normal !important; +@import "colors"; +@import "constants"; + +.label { + display: inline-block; + padding: 4px $default-spacer; + background: $dark-grey; + border: 1px solid transparent; + color: #FFFFFF; + border-radius: 4px; + font-size: 12px; + line-height: 18px; } diff --git a/app/helpers/dossier_helper.rb b/app/helpers/dossier_helper.rb index 2aa3b0f70..dd5b96b95 100644 --- a/app/helpers/dossier_helper.rb +++ b/app/helpers/dossier_helper.rb @@ -62,9 +62,7 @@ module DossierHelper def class_badge_state(state) case state - when Dossier.states.fetch(:en_construction) - 'fr-badge--info' - when Dossier.states.fetch(:en_instruction) + when Dossier.states.fetch(:en_construction), Dossier.states.fetch(:en_instruction) 'fr-badge--info' when Dossier.states.fetch(:accepte) 'fr-badge--success'