%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; } }