/*! * # Fomantic-UI 2.9.3 - Checkbox * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * */ /******************************* Checkbox *******************************/ /* -------------- Content --------------- */ .ui.checkbox { position: relative; display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: none; vertical-align: baseline; font-style: normal; min-height: 17px; font-size: 1em; line-height: 17px; min-width: 17px; } /* HTML Checkbox */ .ui.checkbox input[type="checkbox"], .ui.checkbox input[type="radio"] { cursor: pointer; position: absolute; top: 0; left: 0; opacity: 0 !important; outline: none; z-index: 3; width: 17px; height: 17px; } .ui.checkbox label { cursor: auto; position: relative; display: block; outline: none; font-size: 1em; } .ui.checkbox:not(.invisible) label { padding-left: 1.85714em; } .ui.checkbox label::before { position: absolute; top: 0; left: 0; width: 17px; height: 17px; content: ""; background: #fff; border-radius: 0.21428571rem; transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; border: 1px solid #d4d4d5; } /* -------------- Checkmark --------------- */ .ui.checkbox label::after { position: absolute; font-size: 14px; top: 0; left: 0; width: 17px; height: 17px; text-align: center; opacity: 0; color: rgba(0, 0, 0, 0.87); transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; } .ui.right.aligned.checkbox label { padding-left: 0; padding-right: 1.85714em; } .ui.right.aligned.checkbox label::after, .ui.right.aligned.checkbox label::before { right: 0; left: auto; } /* -------------- Label --------------- */ /* Inside */ .ui.checkbox label, .ui.checkbox + label { color: rgba(0, 0, 0, 0.87); transition: color 0.1s ease; } /* Outside */ .ui.checkbox + label { vertical-align: middle; } /******************************* States *******************************/ /* -------------- Hover --------------- */ .ui.checkbox label:hover::before { background: #fff; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox:not(.invisible) label:hover, .ui.checkbox:not(.invisible) + label:hover { color: rgba(0, 0, 0, 0.8); } /* -------------- Down --------------- */ .ui.checkbox label:active::before { background: #f9fafb; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox label:active::after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox:not(.invisible) input:active ~ label { color: rgba(0, 0, 0, 0.95); } /* -------------- Focus --------------- */ .ui.checkbox input:focus ~ label::before { background: #fff; border-color: #96c8da; } .ui.checkbox input:focus ~ label::after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox:not(.invisible) input:focus ~ label { color: rgba(0, 0, 0, 0.95); } /* -------------- Active --------------- */ .ui.checkbox input:checked ~ label::before { background: #fff; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox input:checked ~ label::after { opacity: 1; color: rgba(0, 0, 0, 0.95); } /* -------------- Indeterminate --------------- */ .ui.checkbox input:not([type="radio"]):indeterminate ~ label::before { background: #fff; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox input:not([type="radio"]):indeterminate ~ label::after { opacity: 1; color: rgba(0, 0, 0, 0.95); } .ui.indeterminate.toggle.checkbox input:not([type="radio"]):indeterminate ~ label::before { background: rgba(0, 0, 0, 0.15); } .ui.indeterminate.toggle.checkbox input:not([type="radio"]) ~ label::after { left: 1.075rem; } .ui.right.aligned.indeterminate.toggle.checkbox input:not([type="radio"]) ~ label::after { left: auto; right: 1.075rem; } /* -------------- Active Focus --------------- */ .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before, .ui.checkbox input:checked:focus ~ label::before { background: #fff; border-color: #96c8da; } .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after, .ui.checkbox input:checked:focus ~ label::after { color: rgba(0, 0, 0, 0.95); } /* -------------- Read-Only --------------- */ .ui.read-only.checkbox, .ui.read-only.checkbox label { cursor: default; pointer-events: none; } /* -------------- Disabled --------------- */ .ui.disabled.checkbox label, .ui.checkbox input[disabled] ~ label { cursor: default; opacity: 0.5; color: #000000; pointer-events: none; } /* -------------- Hidden --------------- */ /* Initialized checkbox moves input below element to prevent manually triggering */ .ui.checkbox input.hidden { z-index: -1; } /* Selectable Label */ .ui.checkbox input + label[for], .ui.checkbox input.hidden + label { cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /******************************* Types *******************************/ /* -------------- Radio --------------- */ .ui.radio.checkbox { min-height: 15px; } .ui.radio.checkbox label { padding-left: 1.85714em; } /* Box */ .ui.radio.checkbox label::before { content: ""; transform: none; width: 15px; height: 15px; border-radius: 500rem; top: 1px; left: 0; } /* Bullet */ .ui.radio.checkbox label::after { border: none; content: "" !important; line-height: 15px; top: 1px; left: 0; width: 15px; height: 15px; border-radius: 500rem; transform: scale(0.46666667); background-color: rgba(0, 0, 0, 0.87); } /* Focus */ .ui.radio.checkbox input:focus ~ label::before { background-color: #fff; } .ui.radio.checkbox input:focus ~ label::after { background-color: rgba(0, 0, 0, 0.95); } /* Indeterminate */ .ui.radio.checkbox input:indeterminate ~ label::after { opacity: 0; } /* Active */ .ui.radio.checkbox input:checked ~ label::before { background-color: #fff; } .ui.radio.checkbox input:checked ~ label::after { background-color: rgba(0, 0, 0, 0.95); } /* Active Focus */ .ui.radio.checkbox input:focus:checked ~ label::before { background-color: #fff; } .ui.radio.checkbox input:focus:checked ~ label::after { background-color: rgba(0, 0, 0, 0.95); } /* -------------- Slider --------------- */ .ui.slider.checkbox { min-height: 1.25rem; } /* Input */ .ui.slider.checkbox input { width: 3.5rem; height: 1.25rem; } /* Label */ .ui.slider.checkbox label { padding-left: 4.5rem; line-height: 1rem; color: rgba(0, 0, 0, 0.4); } /* Line */ .ui.slider.checkbox label::before { display: block; position: absolute; content: ""; transform: none; border: none !important; left: 0; z-index: 1; top: 0.4rem; background-color: rgba(0, 0, 0, 0.05); width: 3.5rem; height: 0.21428571rem; border-radius: 500rem; transition: background 0.3s ease; } /* Handle */ .ui.slider.checkbox label::after { background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: "" !important; opacity: 1; z-index: 2; border: none; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: -0.25rem; left: 0; transform: none; border-radius: 500rem; transition: left 0.3s ease; } /* Focus */ .ui.slider.checkbox input:focus ~ label::before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Hover */ .ui.slider.checkbox label:hover { color: rgba(0, 0, 0, 0.8); } .ui.slider.checkbox label:hover::before { background: rgba(0, 0, 0, 0.15); } /* Active */ .ui.slider.checkbox input:checked ~ label { color: rgba(0, 0, 0, 0.95); } .ui.slider.checkbox input:checked ~ label::before { background-color: #545454; } .ui.slider.checkbox input:checked ~ label::after { left: 2rem; } /* Active Focus */ .ui.slider.checkbox input:focus:checked ~ label { color: rgba(0, 0, 0, 0.95); } .ui.slider.checkbox input:focus:checked ~ label::before { background-color: #000000; } .ui.right.aligned.slider.checkbox label { padding-left: 0; padding-right: 4.5rem; } .ui.right.aligned.slider.checkbox label::after { left: auto; right: 2rem; transition: right 0.3s ease; } .ui.right.aligned.slider.checkbox input:checked ~ label::after { left: auto; right: 0; } /* -------------- Toggle --------------- */ .ui.toggle.checkbox { min-height: 1.5rem; } /* Input */ .ui.toggle.checkbox input { width: 3.5rem; height: 1.5rem; } /* Label */ .ui.toggle.checkbox label { min-height: 1.5rem; padding-left: 4.5rem; color: rgba(0, 0, 0, 0.87); } .ui.toggle.checkbox label { padding-top: 0.15em; } /* Switch */ .ui.toggle.checkbox label::before { display: block; position: absolute; content: ""; z-index: 1; transform: none; border: none; top: 0; background: rgba(0, 0, 0, 0.05); box-shadow: none; width: 3.5rem; height: 1.5rem; border-radius: 500rem; } /* Handle */ .ui.toggle.checkbox label::after { background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: "" !important; opacity: 1; z-index: 2; border: none; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: 0; left: 0; border-radius: 500rem; transition: background 0.3s ease, left 0.3s ease; } .ui.toggle.checkbox input ~ label::after { left: -0.05rem; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; } /* Focus */ .ui.toggle.checkbox input:focus ~ label::before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Hover */ .ui.toggle.checkbox label:hover::before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Active */ .ui.toggle.checkbox input:checked ~ label { color: rgba(0, 0, 0, 0.95); } .ui.toggle.checkbox input:checked ~ label::before { background-color: #2185d0; } .ui.toggle.checkbox input:checked ~ label::after { left: 2.15rem; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; } /* Active Focus */ .ui.toggle.checkbox input:focus:checked ~ label { color: rgba(0, 0, 0, 0.95); } .ui.toggle.checkbox input:focus:checked ~ label::before { background-color: #0d71bb; } .ui.right.aligned.toggle.checkbox label { padding-left: 0; padding-right: 4.5rem; } .ui.right.aligned.toggle.checkbox input ~ label::after { left: auto; right: 2.15rem; transition: background 0.3s ease, right 0.3s ease; } .ui.right.aligned.toggle.checkbox input:checked ~ label::after { left: auto; right: -0.05rem; } /******************************* Variations *******************************/ /* -------------- Fitted --------------- */ .ui.ui.fitted.checkbox label { padding-left: 0; } .ui.fitted.toggle.checkbox { width: 3.5rem; } .ui.fitted.slider.checkbox { width: 3.5rem; } /* -------------- Inverted --------------- */ .ui.ui.ui.inverted.checkbox label, .ui.ui.ui.inverted.checkbox + label { color: rgba(255, 255, 255, 0.9); } /* Hover */ .ui.ui.inverted.checkbox label:hover { color: #ffffff; } .ui.inverted.checkbox label:hover::before { border-color: rgba(34, 36, 38, 0.5); } /* Slider Label */ .ui.inverted.slider.checkbox label { color: rgba(255, 255, 255, 0.5); } /* Slider Line */ .ui.ui.inverted.slider.checkbox label::before { background-color: rgba(255, 255, 255, 0.5); } /* Slider Hover */ .ui.ui.inverted.slider.checkbox label:hover::before { background: rgba(255, 255, 255, 0.7); } /* Slider Active */ .ui.ui.inverted.slider.checkbox input:checked ~ label { color: #ffffff; } .ui.ui.inverted.slider.checkbox input:checked ~ label::before { background-color: rgba(255, 255, 255, 0.8); } /* Slider Active Focus */ .ui.ui.inverted.slider.checkbox input:focus:checked ~ label { color: #ffffff; } .ui.ui.inverted.slider.checkbox input:focus:checked ~ label::before { background-color: rgba(255, 255, 255, 0.8); } /* Toggle Switch */ .ui.ui.inverted.toggle.checkbox label::before { background-color: rgba(255, 255, 255, 0.9); } /* Toggle Hover */ .ui.ui.inverted.toggle.checkbox label:hover::before { background: #ffffff; } /* Toggle Active */ .ui.ui.inverted.toggle.checkbox input:checked ~ label { color: #ffffff; } .ui.ui.inverted.toggle.checkbox input:checked ~ label::before { background-color: #2185d0; } /* Toggle Active Focus */ .ui.ui.inverted.toggle.checkbox input:focus:checked ~ label { color: #ffffff; } .ui.ui.inverted.toggle.checkbox input:focus:checked ~ label::before { background-color: #0d71bb; } /* -------------- Invisible --------------- */ .ui.invisible.checkbox:not(.compact) { display: block; } .ui.invisible.checkbox input { left: -99999px; position: absolute; } .ui.invisible.checkbox label::before, .ui.invisible.checkbox label::after { display: none; } .ui.invisible.checkbox label { transition: all 0.1s ease; } .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label { background: transparent; border-color: transparent; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; color: inherit; } .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked):not(:hover):focus + label:not(.image) { box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset; } .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label.image, .basic.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label { box-shadow: none; } .ui.invisible.checkbox input:not(:checked) + label.image { opacity: 0.5; filter: grayscale(1); } .ui.invisible.checkbox input:not(:checked):not(:hover):focus + label.image { opacity: 0.75; } .ui.invisible.checkbox input:not(:checked)[disabled] + label.image, .disabled.ui.invisible.checkbox input:not(:checked) + label.image { opacity: 0.25; } /* -------------------- Size --------------------- */ .ui.mini.checkbox { font-size: 0.78571429em; } .ui.tiny.checkbox { font-size: 0.85714286em; } .ui.small.checkbox { font-size: 0.92857143em; } .ui.large.checkbox { font-size: 1.14285714em; } .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after, .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::after, .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before, .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::before { transform: scale(1.14285714); transform-origin: left; } .ui.large.form .checkbox.radio label::before, .ui.large.checkbox.radio label::before { transform: scale(1.14285714); transform-origin: left; } .ui.large.form .checkbox.radio label::after, .ui.large.checkbox.radio label::after { transform: scale(0.57142857); transform-origin: left; left: 0.33571429em; } .ui.big.checkbox { font-size: 1.28571429em; } .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after, .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::after, .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before, .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::before { transform: scale(1.28571429); transform-origin: left; } .ui.big.form .checkbox.radio label::before, .ui.big.checkbox.radio label::before { transform: scale(1.28571429); transform-origin: left; } .ui.big.form .checkbox.radio label::after, .ui.big.checkbox.radio label::after { transform: scale(0.64285714); transform-origin: left; left: 0.37142857em; } .ui.huge.checkbox { font-size: 1.42857143em; } .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after, .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::after, .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before, .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::before { transform: scale(1.42857143); transform-origin: left; } .ui.huge.form .checkbox.radio label::before, .ui.huge.checkbox.radio label::before { transform: scale(1.42857143); transform-origin: left; } .ui.huge.form .checkbox.radio label::after, .ui.huge.checkbox.radio label::after { transform: scale(0.71428571); transform-origin: left; left: 0.40714286em; } .ui.massive.checkbox { font-size: 1.71428571em; } .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after, .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::after, .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before, .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::before { transform: scale(1.71428571); transform-origin: left; } .ui.massive.form .checkbox.radio label::before, .ui.massive.checkbox.radio label::before { transform: scale(1.71428571); transform-origin: left; } .ui.massive.form .checkbox.radio label::after, .ui.massive.checkbox.radio label::after { transform: scale(0.85714286); transform-origin: left; left: 0.47857143em; } /******************************* Theme Overrides *******************************/ @font-face { font-family: Checkbox; src: url("data:application/font-woff;base64,d09GRgABAAAAAAR8AA0AAAAABtwAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEYAAAABoAAAAcgbCWJ0dERUYAAARIAAAAFwAAABgAJQAAT1MvMgAAAZgAAABAAAAAYA8SBD9jbWFwAAAB9AAAAFMAAAFc71zo6Wdhc3AAAARAAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAADJAAABVHshwGBoZWFkAAABMAAAAC4AAAA2Bj3tWWhoZWEAAAFgAAAAHQAAACQHfQPIaG10eAAAAdgAAAAZAAAAHg56AEVsb2NhAAACSAAAABIAAAASAQoAjG1heHAAAAGAAAAAGAAAACAACgAvbmFtZQAAAygAAADnAAABp5xOC4Fwb3N0AAAEEAAAADAAAABaHRtWW3icY2BkYGBgYmDgqbAVjee3+crAzcIAAhc3XilHppl3M+cBKQ6QWgYGAAHnCVsAAHicY2BkYGA+8P8AAwMLAwgw72ZgZEAF7ABaJgNOAAAAeJxjYGRgYOBg0GUA0QwMTAxoAAAFtQA6eJxjYGYWYpzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgF0AQYHBgYXjAxH/h/gMGB+QCIx8CIJKvAwAgAIOcKW3icY2GAAMZQCM0ExCwMDK7MqiAeAAqXAM4AAAB4nN2NwQ2AMAwDL00pHYJH52AQ9n/w6BbFCS9WwJFlO3IUwHl5YAQuJctcOaVdU6TGmGWt7IxJuHXnvmcrnLPR2GWb6NnF4rrwhT5U/o0Hf5EJGAAAAAAAAAgACAAQABgASABsAKoAAHichY09CsJAEIVndiG2gyQ7IASJIbHQyvyIiFhZpBE8iNsIeiVvYOFx7FPbKE6yUcHGgZ23jzd8DxDeowAWCv77Dez0Vd1hAIB+D714NMa0yNdYZrMhum0CfaWnT4bpeSPaEjOd8djIltTBNBlhSGzES3Jqb5oW6UOrE1WBL7/A73lxNBqnK8znZRbNWMgJET8qJhlWF1HV3zvXSceBSifawrTjTLrd0uI3c4lFu4UcYvbh1/KsIaodUayx7Kxr+wb8Y+EFi+YsngAAAHicfc5BSsNAGMXxf9q0agURFy50M3shlOoNikIXddGFa5N0SEvLDKQp2KUH8AxuXXkkz+JL+NYJJPzmffNmAlzxS0L7JJxzYx5wxoN5qPzZnMrv5hGXfJrHyr/NE+74UytJL5Rcdye0Huiue/NQ+aM5lV/NI27ZmsfKv8wTnvhhzgZPyY6CyAfMN77cFVFaaVBxZE9OraWvjvtc6Kn0jN40qDnoVyIBx4yMqWJfH7YxuFk27a2/dLVGxUpbQndYrrVnrazgpO9C1chSb7s3UymGxlU++Dpv/NoVJ7co4zLGkPEPj0VARQB4nGNgYsAPOBgYGJkYmBiZGZgZWRhZGdnYS/MyDYAAShuCaFcLCB9Iw/hGAOPdCuMAAQAB//8AD3icY2BkYGDgAWIBIGYCYhYIDQACOwAmAHicY2BgYGQAgns+by1A9MWNV8phNABQ5wfrAAA=") format("woff"); } /* Checkmark */ .ui.checkbox label::after { font-family: Checkbox; } /* Checked */ .ui.checkbox input:checked ~ label::after { content: "\e800"; } /* Indeterminate */ .ui.checkbox input:indeterminate ~ label::after { font-size: 12px; content: "\e801"; } /* UTF Reference .check::before { content: '\e800'; } .dash::before { content: '\e801'; } .plus::before { content: '\e802'; } */ /******************************* Site Overrides *******************************/