// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
//
// Popups
// _____________________________________________
.lib-popup(
@_popup-width: @popup__width,
@_popup-height: @popup__height,
@_popup-padding: @popup__padding,
@_popup-background: @popup__background,
@_popup-border: @popup__border,
@_popup-shadow: @popup__shadow,
@_popup-fade: @popup__fade,
@_popup-z-index: @popup__z-index,
@_popup-position: @popup__position,
@_popup-position-top: @popup__position-top,
@_popup-position-right: @popup__position-right,
@_popup-position-bottom: @popup__position-bottom,
@_popup-position-left: @popup__position-left,
@_popup-margin-top: @popup__margin-top,
@_popup-margin-right: @popup__margin-right,
@_popup-margin-bottom: @popup__margin-bottom,
@_popup-margin-left: @popup__margin-left,
@_popup-content-height: @popup-content__height,
@_popup-header-margin: @popup-header__margin,
@_popup-content-margin: @popup-content__margin,
@_popup-footer-margin: @popup-footer__margin,
@_popup-title-headings: @popup-title-headings,
@_popup-title-headings-level: @popup-title-headings__level,
// Icons parameters
@_popup-button-close-icon: @popup-button-close__icon,
@_popup-button-close-reset: @popup-button-close__reset,
@_popup-button-close-position: @popup-button-close__position,
@_popup-button-close-position-top: @popup-button-close__position-top,
@_popup-button-close-position-right: @popup-button-close__position-right,
@_popup-button-close-position-bottom: @popup-button-close__position-bottom,
@_popup-button-close-position-left: @popup-button-close__position-left,
@_popup-icon-font-content: @popup-icon-font__content,
@_popup-icon-font: @popup-icon-font,
@_popup-icon-font-size: @popup-icon-font__size,
@_popup-icon-font-line-height: @popup-icon-font__line-height,
@_popup-icon-font-color: @popup-icon-font__color,
@_popup-icon-font-color-hover: @popup-icon-font__color-hover,
@_popup-icon-font-color-active: @popup-icon-font__color-active,
@_popup-icon-font-margin: @popup-icon-font__margin,
@_popup-icon-font-vertical-align: @popup-icon-font__vertical-align,
@_popup-icon-font-position: @popup-icon-font__position,
@_popup-icon-font-text-hide: @popup-icon-font__text-hide,
// Actions toolbar parameters
@_popup-actions-toolbar: @popup-actions-toolbar,
@_popup-actions-toolbar-actions-position: @popup-actions-toolbar-actions__position,
@_popup-actions-toolbar-actions-reverse: @popup-actions-toolbar-actions__reverse,
@_popup-actions-toolbar-margin: @popup-actions-toolbar__margin,
@_popup-actions-toolbar-padding: @popup-actions-toolbar__padding,
@_popup-actions-toolbar-actions-margin: @popup-actions-toolbar-actions__margin,
@_popup-actions-toolbar-primary-actions-margin: @popup-actions-toolbar-actions-primary__margin,
@_popup-actions-toolbar-secondary-actions-margin: @popup-actions-toolbar-actions-secondary__margin,
@_popup-actions-toolbar-actions-links-margin-top: @popup-actions-toolbar-actions-links__margin-top,
@_popup-actions-toolbar-primary-actions-links-margin-top: @popup-actions-toolbar-actions-links-primary__margin-top,
@_popup-actions-toolbar-secondary-actions-links-margin-top: @popup-actions-toolbar-actions-links-secondary__margin-top
) {
.lib-css(background, @_popup-background);
.lib-css(border, @_popup-border);
.lib-css(padding, @_popup-padding);
.lib-css(width, @_popup-width);
._lib-popup-height(@_popup-height);
._lib-popup-shadow(@_popup-shadow);
._lib-popup-action-toolbar(
@_popup-actions-toolbar,
@_popup-actions-toolbar-actions-position,
@_popup-actions-toolbar-actions-reverse,
@_popup-actions-toolbar-margin,
@_popup-actions-toolbar-padding,
@_popup-actions-toolbar-actions-margin,
@_popup-actions-toolbar-primary-actions-margin,
@_popup-actions-toolbar-secondary-actions-margin,
@_popup-actions-toolbar-actions-links-margin-top,
@_popup-actions-toolbar-primary-actions-links-margin-top,
@_popup-actions-toolbar-secondary-actions-links-margin-top
);
.popup-header {
.lib-css(margin, @_popup-header-margin);
.title {
._lib-popup-headings(
@_popup-title-headings,
@_popup-title-headings-level
);
}
.lib-css(padding-right, @_popup-icon-font-size)
}
.popup-content {
._lib-popup-height(@_popup-content-height);
.lib-css(margin, @_popup-content-margin);
}
.popup-footer {
.lib-css(margin, @_popup-footer-margin);
}
.popup-actions {
.action.close {
.lib-css(position, @_popup-button-close-position);
.lib-popup-button-close-icon(
@_popup-button-close-icon,
@_popup-icon-font-content,
@_popup-icon-font,
@_popup-icon-font-size,
@_popup-icon-font-line-height,
@_popup-icon-font-color,
@_popup-icon-font-color-hover,
@_popup-icon-font-color-active,
@_popup-icon-font-margin,
@_popup-icon-font-vertical-align,
@_popup-icon-font-position,
@_popup-icon-font-text-hide
);
._lib-popup-button-close-reset(
@_popup-button-close-reset
);
.lib-css(bottom, @_popup-button-close-position-bottom);
.lib-css(left, @_popup-button-close-position-left);
.lib-css(right, @_popup-button-close-position-right);
.lib-css(top, @_popup-button-close-position-top);
}
}
._lib-popup-fade(@_popup-fade);
.lib-css(bottom, @_popup-position-bottom);
.lib-css(left, @_popup-position-left);
.lib-css(margin-bottom, @_popup-margin-bottom);
.lib-css(margin-left, @_popup-margin-left);
.lib-css(margin-right, @_popup-margin-right);
.lib-css(margin-top, @_popup-margin-top);
.lib-css(position, @_popup-position);
.lib-css(right, @_popup-position-right);
.lib-css(top, @_popup-position-top);
.lib-css(z-index, @_popup-z-index);
display: none;
opacity: 0;
&.active {
opacity: 1;
}
}
.lib-window-overlay(
@_overlay-background: @overlay__background,
@_overlay-opacity: @overlay__opacity,
@_overlay-opacity-old: @overlay__opacity-old,
@_overlay-fade: @overlay__fade,
@_overlay-z-index: @overlay__z-index
) {
._lib-popup-fade(@_overlay-fade);
.lib-css(background, @_overlay-background);
.lib-css(z-index, @_overlay-z-index);
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
&.active {
.lib-css(opacity, @_overlay-opacity);
& when not (@_overlay-opacity-old = false) {
filter: alpha(opacity=@_overlay-opacity-old);
}
}
}
//
// Internal use mixins
// ---------------------------------------------
// Popup fade
._lib-popup-fade(@_popup-fade) when not (@_popup-fade = '') {
.lib-css(transition, @_popup-fade);
}
// Popup shadow
._lib-popup-shadow(@_popup-shadow) when not (@_popup-shadow = '') and not (@_popup-shadow = none) {
.lib-css(box-shadow, @_popup-shadow);
}
// Popup height
._lib-popup-height(@_popup-height) when not (@_popup-height = auto) {
overflow-y: auto;
.lib-css(max-height, @_popup-height);
}
// Popup Headings
._lib-popup-headings(
@_popup-title-headings,
@_popup-title-headings-level
) when (@_popup-title-headings = true) and (@_popup-title-headings-level = h1) {
.lib-heading(h1);
}
._lib-popup-headings(
@_popup-title-headings,
@_popup-title-headings-level
) when (@_popup-title-headings = true) and (@_popup-title-headings-level = h2) {
.lib-heading(h2);
}
._lib-popup-headings(
@_popup-title-headings,
@_popup-title-headings-level
) when (@_popup-title-headings = true) and (@_popup-title-headings-level = h3) {
.lib-heading(h3);
}
._lib-popup-headings(
@_popup-title-headings,
@_popup-title-headings-level
) when (@_popup-title-headings = true) and (@_popup-title-headings-level = h4) {
.lib-heading(h4);
}
._lib-popup-headings(
@_popup-title-headings,
@_popup-title-headings-level
) when (@_popup-title-headings = true) and (@_popup-title-headings-level = h5) {
.lib-heading(h5);
}
._lib-popup-headings(
@_popup-title-headings,
@_popup-title-headings-level
) when (@_popup-title-headings = true) and (@_popup-title-headings-level = h6) {
.lib-heading(h6);
}
// Popup action-toolbar
._lib-popup-action-toolbar(
@_popup-actions-toolbar,
@_popup-actions-toolbar-actions-position,
@_popup-actions-toolbar-actions-reverse,
@_popup-actions-toolbar-margin,
@_popup-actions-toolbar-padding,
@_popup-actions-toolbar-actions-margin,
@_popup-actions-toolbar-primary-actions-margin,
@_popup-actions-toolbar-secondary-actions-margin,
@_popup-actions-toolbar-actions-links-margin-top,
@_popup-actions-toolbar-primary-actions-links-margin-top,
@_popup-actions-toolbar-secondary-actions-links-margin-top
) when (@_popup-actions-toolbar = true) {
.popup-footer {
.actions.toolbar {
.lib-actions-toolbar(
@_actions-toolbar-actions-position: @_popup-actions-toolbar-actions-position,
@_actions-toolbar-actions-reverse: @_popup-actions-toolbar-actions-reverse,
@_actions-toolbar-margin: @_popup-actions-toolbar-margin,
@_actions-toolbar-padding: @_popup-actions-toolbar-padding,
@_actions-toolbar-actions-margin: @_popup-actions-toolbar-actions-margin,
@_actions-toolbar-primary-actions-margin: @_popup-actions-toolbar-primary-actions-margin,
@_actions-toolbar-secondary-actions-margin: @_popup-actions-toolbar-secondary-actions-margin,
@_actions-toolbar-actions-links-margin-top: @_popup-actions-toolbar-actions-links-margin-top,
@_actions-toolbar-primary-actions-links-margin-top: @_popup-actions-toolbar-primary-actions-links-margin-top,
@_actions-toolbar-secondary-actions-links-margin-top: @_popup-actions-toolbar-secondary-actions-links-margin-top
);
}
}
}
// Popup close button use icon
.lib-popup-button-close-icon(
@_popup-button-close-icon,
@_popup-icon-font-content,
@_popup-icon-font,
@_popup-icon-font-size,
@_popup-icon-font-line-height,
@_popup-icon-font-color,
@_popup-icon-font-color-hover,
@_popup-icon-font-color-active,
@_popup-icon-font-margin,
@_popup-icon-font-vertical-align,
@_popup-icon-font-position,
@_popup-icon-font-text-hide
) when (@_popup-button-close-icon = true) {
.lib-button-icon(
@_icon-font-content: @_popup-icon-font-content,
@_icon-font: @_popup-icon-font,
@_icon-font-size: @_popup-icon-font-size,
@_icon-font-line-height: @_popup-icon-font-line-height,
@_icon-font-color: @_popup-icon-font-color,
@_icon-font-color-hover: @_popup-icon-font-color-hover,
@_icon-font-color-active: @_popup-icon-font-color-active,
@_icon-font-margin: @_popup-icon-font-margin,
@_icon-font-vertical-align: @_popup-icon-font-vertical-align,
@_icon-font-position: @_popup-icon-font-position,
@_icon-font-text-hide: @_popup-icon-font-text-hide
);
}
// Popup close button reset
._lib-popup-button-close-reset (
@_popup-button-close-reset
) when (@_popup-button-close-reset = true) {
.lib-button-reset();
}
|