6c84980453
Removing redundancy by stripping out default values or using shorthands where applicable. Also increasing color contrast to conform to WCAG level AA.
133 lines
2.8 KiB
CSS
133 lines
2.8 KiB
CSS
.uls-trigger {
|
|
/* @embed */
|
|
background: url('../images/icon-language.png') no-repeat left center;
|
|
/* @embed */
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/icon-language.svg');
|
|
/* @embed */
|
|
background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg');
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.uls-menu {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
display: none;
|
|
margin-top: 1px;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
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);
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.uls-wide {
|
|
min-width: 715px;
|
|
width: 45%;
|
|
}
|
|
|
|
.uls-medium {
|
|
min-width: 360px;
|
|
width: 30%;
|
|
}
|
|
|
|
/* Override the grid */
|
|
.uls-medium.grid .row {
|
|
min-width: 300px;
|
|
}
|
|
|
|
.uls-narrow {
|
|
min-width: 180px;
|
|
width: 20%;
|
|
}
|
|
|
|
/* Override the grid */
|
|
.uls-narrow.grid .row {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.uls-search {
|
|
background-color: #fff;
|
|
padding: 5px 16px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.grid .uls-search {
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Make space for magnifying class on the front */
|
|
.uls-search-wrapper {
|
|
position: relative;
|
|
padding-left: 44px;
|
|
margin-right: 5px;
|
|
height: 32px;
|
|
}
|
|
|
|
.uls-search-label {
|
|
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;
|
|
height: 32px;
|
|
width: 44px;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.uls-search-input-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
/* There are two input boxes. This class applies to both of them */
|
|
.uls-filterinput {
|
|
font-size: 16px;
|
|
height: 32px;
|
|
width: 100%;
|
|
/* For the custom clear (X) icon */
|
|
padding: 6px 25px 6px 0;
|
|
outline: none;
|
|
border: 0;
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/* This is the actual input */
|
|
.uls-languagefilter {
|
|
background-color: transparent;
|
|
border: 0;
|
|
color: #222;
|
|
}
|
|
|
|
/* This is the shadow input box showing completion suggestions */
|
|
.uls-filtersuggestion {
|
|
background-color: #fff;
|
|
color: #777;
|
|
}
|
|
|
|
.uls-languagefilter-clear {
|
|
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');
|
|
background-size: 15px;
|
|
cursor: pointer;
|
|
height: 15px;
|
|
width: 15px;
|
|
|
|
/* Vertical margins: (32 - 15) / 2 */
|
|
margin: 8.5px 5px;
|
|
position: absolute;
|
|
right: 0;
|
|
/* Make it appear above the input boxes */
|
|
z-index: 1;
|
|
}
|