Window overlay mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_overlay-background
@overlay__background
#000
'' | false | value
Overlay background color
@_overlay-opacity
@overlay__opacity
.5
'' | false | value
Overlay opacity
@_overlay-opacity-old
@overlay__opacity-old
50
'' | false | value
Overlay opacity for old browsers
@_overlay-fade
@overlay__fade
opacity .15s linear
'' | false | value
Overlay fade
@_overlay-z-index
@overlay__z-index
1000
'' | value
Overlay z-index
Margins for header, content and footer block in popup
To set margins to header, content and footer block in popup, use variables:
@_popup-header-margin: value,
@_popup-content-margin: value,
@_popup-footer-margin: value
.window.popup.popup-example-4 {
.lib-popup(
@_popup-header-margin: 0 0 25px,
@_popup-content-margin: 0 0 20px,
@_popup-footer-margin: 0 20px
);
}
Modify overlay styles
To modify overlay styles use the .lib-window-overlay()
mixin
.window.popup.popup-example-9 {
.lib-popup();
}
.window.overlay.example-overlay-1.active {
.lib-window-overlay(
@_overlay-background: #0f5293,
@_overlay-opacity: .8,
@_overlay-opacity-old: 80
);
}
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content</p>
</div>
<div class="popup footer"></div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-1" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title"><span>Popup title</span></strong>
</div>
<div class="popup content">
<p>Popup content</p>
</div>
<div class="popup footer">
<div class="actions toolbar">
<div class="primary">
<button type="submit" class="action submit"><span>Primary Action</span></button>
</div>
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
</div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-2" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content Popup contentPopup content Popup contentPopup content Popup contentPopup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup content</p>
</div>
<div class="popup footer"></div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-3" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup content</p>
</div>
<div class="popup footer"></div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-4" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content</p>
</div>
<div class="popup footer">
<div class="actions toolbar">
<div class="primary">
<button type="submit" class="action submit"><span>Primary Action</span></button>
</div>
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
</div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-5" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content</p>
</div>
<div class="popup footer">
<div class="actions toolbar">
<div class="primary">
<button type="submit" class="action submit"><span>Primary Action</span></button>
</div>
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
</div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-6" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content</p>
</div>
<div class="popup footer">
<div class="actions toolbar">
<div class="primary">
<button type="submit" class="action submit"><span>Primary Action</span></button>
</div>
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
</div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-7" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content</p>
</div>
<div class="popup footer">
<div class="actions toolbar">
<div class="primary">
<button type="submit" class="action submit"><span>Primary Action</span></button>
</div>
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
</div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-8" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content</p>
</div>
<div class="popup footer">
<div class="actions toolbar">
<div class="primary">
<button type="submit" class="action submit"><span>Primary Action</span></button>
</div>
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
</div>
</div>
<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example-9" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
<div class="popup actions">
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
<div class="popup header">
<strong class="title" id="popup-title"><span>Popup title</span></strong>
</div>
<div class="popup content" id="popup-content">
<p>Popup content</p>
</div>
<div class="popup footer">
<div class="actions toolbar">
<div class="primary">
<button type="submit" class="action submit"><span>Primary Action</span></button>
</div>
<div class="secondary">
<button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
</div>
</div>
</div>
</div>
<div class="window overlay example-overlay-1 active"></div>