_actions-split.less 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Actions -> Actions split
  7. // _____________________________________________
  8. // Actions split is a button aggregator with dropdown element
  9. //
  10. // Extends
  11. // ---------------------------------------------
  12. .abs-actions-split-xl {
  13. @_dropdown__padding-right: 4rem;
  14. @_action-toggle__width: @_dropdown__padding-right;
  15. @_triangle__height: @button-marker-triangle__height__xl;
  16. @_triangle__right: (@_dropdown__padding-right / 2) - (@_triangle__width / 2);
  17. @_triangle__width: @button-marker-triangle__width__xl;
  18. .action-default {
  19. margin-right: @_action-toggle__width;
  20. }
  21. .action-toggle {
  22. padding-right: @_dropdown__padding-right;
  23. &:after {
  24. border-width: @_triangle__height @_triangle__width / 2 0 @_triangle__width / 2;
  25. margin-top: -((@_triangle__width / 2) / 2);
  26. right: @_triangle__right;
  27. }
  28. }
  29. }
  30. // Double button action
  31. .actions-split {
  32. @_action-split__min-width: @_action-toggle__width + @_action-default__min-width;
  33. @_action-default__min-width: 9.3rem;
  34. @_action-toggle__width: @action__height;
  35. &:extend(.abs-clearfix all);
  36. position: relative;
  37. z-index: @actions-split__z-index;
  38. &.active,
  39. &._active,
  40. &:hover {
  41. box-shadow: @button__hover__box-shadow;
  42. }
  43. &.active,
  44. &._active {
  45. .action-toggle {
  46. &.action-primary,
  47. &.primary {
  48. background-color: @button-primary__hover__background-color;
  49. border-color: @button-primary__hover__background-color;
  50. }
  51. }
  52. .dropdown-menu {
  53. .appearing__on();
  54. display: block;
  55. }
  56. }
  57. .action-toggle,
  58. .action-default {
  59. float: left;
  60. margin: 0;
  61. &.active,
  62. &._active,
  63. &:hover {
  64. box-shadow: none;
  65. }
  66. }
  67. .action-default {
  68. margin-right: @_action-toggle__width;
  69. min-width: @_action-default__min-width;
  70. }
  71. .action-toggle {
  72. .action-toggle-triangle(
  73. @_dropdown__padding-right: @_action-toggle__width;
  74. @_triangle__height: @button-marker-triangle__height;
  75. @_triangle__width: @button-marker-triangle__width;
  76. );
  77. border-left-color: rgba(0, 0, 0, .2);
  78. bottom: 0;
  79. padding-left: 0;
  80. position: absolute;
  81. right: 0;
  82. top: 0;
  83. // Disable triangle rotation
  84. // &._active,
  85. // &.active {
  86. // &:after {
  87. // transform: none;
  88. // }
  89. // }
  90. &.action-secondary,
  91. &.secondary,
  92. &.action-primary,
  93. &.primary {
  94. &:after {
  95. border-color: @color-white transparent transparent transparent;
  96. }
  97. }
  98. > span {
  99. .hidden();
  100. }
  101. }
  102. .dropdown-menu,
  103. .action-menu {
  104. &:extend(.abs-action-menu all);
  105. }
  106. }