bulma-checkbox
Version:
Custom checkbox controls for Bulma CSS Framework
2 lines (1 loc) • 12.7 kB
CSS
.b-checkbox.checkbox{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.b-checkbox.checkbox{outline:none;display:inline-flex;align-items:center}.b-checkbox.checkbox:not(.button){margin-right:0.5em}.b-checkbox.checkbox:not(.button)+.checkbox:last-child{margin-right:0}.b-checkbox.checkbox input[type=checkbox]{position:absolute;left:0;opacity:0;outline:none;z-index:-1}.b-checkbox.checkbox input[type=checkbox]+.check{width:1.25em;height:1.25em;flex-shrink:0;border-radius:4px;border:2px solid #7a7a7a;transition:background 150ms ease-out;background:rgba(0,0,0,0)}.b-checkbox.checkbox input[type=checkbox]:checked+.check{background:#00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#00d1b2}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-white{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%230a0a0a' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#fff}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-black{background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#0a0a0a}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-light{background:#f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgba(0,0,0,0.7)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#f5f5f5}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-dark{background:#363636 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#363636}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-primary{background:#00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#00d1b2}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-link{background:#485fc7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#485fc7}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-info{background:#3e8ed0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#3e8ed0}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-success{background:#48c78e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#48c78e}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-warning{background:#ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgba(0,0,0,0.7)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#ffe08a}.b-checkbox.checkbox input[type=checkbox]:checked+.check.is-danger{background:#f14668 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;border-color:#f14668}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check{background:#00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#00d1b2}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-white,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-white{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%230a0a0a' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#fff}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-black,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-black{background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#0a0a0a}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-light,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-light{background:#f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:rgba(0,0,0,0.7)' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#f5f5f5}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-dark,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-dark{background:#363636 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#363636}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-primary,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-primary{background:#00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#00d1b2}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-link,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-link{background:#485fc7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#485fc7}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-info,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-info{background:#3e8ed0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#3e8ed0}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-success,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-success{background:#48c78e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#48c78e}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-warning,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-warning{background:#ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:rgba(0,0,0,0.7)' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#ffe08a}.b-checkbox.checkbox input[type=checkbox]:indeterminate+.check.is-danger,.b-checkbox.checkbox input[type=checkbox].is-indeterminate+.check.is-danger{background:#f14668 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center;border-color:#f14668}.b-checkbox.checkbox input[type=checkbox]:focus+.check{box-shadow:0 0 0.5em rgba(122,122,122,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check{box-shadow:0 0 0.5em rgba(0,209,178,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-white{box-shadow:0 0 0.5em rgba(255,255,255,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-black{box-shadow:0 0 0.5em rgba(10,10,10,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-light{box-shadow:0 0 0.5em rgba(245,245,245,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-dark{box-shadow:0 0 0.5em rgba(54,54,54,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-primary{box-shadow:0 0 0.5em rgba(0,209,178,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-link{box-shadow:0 0 0.5em rgba(72,95,199,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-info{box-shadow:0 0 0.5em rgba(62,142,208,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-success{box-shadow:0 0 0.5em rgba(72,199,142,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-warning{box-shadow:0 0 0.5em rgba(255,224,138,0.8)}.b-checkbox.checkbox input[type=checkbox]:focus:checked+.check.is-danger{box-shadow:0 0 0.5em rgba(241,70,104,0.8)}.b-checkbox.checkbox .control-label{padding-left:calc(0.75em - 1px)}.b-checkbox.checkbox.button{display:flex}.b-checkbox.checkbox[disabled]{opacity:0.5}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check{border-color:#00d1b2}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-white{border-color:#fff}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-black{border-color:#0a0a0a}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-light{border-color:#f5f5f5}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-dark{border-color:#363636}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-primary{border-color:#00d1b2}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-link{border-color:#485fc7}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-info{border-color:#3e8ed0}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-success{border-color:#48c78e}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-warning{border-color:#ffe08a}.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled)+.check.is-danger{border-color:#f14668}.b-checkbox.checkbox.is-small{border-radius:2px;font-size:.75rem}.b-checkbox.checkbox.is-medium{font-size:1.25rem}.b-checkbox.checkbox.is-large{font-size:1.5rem}