@use 'sass:math'; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex; $icon-dir: '../icons' !default; $ontario-touch-target-size: 36px; $ontario-touch-target-size-mobile: 40px; $ontario-checkboxes-size: 28px; $ontario-checkboxes-size-mobile: 32px; $ontario-checkbox-border-size: 2px; .ontario-checkboxes { margin-bottom: spacing.$spacing-7; max-width: globalVariables.$standard-width; } .ontario-checkboxes__item { position: relative; margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4; padding: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-6; min-height: $ontario-checkboxes-size; box-sizing: content-box; &:last-of-type { margin: spacing.$spacing-0; } @media screen and (max-width: breakpoints.$small-breakpoint) { padding: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-7; min-height: $ontario-checkboxes-size-mobile; } } .ontario-checkboxes__input { cursor: pointer; margin: spacing.$spacing-0; position: absolute; top: -$ontario-checkbox-border-size; left: -$ontario-checkbox-border-size; opacity: 0; width: $ontario-touch-target-size; height: $ontario-touch-target-size; z-index: zIndex.$ontario-z-index-above-low; // prevent blue default highlighting of input on android -webkit-tap-highlight-color: transparent; @media screen and (max-width: breakpoints.$small-breakpoint) { width: $ontario-touch-target-size-mobile; height: $ontario-touch-target-size-mobile; } } .ontario-checkboxes__label { display: inline-block; cursor: pointer; line-height: lineheight.$ontario-line-height-7; margin: spacing.$spacing-1 spacing.$spacing-0; padding: spacing.$spacing-0 spacing.$spacing-4; width: auto; white-space: normal; @media screen and (max-width: breakpoints.$small-breakpoint) { margin: 0.33rem spacing.$spacing-0; } // [ ] Check box styles &:before { content: ''; border: $ontario-checkbox-border-size solid colours.$ontario-colour-black; border-radius: globalVariables.$global-radius; position: absolute; top: 0; left: 0; width: $ontario-checkboxes-size-mobile; height: $ontario-checkboxes-size-mobile; transition: border 0.1s ease-in-out; display: block; @media screen and (min-width: breakpoints.$small-breakpoint) { width: $ontario-checkboxes-size; height: $ontario-checkboxes-size; } } // ✔✔✔ Check mark styles ✔✔✔ &:after { content: ''; background-image: url('#{$icon-dir}/ontario-checkbox-background-no-width.svg'); background-repeat: no-repeat; height: $ontario-checkboxes-size + $ontario-checkbox-border-size; width: $ontario-checkboxes-size + $ontario-checkbox-border-size; position: absolute; top: math.div($ontario-checkbox-border-size, 2); left: math.div($ontario-checkbox-border-size, 2); right: 0; bottom: 0; opacity: 0; display: block; @media screen and (max-width: breakpoints.$small-breakpoint) { height: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size; width: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size; } } } .ontario-checkboxes__input:focus + .ontario-checkboxes__label:before { -moz-box-shadow: 0 0 0 4px colours.$ontario-colour-focus; -webkit-box-shadow: 0 0 0 4px colours.$ontario-colour-focus; box-shadow: 0 0 0 4px colours.$ontario-colour-focus; outline: 4px solid transparent; transition: all 0.1s ease-in-out; } .ontario-checkboxes__input:checked + .ontario-checkboxes__label:after { opacity: 1; } .ontario-checkboxes__input:checked + .ontario-checkboxes__label:before { background-color: colours.$ontario-colour-black; }