Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
AC-570 courseware search contrast enhancement
This commit is contained in:
Chris
2016-08-30 17:03:13 -04:00
committed by GitHub
parent c0eba5d474 37b42941f8
commit 5b9df80123
6 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cms/static/sass/partials/_variables.scss
View File

@@ -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
// ====================
$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-hover-active: rgb(0, 155, 0); // wcag2a compliant

2
common/test/test-theme/cms/static/sass/partials/_variables.scss
View File

@@ -88,7 +88,7 @@ $blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75);
$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-hover-active: rgb(0, 155, 0); // wcag2a compliant

4
lms/static/js/fixtures/search/course_search_form.html
View File

@@ -2,9 +2,7 @@
<form>
<label for="course-search-input" class="sr">Course Search</label>
<input id="course-search-input" type="text" class="search-field"/>
<button type="submit" class="search-button">
search <span class="icon fa fa-search" aria-hidden="true"></span>
</button>
<button type="submit" class="search-button">Search</button>
<button type="button" class="cancel-button" title="Clear search">
<span class="icon fa fa-remove" aria-hidden="true"></span>
</button>

2
lms/static/sass/partials/base/_variables.scss
View File

@@ -160,7 +160,7 @@ $blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75);
$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-hover-active: rgb(0, 155, 0); // wcag2a compliant

34
lms/static/sass/search/_search.scss
View File

@@ -13,30 +13,39 @@
top: 5px;
width: 100%;
border-radius: 4px;
background: $white-t1;
&.is-active {
background: $white;
}
background: $white;
}
.search-button, .cancel-button,
.search-button:hover, .cancel-button:hover {
@extend %t-icon6;
.search-button,
.cancel-button,
.search-button:hover,
.cancel-button:hover {
@extend %t-regular;
@include box-sizing(border-box);
@include right(12px);
@include right(0);
display: block;
position: absolute;
top: 0;
border: none;
background: transparent;
padding: 0;
border-radius: 0;
@include border-top-right-radius(3px);
@include border-bottom-right-radius(3px);
background: $uxpl-blue-base;
padding: 0 10px;
height: 35px;
color: $gray-l1;
color: $white;
box-shadow: none;
line-height: 35px;
line-height: 33px;
text-shadow: none;
text-transform: none;
&:hover,
&:focus,
&:active {
background: $uxpl-blue-hover-active;
box-shadow: none;
border: none;
}
}
.cancel-button {
@@ -171,4 +180,3 @@
}
}
}

4
lms/templates/courseware/courseware.html
View File

@@ -126,9 +126,7 @@ ${HTML(fragment.foot_html())}
<label for="course-search-input" class="sr">${_('Course Search')}</label>
<div class="search-field-wrapper">
<input id="course-search-input" type="text" class="search-field"/>
<button type="submit" class="search-button">
${_('search')} <span class="icon fa fa-search" aria-hidden="true"></span>
</button>
<button type="submit" class="search-button">${_('Search')}</button>
<button type="button" class="cancel-button" title="${_('Clear search')}">
<span class="icon fa fa-remove" aria-hidden="true"></span>
</button>