_popups.less 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Variables
  7. // _____________________________________________
  8. @popup-marker__size: 7px;
  9. //
  10. // Common
  11. // _____________________________________________
  12. & when (@media-common = true) {
  13. // Popup working with dropdown dialog
  14. .ui-dialog {
  15. &.popup {
  16. .action {
  17. &.close {
  18. .lib-css(bottom, @popup-button-close__position-bottom);
  19. .lib-css(left, @popup-button-close__position-left);
  20. .lib-css(position, @popup-button-close__position);
  21. height: 40px;
  22. right: 0;
  23. top: 0;
  24. width: 40px;
  25. z-index: 1001;
  26. .lib-popup-button-close-icon(
  27. @popup-button-close__icon,
  28. @popup-icon-font__content,
  29. @popup-icon-font,
  30. @popup-icon-font__size,
  31. @popup-icon-font__line-height,
  32. @popup-icon-font__color,
  33. @popup-icon-font__color-hover,
  34. @popup-icon-font__color-active,
  35. @popup-icon-font__margin,
  36. @popup-icon-font__vertical-align,
  37. @popup-icon-font__position,
  38. @popup-icon-font__text-hide
  39. );
  40. ._lib-popup-button-close-reset(
  41. @popup-button-close__reset
  42. );
  43. }
  44. }
  45. }
  46. }
  47. .popup-pointer {
  48. .lib-pointer(
  49. @_size: @popup-marker__size,
  50. @_background-color: @popup__background,
  51. @_border-color: @popup__border-color,
  52. @_position__vertical__value: 2px,
  53. @_position__horizontal__value: 2px
  54. );
  55. margin-left: -@popup-marker__size * 2;
  56. position: absolute;
  57. top: -@popup-marker__size * 2;
  58. }
  59. }
  60. //
  61. // Desktop
  62. // _____________________________________________
  63. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  64. .ui-dialog {
  65. &.popup {
  66. width: 420px;
  67. }
  68. }
  69. }