Skip to content

Commit

Permalink
Remove autocheck + status-indicator styles (#2390)
Browse files Browse the repository at this point in the history
* Remove autocheck styles

* Remove `status-indicator`

* Create beige-badgers-perform.md

* Lint
  • Loading branch information
simurai authored Feb 24, 2023
1 parent 3ceb196 commit 73ae8ec
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 104 deletions.
5 changes: 5 additions & 0 deletions .changeset/beige-badgers-perform.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Remove `autocheck` + `status-indicator` styles
104 changes: 0 additions & 104 deletions src/forms/form-validation.scss
Original file line number Diff line number Diff line change
@@ -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/[email protected]');
}

&.is-autocheck-errored {
background-image: url('/images/modules/ajax/[email protected]');
}
}
}
}

// 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;
Expand Down

0 comments on commit 73ae8ec

Please sign in to comment.