bryce/jquery.uls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes CSSLint issues for jquery.uls.css

Browse Source 
CSS adjustments and JS modifications (adding classes to HTML elemnts)
to solve issues reported by CSS Lint when validating jquery.uls.css
This commit is contained in:
pginer
2012-11-19 16:53:56 +01:00
parent f1c2216c4c
commit 30fbfbac71
3 changed files with 48 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
css/jquery.uls.css
View File

@@ -9,15 +9,11 @@
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
display: none; display: none;
min-width: 715px;
margin-top: 1px; margin-top: 1px;
width: 45%;
/* Styling */ /* Styling */
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #ccc; border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
@@ -28,12 +24,16 @@
-moz-background-clip: padding; -moz-background-clip: padding;
background-clip: padding-box; background-clip: padding-box;
} }
.uls-wide {
min-width: 715px;
width: 45%;
}
.uls-title a { .uls-title-region a {
padding-left: 15px; padding-left: 15px;
} }
.uls-menu h1 { .uls-menu .uls-title {
font-weight: normal; font-weight: normal;
border: none; border: none;
padding-top: 1.25em; padding-top: 1.25em;
@@ -44,10 +44,12 @@
color: #555; color: #555;
} }
.uls-menu h2 { .uls-menu .uls-no-results-found-title{
font-size: 16pt; font-size: 16pt;
font-weight: bold;
line-height: 1.5em; line-height: 1.5em;
padding-left: 6px; padding-left: 6px;
padding-top: 10px;
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 15px;
border-bottom: none; border-bottom: none;
@@ -87,15 +89,16 @@ div.uls-region {
} }
.uls-region a { .uls-region a {
bottom: 0; bottom: 2px;
padding: 2px; left: 2px;
padding: 0;
position: absolute; position: absolute;
font-size: 13px; font-size: 13px;
line-height: 1.2em; line-height: 1.2em;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 99%;
} }
.uls-region:hover { .uls-region:hover {
@@ -108,12 +111,12 @@ div.uls-region {
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)"; "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
} }
.regionselector.active { .map-block .active {
border-bottom-color: #3366bb; border-bottom-color: #3366bb;
border-bottom-style: solid; border-bottom-style: solid;
} }
#map-block { .map-block {
top: 1px; top: 1px;
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
@@ -126,7 +129,8 @@ div.uls-region {
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
} }
#map-block a { .map-block a {
color: #333;
opacity:0; opacity:0;
-moz-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear;
@@ -134,20 +138,20 @@ div.uls-region {
transition: opacity 0.15s linear; transition: opacity 0.15s linear;
} }
#map-block:hover, #map-block:hover a { .map-block:hover, .map-block:hover a {
opacity: 1; opacity: 1;
color: #333; color: #333;
} }
#map-block #uls-region-1 { .map-block .uls-region-1 {
border-color: transparent; border-color: transparent;
} }
#map-block:hover #uls-region-1.active { .map-block:hover .active {
border-color: #3366bb; border-color: #3366bb;
} }
#map-block .active a { .map-block .active a {
font-weight: bold; font-weight: bold;
} }
@@ -160,30 +164,34 @@ div.uls-region {
cursor: pointer; cursor: pointer;
} }
input#languagefilter { .uls-menu .languagefilter {
background-color: transparent;
border: 1px solid #c9c9c9; border: 1px solid #c9c9c9;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
color: #333; color: #333;
display: block; display: block;
background-color: transparent !important; padding: 6px;
-moz-transition: all 0.15s linear 0s; -moz-transition: all 0.15s linear 0s;
-o-transition: all 0.15s linear 0s; -o-transition: all 0.15s linear 0s;
-webkit-transition: all 0.15s linear 0s; -webkit-transition: all 0.15s linear 0s;
transition: all 0.15s linear 0s; transition: all 0.15s linear 0s;
} }
input:focus#languagefilter { .uls-menu .languagefilter:focus {
border: 1px solid #3366bb; border: 1px solid #3366bb;
} }
#search{ .uls-menu .search{
position: relative; position: relative;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB');
background: #f8f8f8; background: #f8f8f8;
background: linear-gradient(#F0F0F0, #FBFBFB);
background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB)); background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB));
background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB); background: -webkit-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -ms-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -o-linear-gradient(top, #F0F0F0, #FBFBFB);
background: linear-gradient(#F0F0F0, #FBFBFB);
border-top-color: #AAA; border-top-color: #AAA;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
@@ -193,18 +201,17 @@ input:focus#languagefilter {
border-bottom-color: #EEE; border-bottom-color: #EEE;
} }
.search-label { .uls-menu .search-label {
/* @embed */ /* @embed */
background: url('../images/search.png') no-repeat scroll right center background: url('../images/search.png') no-repeat scroll right center
transparent; transparent;
background-size: 30px; background-size: 30px;
height: 32px; height: 32px;
width: 32px; width: 32px;
display: inline-block;
float: right; float: right;
} }
#languagefilter-clear { .uls-menu .languagefilter-clear {
/* @embed */ /* @embed */
background: url('../images/clear.png') no-repeat scroll left center background: url('../images/clear.png') no-repeat scroll left center
transparent; transparent;
@@ -215,18 +222,18 @@ input:focus#languagefilter {
margin-left: -32px; margin-left: -32px;
} }
.filterinput { .uls-menu .filterinput {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
font-size: 14px; font-size: 14px;
height: 32px; height: 32px;
padding: 6px;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
#filtersuggestion { .uls-menu .filtersuggestion {
padding: 6px;
background-color: white; background-color: white;
color: #888; color: #888;
border: 1px transparent; border: 1px transparent;
@@ -235,6 +242,6 @@ input:focus#languagefilter {
left: 1px; left: 1px;
} }
#search-input-block { .uls-menu .search-input-block {
position: relative; position: relative;
} }

