123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- // /**
- // * Copyright © Magento, Inc. All rights reserved.
- // * See COPYING.txt for license details.
- // */
- //
- // Yes/no switcher
- // _____________________________________________
- //
- // Variables
- // _____________________________________________
- @actions-switcher-speed: .2s;
- @actions-switcher__background-color: @color-gray89;
- @actions-switcher__border-radius: 12px;
- @actions-switcher__border: 1px solid @color-gray65-lighten;
- @actions-switcher__height: 22px;
- @actions-switcher__width: 37px;
- @actions-switcher-control__background-color: @color-white;
- @actions-switcher-handler__background-color: @color-white;
- @actions-switcher-handler__height: @actions-switcher__height;
- @actions-switcher-handler__width: @actions-switcher__height;
- //
- .admin__actions-switch {
- display: inline-block;
- position: relative;
- vertical-align: middle;
- .admin__field-control & {
- line-height: @action__height;
- }
- + .admin__field-service {
- min-width: @field-size__m;
- }
- }
- .admin__actions-switch-checkbox {
- &:extend(.abs-visually-hidden all);
- ._disabled &,
- &.disabled {
- + .admin__actions-switch-label {
- cursor: not-allowed;
- opacity: @disabled__opacity;
- pointer-events: none;
- }
- }
- &:checked {
- + .admin__actions-switch-label {
- &:before {
- left: (@actions-switcher__width - @actions-switcher-handler__width);
- }
- &:after {
- background: @color-green-apple;
- }
- .admin__actions-switch-text {
- &:before {
- content: attr(data-text-on);
- }
- }
- }
- }
- &:focus {
- + .admin__actions-switch-label {
- &:before,
- &:after {
- border-color: @field-control__focus__border-color;
- }
- }
- }
- ._error & {
- + .admin__actions-switch-label {
- &:before,
- &:after {
- border-color: @field-error-control__border-color;
- }
- }
- }
- }
- .admin__actions-switch-label {
- -moz-user-select: none;
- -ms-user-select: none;
- -webkit-user-select: none;
- cursor: pointer;
- display: inline-block;
- height: @actions-switcher__height;
- line-height: @actions-switcher__height;
- position: relative;
- user-select: none;
- vertical-align: middle;
- &:before,
- &:after {
- left: 0;
- position: absolute;
- right: auto;
- top: 0;
- }
- &:before {
- background: @actions-switcher-handler__background-color;
- border: @actions-switcher__border;
- border-radius: 100%;
- content: '';
- display: block;
- height: @actions-switcher-handler__height;
- transition: left @actions-switcher-speed ease-in 0s;
- width: @actions-switcher-handler__width;
- z-index: 1;
- }
- &:after {
- background: @actions-switcher__background-color;
- border: @actions-switcher__border;
- border-radius: @actions-switcher__border-radius;
- content: '';
- display: block;
- height: @actions-switcher__height;
- transition: background @actions-switcher-speed ease-in 0s;
- width: @actions-switcher__width;
- z-index: 0;
- }
- }
- .admin__actions-switch-text {
- &:before {
- content: attr(data-text-off);
- padding-left: (@actions-switcher__width + 10);
- white-space: nowrap;
- }
- }
|