| @@ -1,82 +1 @@ | ||
| 1 | - | |
| 2 | - | |
| 3 | -.ablocks-block--toggle-child { | |
| 4 | - display: none; | |
| 5 | -} | |
| 6 | -.ablocks-toggle__child { | |
| 7 | - display: none; | |
| 8 | -} | |
| 9 | -.ablocks-toggle__child--editor .ablocks-block--toggle-child { | |
| 10 | - display: block; | |
| 11 | -} | |
| 12 | -.ablocks-toggle__child--active { | |
| 13 | - display: block; | |
| 14 | -} | |
| 15 | -.ablocks-block--toggle-child--active{ | |
| 16 | - display: block; | |
| 17 | -} | |
| 18 | - | |
| 19 | -.ablocks-toggle__topbar-wrapper { | |
| 20 | - display: inline-flex; | |
| 21 | - flex-wrap: wrap; | |
| 22 | - align-items: center; | |
| 23 | - margin: 10px 0; | |
| 24 | - column-gap: 15px; | |
| 25 | -} | |
| 26 | -.ablocks-toggle__topbar-wrapper .ablocks-toggle__label { | |
| 27 | - font-weight: 500; | |
| 28 | -} | |
| 29 | - | |
| 30 | -.ablocks-toggle__switch { | |
| 31 | - position: relative; | |
| 32 | - display: inline-block; | |
| 33 | - width: var(--ablocks-toggle-switch-width); | |
| 34 | - height: var(--ablocks-toggle-switch-height); | |
| 35 | - --ablocks-toggle-switch-ball-size: calc(var(--ablocks-toggle-switch-height) - 6px) | |
| 36 | -} | |
| 37 | - | |
| 38 | -.ablocks-toggle__switch input { | |
| 39 | - opacity: 0; | |
| 40 | - width: 0; | |
| 41 | - height: 0; | |
| 42 | -} | |
| 43 | - | |
| 44 | -.ablocks-toggle__slider { | |
| 45 | - position: absolute; | |
| 46 | - cursor: pointer; | |
| 47 | - top: 0; | |
| 48 | - left: 0; | |
| 49 | - right: 0; | |
| 50 | - bottom: 0; | |
| 51 | - -webkit-transition: .4s; | |
| 52 | - transition: .4s; | |
| 53 | -} | |
| 54 | - | |
| 55 | -.ablocks-toggle__slider:before { | |
| 56 | - position: absolute; | |
| 57 | - content: ""; | |
| 58 | - height: var(--ablocks-toggle-switch-ball-size); | |
| 59 | - width: var(--ablocks-toggle-switch-ball-size); | |
| 60 | - left: 4px; | |
| 61 | - bottom: 4px; | |
| 62 | - top: 3px; | |
| 63 | - -webkit-transition: .4s; | |
| 64 | - transition: .4s; | |
| 65 | -} | |
| 66 | - | |
| 67 | - | |
| 68 | - | |
| 69 | -input.ablocks-toggle__checkbox:checked + .ablocks-toggle__slider:before { | |
| 70 | - -webkit-transform: translateX( calc(var(--ablocks-toggle-switch-width) - calc(var(--ablocks-toggle-switch-ball-size) + 8px)) ); | |
| 71 | - -ms-transform: translateX( calc(var(--ablocks-toggle-switch-width) - calc(var(--ablocks-toggle-switch-ball-size) + 8px)) ); | |
| 72 | - transform: translateX( calc(var(--ablocks-toggle-switch-width) - calc(var(--ablocks-toggle-switch-ball-size) + 8px)) ); | |
| 73 | -} | |
| 74 | - | |
| 75 | -/* Rounded sliders */ | |
| 76 | -.ablocks-toggle__slider--round { | |
| 77 | - border-radius: 340px; | |
| 78 | -} | |
| 79 | - | |
| 80 | -.ablocks-toggle__slider--round:before { | |
| 81 | - border-radius: 50%; | |
| 82 | -} | |
| 1 | +.ablocks-block--toggle-child,.ablocks-toggle__child{display:none}.ablocks-block--toggle-child--active,.ablocks-toggle__child--active,.ablocks-toggle__child--editor .ablocks-block--toggle-child{display:block}.ablocks-toggle__topbar-wrapper{align-items:center;column-gap:15px;display:inline-flex;flex-wrap:wrap;margin:10px 0}.ablocks-toggle__topbar-wrapper .ablocks-toggle__label{font-weight:500}.ablocks-toggle__switch{display:inline-block;height:var(--ablocks-toggle-switch-height);position:relative;width:var(--ablocks-toggle-switch-width);--ablocks-toggle-switch-ball-size:calc(var(--ablocks-toggle-switch-height) - 6px)}.ablocks-toggle__switch input{height:0;opacity:0;width:0}.ablocks-toggle__slider{bottom:0;cursor:pointer;left:0;right:0;top:0}.ablocks-toggle__slider,.ablocks-toggle__slider:before{position:absolute;-webkit-transition:.4s;transition:.4s}.ablocks-toggle__slider:before{bottom:4px;content:"";height:var(--ablocks-toggle-switch-ball-size);left:4px;top:3px;width:var(--ablocks-toggle-switch-ball-size)}input.ablocks-toggle__checkbox:checked+.ablocks-toggle__slider:before{-webkit-transform:translateX(calc(var(--ablocks-toggle-switch-width) - var(--ablocks-toggle-switch-ball-size) - 8px));-ms-transform:translateX(calc(var(--ablocks-toggle-switch-width) - var(--ablocks-toggle-switch-ball-size) - 8px));transform:translateX(calc(var(--ablocks-toggle-switch-width) - var(--ablocks-toggle-switch-ball-size) - 8px))}.ablocks-toggle__slider--round{border-radius:340px}.ablocks-toggle__slider--round:before{border-radius:50%} | |
