framework7/lazy-components/checkbox.css

Full featured mobile HTML framework for building iOS & Android apps

.checkbox i,.icon-checkbox{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.checkbox{position:relative;display:inline-block;vertical-align:middle;z-index:1}.checkbox,label.item-checkbox{cursor:pointer}.checkbox input[type=checkbox],.checkbox input[type=radio],label.item-checkbox input[type=checkbox],label.item-checkbox input[type=radio]{display:none}.checkbox .icon-checkbox,label.item-checkbox .icon-checkbox{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;display:block}.checkbox .icon-checkbox:after,label.item-checkbox .icon-checkbox:after{content:'';position:absolute}label.item-checkbox{-webkit-transition-duration:.3s;transition-duration:.3s}label.item-checkbox.active-state:after{background-color:transparent}.disabled label.item-checkbox,label.item-checkbox.disabled{opacity:.55;pointer-events:none}.ios .checkbox i,.ios .icon-checkbox{width:22px;height:22px;border-radius:50%;border:1px solid #c7c7cc}.ios .checkbox i:after,.ios .icon-checkbox:after{left:50%;top:50%;margin-left:-6px;margin-top:-4px;width:12px;height:9px}.ios .checkbox input[type=checkbox]:checked~i,.ios label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{border:none;background:#007aff}.ios .checkbox input[type=checkbox]:checked~i:after,.ios label.item-checkbox input[type=checkbox]:checked~.icon-checkbox:after{background:no-repeat center;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23ffffff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E");background-size:12px 9px}.ios label.item-checkbox>.icon-checkbox{margin-right:15px}.ios label.item-checkbox .item-content .item-media,.ios label.item-checkbox.item-content .item-media{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.ios label.item-checkbox.active-state{-webkit-transition-duration:0s;transition-duration:0s;background-color:#d9d9d9}.ios .theme-dark label.item-checkbox.active-state{background-color:#363636}.ios .color-theme-red .checkbox input[type=checkbox]:checked~i,.ios .color-theme-red label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#ff3b30}.ios .color-theme-green .checkbox input[type=checkbox]:checked~i,.ios .color-theme-green label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#4cd964}.ios .color-theme-blue .checkbox input[type=checkbox]:checked~i,.ios .color-theme-blue label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#007aff}.ios .color-theme-pink .checkbox input[type=checkbox]:checked~i,.ios .color-theme-pink label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#ff2d55}.ios .color-theme-yellow .checkbox input[type=checkbox]:checked~i,.ios .color-theme-yellow label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#fc0}.ios .color-theme-orange .checkbox input[type=checkbox]:checked~i,.ios .color-theme-orange label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#ff9500}.ios .color-theme-gray .checkbox input[type=checkbox]:checked~i,.ios .color-theme-gray label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#8e8e93}.ios .color-theme-white .checkbox input[type=checkbox]:checked~i,.ios .color-theme-white label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#fff}.ios .color-theme-black .checkbox input[type=checkbox]:checked~i,.ios .color-theme-black label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background:#000}.ios .checkbox.color-red input[type=checkbox]:checked~i,.ios label.item-checkbox.color-red input[type=checkbox]:checked~.icon-checkbox{background:#ff3b30}.ios .checkbox.color-green input[type=checkbox]:checked~i,.ios label.item-checkbox.color-green input[type=checkbox]:checked~.icon-checkbox{background:#4cd964}.ios .checkbox.color-blue input[type=checkbox]:checked~i,.ios label.item-checkbox.color-blue input[type=checkbox]:checked~.icon-checkbox{background:#007aff}.ios .checkbox.color-pink input[type=checkbox]:checked~i,.ios label.item-checkbox.color-pink input[type=checkbox]:checked~.icon-checkbox{background:#ff2d55}.ios .checkbox.color-yellow input[type=checkbox]:checked~i,.ios label.item-checkbox.color-yellow input[type=checkbox]:checked~.icon-checkbox{background:#fc0}.ios .checkbox.color-orange input[type=checkbox]:checked~i,.ios label.item-checkbox.color-orange input[type=checkbox]:checked~.icon-checkbox{background:#ff9500}.ios .checkbox.color-gray input[type=checkbox]:checked~i,.ios label.item-checkbox.color-gray input[type=checkbox]:checked~.icon-checkbox{background:#8e8e93}.ios .checkbox.color-white input[type=checkbox]:checked~i,.ios label.item-checkbox.color-white input[type=checkbox]:checked~.icon-checkbox{background:#fff}.ios .checkbox.color-black input[type=checkbox]:checked~i,.ios label.item-checkbox.color-black input[type=checkbox]:checked~.icon-checkbox{background:#000}.md .checkbox i,.md .icon-checkbox{width:18px;height:18px;border-radius:2px;border:2px solid #6d6d6d;-webkit-transition-duration:.2s;transition-duration:.2s;background-color:transparent}.md .checkbox i:after,.md .icon-checkbox:after{width:18px;height:18px;left:-2px;top:-2px;-webkit-transition-duration:.2s;transition-duration:.2s;opacity:0;background:no-repeat center;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'%23ffffff'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M9%2016.17L4.83%2012l-1.42%201.41L9%2019%2021%207l-1.41-1.41z'%2F%3E%3C%2Fsvg%3E");background-size:100% auto}.md .checkbox input[type=checkbox]:checked~i,.md label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#2196f3;border-color:#2196f3}.md .checkbox input[type=checkbox]:checked~i:after,.md label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox:after,.md label.item-checkbox input[type=checkbox]:checked~.icon-checkbox:after{opacity:1}.md label.item-checkbox{position:relative;overflow:hidden;z-index:0}.md label.item-checkbox>.icon-checkbox{margin-right:38px}.md label.item-checkbox .item-content .item-media,.md label.item-checkbox.item-content .item-media{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.md label.item-checkbox.active-state{background-color:rgba(0,0,0,.1)}.md .theme-dark label.item-checkbox.active-state{background-color:rgba(255,255,255,.05)}.md .theme-dark .checkbox i,.md .theme-dark .icon-checkbox{border-color:rgba(255,255,255,.54)}.md .color-theme-red .checkbox input[type=checkbox]:checked~i,.md .color-theme-red label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-red label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#f44336;border-color:#f44336}.md .color-theme-red .checkbox .ripple-wave{background:rgba(244,67,54,.5)}.md .color-theme-green .checkbox input[type=checkbox]:checked~i,.md .color-theme-green label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-green label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#4caf50;border-color:#4caf50}.md .color-theme-green .checkbox .ripple-wave{background:rgba(76,175,80,.5)}.md .color-theme-blue .checkbox input[type=checkbox]:checked~i,.md .color-theme-blue label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-blue label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#2196f3;border-color:#2196f3}.md .color-theme-blue .checkbox .ripple-wave{background:rgba(33,150,243,.5)}.md .color-theme-pink .checkbox input[type=checkbox]:checked~i,.md .color-theme-pink label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-pink label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#e91e63;border-color:#e91e63}.md .color-theme-pink .checkbox .ripple-wave{background:rgba(233,30,99,.5)}.md .color-theme-yellow .checkbox input[type=checkbox]:checked~i,.md .color-theme-yellow label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-yellow label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#ffeb3b;border-color:#ffeb3b}.md .color-theme-yellow .checkbox .ripple-wave{background:rgba(255,235,59,.5)}.md .color-theme-orange .checkbox input[type=checkbox]:checked~i,.md .color-theme-orange label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-orange label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#ff9800;border-color:#ff9800}.md .color-theme-orange .checkbox .ripple-wave{background:rgba(255,152,0,.5)}.md .color-theme-gray .checkbox input[type=checkbox]:checked~i,.md .color-theme-gray label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-gray label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#9e9e9e;border-color:#9e9e9e}.md .color-theme-gray .checkbox .ripple-wave{background:rgba(158,158,158,.5)}.md .color-theme-white .checkbox input[type=checkbox]:checked~i,.md .color-theme-white label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-white label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#fff;border-color:#fff}.md .color-theme-white .checkbox .ripple-wave{background:rgba(255,255,255,.5)}.md .color-theme-black .checkbox input[type=checkbox]:checked~i,.md .color-theme-black label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,.md .color-theme-black label.item-checkbox input[type=checkbox]:checked~.icon-checkbox{background-color:#000;border-color:#000}.md .color-theme-black .checkbox .ripple-wave{background:rgba(0,0,0,.5)}.md .checkbox.color-red input[type=checkbox]:checked~i,.md label.item-checkbox.color-red input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-red input[type=checkbox]:checked~.icon-checkbox{background-color:#f44336;border-color:#f44336}.md .checkbox.color-red .ripple-wave{background:rgba(244,67,54,.5)}.md .checkbox.color-green input[type=checkbox]:checked~i,.md label.item-checkbox.color-green input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-green input[type=checkbox]:checked~.icon-checkbox{background-color:#4caf50;border-color:#4caf50}.md .checkbox.color-green .ripple-wave{background:rgba(76,175,80,.5)}.md .checkbox.color-blue input[type=checkbox]:checked~i,.md label.item-checkbox.color-blue input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-blue input[type=checkbox]:checked~.icon-checkbox{background-color:#2196f3;border-color:#2196f3}.md .checkbox.color-blue .ripple-wave{background:rgba(33,150,243,.5)}.md .checkbox.color-pink input[type=checkbox]:checked~i,.md label.item-checkbox.color-pink input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-pink input[type=checkbox]:checked~.icon-checkbox{background-color:#e91e63;border-color:#e91e63}.md .checkbox.color-pink .ripple-wave{background:rgba(233,30,99,.5)}.md .checkbox.color-yellow input[type=checkbox]:checked~i,.md label.item-checkbox.color-yellow input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-yellow input[type=checkbox]:checked~.icon-checkbox{background-color:#ffeb3b;border-color:#ffeb3b}.md .checkbox.color-yellow .ripple-wave{background:rgba(255,235,59,.5)}.md .checkbox.color-orange input[type=checkbox]:checked~i,.md label.item-checkbox.color-orange input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-orange input[type=checkbox]:checked~.icon-checkbox{background-color:#ff9800;border-color:#ff9800}.md .checkbox.color-orange .ripple-wave{background:rgba(255,152,0,.5)}.md .checkbox.color-gray input[type=checkbox]:checked~i,.md label.item-checkbox.color-gray input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-gray input[type=checkbox]:checked~.icon-checkbox{background-color:#9e9e9e;border-color:#9e9e9e}.md .checkbox.color-gray .ripple-wave{background:rgba(158,158,158,.5)}.md .checkbox.color-white input[type=checkbox]:checked~i,.md label.item-checkbox.color-white input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-white input[type=checkbox]:checked~.icon-checkbox{background-color:#fff;border-color:#fff}.md .checkbox.color-white .ripple-wave{background:rgba(255,255,255,.5)}.md .checkbox.color-black input[type=checkbox]:checked~i,.md label.item-checkbox.color-black input[type=checkbox]:checked~* .icon-checkbox,.md label.item-checkbox.color-black input[type=checkbox]:checked~.icon-checkbox{background-color:#000;border-color:#000}.md .checkbox.color-black .ripple-wave{background:rgba(0,0,0,.5)}