demarches-normaliennes/app/assets/stylesheets/new_design/labels.scss

71 lines
1.2 KiB
SCSS

@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;
&.instruction {
background-color: #FFFFFF;
color: $blue;
border: 1px solid $blue;
}
&.en-instruction {
@extend .instruction;
}
&.construction {
background-color: #FFFFFF;
color: $black;
border: 1px solid $black;
}
&.en-construction {
@extend .construction;
}
&.accepted {
background-color: $green;
}
&.accepte {
@extend .accepted;
}
&.refused {
background-color: $dark-red;
}
&.refuse {
@extend .refused;
}
&.without-continuation {
background-color: $black;
}
&.sans-suite {
@extend .without-continuation;
}
}
// Labels that we only want for screen readers
// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
.screen-reader-text {
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;
}