Skip to content

E
edx-platform
Commit 5b9df801 by Chris Committed by GitHub
Options

Merge pull request #13322 from edx/clrux/ac-570-courseware-search-contrast 

AC-570 courseware search contrast enhancement
parents c0eba5d4 37b42941
Showing with 26 additions and 22 deletions
cms/static/sass/partials/_variables.scss
...@@ -42,7 +42,7 @@ $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/tra ...@@ -42,7 +42,7 @@ $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/tra
// +Colors - UXPL new pattern library colors // +Colors - UXPL new pattern library colors
// ==================== // ====================
$uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant $uxpl-blue-hover-active: rgb(6, 86, 131); // wcag2a compliant
$uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
$uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant $uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant
......
common/test/test-theme/cms/static/sass/partials/_variables.scss
...@@ -88,7 +88,7 @@ $blue-t2: rgba($blue, 0.50); ...@@ -88,7 +88,7 @@ $blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75); $blue-t3: rgba($blue, 0.75);
$uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant $uxpl-blue-hover-active: rgb(6, 86, 131); // wcag2a compliant
$uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
$uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant $uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant
......
lms/static/js/fixtures/search/course_search_form.html
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
<form> <form>
<label for="course-search-input" class="sr">Course Search</label> <label for="course-search-input" class="sr">Course Search</label>
<input id="course-search-input" type="text" class="search-field"/> <input id="course-search-input" type="text" class="search-field"/>
<button type="submit" class="search-button"> <button type="submit" class="search-button">Search</button>
search <span class="icon fa fa-search" aria-hidden="true"></span>
</button>
<button type="button" class="cancel-button" title="Clear search"> <button type="button" class="cancel-button" title="Clear search">
<span class="icon fa fa-remove" aria-hidden="true"></span> <span class="icon fa fa-remove" aria-hidden="true"></span>
</button> </button>
......
lms/static/sass/partials/base/_variables.scss
...@@ -160,7 +160,7 @@ $blue-t2: rgba($blue, 0.50); ...@@ -160,7 +160,7 @@ $blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75); $blue-t3: rgba($blue, 0.75);
$uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant $uxpl-blue-base: rgb(0, 117, 180); // wcag2a compliant
$uxpl-blue-hover-active: rgb(41, 145, 195); // wcag2a compliant $uxpl-blue-hover-active: rgb(6, 86, 131); // wcag2a compliant
$uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant $uxpl-green-base: rgb(0, 129, 0); // wcag2a compliant
$uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant $uxpl-green-hover-active: rgb(0, 155, 0); // wcag2a compliant
......
lms/static/sass/search/_search.scss
...@@ -13,30 +13,39 @@ ...@@ -13,30 +13,39 @@
top: 5px; top: 5px;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
background: $white-t1; background: $white;
&.is-active {
background: $white;
}
} }
.search-button, .cancel-button, .search-button,
.search-button:hover, .cancel-button:hover { .cancel-button,
@extend %t-icon6; .search-button:hover,
.cancel-button:hover {
@extend %t-regular; @extend %t-regular;
@include box-sizing(border-box); @include box-sizing(border-box);
@include right(12px); @include right(0);
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
border: none; border: none;
background: transparent; border-radius: 0;
padding: 0; @include border-top-right-radius(3px);
@include border-bottom-right-radius(3px);
background: $uxpl-blue-base;
padding: 0 10px;
height: 35px; height: 35px;
color: $gray-l1; color: $white;
box-shadow: none; box-shadow: none;
line-height: 35px; line-height: 33px;
text-shadow: none; text-shadow: none;
text-transform: none; text-transform: none;
&:hover,
&:focus,
&:active {
background: $uxpl-blue-hover-active;
box-shadow: none;
border: none;
}
} }
.cancel-button { .cancel-button {
...@@ -171,4 +180,3 @@ ...@@ -171,4 +180,3 @@
} }
} }
} }
lms/templates/courseware/courseware.html
...@@ -126,9 +126,7 @@ ${HTML(fragment.foot_html())} ...@@ -126,9 +126,7 @@ ${HTML(fragment.foot_html())}
<label for="course-search-input" class="sr">${_('Course Search')}</label> <label for="course-search-input" class="sr">${_('Course Search')}</label>
<div class="search-field-wrapper"> <div class="search-field-wrapper">
<input id="course-search-input" type="text" class="search-field"/> <input id="course-search-input" type="text" class="search-field"/>
<button type="submit" class="search-button"> <button type="submit" class="search-button">${_('Search')}</button>
${_('search')} <span class="icon fa fa-search" aria-hidden="true"></span>
</button>
<button type="button" class="cancel-button" title="${_('Clear search')}"> <button type="button" class="cancel-button" title="${_('Clear search')}">
<span class="icon fa fa-remove" aria-hidden="true"></span> <span class="icon fa fa-remove" aria-hidden="true"></span>
</button> </button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment