Skip to content

Commit

Permalink
Ensure disabled radio buttons are still legible
Browse files Browse the repository at this point in the history
The Elements CSS was making the `label` and `input` of disabled radio
buttons `opacity: 0.5`. This was resulting in text that was:
- too pale, especially where we were nesting 16px ‘hint’ text inside the
  label
- waaaay too pale when inside a link inside the label

This commit overrides elements to dim the disabled radio button by
making it’s text colour grey, rather than making the whole thing
semi-transparent.
  • Loading branch information
quis committed Apr 10, 2017
1 parent a592898 commit 87c81c9
Showing 1 changed file with 10 additions and 4 deletions.
14 changes: 10 additions & 4 deletions app/assets/stylesheets/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -247,10 +247,16 @@ details .arrow {
margin-top: 5px;
}

.block-label input[disabled] {
opacity: 0.5;
}

#content.override-elements-content {
padding-bottom: 0;
}

.multiple-choice input:disabled+label {
opacity: 1;
color: $secondary-text-colour;
cursor: default;
}

.multiple-choice input:disabled {
opacity: 0.5;
}

0 comments on commit 87c81c9

Please sign in to comment.