diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 3270c6bcde37d4de7d1e95d22c3a870b5cdc21b1..9fb644bce93b4022c52defc98ed66b3819dfa73d 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -970,21 +970,26 @@ div.problem .action {
}
.problem-action-button-wrapper {
- @include border-right(1px solid $light-gray1);
+ @include border-right(1px solid $gray-300);
+ @include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation
display: inline-block;
&:last-child {
border: none;
+ padding-right: 0;
}
}
.problem-action-btn {
- @include margin-right($baseline / 5);
-
+ border: none;
max-width: 110px;
- text-decoration: underline;
- text-transform: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $primary !important;
+ }
.icon {
margin-bottom: $baseline / 10;
@@ -994,12 +999,13 @@ div.problem .action {
@media print {
display: none;
}
-
}
.submit-attempt-container {
padding-bottom: $baseline;
flex-grow: 1;
+ display: flex;
+ align-items: center;
@media (max-width: $bp-screen-lg) {
max-width: 100%;
@@ -1013,19 +1019,14 @@ div.problem .action {
white-space: nowrap;
}
- .submit-cta {
- display: inline-block;
- }
.submit-cta-description {
- color: $blue;
+ color: $primary;
font-size: small;
padding-right: $baseline / 2;
}
.submit-cta-link-button {
- border: none;
+ color: $primary;
padding-right: $baseline / 4;
- text-decoration: underline;
- text-transform: none;
}
}
diff --git a/lms/static/sass/course/_dates.scss b/lms/static/sass/course/_dates.scss
index 9fa6b3753f88f4bb2f6be4aa451fac57a283bd35..e89262f25ada9ef0d107f58fe8102f8666aab75c 100644
--- a/lms/static/sass/course/_dates.scss
+++ b/lms/static/sass/course/_dates.scss
@@ -40,7 +40,7 @@
background-color: #f5f5f5;
&.past-due {
- background-color: #d1d2d4;
+ background-color: #475b65;
}
}
@@ -147,13 +147,12 @@
padding: 2px 8px;
border-radius: 5px;
margin-left: 8px;
- font-style: italic;
- font-weight: bold;
+ font-weight: normal;
vertical-align: top;
&.completed {
- background-color: #f3f3f4;
- color: #2d323e;
+ background-color: #f0f2f2;
+ color: #212529;
}
&.due-next {
@@ -170,7 +169,8 @@
}
&.past-due {
- background-color: #d1d2d4;
+ background-color: #475b65;
+ color: #fff;
}
&.today {
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index de9df3eb3d352914bc9fcdfc46192f7e179be3e3..67a5a704050b0eebdf96c14c95db5ac1fd268c32 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -534,22 +534,22 @@ html.video-fullscreen {
.pill {
font-size: 12px;
- max-height: 20px;
+ line-height: 14px;
+ max-height: 16px;
padding: 2px 8px;
border-radius: 5px;
+ margin-top: 4px;
margin-left: 8px;
- font-style: italic;
- font-weight: bold;
vertical-align: top;
&.completed {
- background-color: #f3f3f4;
- color: #2d323e;
+ background-color: #f0f2f2;
+ color: #212529;
}
&.past-due {
- background-color: #d1d2d4;
- color: black;
+ background-color: #475b65;
+ color: #fff;
}
}
}
diff --git a/lms/static/sass/course/layout/_banner_cta.scss b/lms/static/sass/course/layout/_banner_cta.scss
index bad337c9c2dcda2c5ce6d9343ecc6032de11bd82..b6ac4ca60947d7a50f2d0dcb8c321e2cf9d03d60 100644
--- a/lms/static/sass/course/layout/_banner_cta.scss
+++ b/lms/static/sass/course/layout/_banner_cta.scss
@@ -4,7 +4,6 @@
border-radius: 2px;
border: solid 1px #0175b4;
font-size: 14px;
- font-weight: bold;
line-height: 24px;
padding: 7px 18px;
diff --git a/lms/templates/dates_banner.html b/lms/templates/dates_banner.html
index 8e95f78df7a01539425519f4de39241485dc2b0b..594fb7991ca68535a575de7a6ca5acf76668c5d5 100644
--- a/lms/templates/dates_banner.html
+++ b/lms/templates/dates_banner.html
@@ -30,7 +30,7 @@ additional_styling_class = 'on-mobile' if is_mobile_app else 'has-button'
<form method="post" action="${reset_deadlines_url}">
<input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
<input type="hidden" name="course_id" value="${course.id}">
- <button class="btn">${_("Shift due dates")}</button>
+ <button class="btn btn-outline-primary">${_("Shift due dates")}</button>
</form>
</div>
% endif
diff --git a/lms/templates/problem.html b/lms/templates/problem.html
index 7ed8b4a16eac427bd9f94ff7dd1552f8019240e2..60d27b4ff5adb57c752827c719404ecdd7a89b03 100644
--- a/lms/templates/problem.html
+++ b/lms/templates/problem.html
@@ -29,12 +29,12 @@ from openedx.core.djangolib.markup import HTML
<div class="problem-action-buttons-wrapper">
% if demand_hint_possible:
<span class="problem-action-button-wrapper">
- <button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}>${_('Hint')}</button>
+ <button type="button" class="hint-button problem-action-btn btn-link btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}>${_('Hint')}</button>
</span>
% endif
% if save_button:
<span class="problem-action-button-wrapper">
- <button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
+ <button type="button" class="save problem-action-btn btn-link btn-small" data-value="${_('Save')}">
<span aria-hidden="true">${_('Save')}</span>
<span class="sr">${_("Save your answer")}</span>
</button>
@@ -42,12 +42,12 @@ from openedx.core.djangolib.markup import HTML
% endif
% if reset_button:
<span class="problem-action-button-wrapper">
- <button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
+ <button type="button" class="reset problem-action-btn btn-link btn-small" data-value="${_('Reset')}"><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
</span>
% endif
% if answer_available:
<span class="problem-action-button-wrapper">
- <button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="show-label">${_('Show answer')}</span></button>
+ <button type="button" class="show problem-action-btn btn-link btn-small" aria-describedby="${ short_id }-problem-title"><span class="show-label">${_('Show answer')}</span></button>
</span>
% endif
</div>
@@ -58,7 +58,7 @@ from openedx.core.djangolib.markup import HTML
% if submit_disabled_cta:
% if submit_disabled_cta.get('event_data'):
- <button class="submit-cta-link-button btn-default btn-small" onclick="emit_event(${submit_disabled_cta['event_data']})">
+ <button class="submit-cta-link-button btn-link btn-small" onclick="emit_event(${submit_disabled_cta['event_data']})">
${submit_disabled_cta['link_name']}
</button>
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
@@ -73,7 +73,7 @@ from openedx.core.djangolib.markup import HTML
% for form_name, form_value in submit_disabled_cta['form_values'].items():
<input type="hidden" name="${form_name}" value="${form_value}">
% endfor
- <button class="submit-cta-link-button btn-default btn-small">
+ <button class="submit-cta-link-button btn-link btn-small">
${submit_disabled_cta['link_name']}
</button>
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
diff --git a/lms/templates/vert_module.html b/lms/templates/vert_module.html
index b1042a0ec8c0285b0472b72633bd5f1ce30f8166..131bbfc8cadce06c38435852f71f6fddf70b7f7f 100644
--- a/lms/templates/vert_module.html
+++ b/lms/templates/vert_module.html
@@ -27,7 +27,7 @@ from openedx.core.djangolib.markup import HTML
% if completed:
<div class="pill completed">${_('Completed')}</div>
% elif past_due:
- <div class="pill past-due">${_('Past Due')}</div>
+ <div class="pill past-due">${_('Past due')}</div>
% endif
</div>
% endif
@@ -42,7 +42,7 @@ from openedx.core.djangolib.markup import HTML
<div class="banner-cta-text">${vertical_banner_cta['description']}</div>
% if vertical_banner_cta.get('event_data'):
<div class="banner-cta-button">
- <button class="btn" onclick="emit_event(${vertical_banner_cta['event_data']})">${vertical_banner_cta['link_name']}</button>
+ <button class="btn btn-outline-primary" onclick="emit_event(${vertical_banner_cta['event_data']})">${vertical_banner_cta['link_name']}</button>
</div>
% else:
<div class="banner-cta-button">
@@ -51,7 +51,7 @@ from openedx.core.djangolib.markup import HTML
% for form_name, form_value in vertical_banner_cta['form_values'].items():
<input type="hidden" name="${form_name}" value="${form_value}">
% endfor
- <button class="btn">${vertical_banner_cta['link_name']}</button>
+ <button class="btn btn-outline-primary">${vertical_banner_cta['link_name']}</button>
</form>
</div>
% endif