PHP Classes

File: Web/styles/sass/_checkbox-holder.scss

Recommend this page to a friend!
  Classes of Burge Lab   Burge CMF   Web/styles/sass/_checkbox-holder.scss   Download  
File: Web/styles/sass/_checkbox-holder.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Burge CMF
Framework to publish managed content
Author: By
Last change:
Date: 7 years ago
Size: 2,787 bytes
 

Contents

Class file image Download
.checkbox-holder{ vertical-align: middle;; position: relative; display: inline-block;; width: 80px; height: 25px; line-height: 50px; } .checkbox-holder label { width: 100%; height: 100%; position: relative; display: block; //top:5px; } .checkbox-holder input { top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 100; position: absolute; width: 100%; height: 100%; cursor: pointer; } .checkbox-holder label { display: block; width: 100%; height: 100%; background: $secondary-color; border-radius: 40px; box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5); transition: background-color .3s; } .checkbox-holder label:after { content: ""; position: absolute; z-index: -1; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: inherit; background: #ababab; background: linear-gradient(#f2f2f2, #ababab); box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25); } .checkbox-holder label:before { content: ""; position: absolute; z-index: -1; top: -18px; right: -18px; bottom: -18px; left: -18px; border-radius: inherit; background: #eee; background: linear-gradient(#e5e7e6, #eee); box-shadow: 0 1px 0 rgba(255,255,255,0.5); filter: blur(1px); } .checkbox-holder label i { display: block; height: 100%; width: 50%; border-radius: inherit; background: silver; position: absolute; right: -1%; top: 0; background: #b2ac9e; background: linear-gradient(#f7f2f6, #b2ac9e); box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0,0,0,0.3), 0 5px 5px rgba(0,0,0,0.2); transition: right .3s; } .even-odd-bg:not(.dont-magnify) .checkbox-holder label i { box-shadow: none; } .checkbox-holder label i:after { content: ""; position: absolute; left: 15%; top: 25%; width: 70%; height: 50%; background: #d2cbc3; background: linear-gradient(#cbc7bc, #d2cbc3); border-radius: inherit; } .checkbox-holder label i:before { content: "No"; text-transform: uppercase; font-style: normal; color: white;//rgba(0,0,0,0.4); text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e; position: absolute; vertical-align: middle; top:-12px; right: 120%; } body.rtl .checkbox-holder label i:before { content: "???"; } .checkbox-holder input:checked ~ label { background: $primary-color; transition: background-color .3s; } .checkbox-holder input:checked ~ label i { right: 51%; transition: right .3s; } .checkbox-holder input:checked ~ label i:before { content: "Yes"; right: -90%;//135%; color: white; text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659; } body.rtl .checkbox-holder input:checked ~ label i:before { content: "???"; right:-60%; }