/** * Axelor Business Solutions * * Copyright (C) 2005-2019 Axelor (). * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License, version 3, * as published by the Free Software Foundation. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Affero General Public License for more details. * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ .ibox { display: inline-block; width: inherit; margin: 0; overflow: hidden; } .form-inline .ibox { vertical-align: middle; margin-bottom: 0; } .ibox.readonly { cursor: default; opacity: 0.6; } .ibox .box { display: inline-block; position: relative; width: 20px; height: 20px; float: left; outline: none; } .ibox input { opacity: 0 !important; margin-left: -14px !important; position: absolute; } .ibox .title { margin-left: 8px; } .ibox .item-label { color: #999; } .ibox .box:before, .ibox .box:after { box-sizing: border-box; } .ibox.round .box:before { border-radius: 20px; } .ibox .box:before { content: " "; display: inline-block; border: 1px solid #ccc; height: 100%; width: 100%; transition: all .2s; } .ibox input:focus + .box:before { border: 1px solid #0275d8; } .ibox:hover .box:before, .ibox:hover input:focus + .box:before { border: 2px solid #0275d8; } .ibox input:checked + .box:before { border: 1px solid #0275d8; background-color: #0275d8; } .ibox input:checked + .box:after { content: " "; display: inline-block; position: absolute; top: 5px; left: 4px; width: 12px; height: 7px; border: 2px solid #fff; border-top: 0; border-right: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .ibox:hover input:disabled + .box:before { border: 1px solid #ccc; } .ibox:hover input:disabled:checked + .box:before { border: 1px solid #0275d8; } .readonly > .ibox, .readonly > .iswitch { cursor: inherit; } .readonly > .ibox > .box, .readonly > .iswitch { opacity: 0.6; } .form-item.iswitch { margin-top: 4px; } .iswitch { position: relative; display: inline-block; width: 35px; height: 20px; margin: 0; cursor: pointer; background-color: #0275d8; border-radius: 30px } .iswitch.readonly { cursor: default; opacity: 0.6; } .iswitch input { position: absolute; opacity: 0; filter: alpha(opacity=0) } .iswitch input:checked + .box:before { top: 50%; right: 5px; bottom: 50%; left: 50%; border-width: 0; border-radius: 5px } .iswitch input:checked + .box:after { margin-left: 16px } .iswitch .box:before { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; background-color: #fff; border: 1px solid #ddd; border-radius: 30px; transition: all .2s } .iswitch input:focus + .box:before { border: 1px solid #0275d8; } .iswitch .box:after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 18px; background-color: #fff; border-radius: 50%; box-shadow: 1px 1px 3px rgba(0,0,0,0.25); transition: margin-left .3s } .ng-invalid > .ibox .box:before, .ng-invalid > .iswitch .box:before { border-color: #B94A48; } .form-item-container > .ibox, .form-item-container > .iswitch { margin: 4px 0 !important; float: left; }