Skip to content

Commit 73ae8ec

Browse files
authored
Remove autocheck + status-indicator styles (#2390)
* Remove autocheck styles * Remove `status-indicator` * Create beige-badgers-perform.md * Lint
1 parent 3ceb196 commit 73ae8ec

File tree

2 files changed

+5
-104
lines changed

2 files changed

+5
-104
lines changed
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Remove `autocheck` + `status-indicator` styles

src/forms/form-validation.scss

Lines changed: 0 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,6 @@
1-
// Needs refactoring
21
// stylelint-disable selector-no-qualifying-type, selector-max-type
3-
dl.form-group > dd, // TODO: Deprecate
4-
.form-group > .form-group-body {
5-
.form-control {
6-
&.is-autocheck-loading,
7-
&.is-autocheck-successful,
8-
&.is-autocheck-errored {
9-
// stylelint-disable-next-line primer/spacing
10-
padding-right: 30px; // Leave some space for our validation icons
11-
}
12-
13-
&.is-autocheck-loading {
14-
background-image: url('/images/spinners/octocat-spinner-16px.gif');
15-
}
16-
17-
&.is-autocheck-successful {
18-
background-image: url('/images/modules/ajax/success.png');
19-
}
20-
21-
&.is-autocheck-errored {
22-
background-image: url('/images/modules/ajax/error.png');
23-
}
24-
}
25-
}
26-
27-
// Retinization of form validation icons that aren't octicons yet
28-
@include retina-media-query {
29-
dl.form-group > dd, // TODO: Deprecate
30-
.form-group > .form-group-body {
31-
.form-control {
32-
&.is-autocheck-loading,
33-
&.is-autocheck-successful,
34-
&.is-autocheck-errored {
35-
background-size: 16px 16px;
36-
}
37-
38-
&.is-autocheck-loading {
39-
background-image: url('/images/spinners/octocat-spinner-32.gif');
40-
}
41-
42-
&.is-autocheck-successful {
43-
background-image: url('/images/modules/ajax/success@2x.png');
44-
}
45-
46-
&.is-autocheck-errored {
47-
background-image: url('/images/modules/ajax/error@2x.png');
48-
}
49-
}
50-
}
51-
}
522

533
// Inline verification
54-
// This overrides primer's inline form stuff
55-
.status-indicator {
56-
display: inline-block;
57-
width: 16px;
58-
height: 16px;
59-
// stylelint-disable-next-line primer/spacing
60-
margin-left: 5px;
61-
62-
.octicon {
63-
display: none;
64-
}
65-
}
66-
67-
.status-indicator-success {
68-
// Override primer
69-
&::before {
70-
content: '';
71-
}
72-
73-
.octicon-check {
74-
display: inline-block;
75-
color: var(--color-success-fg);
76-
fill: var(--color-success-fg);
77-
}
78-
79-
.octicon-x {
80-
display: none;
81-
}
82-
}
83-
84-
.status-indicator-failed {
85-
// Override primer
86-
&::before {
87-
content: '';
88-
}
89-
90-
.octicon-check {
91-
display: none;
92-
}
93-
94-
.octicon-x {
95-
display: inline-block;
96-
color: var(--color-danger-fg);
97-
fill: var(--color-danger-fg);
98-
}
99-
}
100-
101-
.status-indicator-loading {
102-
width: 16px;
103-
background-image: url('/images/spinners/octocat-spinner-32-EAF2F5.gif');
104-
background-repeat: no-repeat;
105-
background-position: 0 0;
106-
background-size: 16px;
107-
}
1084

1095
.inline-form {
1106
display: inline-block;

0 commit comments

Comments
 (0)