diff --git a/.changeset/beige-badgers-perform.md b/.changeset/beige-badgers-perform.md new file mode 100644 index 0000000000..41fe6b8e8a --- /dev/null +++ b/.changeset/beige-badgers-perform.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +Remove `autocheck` + `status-indicator` styles diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss index e0c27b94ba..83c82fbdbd 100644 --- a/src/forms/form-validation.scss +++ b/src/forms/form-validation.scss @@ -1,110 +1,6 @@ -// Needs refactoring // stylelint-disable selector-no-qualifying-type, selector-max-type -dl.form-group > dd, // TODO: Deprecate -.form-group > .form-group-body { - .form-control { - &.is-autocheck-loading, - &.is-autocheck-successful, - &.is-autocheck-errored { - // stylelint-disable-next-line primer/spacing - padding-right: 30px; // Leave some space for our validation icons - } - - &.is-autocheck-loading { - background-image: url('/images/spinners/octocat-spinner-16px.gif'); - } - - &.is-autocheck-successful { - background-image: url('/images/modules/ajax/success.png'); - } - - &.is-autocheck-errored { - background-image: url('/images/modules/ajax/error.png'); - } - } -} - -// Retinization of form validation icons that aren't octicons yet -@include retina-media-query { - dl.form-group > dd, // TODO: Deprecate - .form-group > .form-group-body { - .form-control { - &.is-autocheck-loading, - &.is-autocheck-successful, - &.is-autocheck-errored { - background-size: 16px 16px; - } - - &.is-autocheck-loading { - background-image: url('/images/spinners/octocat-spinner-32.gif'); - } - - &.is-autocheck-successful { - background-image: url('/images/modules/ajax/success@2x.png'); - } - - &.is-autocheck-errored { - background-image: url('/images/modules/ajax/error@2x.png'); - } - } - } -} // Inline verification -// This overrides primer's inline form stuff -.status-indicator { - display: inline-block; - width: 16px; - height: 16px; - // stylelint-disable-next-line primer/spacing - margin-left: 5px; - - .octicon { - display: none; - } -} - -.status-indicator-success { - // Override primer - &::before { - content: ''; - } - - .octicon-check { - display: inline-block; - color: var(--color-success-fg); - fill: var(--color-success-fg); - } - - .octicon-x { - display: none; - } -} - -.status-indicator-failed { - // Override primer - &::before { - content: ''; - } - - .octicon-check { - display: none; - } - - .octicon-x { - display: inline-block; - color: var(--color-danger-fg); - fill: var(--color-danger-fg); - } -} - -.status-indicator-loading { - width: 16px; - background-image: url('/images/spinners/octocat-spinner-32-EAF2F5.gif'); - background-repeat: no-repeat; - background-position: 0 0; - background-size: 16px; -} .inline-form { display: inline-block;