diff --git a/components/inputs/sass/checkbox.scss b/components/inputs/sass/checkbox.scss deleted file mode 100644 index c0e16def5f7..00000000000 --- a/components/inputs/sass/checkbox.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use "../../colors/colors.scss"; - -@mixin d2l-input-checkbox() { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-position: center center; - background-repeat: no-repeat; - background-size: 1.2rem 1.2rem; - border-radius: 0.3rem; - border-style: solid; - box-sizing: border-box; - display: inline-block; - height: 1.2rem; - margin: 0; - padding: 0; - vertical-align: middle; - width: 1.2rem; - &:checked { - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23494C4E%22%20d%3D%22M8.4%2016.6c.6.6%201.5.6%202.1%200l8-8c.6-.6.6-1.5%200-2.1-.6-.6-1.5-.6-2.1%200l-6.9%207-1.9-1.9c-.6-.6-1.5-.6-2.1%200-.6.6-.6%201.5%200%202.1l2.9%202.9z%22/%3E%3C/svg%3E%0A"); - } - &, - &:hover:disabled { - background-color: colors.$d2l-color-regolith; - border-color: colors.$d2l-color-galena; - border-width: 1px; - } - &:hover, - &:focus { - border-color: colors.$d2l-color-celestine; - border-width: 2px; - outline: none; - } - &:disabled { - opacity: 0.5; - } -} diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked-focus.png b/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked-focus.png deleted file mode 100644 index d8c7b2c7a03..00000000000 Binary files a/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked-focus.png and /dev/null differ diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked.png b/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked.png deleted file mode 100644 index 6f2ec7b3043..00000000000 Binary files a/components/inputs/test/golden/input-checkbox/chromium/sass-default-checked.png and /dev/null differ diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked-focus.png b/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked-focus.png deleted file mode 100644 index a8ce357f69b..00000000000 Binary files a/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked-focus.png and /dev/null differ diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked.png b/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked.png deleted file mode 100644 index 0cf10743276..00000000000 Binary files a/components/inputs/test/golden/input-checkbox/chromium/sass-default-unchecked.png and /dev/null differ diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-checked.png b/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-checked.png deleted file mode 100644 index f220d7b0f13..00000000000 Binary files a/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-checked.png and /dev/null differ diff --git a/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-unchecked.png b/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-unchecked.png deleted file mode 100644 index 456bf466f4e..00000000000 Binary files a/components/inputs/test/golden/input-checkbox/chromium/sass-disabled-unchecked.png and /dev/null differ diff --git a/components/inputs/test/input-checkbox.vdiff.js b/components/inputs/test/input-checkbox.vdiff.js index e35adbd4746..ddb4bab7624 100644 --- a/components/inputs/test/input-checkbox.vdiff.js +++ b/components/inputs/test/input-checkbox.vdiff.js @@ -1,14 +1,9 @@ import '../input-checkbox.js'; import { expect, fixture, focusElem, hoverElem, html, oneEvent } from '@brightspace-ui/testing'; -import { loadSass, unloadSass } from '../../../test/load-sass.js'; import { checkboxFixtures } from './input-checkbox-fixtures.js'; import { inlineHelpFixtures } from './input-shared-content.js'; describe('d2l-input-checkbox', () => { - - before(loadSass); - after(unloadSass); - [false, true].forEach(skeleton => { [false, true].forEach(disabled => { const checkedStates = ['checked', 'unchecked']; @@ -108,28 +103,4 @@ describe('d2l-input-checkbox', () => { }); }); - - describe('sass', () => { - [false, true].forEach(disabled => { - [true, false].forEach(checked => { - - const name = `${disabled ? 'disabled' : 'default'}-${checked ? 'checked' : 'unchecked'}`; - const checkboxFixture = html``; - - it(name, async() => { - const elem = await fixture(checkboxFixture); - await expect(elem).to.be.golden(); - }); - if (!disabled) { - it(`${name}-focus`, async() => { - const elem = await fixture(checkboxFixture); - await focusElem(elem); - await expect(elem).to.be.golden(); - }); - } - - }); - }); - }); - }); diff --git a/test/sass.scss b/test/sass.scss index f2177c2b32e..9068c0f48ce 100644 --- a/test/sass.scss +++ b/test/sass.scss @@ -1,5 +1,4 @@ @use "../components/colors/colors.scss"; -@use "../components/inputs/sass/checkbox.scss"; @use "../components/inputs/sass/label.scss"; @use "../components/inputs/sass/radio.scss"; @use "../components/inputs/sass/select.scss"; @@ -35,9 +34,6 @@ .d2l-test-heading-4 { @include typography.d2l-heading-4(); } -.d2l-test-input-checkbox { - @include checkbox.d2l-input-checkbox(); -} .d2l-test-input-label { @include label.d2l-input-label(); }