1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
// /**
// * 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;
}
}