_actions-multicheck.less 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Actions -> Actions multicheck
  7. // _____________________________________________
  8. // Action multicheck is a combining of checkbox and dropdown elements
  9. .action-multicheck-wrap {
  10. &:extend(.abs-clearfix all);
  11. display: inline-block;
  12. height: @control-checkbox-radio__size;
  13. padding-top: 1px;
  14. position: relative;
  15. width: @control-checkbox-radio__size * 2 - .1rem;
  16. z-index: @action-multicheck__z-index;
  17. &:hover {
  18. .admin__control-checkbox + label:before,
  19. .action-multicheck-toggle {
  20. border-color: @field-control__hover__border-color;
  21. }
  22. }
  23. &._active {
  24. .admin__control-checkbox + label:before,
  25. .action-multicheck-toggle {
  26. border-color: @action__active__border-color;
  27. }
  28. .action-menu {
  29. .appearing__on();
  30. display: block;
  31. }
  32. }
  33. &._disabled {
  34. .admin__control-checkbox {
  35. + label {
  36. &:before {
  37. background-color: @control-checkbox-radio__background-color;
  38. }
  39. }
  40. }
  41. .admin__control-checkbox + label:before,
  42. .action-multicheck-toggle {
  43. border-color: @field-control__border-color;
  44. opacity: 1;
  45. }
  46. }
  47. .admin__control-checkbox,
  48. .admin__control-checkbox + label,
  49. .action-multicheck-toggle {
  50. float: left;
  51. }
  52. .action-multicheck-toggle {
  53. .action-toggle-triangle(
  54. @_triangle__height: @button-marker-triangle__height;
  55. @_triangle__width: @button-marker-triangle__width;
  56. );
  57. border-radius: 0 1px 1px 0;
  58. height: @control-checkbox-radio__size;
  59. margin-left: -1px;
  60. padding: 0;
  61. position: relative;
  62. transition: @smooth__border-color;
  63. width: @control-checkbox-radio__size;
  64. &:focus {
  65. border-color: @action__active__border-color;
  66. }
  67. &:after {
  68. right: .3rem;
  69. }
  70. > span {
  71. &:extend(.abs-visually-hidden all);
  72. }
  73. }
  74. .action-menu {
  75. left: -(@data-grid-cell__padding-horizontal + @data-grid-cell__border-width);
  76. margin-top: 1px;
  77. right: auto;
  78. text-align: left;
  79. }
  80. .action-menu-item {
  81. white-space: nowrap;
  82. }
  83. }