ize, 40px) - 18px) / 2); left: calc((40px - 18px) / 2); /* @alternate */ left: calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2); } .mdc-checkbox .mdc-checkbox__native-control { top: calc((40px - 40px) / 2); /* @alternate */ top: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2); right: calc((40px - 40px) / 2); /* @alternate */ right: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2); left: calc((40px - 40px) / 2); /* @alternate */ left: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2); width: 40px; /* @alternate */ width: var(--mdc-checkbox-touch-target-size, 40px); height: 40px; /* @alternate */ height: var(--mdc-checkbox-touch-target-size, 40px); } .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background { border-color: rgba(0, 0, 0, 0.54); /* @alternate */ border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54)); background-color: transparent; } .mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled ~ .mdc-checkbox__background { border-color: #018786; /* @alternate */ border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); background-color: #018786; /* @alternate */ background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); } @keyframes mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786 { 0% { border-color: rgba(0, 0, 0, 0.54); /* @alternate */ border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54)); background-color: transparent; } 50% { border-color: #018786; /* @alternate */ border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); background-color: #018786; /* @alternate */ background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); } } @keyframes mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786 { 0%, 80% { border-color: #018786; /* @alternate */ border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); background-color: #018786; /* @alternate */ background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); } 100% { border-color: rgba(0, 0, 0, 0.54); /* @alternate */ border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54)); background-color: transparent; } } .mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background { animation-name: mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786; } .mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background { animation-name: mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786; } .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background { border-color: rgba(0, 0, 0, 0.38); /* @alternate */ border-color: var(--mdc-checkbox-disabled-color, rgba(0, 0, 0, 0.38)); background-color: transparent; } .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled] ~ .mdc-checkbox__background { border-color: transparent; background-color: rgba(0, 0, 0, 0.38); /* @alternate */ background-color: var(--mdc-checkbox-disabled-color, rgba(0, 0, 0, 0.38)); } .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark { color: #fff; /* @alternate */ color: var(--mdc-checkbox-ink-color, #fff); } .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark { border-color: #fff; /* @alternate */ border-color: var(--mdc-checkbox-ink-color, #fff); } .mdc-checkbox .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark { color: #fff; /* @alternate */ color: var(--mdc-checkbox-ink-color, #fff); } .mdc-checkbox .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark { border-color: #fff; /* @alternate */ border-color: var(--mdc-checkbox-ink-color, #fff); } @keyframes mdc-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 29.7833385; } 50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } 100% { stroke-dashoffset: 0; } } @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { transform: scaleX(0); } 68.2% { animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { transform: scaleX(1); } } @keyframes mdc-checkbox-checked-unchecked-checkmark-path { from { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); opacity: 1; stroke-dashoffset: 0; } to { opacity: 0; stroke-dashoffset: -29.7833385; } } @keyframes mdc-checkbox-checked-indeterminate-checkmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* @noflip */ /*rtl:ignore*/ transform: rotate(0deg); opacity: 1; } to { /* @noflip */ /*rtl:ignore*/ transform: rotate(45deg); opacity: 0; } } @keyframes mdc-checkbox-indeterminate-checked-checkmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); /* @noflip */ /*rtl:ignore*/ transform: rotate(45deg); opacity: 0; } to { /* @noflip */ /*rtl:ignore*/ transform: rotate(360deg); opacity: 1; } } @keyframes mdc-checkbox-checked-indeterminate-mixedmark { from { animation-timing-function: mdc-animation-deceleration-curve-timing-function; /* @noflip */ /*rtl:ignore*/ transform: rotate(-45deg); opacity: 0; } to { /* @noflip */ /*rtl:ignore*/ transform: rotate(0deg); opacity: 1; } } @keyframes mdc-checkbox-indeterminate-checked-mixedmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); /* @noflip */ /*rtl:ignore*/ transform: rotate(0deg); opacity: 1; } to { /* @noflip */ /*rtl:ignore*/ transform: rotate(315deg); opacity: 0; } } @keyframes mdc-checkbox-indeterminate-unchecked-mixedmark { 0% { animation-timing-function: linear; transform: scaleX(1); opacity: 1; } 32.8%, 100% { transform: scaleX(0); opacity: 0; } } .mdc-checkbox { display: inline-block; position: relative; flex: 0 0 18px; box-sizing: content-box; width: 18px; height: 18px; line-height: 0; white-space: nowrap; cursor: pointer; vertical-align: bottom; } .mdc-checkbox[hidden] { display: none; } .mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__focus-ring, .mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__focus-ring { pointer-events: none; border: 2px solid transparent; border-radius: 6px; box-sizing: content-box; position: absolute; top: 50%; /* @noflip */ /*rtl:ignore*/ left: 50%; /* @noflip */ /*rtl:ignore*/ transform: translate(-50%, -50%); height: 100%; width: 100%; } @media screen and (forced-colors: active) { .mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__focus-ring, .mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__focus-ring { border-color: CanvasText; } } .mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__focus-ring::after, .mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__focus-ring::after { content: ""; border: 2px solid transparent; border-radius: 8px; display: block; position: absolute; top: 50%; /* @noflip */ /*rtl:ignore*/ left: 50%; /* @noflip */ /*rtl:ignore*/ transform: translate(-50%, -50%); height: calc(100% + 4px); width: calc(100% + 4px); } @media screen and (forced-colors: active) { .mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__focus-ring::after, .mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__focus-ring::after { border-color: CanvasText; } } @media all and (-ms-high-contrast: none) { .mdc-checkbox .mdc-checkbox__focus-ring { display: none; } } @media screen and (forced-colors: active), (-ms-high-contrast: active) { .mdc-checkbox__mixedmark { margin: 0 1px; } } .mdc-checkbox--disabled { cursor: default; pointer-events: none; } .mdc-checkbox__background { display: inline-flex; position: absolute; align-items: center; justify-content: center; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 2px; background-color: transparent; pointer-events: none; will-change: background-color, border-color; transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); } .mdc-checkbox__checkmark { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; opacity: 0; transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1); } .mdc-checkbox--upgraded .mdc-checkbox__checkmark { opacity: 1; } .mdc-checkbox__checkmark-path { transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1); stroke: currentColor; stroke-width: 3.12px; stroke-dashoffset: 29.7833385; stroke-dasharray: 29.7833385; } .mdc-checkbox__mixedmark { width: 100%; height: 0; /* @noflip */ /*rtl:ignore*/ transform: scaleX(0) rotate(0deg); border-width: 1px; border-style: solid; opacity: 0; transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); } .mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background, .mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background, .mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background, .mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background { animation-duration: 180ms; animation-timing-function: linear; } .mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path { animation: mdc-checkbox-unchecked-checked-checkmark-path 180ms linear 0s; transition: none; } .mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark { animation: mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s; transition: none; } .mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path { animation: mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s; transition: none; } .mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark { animation: mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s; transition: none; } .mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark { animation: mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s; transition: none; } .mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark { animation: mdc-checkbox-indeterminate-checked-checkmark 500ms linear 0s; transition: none; } .mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark { animation: mdc-checkbox-indeterminate-checked-mixedmark 500ms linear 0s; transition: none; } .mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark { animation: mdc-checkbox-indeterminate-unchecked-mixedmark 300ms linear 0s; transition: none; } .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background, .mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background { transition: border-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1); } .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark-path, .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark-path, .mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background .mdc-checkbox__checkmark-path { stroke-dashoffset: 0; } .mdc-checkbox__native-control { position: absolute; margin: 0; padding: 0; opacity: 0; cursor: inherit; } .mdc-checkbox__native-control:disabled { cursor: default; pointer-events: none; } .mdc-checkbox--touch { margin: calc((48px - 40px) / 2); /* @alternate */ margin: calc((var(--mdc-checkbox-state-layer-size, 48px) - var(--mdc-checkbox-state-layer-size, 40px)) / 2); } .mdc-checkbox--touch .mdc-checkbox__native-control { top: calc((40px - 48px) / 2); /* @alternate */ top: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2); right: calc((40px - 48px) / 2); /* @alternate */ right: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2); left: calc((40px - 48px) / 2); /* @alternate */ left: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2); width: 48px; /* @alternate */ width: var(--mdc-checkbox-state-layer-size, 48px); height: 48px; /* @alternate */ height: var(--mdc-checkbox-state-layer-size, 48px); } .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark { transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 180ms 0ms cubic-bezier(0, 0, 0.2, 1); opacity: 1; } .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__mixedmark { /* @noflip */ /*rtl:ignore*/ transform: scaleX(1) rotate(-45deg); } .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark, .mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background .mdc-checkbox__checkmark { /* @noflip */ /*rtl:ignore*/ transform: rotate(45deg); opacity: 0; transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1); } .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__mixedmark, .mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background .mdc-checkbox__mixedmark { /* @noflip */ /*rtl:ignore*/ transform: scaleX(1) rotate(0deg); opacity: 1; } .mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__background, .mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark, .mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark-path, .mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__mixedmark { transition: none; } :host { outline: none; display: inline-flex; -webkit-tap-highlight-color: transparent; } :host([checked]), :host([indeterminate]) { --mdc-ripple-color: var(--mdc-theme-secondary, #018786); } .mdc-checkbox .mdc-checkbox__background::before { content: none; }