mdc.switch.css 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
  7. */
  8. .mdc-elevation-overlay {
  9. position: absolute;
  10. border-radius: inherit;
  11. pointer-events: none;
  12. opacity: 0;
  13. /* @alternate */
  14. opacity: var(--mdc-elevation-overlay-opacity, 0);
  15. transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
  16. background-color: #fff;
  17. /* @alternate */
  18. background-color: var(--mdc-elevation-overlay-color, #fff);
  19. }
  20. .mdc-switch {
  21. align-items: center;
  22. background: none;
  23. border: none;
  24. cursor: pointer;
  25. display: inline-flex;
  26. flex-shrink: 0;
  27. margin: 0;
  28. outline: none;
  29. overflow: visible;
  30. padding: 0;
  31. position: relative;
  32. }
  33. .mdc-switch[hidden] {
  34. display: none;
  35. }
  36. .mdc-switch:disabled {
  37. cursor: default;
  38. pointer-events: none;
  39. }
  40. .mdc-switch__track {
  41. overflow: hidden;
  42. position: relative;
  43. width: 100%;
  44. }
  45. .mdc-switch__track::before, .mdc-switch__track::after {
  46. border: 1px solid transparent;
  47. border-radius: inherit;
  48. box-sizing: border-box;
  49. content: "";
  50. height: 100%;
  51. /* @noflip */
  52. /*rtl:ignore*/
  53. left: 0;
  54. position: absolute;
  55. width: 100%;
  56. }
  57. @media screen and (forced-colors: active) {
  58. .mdc-switch__track::before, .mdc-switch__track::after {
  59. border-color: currentColor;
  60. }
  61. }
  62. .mdc-switch__track::before {
  63. transition: -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  64. transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  65. transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  66. -webkit-transform: translateX(0);
  67. transform: translateX(0);
  68. }
  69. .mdc-switch__track::after {
  70. transition: -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  71. transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  72. transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  73. -webkit-transform: translateX(-100%);
  74. transform: translateX(-100%);
  75. }
  76. [dir=rtl] .mdc-switch__track::after, .mdc-switch__track[dir=rtl]::after {
  77. /*rtl:begin:ignore*/
  78. -webkit-transform: translateX(100%);
  79. transform: translateX(100%);
  80. /*rtl:end:ignore*/
  81. }
  82. .mdc-switch--selected .mdc-switch__track::before {
  83. transition: -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  84. transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  85. transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  86. -webkit-transform: translateX(100%);
  87. transform: translateX(100%);
  88. }
  89. [dir=rtl] .mdc-switch--selected .mdc-switch__track::before, .mdc-switch--selected .mdc-switch__track[dir=rtl]::before {
  90. /*rtl:begin:ignore*/
  91. -webkit-transform: translateX(-100%);
  92. transform: translateX(-100%);
  93. /*rtl:end:ignore*/
  94. }
  95. .mdc-switch--selected .mdc-switch__track::after {
  96. transition: -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  97. transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  98. transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  99. -webkit-transform: translateX(0);
  100. transform: translateX(0);
  101. }
  102. .mdc-switch__handle-track {
  103. height: 100%;
  104. pointer-events: none;
  105. position: absolute;
  106. top: 0;
  107. transition: -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
  108. transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
  109. transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
  110. /* @noflip */
  111. /*rtl:ignore*/
  112. left: 0;
  113. /* @noflip */
  114. /*rtl:ignore*/
  115. right: auto;
  116. -webkit-transform: translateX(0);
  117. transform: translateX(0);
  118. }
  119. [dir=rtl] .mdc-switch__handle-track, .mdc-switch__handle-track[dir=rtl] {
  120. /*rtl:begin:ignore*/
  121. /* @noflip */
  122. /*rtl:ignore*/
  123. left: auto;
  124. /* @noflip */
  125. /*rtl:ignore*/
  126. right: 0;
  127. /*rtl:end:ignore*/
  128. }
  129. .mdc-switch--selected .mdc-switch__handle-track {
  130. -webkit-transform: translateX(100%);
  131. transform: translateX(100%);
  132. }
  133. [dir=rtl] .mdc-switch--selected .mdc-switch__handle-track, .mdc-switch--selected .mdc-switch__handle-track[dir=rtl] {
  134. /*rtl:begin:ignore*/
  135. -webkit-transform: translateX(-100%);
  136. transform: translateX(-100%);
  137. /*rtl:end:ignore*/
  138. }
  139. .mdc-switch__handle {
  140. display: flex;
  141. pointer-events: auto;
  142. position: absolute;
  143. top: 50%;
  144. -webkit-transform: translateY(-50%);
  145. transform: translateY(-50%);
  146. /* @noflip */
  147. /*rtl:ignore*/
  148. left: 0;
  149. /* @noflip */
  150. /*rtl:ignore*/
  151. right: auto;
  152. }
  153. [dir=rtl] .mdc-switch__handle, .mdc-switch__handle[dir=rtl] {
  154. /*rtl:begin:ignore*/
  155. /* @noflip */
  156. /*rtl:ignore*/
  157. left: auto;
  158. /* @noflip */
  159. /*rtl:ignore*/
  160. right: 0;
  161. /*rtl:end:ignore*/
  162. }
  163. .mdc-switch__handle::before, .mdc-switch__handle::after {
  164. border: 1px solid transparent;
  165. border-radius: inherit;
  166. box-sizing: border-box;
  167. content: "";
  168. width: 100%;
  169. height: 100%;
  170. /* @noflip */
  171. /*rtl:ignore*/
  172. left: 0;
  173. position: absolute;
  174. top: 0;
  175. transition: background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
  176. z-index: -1;
  177. }
  178. @media screen and (forced-colors: active) {
  179. .mdc-switch__handle::before, .mdc-switch__handle::after {
  180. border-color: currentColor;
  181. }
  182. }
  183. .mdc-switch__shadow {
  184. border-radius: inherit;
  185. bottom: 0;
  186. /* @noflip */
  187. /*rtl:ignore*/
  188. left: 0;
  189. position: absolute;
  190. /* @noflip */
  191. /*rtl:ignore*/
  192. right: 0;
  193. top: 0;
  194. }
  195. .mdc-elevation-overlay {
  196. bottom: 0;
  197. /* @noflip */
  198. /*rtl:ignore*/
  199. left: 0;
  200. /* @noflip */
  201. /*rtl:ignore*/
  202. right: 0;
  203. top: 0;
  204. }
  205. .mdc-switch__ripple {
  206. /* @noflip */
  207. /*rtl:ignore*/
  208. left: 50%;
  209. position: absolute;
  210. top: 50%;
  211. /* @noflip */
  212. /*rtl:ignore*/
  213. -webkit-transform: translate(-50%, -50%);
  214. transform: translate(-50%, -50%);
  215. z-index: -1;
  216. }
  217. .mdc-switch:disabled .mdc-switch__ripple {
  218. display: none;
  219. }
  220. .mdc-switch__icons {
  221. height: 100%;
  222. position: relative;
  223. width: 100%;
  224. z-index: 1;
  225. }
  226. .mdc-switch__icon {
  227. bottom: 0;
  228. /* @noflip */
  229. /*rtl:ignore*/
  230. left: 0;
  231. margin: auto;
  232. position: absolute;
  233. /* @noflip */
  234. /*rtl:ignore*/
  235. right: 0;
  236. top: 0;
  237. opacity: 0;
  238. transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1);
  239. }
  240. .mdc-switch--selected .mdc-switch__icon--on,
  241. .mdc-switch--unselected .mdc-switch__icon--off {
  242. opacity: 1;
  243. transition: opacity 45ms 30ms cubic-bezier(0, 0, 0.2, 1);
  244. }
  245. .mdc-switch {
  246. --mdc-ripple-fg-size: 0;
  247. --mdc-ripple-left: 0;
  248. --mdc-ripple-top: 0;
  249. --mdc-ripple-fg-scale: 1;
  250. --mdc-ripple-fg-translate-end: 0;
  251. --mdc-ripple-fg-translate-start: 0;
  252. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  253. will-change: transform, opacity;
  254. }
  255. @-webkit-keyframes mdc-ripple-fg-radius-in {
  256. from {
  257. -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  258. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  259. /* @noflip */
  260. /*rtl:ignore*/
  261. -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  262. transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  263. }
  264. to {
  265. /* @noflip */
  266. /*rtl:ignore*/
  267. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  268. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  269. }
  270. }
  271. @keyframes mdc-ripple-fg-radius-in {
  272. from {
  273. -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  274. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  275. /* @noflip */
  276. /*rtl:ignore*/
  277. -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  278. transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  279. }
  280. to {
  281. /* @noflip */
  282. /*rtl:ignore*/
  283. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  284. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  285. }
  286. }
  287. @-webkit-keyframes mdc-ripple-fg-opacity-in {
  288. from {
  289. -webkit-animation-timing-function: linear;
  290. animation-timing-function: linear;
  291. opacity: 0;
  292. }
  293. to {
  294. opacity: var(--mdc-ripple-fg-opacity, 0);
  295. }
  296. }
  297. @keyframes mdc-ripple-fg-opacity-in {
  298. from {
  299. -webkit-animation-timing-function: linear;
  300. animation-timing-function: linear;
  301. opacity: 0;
  302. }
  303. to {
  304. opacity: var(--mdc-ripple-fg-opacity, 0);
  305. }
  306. }
  307. @-webkit-keyframes mdc-ripple-fg-opacity-out {
  308. from {
  309. -webkit-animation-timing-function: linear;
  310. animation-timing-function: linear;
  311. opacity: var(--mdc-ripple-fg-opacity, 0);
  312. }
  313. to {
  314. opacity: 0;
  315. }
  316. }
  317. @keyframes mdc-ripple-fg-opacity-out {
  318. from {
  319. -webkit-animation-timing-function: linear;
  320. animation-timing-function: linear;
  321. opacity: var(--mdc-ripple-fg-opacity, 0);
  322. }
  323. to {
  324. opacity: 0;
  325. }
  326. }
  327. .mdc-switch .mdc-switch__ripple::before,
  328. .mdc-switch .mdc-switch__ripple::after {
  329. position: absolute;
  330. border-radius: 50%;
  331. opacity: 0;
  332. pointer-events: none;
  333. content: "";
  334. }
  335. .mdc-switch .mdc-switch__ripple::before {
  336. transition: opacity 15ms linear, background-color 15ms linear;
  337. z-index: 1;
  338. /* @alternate */
  339. z-index: var(--mdc-ripple-z-index, 1);
  340. }
  341. .mdc-switch .mdc-switch__ripple::after {
  342. z-index: 0;
  343. /* @alternate */
  344. z-index: var(--mdc-ripple-z-index, 0);
  345. }
  346. .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before {
  347. -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
  348. transform: scale(var(--mdc-ripple-fg-scale, 1));
  349. }
  350. .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
  351. top: 0;
  352. /* @noflip */
  353. /*rtl:ignore*/
  354. left: 0;
  355. -webkit-transform: scale(0);
  356. transform: scale(0);
  357. -webkit-transform-origin: center center;
  358. transform-origin: center center;
  359. }
  360. .mdc-switch.mdc-ripple-upgraded--unbounded .mdc-switch__ripple::after {
  361. top: var(--mdc-ripple-top, 0);
  362. /* @noflip */
  363. /*rtl:ignore*/
  364. left: var(--mdc-ripple-left, 0);
  365. }
  366. .mdc-switch.mdc-ripple-upgraded--foreground-activation .mdc-switch__ripple::after {
  367. -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
  368. animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
  369. }
  370. .mdc-switch.mdc-ripple-upgraded--foreground-deactivation .mdc-switch__ripple::after {
  371. -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
  372. animation: mdc-ripple-fg-opacity-out 150ms;
  373. /* @noflip */
  374. /*rtl:ignore*/
  375. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  376. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  377. }
  378. .mdc-switch .mdc-switch__ripple::before,
  379. .mdc-switch .mdc-switch__ripple::after {
  380. top: calc(50% - 50%);
  381. /* @noflip */
  382. /*rtl:ignore*/
  383. left: calc(50% - 50%);
  384. width: 100%;
  385. height: 100%;
  386. }
  387. .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before,
  388. .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
  389. top: var(--mdc-ripple-top, calc(50% - 50%));
  390. /* @noflip */
  391. /*rtl:ignore*/
  392. left: var(--mdc-ripple-left, calc(50% - 50%));
  393. width: var(--mdc-ripple-fg-size, 100%);
  394. height: var(--mdc-ripple-fg-size, 100%);
  395. }
  396. .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
  397. width: var(--mdc-ripple-fg-size, 100%);
  398. height: var(--mdc-ripple-fg-size, 100%);
  399. }
  400. .mdc-switch .mdc-switch__focus-ring-wrapper {
  401. width: 100%;
  402. position: absolute;
  403. top: 50%;
  404. /* @noflip */
  405. /*rtl:ignore*/
  406. left: 50%;
  407. /* @noflip */
  408. /*rtl:ignore*/
  409. -webkit-transform: translate(-50%, -50%);
  410. transform: translate(-50%, -50%);
  411. }
  412. .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring {
  413. pointer-events: none;
  414. border: 2px solid transparent;
  415. border-radius: 6px;
  416. box-sizing: content-box;
  417. position: absolute;
  418. top: 50%;
  419. /* @noflip */
  420. /*rtl:ignore*/
  421. left: 50%;
  422. /* @noflip */
  423. /*rtl:ignore*/
  424. -webkit-transform: translate(-50%, -50%);
  425. transform: translate(-50%, -50%);
  426. height: calc(
  427. 100% + 4px
  428. );
  429. width: calc(
  430. 100% + 4px
  431. );
  432. }
  433. @media screen and (forced-colors: active) {
  434. .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring {
  435. border-color: CanvasText;
  436. }
  437. }
  438. .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring::after, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring::after {
  439. content: "";
  440. border: 2px solid transparent;
  441. border-radius: 8px;
  442. display: block;
  443. position: absolute;
  444. top: 50%;
  445. /* @noflip */
  446. /*rtl:ignore*/
  447. left: 50%;
  448. /* @noflip */
  449. /*rtl:ignore*/
  450. -webkit-transform: translate(-50%, -50%);
  451. transform: translate(-50%, -50%);
  452. height: calc(100% + 4px);
  453. width: calc(100% + 4px);
  454. }
  455. @media screen and (forced-colors: active) {
  456. .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring::after, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring::after {
  457. border-color: CanvasText;
  458. }
  459. }
  460. .mdc-switch {
  461. width: 36px;
  462. /* @alternate */
  463. width: var(--mdc-switch-track-width, 36px);
  464. }
  465. .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
  466. background: #6200ee;
  467. /* @alternate */
  468. background: var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #6200ee));
  469. }
  470. .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {
  471. background: #310077;
  472. /* @alternate */
  473. background: var(--mdc-switch-selected-hover-handle-color, #310077);
  474. }
  475. .mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after {
  476. background: #310077;
  477. /* @alternate */
  478. background: var(--mdc-switch-selected-focus-handle-color, #310077);
  479. }
  480. .mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after {
  481. background: #310077;
  482. /* @alternate */
  483. background: var(--mdc-switch-selected-pressed-handle-color, #310077);
  484. }
  485. .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after {
  486. background: #424242;
  487. /* @alternate */
  488. background: var(--mdc-switch-disabled-selected-handle-color, #424242);
  489. }
  490. .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after {
  491. background: #616161;
  492. /* @alternate */
  493. background: var(--mdc-switch-unselected-handle-color, #616161);
  494. }
  495. .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {
  496. background: #212121;
  497. /* @alternate */
  498. background: var(--mdc-switch-unselected-hover-handle-color, #212121);
  499. }
  500. .mdc-switch.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after {
  501. background: #212121;
  502. /* @alternate */
  503. background: var(--mdc-switch-unselected-focus-handle-color, #212121);
  504. }
  505. .mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__handle::after {
  506. background: #212121;
  507. /* @alternate */
  508. background: var(--mdc-switch-unselected-pressed-handle-color, #212121);
  509. }
  510. .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after {
  511. background: #424242;
  512. /* @alternate */
  513. background: var(--mdc-switch-disabled-unselected-handle-color, #424242);
  514. }
  515. .mdc-switch .mdc-switch__handle::before {
  516. background: #fff;
  517. /* @alternate */
  518. background: var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff));
  519. }
  520. .mdc-switch:enabled .mdc-switch__shadow {
  521. box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  522. /* @alternate */
  523. box-shadow: var(--mdc-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
  524. }
  525. .mdc-switch:disabled .mdc-switch__shadow {
  526. box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  527. /* @alternate */
  528. box-shadow: var(--mdc-switch-disabled-handle-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));
  529. }
  530. .mdc-switch .mdc-switch__focus-ring-wrapper,
  531. .mdc-switch .mdc-switch__handle {
  532. height: 20px;
  533. /* @alternate */
  534. height: var(--mdc-switch-handle-height, 20px);
  535. }
  536. .mdc-switch:disabled .mdc-switch__handle::after {
  537. opacity: 0.38;
  538. /* @alternate */
  539. opacity: var(--mdc-switch-disabled-handle-opacity, 0.38);
  540. }
  541. .mdc-switch .mdc-switch__handle {
  542. border-radius: 10px;
  543. /* @alternate */
  544. border-radius: var(--mdc-switch-handle-shape, 10px);
  545. }
  546. .mdc-switch .mdc-switch__handle {
  547. width: 20px;
  548. /* @alternate */
  549. width: var(--mdc-switch-handle-width, 20px);
  550. }
  551. .mdc-switch .mdc-switch__handle-track {
  552. width: calc(100% - 20px);
  553. /* @alternate */
  554. width: calc(100% - var(--mdc-switch-handle-width, 20px));
  555. }
  556. .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {
  557. fill: #fff;
  558. /* @alternate */
  559. fill: var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff));
  560. }
  561. .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon {
  562. fill: #fff;
  563. /* @alternate */
  564. fill: var(--mdc-switch-disabled-selected-icon-color, var(--mdc-theme-on-primary, #fff));
  565. }
  566. .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon {
  567. fill: #fff;
  568. /* @alternate */
  569. fill: var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff));
  570. }
  571. .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon {
  572. fill: #fff;
  573. /* @alternate */
  574. fill: var(--mdc-switch-disabled-unselected-icon-color, var(--mdc-theme-on-primary, #fff));
  575. }
  576. .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons {
  577. opacity: 0.38;
  578. /* @alternate */
  579. opacity: var(--mdc-switch-disabled-selected-icon-opacity, 0.38);
  580. }
  581. .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons {
  582. opacity: 0.38;
  583. /* @alternate */
  584. opacity: var(--mdc-switch-disabled-unselected-icon-opacity, 0.38);
  585. }
  586. .mdc-switch.mdc-switch--selected .mdc-switch__icon {
  587. width: 18px;
  588. /* @alternate */
  589. width: var(--mdc-switch-selected-icon-size, 18px);
  590. height: 18px;
  591. /* @alternate */
  592. height: var(--mdc-switch-selected-icon-size, 18px);
  593. }
  594. .mdc-switch.mdc-switch--unselected .mdc-switch__icon {
  595. width: 18px;
  596. /* @alternate */
  597. width: var(--mdc-switch-unselected-icon-size, 18px);
  598. height: 18px;
  599. /* @alternate */
  600. height: var(--mdc-switch-unselected-icon-size, 18px);
  601. }
  602. .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before,
  603. .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after {
  604. background-color: #6200ee;
  605. /* @alternate */
  606. background-color: var(--mdc-switch-selected-hover-state-layer-color, var(--mdc-theme-primary, #6200ee));
  607. }
  608. .mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before,
  609. .mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after {
  610. background-color: #6200ee;
  611. /* @alternate */
  612. background-color: var(--mdc-switch-selected-focus-state-layer-color, var(--mdc-theme-primary, #6200ee));
  613. }
  614. .mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before,
  615. .mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after {
  616. background-color: #6200ee;
  617. /* @alternate */
  618. background-color: var(--mdc-switch-selected-pressed-state-layer-color, var(--mdc-theme-primary, #6200ee));
  619. }
  620. .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::before,
  621. .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after {
  622. background-color: #424242;
  623. /* @alternate */
  624. background-color: var(--mdc-switch-unselected-hover-state-layer-color, #424242);
  625. }
  626. .mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::before,
  627. .mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after {
  628. background-color: #424242;
  629. /* @alternate */
  630. background-color: var(--mdc-switch-unselected-focus-state-layer-color, #424242);
  631. }
  632. .mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::before,
  633. .mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after {
  634. background-color: #424242;
  635. /* @alternate */
  636. background-color: var(--mdc-switch-unselected-pressed-state-layer-color, #424242);
  637. }
  638. .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before, .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before {
  639. opacity: 0.04;
  640. /* @alternate */
  641. opacity: var(--mdc-switch-selected-hover-state-layer-opacity, 0.04);
  642. }
  643. .mdc-switch.mdc-switch--selected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before, .mdc-switch.mdc-switch--selected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before {
  644. transition-duration: 75ms;
  645. opacity: 0.12;
  646. /* @alternate */
  647. opacity: var(--mdc-switch-selected-focus-state-layer-opacity, 0.12);
  648. }
  649. .mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after {
  650. transition: opacity 150ms linear;
  651. }
  652. .mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after {
  653. transition-duration: 75ms;
  654. opacity: 0.1;
  655. /* @alternate */
  656. opacity: var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1);
  657. }
  658. .mdc-switch.mdc-switch--selected:enabled:active.mdc-ripple-upgraded {
  659. --mdc-ripple-fg-opacity: var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1);
  660. }
  661. .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before, .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before {
  662. opacity: 0.04;
  663. /* @alternate */
  664. opacity: var(--mdc-switch-unselected-hover-state-layer-opacity, 0.04);
  665. }
  666. .mdc-switch.mdc-switch--unselected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before, .mdc-switch.mdc-switch--unselected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before {
  667. transition-duration: 75ms;
  668. opacity: 0.12;
  669. /* @alternate */
  670. opacity: var(--mdc-switch-unselected-focus-state-layer-opacity, 0.12);
  671. }
  672. .mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after {
  673. transition: opacity 150ms linear;
  674. }
  675. .mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after {
  676. transition-duration: 75ms;
  677. opacity: 0.1;
  678. /* @alternate */
  679. opacity: var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1);
  680. }
  681. .mdc-switch.mdc-switch--unselected:enabled:active.mdc-ripple-upgraded {
  682. --mdc-ripple-fg-opacity: var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1);
  683. }
  684. .mdc-switch .mdc-switch__ripple {
  685. height: 48px;
  686. /* @alternate */
  687. height: var(--mdc-switch-state-layer-size, 48px);
  688. width: 48px;
  689. /* @alternate */
  690. width: var(--mdc-switch-state-layer-size, 48px);
  691. }
  692. .mdc-switch .mdc-switch__track {
  693. height: 14px;
  694. /* @alternate */
  695. height: var(--mdc-switch-track-height, 14px);
  696. }
  697. .mdc-switch:disabled .mdc-switch__track {
  698. opacity: 0.12;
  699. /* @alternate */
  700. opacity: var(--mdc-switch-disabled-track-opacity, 0.12);
  701. }
  702. .mdc-switch:enabled .mdc-switch__track::after {
  703. background: #d7bbff;
  704. /* @alternate */
  705. background: var(--mdc-switch-selected-track-color, #d7bbff);
  706. }
  707. .mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after {
  708. background: #d7bbff;
  709. /* @alternate */
  710. background: var(--mdc-switch-selected-hover-track-color, #d7bbff);
  711. }
  712. .mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after {
  713. background: #d7bbff;
  714. /* @alternate */
  715. background: var(--mdc-switch-selected-focus-track-color, #d7bbff);
  716. }
  717. .mdc-switch:enabled:active .mdc-switch__track::after {
  718. background: #d7bbff;
  719. /* @alternate */
  720. background: var(--mdc-switch-selected-pressed-track-color, #d7bbff);
  721. }
  722. .mdc-switch:disabled .mdc-switch__track::after {
  723. background: #424242;
  724. /* @alternate */
  725. background: var(--mdc-switch-disabled-selected-track-color, #424242);
  726. }
  727. .mdc-switch:enabled .mdc-switch__track::before {
  728. background: #e0e0e0;
  729. /* @alternate */
  730. background: var(--mdc-switch-unselected-track-color, #e0e0e0);
  731. }
  732. .mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before {
  733. background: #e0e0e0;
  734. /* @alternate */
  735. background: var(--mdc-switch-unselected-hover-track-color, #e0e0e0);
  736. }
  737. .mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before {
  738. background: #e0e0e0;
  739. /* @alternate */
  740. background: var(--mdc-switch-unselected-focus-track-color, #e0e0e0);
  741. }
  742. .mdc-switch:enabled:active .mdc-switch__track::before {
  743. background: #e0e0e0;
  744. /* @alternate */
  745. background: var(--mdc-switch-unselected-pressed-track-color, #e0e0e0);
  746. }
  747. .mdc-switch:disabled .mdc-switch__track::before {
  748. background: #424242;
  749. /* @alternate */
  750. background: var(--mdc-switch-disabled-unselected-track-color, #424242);
  751. }
  752. .mdc-switch .mdc-switch__track {
  753. border-radius: 7px;
  754. /* @alternate */
  755. border-radius: var(--mdc-switch-track-shape, 7px);
  756. }
  757. @media screen and (forced-colors: active), (-ms-high-contrast: active) {
  758. .mdc-switch:disabled .mdc-switch__handle::after {
  759. opacity: 1;
  760. /* @alternate */
  761. opacity: var(--mdc-switch-disabled-handle-opacity, 1);
  762. }
  763. .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {
  764. fill: ButtonText;
  765. /* @alternate */
  766. fill: var(--mdc-switch-selected-icon-color, ButtonText);
  767. }
  768. .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon {
  769. fill: GrayText;
  770. /* @alternate */
  771. fill: var(--mdc-switch-disabled-selected-icon-color, GrayText);
  772. }
  773. .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon {
  774. fill: ButtonText;
  775. /* @alternate */
  776. fill: var(--mdc-switch-unselected-icon-color, ButtonText);
  777. }
  778. .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon {
  779. fill: GrayText;
  780. /* @alternate */
  781. fill: var(--mdc-switch-disabled-unselected-icon-color, GrayText);
  782. }
  783. .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons {
  784. opacity: 1;
  785. /* @alternate */
  786. opacity: var(--mdc-switch-disabled-selected-icon-opacity, 1);
  787. }
  788. .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons {
  789. opacity: 1;
  790. /* @alternate */
  791. opacity: var(--mdc-switch-disabled-unselected-icon-opacity, 1);
  792. }
  793. .mdc-switch:disabled .mdc-switch__track {
  794. opacity: 1;
  795. /* @alternate */
  796. opacity: var(--mdc-switch-disabled-track-opacity, 1);
  797. }
  798. }
  799. /*# sourceMappingURL=mdc.switch.css.map*/