Line 1,346: | Line 1,346: | ||
+ | |||
+ | /* ************************** */ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | input { | ||
+ | height : 40px; | ||
+ | left : 0; | ||
+ | opacity : 0; | ||
+ | position: absolute; | ||
+ | top : 0; | ||
+ | width : 40px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .toggle { | ||
+ | position: relative; | ||
+ | display : inline-block; | ||
+ | } | ||
+ | |||
+ | label.toggle-item { | ||
+ | width : 4em; | ||
+ | background : var(--azul); | ||
+ | height : 1.5em; | ||
+ | display : inline-block; | ||
+ | border-radius : 50px; | ||
+ | margin : 0px; | ||
+ | position : relative; | ||
+ | transition : all 0.3s ease; | ||
+ | transform-origin: 20% center; | ||
+ | cursor : pointer; | ||
+ | } | ||
+ | |||
+ | label.toggle-item:before { | ||
+ | content : ""; | ||
+ | position : absolute; | ||
+ | display : block; | ||
+ | transition : all 0.2s ease; | ||
+ | width : 2.3em; | ||
+ | height : 2.3em; | ||
+ | top : 0.25em; | ||
+ | left : 0.25em; | ||
+ | border-radius: 2em; | ||
+ | border : 2px solid #88cf8f; | ||
+ | transition : 0.3s ease; | ||
+ | } | ||
+ | |||
+ | |||
+ | #transparent:checked+label:before { | ||
+ | content : ""; | ||
+ | position : absolute; | ||
+ | transform: translateX(59px); | ||
+ | } | ||
+ | |||
+ | .checkcross label:before { | ||
+ | content : ""; | ||
+ | position: absolute; | ||
+ | content : none; | ||
+ | } | ||
+ | |||
+ | .checkcross .check { | ||
+ | border-radius: 50%; | ||
+ | width : 1em; | ||
+ | height : 1em; | ||
+ | position : absolute; | ||
+ | background : #8BC34A; | ||
+ | transition : 0.4s ease; | ||
+ | top : 5.5px; | ||
+ | left : 5.5px; | ||
+ | } | ||
+ | |||
+ | .checkcross .check:before, | ||
+ | .checkcross .check:after { | ||
+ | content : ""; | ||
+ | position : absolute; | ||
+ | height : 4px; | ||
+ | border-radius: 10px; | ||
+ | background : #fff; | ||
+ | transition : 0.4s ease; | ||
+ | } | ||
+ | |||
+ | .checkcross .check:before { | ||
+ | content : ""; | ||
+ | position : absolute; | ||
+ | width : 12px; | ||
+ | transform: rotate(-45deg) translate(-2px, 10px); | ||
+ | } | ||
+ | |||
+ | .checkcross .check:after { | ||
+ | content : ""; | ||
+ | position : absolute; | ||
+ | width : 7px; | ||
+ | transform: rotate(45deg) translate(8px, 5px); | ||
+ | } | ||
+ | |||
+ | #checkcross:checked+label .check { | ||
+ | left : 54px; | ||
+ | transform : rotate(360deg); | ||
+ | background: #c34a4a; | ||
+ | } | ||
+ | |||
+ | #checkcross:checked+label .check:before { | ||
+ | |||
+ | content : ""; | ||
+ | position : absolute; | ||
+ | width : 12px; | ||
+ | transform: rotate(-45deg) translate(-3px, 8px); | ||
+ | } | ||
+ | |||
+ | #checkcross:checked+label .check:after { | ||
+ | content : ""; | ||
+ | position : absolute; | ||
+ | width : 12px; | ||
+ | transform: rotate(45deg) translate(8px, 3px); | ||
+ | } | ||
+ | |||
+ | .text-name { | ||
+ | font-size: 8px; | ||
+ | position : relative; | ||
+ | left : 30px; | ||
+ | top : 9px; | ||
+ | } | ||
+ | |||
+ | .text-name-inv { | ||
+ | font-size: 8px; | ||
+ | position : relative; | ||
+ | left : 10px; | ||
+ | top : 9px; | ||
+ | } | ||
</style> | </style> | ||
</html> | </html> |
Revision as of 03:00, 22 October 2021