_actions.less 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Utilities -> Actions
  7. // _____________________________________________
  8. .action-reset() {
  9. background-color: transparent;
  10. border: none;
  11. border-radius: 0;
  12. box-shadow: none;
  13. margin: 0;
  14. padding: 0;
  15. &:hover {
  16. background-color: transparent;
  17. border: none;
  18. box-shadow: none;
  19. }
  20. }
  21. .action-icon() {
  22. background-color: transparent;
  23. border-color: transparent;
  24. box-shadow: none;
  25. &:hover {
  26. background-color: transparent;
  27. border-color: transparent;
  28. box-shadow: none;
  29. }
  30. }
  31. // Used in action dropdown, actions split & all other actions with triangle marker
  32. .action-toggle-triangle (
  33. @_dropdown__padding-right: 3rem;
  34. @_triangle__height: @button-marker-triangle__height;
  35. @_triangle__width: @button-marker-triangle__width;
  36. @_triangle__color: @color-black;
  37. @_triangle__hover__color: darken(@_triangle__color, 10%);
  38. @_triangle__right: (@_dropdown__padding-right / 2) - (@_triangle__width / 2);
  39. ) {
  40. padding-right: @_dropdown__padding-right;
  41. &._active,
  42. &.active {
  43. &:after {
  44. transform: rotate(180deg);
  45. }
  46. }
  47. &:after {
  48. border-color: @_triangle__color transparent transparent transparent;
  49. border-style: solid;
  50. border-width: @_triangle__height @_triangle__width / 2 0 @_triangle__width / 2;
  51. content: '';
  52. height: 0;
  53. margin-top: -((@_triangle__width / 2) / 2);
  54. position: absolute;
  55. right: @_triangle__right;
  56. top: 50%;
  57. transition: all .2s linear;
  58. width: 0;
  59. ._active &,
  60. .active & {
  61. transform: rotate(180deg);
  62. }
  63. }
  64. &:hover {
  65. &:after {
  66. border-color: @_triangle__hover__color transparent transparent transparent;
  67. }
  68. }
  69. }