Ubuntu

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ /* Switch */ .onoffswitch { position: relative; width: 60px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; height: 30px; padding: 0; line-height: 30px; border: 3px solid #d6d6d6; border-radius: 30px; background-color: #d6d6d6; transition: background-color 0.3s ease-in; } .onoffswitch-label:before { content: ""; display: block; width: 30px; margin: 0px; background: #fff; position: absolute; top: 0; bottom: 0; right: 29px; border: 3px solid #245ba5; border-radius: 30px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label { background-color: #d6d6d6; } .onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before { order-color: #d6d6d6; } .onoffswitch-checkbox:checked + .onoffswitch-label:before { right: 0px; background: #245ba5; } /* SMART */ .Smartswitch { float:left; position: relative; width: 200px; margin:20px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .Smartswitch-checkbox { display: none; } .Smartswitch-label { border: 3px solid #ffffff; border-radius: 20px; width: 12rem; padding:10px; box-shadow: 6px 6px 12px #ccc; height: 180px; } .Smartswitch-checkbox:checked + .Smartswitch-label { background-color: #ffffff; } .Smartswitch-checkbox:checked + .Smartswitch-label, .Smartswitch-checkbox:checked + .Smartswitch-label:before { border: 3px solid #9013fe; } .Smartswitch-checkbox:checked + .Smartswitch-label:before { background: #245ba5; } /* PORTA MOBILE */ .form_porta_mobile { position: relative; width: 60px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .form_porta_mobile-checkbox { display: none; } .form_porta_mobile-label { display: block; overflow: hidden; cursor: pointer; height: 30px; padding: 0; line-height: 30px; border: 3px solid #d6d6d6; border-radius: 30px; background-color: #d6d6d6; transition: background-color 0.3s ease-in; } .form_porta_mobile-label:before { content: ""; display: block; width: 30px; margin: 0px; background: #fff; position: absolute; top: 0; bottom: 0; right: 29px; border: 3px solid #245ba5; border-radius: 30px; transition: all 0.3s ease-in 0s; } .form_porta_mobile-checkbox:checked + .form_porta_mobile-label { background-color: #d6d6d6; } .form_porta_mobile-checkbox:checked + .form_porta_mobile-label, .form_porta_mobile-checkbox:checked + .form_porta_mobile-label:before { order-color: #d6d6d6; } .form_porta_mobile-checkbox:checked + .form_porta_mobile-label:before { right: 0px; background: #245ba5; } /* PORTA LIGNE */ .form_porta_ligne { position: relative; width: 60px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .form_porta_ligne-checkbox { display: none; } .form_porta_ligne-label { display: block; overflow: hidden; cursor: pointer; height: 30px; padding: 0; line-height: 30px; border: 3px solid #d6d6d6; border-radius: 30px; background-color: #d6d6d6; transition: background-color 0.3s ease-in; } .form_porta_ligne-label:before { content: ""; display: block; width: 30px; margin: 0px; background: #fff; position: absolute; top: 0; bottom: 0; right: 29px; border: 3px solid #245ba5; border-radius: 30px; transition: all 0.3s ease-in 0s; } .form_porta_ligne-checkbox:checked + .form_porta_ligne-label { background-color: #d6d6d6; } .form_porta_ligne-checkbox:checked + .form_porta_ligne-label, .form_porta_ligne-checkbox:checked + .form_porta_ligne-label:before { order-color: #d6d6d6; } .form_porta_ligne-checkbox:checked + .form_porta_ligne-label:before { right: 0px; background: #245ba5; } /* MEME ADR */ .MemeAdr { position: relative; width: 60px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .MemeAdr-checkbox { display: none; } .MemeAdr-label { display: block; overflow: hidden; cursor: pointer; height: 30px; padding: 0; line-height: 30px; border: 3px solid #d6d6d6; border-radius: 30px; background-color: #d6d6d6; transition: background-color 0.3s ease-in; } .MemeAdr-label:before { content: ""; display: block; width: 30px; margin: 0px; background: #fff; position: absolute; top: 0; bottom: 0; right: 29px; border: 3px solid #245ba5; border-radius: 30px; transition: all 0.3s ease-in 0s; } .MemeAdr-checkbox:checked + .MemeAdr-label { background-color: #d6d6d6; } .MemeAdr-checkbox:checked + .MemeAdr-label, .MemeAdr-checkbox:checked + .MemeAdr-label:before { order-color: #d6d6d6; } .MemeAdr-checkbox:checked + .MemeAdr-label:before { right: 0px; background: #245ba5; }