4
css/jquery.uls.lcd.css
View File

@@ -73,10 +73,6 @@
height: 100%; height: 100%;
} }
.uls-no-results-found-title{
font-weight: bold;
}
.uls-no-found-more { .uls-no-found-more {
font-size: 0.9em; font-size: 0.9em;
background: #F8F8F8; background: #F8F8F8;

20
src/jquery.uls.core.js
View File

@@ -23,18 +23,18 @@
// Region numbers in id attributes also appear in the langdb. // Region numbers in id attributes also appear in the langdb.
var template = '\ var template = '\
<div class="uls-menu"> \ <div class="uls-menu uls-wide"> \
<div class="row"> \ <div class="row"> \
<span id="uls-close" class="icon-close"></span> \ <span id="uls-close" class="icon-close"></span> \
</div> \ </div> \
<div class="row"> \ <div class="row"> \
<div class="uls-title four columns">\ <div class="uls-title-region four columns">\
<h1 data-i18n="uls-select-language">Select Language</h1>\ <h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\
</div>\ </div>\
<div class="three columns" id="settings-block"></div>\ <div class="three columns" id="settings-block"></div>\
<div class="five columns" id="map-block">\ <div class="five columns map-block" id="map-block">\
<div class="row">\ <div class="row">\
<div data-regiongroup="1" id="uls-region-1" class="three columns uls-region">\ <div data-regiongroup="1" id="uls-region-1" class="three columns uls-region uls-region-1">\
<a data-i18n="uls-region-WW">Worldwide</a>\ <a data-i18n="uls-region-WW">Worldwide</a>\
</div>\ </div>\
<div class="nine columns">\ <div class="nine columns">\
@@ -56,20 +56,20 @@
</div>\ </div>\
</div>\ </div>\
</div>\ </div>\
<div id="search" class="row"> \ <div id="search" class="row search"> \
<div class="one column">\ <div class="one column">\
<span class="search-label"></span>\ <span class="search-label"></span>\
</div>\ </div>\
<div class="ten columns">\ <div class="ten columns">\
<div id="search-input-block">\ <div id="search-input-block" class="search-input-block">\
<input type="text" class="filterinput" id="filtersuggestion" disabled="true"\ <input type="text" class="filterinput filtersuggestion" id="filtersuggestion" disabled="true"\
autocomplete="off" /> <input type="text" class="filterinput" id="languagefilter"\ autocomplete="off" /> <input type="text" class="filterinput languagefilter" id="languagefilter"\
data-clear="languagefilter-clear" data-suggestion="filtersuggestion"\ data-clear="languagefilter-clear" data-suggestion="filtersuggestion"\
placeholder="Language search" autocomplete="off" />\ placeholder="Language search" autocomplete="off" />\
</div>\ </div>\
</div>\ </div>\
<div class="one column">\ <div class="one column">\
<span id="languagefilter-clear"></span>\ <span id="languagefilter-clear" class="languagefilter-clear"></span>\
</div>\ </div>\
</div>\ </div>\
<div class="row uls-language-list"></div>\ <div class="row uls-language-list"></div>\