mediawiki-skins-MinervaNeue/skinStyles/mobile.startup/search/SearchOverlay.less
jdlrobson 7280d255c0 Dev: Prep for storybook
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.

Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-21 12:20:26 -07:00

58 lines
1.2 KiB
Plaintext

@import '../../../minerva.less/minerva.variables.less';
// These styles transform the SearchOverlay appearance in the Minerva skin.
// Since SearchOverlay can be used by other skins, these styles are kept separate from
// the others.
.overlay.search-overlay {
.spinner-container {
top: @headerHeight;
}
.clear {
position: absolute;
// the icon should take into account overlay-title top padding
// and then be centered
top: ( @iconSize / 2 ) + @headerVerticalPadding;
right: 0;
}
}
@media all and ( min-width: @width-breakpoint-tablet ) {
.overlay.search-overlay {
.search-box {
display: table-cell;
}
.spinner-container,
.search-content,
.results {
width: @searchBoxWidth;
margin-left: (@iconSize + 2 * @iconGutterWidth) + @brandingBoxWidth;
}
.overlay-title {
width: @searchBoxWidth;
padding-left: (@iconSize + 2 * @iconGutterWidth) + @brandingBoxWidth;
}
.spinner-container {
left: auto;
right: auto;
}
ul {
width: auto;
}
}
}
@media all and ( min-width: @width-breakpoint-desktop ) {
.overlay.search-overlay {
.overlay-content {
// align with the search form
max-width: @contentMaxWidthTablet + ( 2 * @iconGutterWidth );
}
}
}