Skip to content

Commit

Permalink
MDL-74812 gradingform_rubric: Fix contrast issues in rubric table
Browse files Browse the repository at this point in the history 
* Darken the score value using the green theme colour
* Use a light green theme colour for selection backgrounds
* Unify rubric styles related to background and text colour within the
  criteria.
  • Loading branch information
@junpataleta
junpataleta committed Jun 21, 2022
1 parent 14d4bfd commit f35f522
Show file tree
Hide file tree
Showing 5 changed files with 249 additions and 243 deletions.
31 changes: 0 additions & 31 deletions grade/grading/form/rubric/styles.css
View file
Expand Up @@ -135,44 +135,13 @@
color: #aaa;
}

.gradingform_rubric.editor .criterion .levels .level .delete {
position: absolute;
right: 0;
}

.gradingform_rubric .criterion .levels .level .score {
font-style: italic;
color: #575;
font-weight: bold;
margin-top: 5px;
white-space: nowrap;
}

.gradingform_rubric .criterion .levels .level .score .scorevalue {
padding-right: 5px;
}

/* Make invisible the buttons 'Move up' for the first criterion and
'Move down' for the last, because those buttons will make no change */
.gradingform_rubric.editor .criterion.first .controls .moveup input,
.gradingform_rubric.editor .criterion.last .controls .movedown input {
display: none;
}

/* evaluation */
.gradingform_rubric .criterion .levels .level.currentchecked {
background: #fff0f0;
}

.gradingform_rubric .criterion .levels .level.checked {
background: #d0ffd0;
border: 1px solid #555;
}

.gradingform_rubric.evaluate .criterion .levels .level:hover {
background: #30ff30;
}

/* replace buttons with images */
.gradingform_rubric.editor .delete input,
.gradingform_rubric.editor .duplicate input,
Expand Down
17 changes: 0 additions & 17 deletions mod/assign/styles.css
View file
Expand Up @@ -782,23 +782,6 @@
background-color: transparent;
}

.path-mod-assign [data-region="grade-panel"] .gradingform_rubric.evaluate .criterion .levels .level:hover {
background-color: #dff0d8;
}

.path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels .level.checked {
background-color: #dff0d8;
border: none;
border-left: 1px solid #ddd;
}

.path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels .level .score {
color: #468847;
font-weight: 500;
font-style: normal;
margin-top: 20px;
}

.path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .remark textarea {
margin-bottom: 0;
}
Expand Down
234 changes: 129 additions & 105 deletions theme/boost/scss/moodle/grade.scss
View file
Expand Up @@ -106,134 +106,158 @@
}
}

#rubric-rubric {
&.gradingform_rubric {
#rubric-criteria {
margin-bottom: 1em;
$rubricPadding: 6px;

.criterion {
.description {
vertical-align: top;
padding: $rubricPadding;

textarea {
margin-bottom: 0;
height: 115px;
}
}
.gradingform_rubric {
margin-bottom: 1em;
$rubricPadding: 6px;

.definition {
textarea {
width: 80%;
margin-bottom: 0;
}
}
// When doing evaluation on the rubrics table.
&.evaluate .criterion .levels .level {
&:hover,
&.checked {
background: #dff0d8;
}
&.checked {
border: none;
border-left: 1px solid $border-color;
}
}

.score {
position: relative;
float: left;
margin-right: 28px;
.criterion {
.description {
vertical-align: top;
padding: $rubricPadding;

input {
margin-bottom: 0;
}
}
textarea {
margin-bottom: 0;
height: 115px;
}
}

.level {
vertical-align: top;
padding: $rubricPadding;

.delete {
position: relative;
width: 32px;
height: 32px;
margin-top: -32px;
clear: both;
float: right;

input {
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 24px;
width: 24px;
margin: 0;

&:hover {
background-color: #ddd;
}
}
}
}
.definition {
textarea {
width: 80%;
margin-bottom: 0;
}
}

.scorevalue {
input {
// Should handle at least three chars with room to spare.
float: none;
width: 2em;

&.hiddenelement,
&.pseudotablink {
// Zero out the width if it's still in the block flow for some reason
// when hidden
width: 0;
}
}
}
.score {
position: relative;
float: left;
margin-top: 5px;
margin-right: 28px;
font-style: italic;
font-weight: bold;
color: #{theme-color-level('success', 2)};
white-space: nowrap;

input {
margin-bottom: 0;
}
}

.level {
vertical-align: top;
padding: $rubricPadding;

&.currentchecked {
background: #fff0f0;
}

&.checked {
background: #d0ffd0;
border: 1px solid #555;
}

.addlevel {
vertical-align: top;
padding-top: 6px;
.delete {
position: relative;
width: 32px;
height: 32px;
margin-top: -32px;
clear: both;
float: right;

input {
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 24px;
width: 24px;
margin: 0;

input {
height: 30px;
line-height: 1rem;
&:hover {
background-color: #ddd;
}
}
}
}

.addcriterion {
margin-left: 5px;
padding: 0;
.scorevalue {
padding-right: 5px;
input {
// Should handle at least three chars with room to spare.
float: none;
width: 2em;

&.hiddenelement,
&.pseudotablink {
// Zero out the width if it's still in the block flow for some reason
// when hidden
width: 0;
}
}
}

.addlevel {
vertical-align: top;
padding-top: 6px;

input {
margin: 0;
color: inherit;
text-shadow: inherit;
border: 0 none;
line-height: inherit;
background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
padding-left: 26px;
height: 30px;
line-height: 1rem;
}
margin-bottom: 1em;
}
}

.options {
clear: both;
.addcriterion {
margin-left: 5px;
padding: 0;

.option {
label {
margin: 0;
padding: 0;
font-size: inherit;
font-weight: normal;
line-height: 2em;
color: inherit;
text-shadow: none;
background-color: transparent;
}
input {
margin: 0;
color: inherit;
text-shadow: inherit;
border: 0 none;
line-height: inherit;
background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
padding-left: 26px;
}
margin-bottom: 1em;
}

input {
margin-left: 5px;
margin-right: 12px;
}
.options {
clear: both;

.option {
label {
margin: 0;
padding: 0;
font-size: inherit;
font-weight: normal;
line-height: 2em;
color: inherit;
text-shadow: none;
background-color: transparent;
}

input {
margin-left: 5px;
margin-right: 12px;
}
}
}
}

.grade-display {
.description {
font-size: 1rem;
Expand Down

0 comments on commit f35f522

Please sign in to comment.