|
- .wrapper{margin:30px auto;width:80%;font-family:sans-serif;color:#555;font-size:14px;line-height:24px}.tabs li{float:left;width:20%}.tabs a{display:block;text-align:center;text-decoration:none;text-transform:uppercase;color:#888;padding:20px 0;border-bottom:2px solid #888;background:#f7f7f7}.tabs a:hover,.tabs a.active{background:#ddd}.tabgroup div{padding:10x}.clearfix:after{content:"";display:table;clear:both}.checkbox-group{display:flex;flex-wrap:wrap;justify-content:center;width:90%;margin-left:auto;margin-right:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox-group>*{margin:.5rem}.checkbox-group-legend{font-size:1.5rem;font-weight:700;color:#9c9c9c;text-align:center;line-height:1.125;margin-bottom:1.25rem}.checkbox-input{clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.checkbox-input:checked+.checkbox-tile{border-color:#2260ff;box-shadow:0 5px 10px #0000001a;color:#2260ff}.checkbox-input:checked+.checkbox-tile:before{transform:scale(1);opacity:1;background-color:#2260ff;border-color:#2260ff}.checkbox-input:checked+.checkbox-tile .checkbox-icon,.checkbox-input:checked+.checkbox-tile .checkbox-label{color:#2260ff}.checkbox-input:focus+.checkbox-tile{border-color:#2260ff;box-shadow:0 5px 10px #0000001a,0 0 0 4px #b5c9fc}.checkbox-input:focus+.checkbox-tile:before{transform:scale(1);opacity:1}.checkbox-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;width:auto;min-height:7rem;border-radius:.5rem;border:2px solid #b5bfd9;background-color:#fff;box-shadow:0 5px 10px #0000001a;transition:.15s ease;position:relative}.checkbox-tile:before{content:"";position:absolute;display:block;width:1.25rem;height:1.25rem;border:2px solid #b5bfd9;background-color:#fff;border-radius:50%;top:.25rem;left:.25rem;opacity:0;transform:scale(0);transition:.25s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:50% 50%}.checkbox-tile img{width:80%;margin-bottom:.5rem;margin-top:.5rem}.checkbox-icon{transition:.375s ease;color:#494949}.checkbox-icon svg{width:3rem;height:3rem}.checkbox-label{color:#707070;transition:.375s ease;text-align:center}
|
