|
1 | | -// Needs refactoring |
2 | 1 | // 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 | | -} |
52 | 2 |
|
53 | 3 | // 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 | | -} |
108 | 4 |
|
109 | 5 | .inline-form { |
110 | 6 | display: inline-block; |
|
0 commit comments