_actions-switcher.less 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Yes/no switcher
  7. // _____________________________________________
  8. //
  9. // Variables
  10. // _____________________________________________
  11. @actions-switcher-speed: .2s;
  12. @actions-switcher__background-color: @color-gray89;
  13. @actions-switcher__border-radius: 12px;
  14. @actions-switcher__border: 1px solid @color-gray65-lighten;
  15. @actions-switcher__height: 22px;
  16. @actions-switcher__width: 37px;
  17. @actions-switcher-control__background-color: @color-white;
  18. @actions-switcher-handler__background-color: @color-white;
  19. @actions-switcher-handler__height: @actions-switcher__height;
  20. @actions-switcher-handler__width: @actions-switcher__height;
  21. //
  22. .admin__actions-switch {
  23. display: inline-block;
  24. position: relative;
  25. vertical-align: middle;
  26. .admin__field-control & {
  27. line-height: @action__height;
  28. }
  29. + .admin__field-service {
  30. min-width: @field-size__m;
  31. }
  32. }
  33. .admin__actions-switch-checkbox {
  34. &:extend(.abs-visually-hidden all);
  35. ._disabled &,
  36. &.disabled {
  37. + .admin__actions-switch-label {
  38. cursor: not-allowed;
  39. opacity: @disabled__opacity;
  40. pointer-events: none;
  41. }
  42. }
  43. &:checked {
  44. + .admin__actions-switch-label {
  45. &:before {
  46. left: (@actions-switcher__width - @actions-switcher-handler__width);
  47. }
  48. &:after {
  49. background: @color-green-apple;
  50. }
  51. .admin__actions-switch-text {
  52. &:before {
  53. content: attr(data-text-on);
  54. }
  55. }
  56. }
  57. }
  58. &:focus {
  59. + .admin__actions-switch-label {
  60. &:before,
  61. &:after {
  62. border-color: @field-control__focus__border-color;
  63. }
  64. }
  65. }
  66. ._error & {
  67. + .admin__actions-switch-label {
  68. &:before,
  69. &:after {
  70. border-color: @field-error-control__border-color;
  71. }
  72. }
  73. }
  74. }
  75. .admin__actions-switch-label {
  76. -moz-user-select: none;
  77. -ms-user-select: none;
  78. -webkit-user-select: none;
  79. cursor: pointer;
  80. display: inline-block;
  81. height: @actions-switcher__height;
  82. line-height: @actions-switcher__height;
  83. position: relative;
  84. user-select: none;
  85. vertical-align: middle;
  86. &:before,
  87. &:after {
  88. left: 0;
  89. position: absolute;
  90. right: auto;
  91. top: 0;
  92. }
  93. &:before {
  94. background: @actions-switcher-handler__background-color;
  95. border: @actions-switcher__border;
  96. border-radius: 100%;
  97. content: '';
  98. display: block;
  99. height: @actions-switcher-handler__height;
  100. transition: left @actions-switcher-speed ease-in 0s;
  101. width: @actions-switcher-handler__width;
  102. z-index: 1;
  103. }
  104. &:after {
  105. background: @actions-switcher__background-color;
  106. border: @actions-switcher__border;
  107. border-radius: @actions-switcher__border-radius;
  108. content: '';
  109. display: block;
  110. height: @actions-switcher__height;
  111. transition: background @actions-switcher-speed ease-in 0s;
  112. width: @actions-switcher__width;
  113. z-index: 0;
  114. }
  115. }
  116. .admin__actions-switch-text {
  117. &:before {
  118. content: attr(data-text-off);
  119. padding-left: (@actions-switcher__width + 10);
  120. white-space: nowrap;
  121. }
  122. }