318 lines
12 KiB
Plaintext
Executable File
318 lines
12 KiB
Plaintext
Executable File
// /**
|
|
// * 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();
|
|
}
|