New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Input ~ input example #892
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
@font-face { | ||
font-family: 'Fira Sans'; | ||
src: local('FiraSans-Regular'), | ||
url('/media/fonts/FiraSans-Regular.woff2') format('woff2'); | ||
} | ||
|
||
legend { | ||
background-color: #000; | ||
color: #ffffff; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: Code Style: Prefer short form when applicable |
||
padding: 3px 6px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: Code Style: indent with 4 spaces |
||
} | ||
|
||
input, | ||
label { | ||
width: 43%; | ||
} | ||
|
||
input { | ||
margin: 0.5rem 0; | ||
padding: 0.5rem; | ||
border-radius: 4px; | ||
border: 1px solid #ddd; | ||
outline: none; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: Code Style: indent with 4 spaces. Do not remove outline as it negatively impacts accessibility, unless there is alternate styling provider for the |
||
} | ||
|
||
label { | ||
display: inline-block; | ||
font-size: .8rem; | ||
} | ||
|
||
input:invalid + span:after { | ||
content: '✖'; | ||
color: red; | ||
padding-left: 5px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: Code Style: indent with 4 spaces |
||
} | ||
|
||
input:valid + span:after { | ||
content: '✓'; | ||
color: green; | ||
padding-left: 5px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: Code Style: indent with 4 spaces |
||
} | ||
|
||
.warning { | ||
font-size: 0.65rem; | ||
color: #e67d09; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: Code Style: indent with 4 spaces |
||
} | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @schalkneethling Removed outline: none, 0.5rem => .5rem, spacing fixes, #ffffff => #fff in CSS |
||
.submit { | ||
width: 92%; | ||
margin: 0 auto; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: Code Style: indent with 4 spaces |
||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<fieldset> | ||
<legend>Input</legend> | ||
<form> | ||
<label for="display-name"> Name: | ||
<span class="warning">*(Allows only alphabets.)</span> | ||
</label> | ||
<input type="text" name="display-name" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This element is missing an |
||
pattern="[A-Za-z\s]+" | ||
maxlength="5" minlength="2" value="Aa" required> | ||
<span class="validity"></span> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this element being used? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @schalkneethling This element is being used in CSS to show validation. |
||
|
||
<label for="readonly-ip">ReadOnly:</label> | ||
<input type="text" name="readonly-ip" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This element is missing an |
||
placeholder="I'm read only." readonly /> | ||
|
||
<label for="disabled-ip">Disabled:</label> | ||
<input type="text" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This element is missing an |
||
name="disabled-ip" | ||
value="I am disabled" | ||
disabled /> | ||
<br/> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Code style: Do not break between form element with |
||
<input type="submit" class="submit" value="Submit"/> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nit: Code style: Space before closing |
||
</form> | ||
</fieldset> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Code Style: indent with 4 spaces