_actions-select.less 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Actions -> Action select
  7. // _____________________________________________
  8. // Action select have the same visual styles and functionality as native <select>
  9. .action-select-wrap {
  10. @_action-select__border-color: @button__border-color;
  11. @_action-select__active__border-color: @action__active__border-color;
  12. @_action-select-toggle__size: @action__height;
  13. display: inline-block;
  14. position: relative;
  15. .action-select {
  16. .action-toggle-triangle(
  17. @_dropdown__padding-right: @_action-select-toggle__size;
  18. @_triangle__height: @button-marker-triangle__height;
  19. @_triangle__width: @button-marker-triangle__width;
  20. );
  21. .lib-text-overflow-ellipsis();
  22. background-color: @color-white;
  23. font-weight: @font-weight__regular;
  24. text-align: left;
  25. &:hover {
  26. border-color: @field-control__hover__border-color;
  27. &:before {
  28. border-color: @field-control__hover__border-color;
  29. }
  30. }
  31. // Toggle action
  32. &:before {
  33. background-color: @button__background-color;
  34. border: @button__border-size @button__border-style @_action-select__border-color;
  35. bottom: 0;
  36. content: '';
  37. position: absolute;
  38. right: 0;
  39. top: 0;
  40. width: @_action-select-toggle__size;
  41. }
  42. &._active {
  43. border-color: @_action-select__active__border-color;
  44. &:before {
  45. border-color: @_action-select__active__border-color;
  46. border-left-color: @_action-select__border-color;
  47. }
  48. }
  49. &[disabled] {
  50. color: @action-select__disabled__color;
  51. &:after {
  52. border-color: @action-select__disabled__color transparent transparent transparent;
  53. }
  54. }
  55. }
  56. &._active {
  57. z-index: @action-select__z-index;
  58. .action-select {
  59. border-color: @field-control__active__border-color;
  60. &:before {
  61. border-color: @field-control__active__border-color;
  62. }
  63. &:after {
  64. transform: rotate(180deg);
  65. }
  66. }
  67. }
  68. .action-menu {
  69. max-height: 45rem;
  70. overflow-y: auto;
  71. ._disabled {
  72. &:hover {
  73. background: @color-white;
  74. }
  75. .action-menu-item {
  76. cursor: default;
  77. opacity: .5;
  78. }
  79. }
  80. }
  81. .action-menu-items {
  82. left: 0;
  83. position: absolute;
  84. right: 0;
  85. top: 100%;
  86. > .action-menu {
  87. min-width: 100%;
  88. position: static;
  89. ._parent._visible {
  90. position: relative;
  91. }
  92. .action-submenu {
  93. position: absolute;
  94. }
  95. }
  96. }
  97. }