.switch[type='checkbox'] { outline: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; position: absolute; opacity: 0; } .switch[type='checkbox']:focus + label::after, .switch[type='checkbox']:focus + label::before, .switch[type='checkbox']:focus + label:after, .switch[type='checkbox']:focus + label:before { outline: 1px dotted #b5b5b5; } .switch[type='checkbox'][disabled] { cursor: not-allowed; } .switch[type='checkbox'][disabled] + label { opacity: 0.5; } .switch[type='checkbox'][disabled] + label::before, .switch[type='checkbox'][disabled] + label:before { opacity: 0.5; } .switch[type='checkbox'][disabled] + label::after, .switch[type='checkbox'][disabled] + label:after { opacity: 0.5; } .switch[type='checkbox'][disabled] + label:hover { cursor: not-allowed; } .switch[type='checkbox'] + label { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; font-size: 1rem; height: 2.5em; line-height: 1.5; padding-left: 3.5rem; padding-top: 0.2rem; cursor: pointer; } .switch[type='checkbox'] + label::before, .switch[type='checkbox'] + label:before { position: absolute; display: block; top: calc(50% - 1.5rem * 0.5); left: 0; width: 3rem; height: 1.5rem; border: 0.1rem solid transparent; border-radius: 4px; background: #b5b5b5; content: ''; } .switch[type='checkbox'] + label::after, .switch[type='checkbox'] + label:after { display: block; position: absolute; top: calc(50% - 1rem * 0.5); left: 0.25rem; width: 1rem; height: 1rem; transform: translate3d(0, 0, 0); border-radius: 4px; background: #fff; transition: all 0.25s ease-out; content: ''; } .switch[type='checkbox'] + label .switch-active, .switch[type='checkbox'] + label .switch-inactive { font-size: 0.9rem; z-index: 1; margin-top: -4px; } .switch[type='checkbox'] + label.has-text-inside .switch-inactive { margin-left: -1.925rem; } .switch[type='checkbox'] + label.has-text-inside .switch-active { margin-left: -3.25rem; } .switch[type='checkbox'].is-rtl + label { padding-left: 0; padding-right: 3.5rem; } .switch[type='checkbox'].is-rtl + label::before, .switch[type='checkbox'].is-rtl + label:before { left: auto; right: 0; } .switch[type='checkbox'].is-rtl + label::after, .switch[type='checkbox'].is-rtl + label:after { left: auto; right: 1.625rem; } .switch[type='checkbox']:checked + label::before, .switch[type='checkbox']:checked + label:before { background: #00d1b2; } .switch[type='checkbox']:checked + label::after { left: 1.625rem; } .switch[type='checkbox']:checked.is-rtl + label::after, .switch[type='checkbox']:checked.is-rtl + label:after { left: auto; right: 0.25rem; } .switch[type='checkbox'].is-outlined + label::before, .switch[type='checkbox'].is-outlined + label:before { background-color: transparent; border-color: #b5b5b5; } .switch[type='checkbox'].is-outlined + label::after, .switch[type='checkbox'].is-outlined + label:after { background: #b5b5b5; } .switch[type='checkbox'].is-outlined:checked + label::before, .switch[type='checkbox'].is-outlined:checked + label:before { background-color: transparent; border-color: #00d1b2; } .switch[type='checkbox'].is-outlined:checked + label::after, .switch[type='checkbox'].is-outlined:checked + label:after { background: #00d1b2; } .switch[type='checkbox'].is-thin + label::before, .switch[type='checkbox'].is-thin + label:before { top: 0.5454545456rem; height: 0.375rem; } .switch[type='checkbox'].is-thin + label::after, .switch[type='checkbox'].is-thin + label:after { box-shadow: 0 0 3px #7a7a7a; } .switch[type='checkbox'].is-rounded + label::before, .switch[type='checkbox'].is-rounded + label:before { border-radius: 24px; } .switch[type='checkbox'].is-rounded + label::after, .switch[type='checkbox'].is-rounded + label:after { border-radius: 50%; } .switch[type='checkbox'].is-small + label { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; font-size: 0.75rem; height: 2.5em; line-height: 1.5; padding-left: 2.75rem; padding-top: 0.2rem; cursor: pointer; } .switch[type='checkbox'].is-small + label::before, .switch[type='checkbox'].is-small + label:before { position: absolute; display: block; top: calc(50% - 1.125rem * 0.5); left: 0; width: 2.25rem; height: 1.125rem; border: 0.1rem solid transparent; border-radius: 4px; background: #b5b5b5; content: ''; } .switch[type='checkbox'].is-small + label::after, .switch[type='checkbox'].is-small + label:after { display: block; position: absolute; top: calc(50% - 0.625rem * 0.5); left: 0.25rem; width: 0.625rem; height: 0.625rem; transform: translate3d(0, 0, 0); border-radius: 4px; background: #fff; transition: all 0.25s ease-out; content: ''; } .switch[type='checkbox'].is-small + label .switch-active, .switch[type='checkbox'].is-small + label .switch-inactive { font-size: 0.65rem; z-index: 1; margin-top: -4px; } .switch[type='checkbox'].is-small + label.has-text-inside .switch-inactive { margin-left: -1.55rem; } .switch[type='checkbox'].is-small + label.has-text-inside .switch-active { margin-left: -2.5rem; } .switch[type='checkbox'].is-small.is-rtl + label { padding-left: 0; padding-right: 2.75rem; } .switch[type='checkbox'].is-small.is-rtl + label::before, .switch[type='checkbox'].is-small.is-rtl + label:before { left: auto; right: 0; } .switch[type='checkbox'].is-small.is-rtl + label::after, .switch[type='checkbox'].is-small.is-rtl + label:after { left: auto; right: 1.25rem; } .switch[type='checkbox'].is-small:checked + label::before, .switch[type='checkbox'].is-small:checked + label:before { background: #00d1b2; } .switch[type='checkbox'].is-small:checked + label::after { left: 1.25rem; } .switch[type='checkbox'].is-small:checked.is-rtl + label::after, .switch[type='checkbox'].is-small:checked.is-rtl + label:after { left: auto; right: 0.25rem; } .switch[type='checkbox'].is-small.is-outlined + label::before, .switch[type='checkbox'].is-small.is-outlined + label:before { background-color: transparent; border-color: #b5b5b5; } .switch[type='checkbox'].is-small.is-outlined + label::after, .switch[type='checkbox'].is-small.is-outlined + label:after { background: #b5b5b5; } .switch[type='checkbox'].is-small.is-outlined:checked + label::before, .switch[type='checkbox'].is-small.is-outlined:checked + label:before { background-color: transparent; border-color: #00d1b2; } .switch[type='checkbox'].is-small.is-outlined:checked + label::after, .switch[type='checkbox'].is-small.is-outlined:checked + label:after { background: #00d1b2; } .switch[type='checkbox'].is-small.is-thin + label::before, .switch[type='checkbox'].is-small.is-thin + label:before { top: 0.4090909093rem; height: 0.28125rem; } .switch[type='checkbox'].is-small.is-thin + label::after, .switch[type='checkbox'].is-small.is-thin + label:after { box-shadow: 0 0 3px #7a7a7a; } .switch[type='checkbox'].is-small.is-rounded + label::before, .switch[type='checkbox'].is-small.is-rounded + label:before { border-radius: 24px; } .switch[type='checkbox'].is-small.is-rounded + label::after, .switch[type='checkbox'].is-small.is-rounded + label:after { border-radius: 50%; } .switch[type='checkbox'].is-medium + label { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; font-size: 1.25rem; height: 2.5em; line-height: 1.5; padding-left: 4.25rem; padding-top: 0.2rem; cursor: pointer; } .switch[type='checkbox'].is-medium + label::before, .switch[type='checkbox'].is-medium + label:before { position: absolute; display: block; top: calc(50% - 1.875rem * 0.5); left: 0; width: 3.75rem; height: 1.875rem; border: 0.1rem solid transparent; border-radius: 4px; background: #b5b5b5; content: ''; } .switch[type='checkbox'].is-medium + label::after, .switch[type='checkbox'].is-medium + label:after { display: block; position: absolute; top: calc(50% - 1.375rem * 0.5); left: 0.25rem; width: 1.375rem; height: 1.375rem; transform: translate3d(0, 0, 0); border-radius: 4px; background: #fff; transition: all 0.25s ease-out; content: ''; } .switch[type='checkbox'].is-medium + label .switch-active, .switch[type='checkbox'].is-medium + label .switch-inactive { font-size: 1.15rem; z-index: 1; margin-top: -4px; } .switch[type='checkbox'].is-medium + label.has-text-inside .switch-inactive { margin-left: -2.3rem; } .switch[type='checkbox'].is-medium + label.has-text-inside .switch-active { margin-left: -4rem; } .switch[type='checkbox'].is-medium.is-rtl + label { padding-left: 0; padding-right: 4.25rem; } .switch[type='checkbox'].is-medium.is-rtl + label::before, .switch[type='checkbox'].is-medium.is-rtl + label:before { left: auto; right: 0; } .switch[type='checkbox'].is-medium.is-rtl + label::after, .switch[type='checkbox'].is-medium.is-rtl + label:after { left: auto; right: 2rem; } .switch[type='checkbox'].is-medium:checked + label::before, .switch[type='checkbox'].is-medium:checked + label:before { background: #00d1b2; } .switch[type='checkbox'].is-medium:checked + label::after { left: 2rem; } .switch[type='checkbox'].is-medium:checked.is-rtl + label::after, .switch[type='checkbox'].is-medium:checked.is-rtl + label:after { left: auto; right: 0.25rem; } .switch[type='checkbox'].is-medium.is-outlined + label::before, .switch[type='checkbox'].is-medium.is-outlined + label:before { background-color: transparent; border-color: #b5b5b5; } .switch[type='checkbox'].is-medium.is-outlined + label::after, .switch[type='checkbox'].is-medium.is-outlined + label:after { background: #b5b5b5; } .switch[type='checkbox'].is-medium.is-outlined:checked + label::before, .switch[type='checkbox'].is-medium.is-outlined:checked + label:before { background-color: transparent; border-color: #00d1b2; } .switch[type='checkbox'].is-medium.is-outlined:checked + label::after, .switch[type='checkbox'].is-medium.is-outlined:checked + label:after { background: #00d1b2; } .switch[type='checkbox'].is-medium.is-thin + label::before, .switch[type='checkbox'].is-medium.is-thin + label:before { top: 0.6818181819rem; height: 0.46875rem; } .switch[type='checkbox'].is-medium.is-thin + label::after, .switch[type='checkbox'].is-medium.is-thin + label:after { box-shadow: 0 0 3px #7a7a7a; } .switch[type='checkbox'].is-medium.is-rounded + label::before, .switch[type='checkbox'].is-medium.is-rounded + label:before { border-radius: 24px; } .switch[type='checkbox'].is-medium.is-rounded + label::after, .switch[type='checkbox'].is-medium.is-rounded + label:after { border-radius: 50%; } .switch[type='checkbox'].is-large + label { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; font-size: 1.5rem; height: 2.5em; line-height: 1.5; padding-left: 5rem; padding-top: 0.2rem; cursor: pointer; } .switch[type='checkbox'].is-large + label::before, .switch[type='checkbox'].is-large + label:before { position: absolute; display: block; top: calc(50% - 2.25rem * 0.5); left: 0; width: 4.5rem; height: 2.25rem; border: 0.1rem solid transparent; border-radius: 4px; background: #b5b5b5; content: ''; } .switch[type='checkbox'].is-large + label::after, .switch[type='checkbox'].is-large + label:after { display: block; position: absolute; top: calc(50% - 1.75rem * 0.5); left: 0.25rem; width: 1.75rem; height: 1.75rem; transform: translate3d(0, 0, 0); border-radius: 4px; background: #fff; transition: all 0.25s ease-out; content: ''; } .switch[type='checkbox'].is-large + label .switch-active, .switch[type='checkbox'].is-large + label .switch-inactive { font-size: 1.4rem; z-index: 1; margin-top: -4px; } .switch[type='checkbox'].is-large + label.has-text-inside .switch-inactive { margin-left: -2.675rem; } .switch[type='checkbox'].is-large + label.has-text-inside .switch-active { margin-left: -4.75rem; } .switch[type='checkbox'].is-large.is-rtl + label { padding-left: 0; padding-right: 5rem; } .switch[type='checkbox'].is-large.is-rtl + label::before, .switch[type='checkbox'].is-large.is-rtl + label:before { left: auto; right: 0; } .switch[type='checkbox'].is-large.is-rtl + label::after, .switch[type='checkbox'].is-large.is-rtl + label:after { left: auto; right: 2.375rem; } .switch[type='checkbox'].is-large:checked + label::before, .switch[type='checkbox'].is-large:checked + label:before { background: #00d1b2; } .switch[type='checkbox'].is-large:checked + label::after { left: 2.375rem; } .switch[type='checkbox'].is-large:checked.is-rtl + label::after, .switch[type='checkbox'].is-large:checked.is-rtl + label:after { left: auto; right: 0.25rem; } .switch[type='checkbox'].is-large.is-outlined + label::before, .switch[type='checkbox'].is-large.is-outlined + label:before { background-color: transparent; border-color: #b5b5b5; } .switch[type='checkbox'].is-large.is-outlined + label::after, .switch[type='checkbox'].is-large.is-outlined + label:after { background: #b5b5b5; } .switch[type='checkbox'].is-large.is-outlined:checked + label::before, .switch[type='checkbox'].is-large.is-outlined:checked + label:before { background-color: transparent; border-color: #00d1b2; } .switch[type='checkbox'].is-large.is-outlined:checked + label::after, .switch[type='checkbox'].is-large.is-outlined:checked + label:after { background: #00d1b2; } .switch[type='checkbox'].is-large.is-thin + label::before, .switch[type='checkbox'].is-large.is-thin + label:before { top: 0.8181818183rem; height: 0.5625rem; } .switch[type='checkbox'].is-large.is-thin + label::after, .switch[type='checkbox'].is-large.is-thin + label:after { box-shadow: 0 0 3px #7a7a7a; } .switch[type='checkbox'].is-large.is-rounded + label::before, .switch[type='checkbox'].is-large.is-rounded + label:before { border-radius: 24px; } .switch[type='checkbox'].is-large.is-rounded + label::after, .switch[type='checkbox'].is-large.is-rounded + label:after { border-radius: 50%; } .switch[type='checkbox'].is-white + label .switch-active { display: none; } .switch[type='checkbox'].is-white + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-white:checked + label::before, .switch[type='checkbox'].is-white:checked + label:before { background: #fff; } .switch[type='checkbox'].is-white:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-white:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-white.is-outlined:checked + label::before, .switch[type='checkbox'].is-white.is-outlined:checked + label:before { background-color: transparent; border-color: #fff !important; } .switch[type='checkbox'].is-white.is-outlined:checked + label::after, .switch[type='checkbox'].is-white.is-outlined:checked + label:after { background: #fff; } .switch[type='checkbox'].is-white.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-white.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-white + label::before, .switch[type='checkbox'].is-unchecked-white + label:before { background: #fff; } .switch[type='checkbox'].is-unchecked-white.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-white.is-outlined + label:before { background-color: transparent; border-color: #fff !important; } .switch[type='checkbox'].is-unchecked-white.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-white.is-outlined + label:after { background: #fff; } .switch[type='checkbox'].is-black + label .switch-active { display: none; } .switch[type='checkbox'].is-black + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-black:checked + label::before, .switch[type='checkbox'].is-black:checked + label:before { background: #0a0a0a; } .switch[type='checkbox'].is-black:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-black:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-black.is-outlined:checked + label::before, .switch[type='checkbox'].is-black.is-outlined:checked + label:before { background-color: transparent; border-color: #0a0a0a !important; } .switch[type='checkbox'].is-black.is-outlined:checked + label::after, .switch[type='checkbox'].is-black.is-outlined:checked + label:after { background: #0a0a0a; } .switch[type='checkbox'].is-black.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-black.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-black + label::before, .switch[type='checkbox'].is-unchecked-black + label:before { background: #0a0a0a; } .switch[type='checkbox'].is-unchecked-black.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-black.is-outlined + label:before { background-color: transparent; border-color: #0a0a0a !important; } .switch[type='checkbox'].is-unchecked-black.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-black.is-outlined + label:after { background: #0a0a0a; } .switch[type='checkbox'].is-light + label .switch-active { display: none; } .switch[type='checkbox'].is-light + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-light:checked + label::before, .switch[type='checkbox'].is-light:checked + label:before { background: #f5f5f5; } .switch[type='checkbox'].is-light:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-light:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-light.is-outlined:checked + label::before, .switch[type='checkbox'].is-light.is-outlined:checked + label:before { background-color: transparent; border-color: #f5f5f5 !important; } .switch[type='checkbox'].is-light.is-outlined:checked + label::after, .switch[type='checkbox'].is-light.is-outlined:checked + label:after { background: #f5f5f5; } .switch[type='checkbox'].is-light.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-light.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-light + label::before, .switch[type='checkbox'].is-unchecked-light + label:before { background: #f5f5f5; } .switch[type='checkbox'].is-unchecked-light.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-light.is-outlined + label:before { background-color: transparent; border-color: #f5f5f5 !important; } .switch[type='checkbox'].is-unchecked-light.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-light.is-outlined + label:after { background: #f5f5f5; } .switch[type='checkbox'].is-dark + label .switch-active { display: none; } .switch[type='checkbox'].is-dark + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-dark:checked + label::before, .switch[type='checkbox'].is-dark:checked + label:before { background: #363636; } .switch[type='checkbox'].is-dark:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-dark:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-dark.is-outlined:checked + label::before, .switch[type='checkbox'].is-dark.is-outlined:checked + label:before { background-color: transparent; border-color: #363636 !important; } .switch[type='checkbox'].is-dark.is-outlined:checked + label::after, .switch[type='checkbox'].is-dark.is-outlined:checked + label:after { background: #363636; } .switch[type='checkbox'].is-dark.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-dark.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-dark + label::before, .switch[type='checkbox'].is-unchecked-dark + label:before { background: #363636; } .switch[type='checkbox'].is-unchecked-dark.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-dark.is-outlined + label:before { background-color: transparent; border-color: #363636 !important; } .switch[type='checkbox'].is-unchecked-dark.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-dark.is-outlined + label:after { background: #363636; } .switch[type='checkbox'].is-primary + label .switch-active { display: none; } .switch[type='checkbox'].is-primary + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-primary:checked + label::before, .switch[type='checkbox'].is-primary:checked + label:before { background: #00d1b2; } .switch[type='checkbox'].is-primary:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-primary:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-primary.is-outlined:checked + label::before, .switch[type='checkbox'].is-primary.is-outlined:checked + label:before { background-color: transparent; border-color: #00d1b2 !important; } .switch[type='checkbox'].is-primary.is-outlined:checked + label::after, .switch[type='checkbox'].is-primary.is-outlined:checked + label:after { background: #00d1b2; } .switch[type='checkbox'].is-primary.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-primary.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-primary + label::before, .switch[type='checkbox'].is-unchecked-primary + label:before { background: #00d1b2; } .switch[type='checkbox'].is-unchecked-primary.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-primary.is-outlined + label:before { background-color: transparent; border-color: #00d1b2 !important; } .switch[type='checkbox'].is-unchecked-primary.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-primary.is-outlined + label:after { background: #00d1b2; } .switch[type='checkbox'].is-link + label .switch-active { display: none; } .switch[type='checkbox'].is-link + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-link:checked + label::before, .switch[type='checkbox'].is-link:checked + label:before { background: #485fc7; } .switch[type='checkbox'].is-link:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-link:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-link.is-outlined:checked + label::before, .switch[type='checkbox'].is-link.is-outlined:checked + label:before { background-color: transparent; border-color: #485fc7 !important; } .switch[type='checkbox'].is-link.is-outlined:checked + label::after, .switch[type='checkbox'].is-link.is-outlined:checked + label:after { background: #485fc7; } .switch[type='checkbox'].is-link.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-link.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-link + label::before, .switch[type='checkbox'].is-unchecked-link + label:before { background: #485fc7; } .switch[type='checkbox'].is-unchecked-link.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-link.is-outlined + label:before { background-color: transparent; border-color: #485fc7 !important; } .switch[type='checkbox'].is-unchecked-link.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-link.is-outlined + label:after { background: #485fc7; } .switch[type='checkbox'].is-info + label .switch-active { display: none; } .switch[type='checkbox'].is-info + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-info:checked + label::before, .switch[type='checkbox'].is-info:checked + label:before { background: #3e8ed0; } .switch[type='checkbox'].is-info:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-info:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-info.is-outlined:checked + label::before, .switch[type='checkbox'].is-info.is-outlined:checked + label:before { background-color: transparent; border-color: #3e8ed0 !important; } .switch[type='checkbox'].is-info.is-outlined:checked + label::after, .switch[type='checkbox'].is-info.is-outlined:checked + label:after { background: #3e8ed0; } .switch[type='checkbox'].is-info.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-info.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-info + label::before, .switch[type='checkbox'].is-unchecked-info + label:before { background: #3e8ed0; } .switch[type='checkbox'].is-unchecked-info.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-info.is-outlined + label:before { background-color: transparent; border-color: #3e8ed0 !important; } .switch[type='checkbox'].is-unchecked-info.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-info.is-outlined + label:after { background: #3e8ed0; } .switch[type='checkbox'].is-success + label .switch-active { display: none; } .switch[type='checkbox'].is-success + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-success:checked + label::before, .switch[type='checkbox'].is-success:checked + label:before { background: #48c78e; } .switch[type='checkbox'].is-success:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-success:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-success.is-outlined:checked + label::before, .switch[type='checkbox'].is-success.is-outlined:checked + label:before { background-color: transparent; border-color: #48c78e !important; } .switch[type='checkbox'].is-success.is-outlined:checked + label::after, .switch[type='checkbox'].is-success.is-outlined:checked + label:after { background: #48c78e; } .switch[type='checkbox'].is-success.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-success.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-success + label::before, .switch[type='checkbox'].is-unchecked-success + label:before { background: #48c78e; } .switch[type='checkbox'].is-unchecked-success.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-success.is-outlined + label:before { background-color: transparent; border-color: #48c78e !important; } .switch[type='checkbox'].is-unchecked-success.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-success.is-outlined + label:after { background: #48c78e; } .switch[type='checkbox'].is-warning + label .switch-active { display: none; } .switch[type='checkbox'].is-warning + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-warning:checked + label::before, .switch[type='checkbox'].is-warning:checked + label:before { background: #ffe08a; } .switch[type='checkbox'].is-warning:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-warning:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-warning.is-outlined:checked + label::before, .switch[type='checkbox'].is-warning.is-outlined:checked + label:before { background-color: transparent; border-color: #ffe08a !important; } .switch[type='checkbox'].is-warning.is-outlined:checked + label::after, .switch[type='checkbox'].is-warning.is-outlined:checked + label:after { background: #ffe08a; } .switch[type='checkbox'].is-warning.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-warning.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-warning + label::before, .switch[type='checkbox'].is-unchecked-warning + label:before { background: #ffe08a; } .switch[type='checkbox'].is-unchecked-warning.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-warning.is-outlined + label:before { background-color: transparent; border-color: #ffe08a !important; } .switch[type='checkbox'].is-unchecked-warning.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-warning.is-outlined + label:after { background: #ffe08a; } .switch[type='checkbox'].is-danger + label .switch-active { display: none; } .switch[type='checkbox'].is-danger + label .switch-inactive { display: inline-block; } .switch[type='checkbox'].is-danger:checked + label::before, .switch[type='checkbox'].is-danger:checked + label:before { background: #f14668; } .switch[type='checkbox'].is-danger:checked + label .switch-active { display: inline-block; } .switch[type='checkbox'].is-danger:checked + label .switch-inactive { display: none; } .switch[type='checkbox'].is-danger.is-outlined:checked + label::before, .switch[type='checkbox'].is-danger.is-outlined:checked + label:before { background-color: transparent; border-color: #f14668 !important; } .switch[type='checkbox'].is-danger.is-outlined:checked + label::after, .switch[type='checkbox'].is-danger.is-outlined:checked + label:after { background: #f14668; } .switch[type='checkbox'].is-danger.is-thin.is-outlined + label::after, .switch[type='checkbox'].is-danger.is-thin.is-outlined + label:after { box-shadow: none; } .switch[type='checkbox'].is-unchecked-danger + label::before, .switch[type='checkbox'].is-unchecked-danger + label:before { background: #f14668; } .switch[type='checkbox'].is-unchecked-danger.is-outlined + label::before, .switch[type='checkbox'].is-unchecked-danger.is-outlined + label:before { background-color: transparent; border-color: #f14668 !important; } .switch[type='checkbox'].is-unchecked-danger.is-outlined + label::after, .switch[type='checkbox'].is-unchecked-danger.is-outlined + label:after { background: #f14668; } .field-body .switch[type='checkbox'] + label { margin-top: 0.375em; }