From 6c84980453b7c354760f47f9c66db4d806c7fbb7 Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 7 Sep 2017 19:01:12 -0700 Subject: [PATCH 1/3] Remove redundancy, increase contrast Removing redundancy by stripping out default values or using shorthands where applicable. Also increasing color contrast to conform to WCAG level AA. --- css/jquery.uls.css | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/css/jquery.uls.css b/css/jquery.uls.css index 3f83f83..5c1e9ca 100644 --- a/css/jquery.uls.css +++ b/css/jquery.uls.css @@ -1,6 +1,6 @@ .uls-trigger { /* @embed */ - background: transparent url('../images/icon-language.png') no-repeat scroll left center; + background: url('../images/icon-language.png') no-repeat left center; /* @embed */ background-image: -webkit-linear-gradient(transparent, transparent), url('../images/icon-language.svg'); /* @embed */ @@ -13,10 +13,9 @@ z-index: 1000; display: none; margin-top: 1px; - /* Styling */ - background-color: #ffffff; + background-color: #fff; border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); @@ -51,11 +50,9 @@ } .uls-search { - background-color: white; + background-color: #fff; padding: 5px 16px; - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: #DDD; + border-bottom: 1px solid #ddd; } .grid .uls-search { @@ -71,12 +68,11 @@ } .uls-search-label { - background: transparent url('../images/search.png') no-repeat scroll right center; + background: url('../images/search.png') no-repeat center center; background-image: -webkit-linear-gradient(transparent, transparent), url('../images/search.svg'); /* @embed */ background-image: linear-gradient(transparent, transparent), url('../images/search.svg'); background-size: 20px; - background-position: center center; height: 32px; width: 44px; display: block; @@ -96,10 +92,8 @@ width: 100%; /* For the custom clear (X) icon */ padding: 6px 25px 6px 0; - outline: none; - border: none; - + border: 0; display: block; position: absolute; top: 0; @@ -109,18 +103,18 @@ /* This is the actual input */ .uls-languagefilter { background-color: transparent; - border: none; - color: #333; + border: 0; + color: #222; } /* This is the shadow input box showing completion suggestions */ .uls-filtersuggestion { - background-color: white; - color: #888; + background-color: #fff; + color: #777; } .uls-languagefilter-clear { - background: transparent url('../images/clear.png') no-repeat scroll left center; + background: url('../images/clear.png') no-repeat left center; background-image: -webkit-linear-gradient(transparent, transparent), url('../images/clear.svg'); /* @embed */ background-image: linear-gradient(transparent, transparent), url('../images/clear.svg'); From 70eba564d8d894fbd40fcc280184660e9b33440f Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 7 Sep 2017 19:04:08 -0700 Subject: [PATCH 2/3] Improve color values and CSS --- css/jquery.uls.lcd.css | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/css/jquery.uls.lcd.css b/css/jquery.uls.lcd.css index 529b8bc..d6e6f77 100644 --- a/css/jquery.uls.lcd.css +++ b/css/jquery.uls.lcd.css @@ -7,13 +7,13 @@ */ .uls-lcd { + background-color: #fcfcfc; height: 20em; /* Work around Chrome bug where it places scrollbar on the left in * in RTL mode but actually reserves the place on the right side */ overflow-x: hidden; overflow-y: auto; width: auto; - background: #FCFCFC; padding: 0 16px; } @@ -61,8 +61,7 @@ * Bug because overflow: hidden is incompatible with bullets, also render * the bullets inside the list in case there should be any. */ - list-style-image: none; - list-style-type: none; + list-style: none none; } .uls-language-block > ul > li { @@ -88,7 +87,7 @@ .uls-language-block a { cursor: pointer; text-decoration: none; - color: #3366bb; + color: #36c; font-size: 14px; display: inline-block; width: 100%; @@ -114,14 +113,14 @@ .uls-no-results-found-title { font-size: 16px; padding: 0 16px 0 28px; - border-bottom: none; + border-bottom: 0; color: #555; } .uls-no-found-more { + background: #f8f8f8; padding: 0 16px 0 44px; font-size: 0.9em; - background: #F8F8F8; width: 100%; margin-top: 1.6em; line-height: 1.6em; From 0ca0bd0e7b8e72c8378ce0777dc6e9a4a93ea758 Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 7 Sep 2017 19:06:54 -0700 Subject: [PATCH 3/3] Improve CSS Improving by merging same value selectors and aligning whitespace --- css/jquery.uls.mobile.css | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/css/jquery.uls.mobile.css b/css/jquery.uls.mobile.css index 30f5b4f..f7dc7b6 100644 --- a/css/jquery.uls.mobile.css +++ b/css/jquery.uls.mobile.css @@ -198,7 +198,6 @@ /* Very large display targeting */ @media only screen and (min-width: 1441px) { - .uls-mobile .hide-for-small, .uls-mobile .hide-for-medium, .uls-mobile .hide-for-medium-down, @@ -216,9 +215,9 @@ display: none !important; } } + /* Medium display targeting */ @media only screen and (max-width: 1279px) and (min-width: 768px) { - .uls-mobile .hide-for-small, .uls-mobile .show-for-medium, .uls-mobile .show-for-medium-down, @@ -237,9 +236,9 @@ display: none !important; } } + /* Small display targeting */ @media only screen and (max-width: 767px) { - .uls-mobile .show-for-small, .uls-mobile .hide-for-medium, .uls-mobile .show-for-medium-down, @@ -292,18 +291,12 @@ } /* Touch-enabled device targeting */ -.uls-mobile .show-for-touch { - display: none !important; -} - -.uls-mobile .hide-for-touch { - display: block !important; -} - -.uls-mobile .touch .show-for-touch { - display: block !important; -} - +.uls-mobile .show-for-touch, .uls-mobile .touch .hide-for-touch { display: none !important; } + +.uls-mobile .hide-for-touch, +.uls-mobile .touch .show-for-touch { + display: block !important; +}