%PDF- %PDF-
| Direktori : /www/varak.net/wiki.varak.net/extensions/MobileFrontend/resources/mobile.startup/ |
| Current File : //www/varak.net/wiki.varak.net/extensions/MobileFrontend/resources/mobile.startup/drawer.less |
@import '../../mobile.less/mobile.variables';
@import 'mediawiki.mixins';
// Drawers
//
// Drawers appear at the bottom of the page and contain CTAs
// Drawers are hidden when overlays are opened.
//
// Styleguide 4.
// Basic drawer styling
//
// The close button should appear at the top of the drawer.
// The visible class needs to be present for the drawer to show.
//
// Markup:
// <div class="drawer visible">
// <a class='cancel icon'>close</a>
// <p>hello</p>
// </div>
//
// Styleguide 4.1.
.drawer {
text-align: center;
padding-top: 0;
padding-bottom: 1em;
max-width: 500px;
margin: 0 auto;
&.text {
line-height: 1;
font-size: 0.9em;
text-align: left;
padding-top: 0.5em;
}
p {
line-height: 1.4;
margin-top: 0.5em;
}
p,
a:not( :last-child ),
.mw-ui-button {
margin-bottom: 1em;
}
.cancel {
display: block;
margin: 0.5em auto 0.625em auto;
}
}
// Darken the content to highlight the drawer.
.has-drawer {
background-color: @colorGray1;
> *:not( .drawer ) {
opacity: 1;
.transition( opacity .25s linear );
}
&.drawer-visible > *:not( .drawer ) {
opacity: 0.6;
}
}
// When overlays are opened drawers do not look good
.overlay-enabled {
.drawer {
// !important to override rules set by animations
display: none !important;
}
}