CSS fixes to match the style modifications of jquery.uls
The style rearrangements of jquery.uls (to avoid CSSLint warnings) requires some fixes on the extension. Also update the changes from jquery.uls Change-Id: I607f7778e620a398ce8648c21c594a3505ec0816
This commit is contained in:
pginer
committed by
Santhosh Thottingal
Santhosh Thottingal
parent
8882e7b08d
commit
73bb7015c8
@@ -9,15 +9,11 @@
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
min-width: 715px;
|
||||
margin-top: 1px;
|
||||
width: 45%;
|
||||
/* Styling */
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
*border-right-width: 2px;
|
||||
*border-bottom-width: 2px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
@@ -29,11 +25,16 @@
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.uls-title a {
|
||||
.uls-wide {
|
||||
min-width: 715px;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.uls-title-region a {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.uls-menu h1 {
|
||||
.uls-menu .uls-title {
|
||||
font-weight: normal;
|
||||
border: none;
|
||||
padding-top: 1.25em;
|
||||
@@ -44,17 +45,20 @@
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uls-menu h2 {
|
||||
.uls-menu .uls-no-results-found-title{
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
line-height: 1.5em;
|
||||
padding-left: 6px;
|
||||
padding-top: 10px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: none;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uls-menu h3 {
|
||||
.uls-menu .uls-lcd-region-title {
|
||||
color: #777;
|
||||
font-size: 14pt;
|
||||
line-height: 1.5em;
|
||||
padding-left: 0;
|
||||
@@ -86,15 +90,16 @@ div.uls-region {
|
||||
}
|
||||
|
||||
.uls-region a {
|
||||
bottom: 0;
|
||||
padding: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
line-height: 1.2em;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.uls-region:hover {
|
||||
@@ -107,38 +112,48 @@ div.uls-region {
|
||||
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
|
||||
}
|
||||
|
||||
.regionselector.active {
|
||||
.map-block .active {
|
||||
border-bottom-color: #3366bb;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
#map-block {
|
||||
.map-block {
|
||||
top: 1px;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
float: right;
|
||||
overflow: hidden;
|
||||
color: rgba(0,0,0,0);
|
||||
opacity: 0.7;
|
||||
transition: color 0.15s linear;
|
||||
-moz-transition: color 0.15s linear;
|
||||
-webkit-transition: color 0.15s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
#map-block:hover {
|
||||
.map-block a {
|
||||
color: #333;
|
||||
opacity:0;
|
||||
-moz-transition: opacity 0.15s linear;
|
||||
-o-transition: opacity 0.15s linear;
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
|
||||
.map-block:hover,
|
||||
.map-block:hover a {
|
||||
opacity: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#map-block #uls-region-1 {
|
||||
.map-block .uls-region-1 {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
#map-block:hover #uls-region-1.active {
|
||||
.map-block:hover .active {
|
||||
border-color: #3366bb;
|
||||
}
|
||||
|
||||
#map-block .active a {
|
||||
.map-block .active a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -151,26 +166,34 @@ div.uls-region {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input#languagefilter {
|
||||
.uls-menu .languagefilter {
|
||||
background-color: transparent;
|
||||
border: 1px solid #c9c9c9;
|
||||
-moz-transition: all 0.15s linear 0s;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
|
||||
color: #333;
|
||||
display: block;
|
||||
background-color: transparent !important;
|
||||
padding: 6px;
|
||||
-moz-transition: border 0.15s linear 0s;
|
||||
-o-transition: border 0.15s linear 0s;
|
||||
-webkit-transition: border 0.15s linear 0s;
|
||||
transition: border 0.15s linear 0s;
|
||||
}
|
||||
|
||||
input:focus#languagefilter {
|
||||
.uls-menu .languagefilter:focus {
|
||||
border: 1px solid #3366bb;
|
||||
}
|
||||
|
||||
#search{
|
||||
.uls-menu .search{
|
||||
position: relative;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB');
|
||||
background: #f8f8f8;
|
||||
background: linear-gradient(#F0F0F0, #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-style: solid;
|
||||
border-top-width: 1px;
|
||||
@@ -180,18 +203,17 @@ input:focus#languagefilter {
|
||||
border-bottom-color: #EEE;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
.uls-menu .search-label {
|
||||
/* @embed */
|
||||
background: url('../images/search.png') no-repeat scroll right center
|
||||
transparent;
|
||||
background-size: 30px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#languagefilter-clear {
|
||||
.uls-menu .languagefilter-clear {
|
||||
/* @embed */
|
||||
background: url('../images/clear.png') no-repeat scroll left center
|
||||
transparent;
|
||||
@@ -202,18 +224,18 @@ input:focus#languagefilter {
|
||||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.filterinput {
|
||||
.uls-menu .filterinput {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#filtersuggestion {
|
||||
.uls-menu .filtersuggestion {
|
||||
padding: 6px;
|
||||
background-color: white;
|
||||
color: #888;
|
||||
border: 1px transparent;
|
||||
@@ -222,7 +244,7 @@ input:focus#languagefilter {
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
#search-input-block {
|
||||
.uls-menu .search-input-block {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -547,24 +569,23 @@ img {
|
||||
}
|
||||
|
||||
|
||||
.uls-lcd-region-section h3 {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.uls-lcd-region-section ul li:hover {
|
||||
background-color: #eaeff7;
|
||||
}
|
||||
|
||||
.uls-lcd-region-section {
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
/* Language list */
|
||||
.uls-language-list {
|
||||
height: 22em;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.uls-language-block ul {
|
||||
margin: 0 0 1.6em;
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.uls-language-list ul li {
|
||||
@@ -611,10 +632,9 @@ img {
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.uls-language-block .three.columns {
|
||||
.uls-language-block .columns {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.uls-language-block {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -624,11 +644,7 @@ img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.uls-no-results-view h2{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#uls-no-found-more {
|
||||
.uls-no-found-more {
|
||||
font-size: 0.9em;
|
||||
background: #F8F8F8;
|
||||
width: 100%;
|
||||
@@ -637,8 +653,7 @@ img {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
.uls-lcd-region-section ul li.uls-column-break:hover {
|
||||
background: none;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
/*! jquery.uls - v0.1.0 - 2012-11-19
|
||||
/*! jquery.uls - v0.1.0 - 2012-11-20
|
||||
* https://github.com/wikimedia/jquery.uls
|
||||
* Copyright (c) 2012 Santhosh Thottingal; Licensed GPL, MIT */
|
||||
|
||||
@@ -503,10 +503,10 @@
|
||||
|
||||
var noResultsTemplate = '\
|
||||
<div class="twelve columns uls-no-results-view">\
|
||||
<h2 data-i18n="uls-no-results-found" class="eleven columns end offset-by-one">\
|
||||
<h2 data-i18n="uls-no-results-found" class="eleven columns end offset-by-one uls-no-results-found-title">\
|
||||
No results found\
|
||||
</h2>\
|
||||
<div id="uls-no-found-more">\
|
||||
<div id="uls-no-found-more" class="uls-no-found-more">\
|
||||
<div class="ten columns end offset-by-one">\
|
||||
<p>\
|
||||
<span data-i18n="uls-search-help">You can search by language name, \
|
||||
@@ -646,7 +646,7 @@
|
||||
$.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) {
|
||||
$section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode );
|
||||
$sectionTitle = $( '<h3 data-i18n="uls-region-'+ regionCode+'">' )
|
||||
.addClass( 'eleven columns uls-lcd-region-section offset-by-one' )
|
||||
.addClass( 'eleven columns uls-lcd-region-section uls-lcd-region-title offset-by-one' )
|
||||
.text( regions[regionCode] );
|
||||
$section.append( $sectionTitle );
|
||||
that.$element.append( $section );
|
||||
@@ -676,7 +676,7 @@
|
||||
quickList.sort( $.uls.data.sortByAutonym );
|
||||
var $quickListSection = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' );
|
||||
var $quickListSectionTitle = $( '<h3 data-i18n="uls-common-languages">' )
|
||||
.addClass( 'eleven columns uls-lcd-region-section offset-by-one' )
|
||||
.addClass( 'eleven columns uls-lcd-region-section uls-lcd-region-title offset-by-one' )
|
||||
.text( 'Common languages' ); // This is placeholder text if jquery.i18n not present
|
||||
$quickListSection.append( $quickListSectionTitle );
|
||||
this.$element.prepend( $quickListSection );
|
||||
@@ -1347,18 +1347,18 @@
|
||||
|
||||
// Region numbers in id attributes also appear in the langdb.
|
||||
var template = '\
|
||||
<div class="uls-menu"> \
|
||||
<div class="uls-menu uls-wide"> \
|
||||
<div class="row"> \
|
||||
<span id="uls-close" class="icon-close"></span> \
|
||||
</div> \
|
||||
<div class="row"> \
|
||||
<div class="uls-title four columns">\
|
||||
<h1 data-i18n="uls-select-language">Select Language</h1>\
|
||||
<div class="uls-title-region four columns">\
|
||||
<h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\
|
||||
</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 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>\
|
||||
</div>\
|
||||
<div class="nine columns">\
|
||||
@@ -1380,20 +1380,20 @@
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="search" class="row"> \
|
||||
<div id="search" class="row search"> \
|
||||
<div class="one column">\
|
||||
<span class="search-label"></span>\
|
||||
</div>\
|
||||
<div class="ten columns">\
|
||||
<div id="search-input-block">\
|
||||
<input type="text" class="filterinput" id="filtersuggestion" disabled="true"\
|
||||
autocomplete="off" /> <input type="text" class="filterinput" id="languagefilter"\
|
||||
<div id="search-input-block" class="search-input-block">\
|
||||
<input type="text" class="filterinput filtersuggestion" id="filtersuggestion" disabled="true"\
|
||||
autocomplete="off" /> <input type="text" class="filterinput languagefilter" id="languagefilter"\
|
||||
data-clear="languagefilter-clear" data-suggestion="filtersuggestion"\
|
||||
placeholder="Language search" autocomplete="off" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="one column">\
|
||||
<span id="languagefilter-clear"></span>\
|
||||
<span id="languagefilter-clear" class="languagefilter-clear"></span>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row uls-language-list"></div>\
|
||||
@@ -1419,7 +1419,7 @@
|
||||
this.top = this.options.top;
|
||||
this.shown = false;
|
||||
this.initialized = false;
|
||||
this.$languageFilter = this.$menu.find( 'input#languagefilter' );
|
||||
this.$languageFilter = this.$menu.find( '#languagefilter' );
|
||||
this.$regionFilters = this.$menu.find( '.uls-region' );
|
||||
this.$resultsView = this.$menu.find( 'div.uls-language-list' );
|
||||
this.render();
|
||||
|
||||
@@ -50,7 +50,10 @@
|
||||
font-size: 16pt;
|
||||
line-height: 20pt;
|
||||
margin-top: 0;
|
||||
padding-top: 15px;
|
||||
font-weight: normal;
|
||||
border: none;
|
||||
padding: 15px 0 3px 15px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.language-settings-buttons {
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
settingsMenu +
|
||||
settingsPanel +
|
||||
'</div>';
|
||||
windowTemplate = '<div style="display: block;" id="language-settings-dialog" class="uls-menu">'
|
||||
windowTemplate = '<div style="display: block;" id="language-settings-dialog" class="uls-menu uls-wide">'
|
||||
+ closeRow
|
||||
+ panelsRow
|
||||
+ '</div>';
|
||||
|
||||
Reference in New Issue
Block a user