* Do not group search results by region * Replace ULS trigger icon with monochromatic one * Custom no-results message support * Upgrade jquery in the example to 3.2.1 * Use .siblings to locate the suggestions, clear elements for efficiency * Removing assigned ids to elements that are not guaranteed to be unique * Use eslint and stylelint, fix all errors Update the language icon in ext.uls.pt module with new monochromatic one Also use custom style for monobook skin. Bug: T182539 Bug: T175769 Change-Id: I7341064cd0de367d933048c4800f951568747d11
304 lines
5.9 KiB
CSS
304 lines
5.9 KiB
CSS
@media only screen and ( max-width: 767px ) {
|
|
|
|
.uls-mobile.uls-menu {
|
|
width: 95%;
|
|
left: 2.5%;
|
|
}
|
|
|
|
.uls-mobile .uls-language-list {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.uls-mobile .uls-language-block {
|
|
padding-left: 15px !important;
|
|
}
|
|
|
|
.uls-mobile .uls-language-block ul {
|
|
min-height: 14em;
|
|
}
|
|
|
|
.uls-mobile .uls-language-block a {
|
|
font-size: 16px;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
.uls-mobile .row {
|
|
width: auto;
|
|
min-width: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.uls-mobile .column,
|
|
.uls-mobile .columns {
|
|
width: auto !important;
|
|
float: none;
|
|
}
|
|
|
|
.uls-mobile .column:last-child,
|
|
.uls-mobile .columns:last-child {
|
|
float: none;
|
|
}
|
|
|
|
.uls-mobile [ class*='column' ] + [ class*='column' ]:last-child {
|
|
float: none;
|
|
}
|
|
|
|
.uls-mobile .column:before,
|
|
.uls-mobile .uls-mobile .columns:before,
|
|
.uls-mobile .column:after,
|
|
.columns:after {
|
|
content: '';
|
|
display: table;
|
|
}
|
|
|
|
.uls-mobile .column:after,
|
|
.uls-mobile .columns:after {
|
|
clear: both;
|
|
}
|
|
|
|
.uls-mobile .offset-by-one,
|
|
.uls-mobile .offset-by-two,
|
|
.uls-mobile .offset-by-three,
|
|
.uls-mobile .offset-by-four,
|
|
.uls-mobile .offset-by-five,
|
|
.uls-mobile .offset-by-six,
|
|
.uls-mobile .offset-by-seven,
|
|
.uls-mobile .offset-by-eight,
|
|
.uls-mobile .offset-by-nine,
|
|
.uls-mobile .offset-by-ten {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.uls-mobile .push-two,
|
|
.uls-mobile .push-three,
|
|
.uls-mobile .push-four,
|
|
.uls-mobile .push-five,
|
|
.uls-mobile .push-six,
|
|
.uls-mobile .push-seven,
|
|
.uls-mobile .push-eight,
|
|
.uls-mobile .push-nine,
|
|
.uls-mobile .push-ten {
|
|
left: auto;
|
|
}
|
|
|
|
.uls-mobile .pull-two,
|
|
.uls-mobile .pull-three,
|
|
.uls-mobile .pull-four,
|
|
.uls-mobile .pull-five,
|
|
.uls-mobile .pull-six,
|
|
.uls-mobile .pull-seven,
|
|
.uls-mobile .pull-eight,
|
|
.uls-mobile .pull-nine,
|
|
.uls-mobile .pull-ten {
|
|
right: auto;
|
|
}
|
|
|
|
/* Mobile 4-column Grid */
|
|
.uls-mobile .row .mobile-one {
|
|
width: 25% !important;
|
|
float: left;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.uls-mobile .row .mobile-one:last-child {
|
|
float: right;
|
|
}
|
|
|
|
.uls-mobile .row.collapse .mobile-one {
|
|
padding: 0;
|
|
}
|
|
|
|
.uls-mobile .row .mobile-two {
|
|
width: 50% !important;
|
|
float: left;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.uls-mobile .row .mobile-two:last-child {
|
|
float: right;
|
|
}
|
|
|
|
.uls-mobile .row.collapse .mobile-two {
|
|
padding: 0;
|
|
}
|
|
|
|
.uls-mobile .row .mobile-three {
|
|
width: 75% !important;
|
|
float: left;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.uls-mobile .row .mobile-three:last-child {
|
|
float: right;
|
|
}
|
|
|
|
.uls-mobile .row.collapse .mobile-three {
|
|
padding: 0;
|
|
}
|
|
|
|
.uls-mobile .row .mobile-four {
|
|
width: 100% !important;
|
|
float: left;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.uls-mobile .row .mobile-four:last-child {
|
|
float: right;
|
|
}
|
|
|
|
.uls-mobile .row.collapse .mobile-four {
|
|
padding: 0;
|
|
}
|
|
|
|
.uls-mobile .push-one-mobile {
|
|
left: 25%;
|
|
}
|
|
|
|
.uls-mobile .pull-one-mobile {
|
|
right: 25%;
|
|
}
|
|
|
|
.uls-mobile .push-two-mobile {
|
|
left: 50%;
|
|
}
|
|
|
|
.uls-mobile .pull-two-mobile {
|
|
right: 50%;
|
|
}
|
|
|
|
.uls-mobile .push-three-mobile {
|
|
left: 75%;
|
|
}
|
|
|
|
.uls-mobile .pull-three-mobile {
|
|
right: 75%;
|
|
}
|
|
}
|
|
|
|
/* Visibility Classes ---------------------- */
|
|
/* Standard (large) display targeting */
|
|
.uls-mobile .show-for-small,
|
|
.uls-mobile .show-for-medium,
|
|
.uls-mobile .show-for-medium-down,
|
|
.uls-mobile .hide-for-large,
|
|
.uls-mobile .hide-for-large-up,
|
|
.uls-mobile .show-for-xlarge {
|
|
display: none !important;
|
|
}
|
|
|
|
.uls-mobile .hide-for-xlarge,
|
|
.uls-mobile .show-for-large,
|
|
.uls-mobile .show-for-large-up,
|
|
.uls-mobile .hide-for-small,
|
|
.uls-mobile .hide-for-medium,
|
|
.uls-mobile .hide-for-medium-down {
|
|
display: block !important;
|
|
}
|
|
|
|
/* 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,
|
|
.hide-for-large,
|
|
.show-for-large-up,
|
|
.show-for-xlarge {
|
|
display: block !important;
|
|
}
|
|
|
|
.show-for-small,
|
|
.uls-mobile .show-for-medium,
|
|
.uls-mobile .show-for-medium-down,
|
|
.uls-mobile .show-for-large,
|
|
.uls-mobile .hide-for-large-up,
|
|
.uls-mobile .hide-for-xlarge {
|
|
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,
|
|
.uls-mobile .hide-for-large,
|
|
.uls-mobile .hide-for-large-up,
|
|
.uls-mobile .hide-for-xlarge {
|
|
display: block !important;
|
|
}
|
|
|
|
.uls-mobile .show-for-small,
|
|
.uls-mobile .hide-for-medium,
|
|
.uls-mobile .hide-for-medium-down,
|
|
.uls-mobile .show-for-large,
|
|
.uls-mobile .show-for-large-up,
|
|
.uls-mobile .show-for-xlarge {
|
|
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,
|
|
.uls-mobile .hide-for-large,
|
|
.uls-mobile .hide-for-large-up,
|
|
.uls-mobile .hide-for-xlarge {
|
|
display: block !important;
|
|
}
|
|
.uls-mobile .hide-for-small,
|
|
.uls-mobile .show-for-medium,
|
|
.uls-mobile .hide-for-medium-down,
|
|
.uls-mobile .show-for-large,
|
|
.uls-mobile .show-for-large-up,
|
|
.uls-mobile .show-for-xlarge {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Orientation targeting */
|
|
.uls-mobile .show-for-landscape,
|
|
.uls-mobile .hide-for-portrait {
|
|
display: block !important;
|
|
}
|
|
|
|
.uls-mobile .hide-for-landscape,
|
|
.uls-mobile .show-for-portrait {
|
|
display: none !important;
|
|
}
|
|
|
|
@media screen and ( orientation: landscape ) {
|
|
.uls-mobile .show-for-landscape,
|
|
.uls-mobile .hide-for-portrait {
|
|
display: block !important;
|
|
}
|
|
.uls-mobile .hide-for-landscape,
|
|
.uls-mobile .show-for-portrait {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media screen and ( orientation: portrait ) {
|
|
.uls-mobile .show-for-portrait,
|
|
.uls-mobile .hide-for-landscape {
|
|
display: block !important;
|
|
}
|
|
.uls-mobile .hide-for-portrait,
|
|
.uls-mobile .show-for-landscape {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Touch-enabled device targeting */
|
|
.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;
|
|
}
|