Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

New Component: Inputs #164

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

New Component: Inputs #164

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
416f942
Inputs: Added initial components with styles
nashvail Jun 8, 2016
6bcf58e
Inputs: Added two new input sizes
nashvail Jun 9, 2016
fa7a0ff
Inputs: [Alpha] Added radio buttons
nashvail Jun 16, 2016
df186fc
Inputs: [Alpha] Added checkboxes
nashvail Jun 18, 2016
5946e34
Inputs: new styles plus sizes
nashvail Jul 26, 2016
73d9452
Inputs: Added xs size and code improvements
nashvail Jul 26, 2016
ad6dd09
Inputs: added multiple sizes, removed table layout
nashvail Jul 30, 2016
796c302
Build: Fixed normalize import
nashvail Oct 26, 2016
aa81f47
Inputs: Added import to lint.scss
nashvail Oct 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions demos/demos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,9 @@ body {
margin: 3em auto;
padding: 0 1em;
}

ul {
margin: 0;
padding: 0;
list-style-type: none;
}
204 changes: 204 additions & 0 deletions demos/inputs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Chassis - Inputs</title>
<meta name="description" content="Button skeleton for styling">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/css/chassis.css">
<link rel="stylesheet" href="demos.css">
</head>
<body>

<h2>Chassis - Inputs</h2>

<h3>Checkboxes and Radios</h3>
<label class="input-label input-label-md input-label-block">Make multiple choices</label>
<!-- Custom check boxes -->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are these inline but radio buttons aren't?


<input id="check1" type="checkbox" class="checkbox">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need a fieldset with a legend for this group of checkboxes

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need 'name' and 'value' attributes for checkboxes

<label for="check1" class="input-label">Choose this</label>

<input id="check2" type="checkbox" class="checkbox">
<label for="check2" class="input-label">And this</label>

<input id="check3" type="checkbox" class="checkbox">
<label for="check3" class="input-label">And this too</label>

<br/>
<br/>

<!-- Custom Radio button -->
<label class="input-label input-label-md input-label-block">Make a choice</label>
<input id="radio-1" class="radio" name="radio-group" type="radio" checked>
<label for="radio-1" class="input-label">Second Choice</label>

<input id="radio-2" class="radio" name="radio-group" type="radio" checked>
<label for="radio-2" class="input-label">Third Choice</label>

<input id="radio-3" class="radio" name="radio-group" type="radio" checked>
<label for="radio-3" class="input-label">Fourth Choice</label>

<input id="radio-4" class="radio" name="radio-group" type="radio" checked>
<label for="radio-4" class="input-label">Fifth Choice</label>

<br/>
<br/>

<label class="input-label input-label-md input-label-block">Make a choice</label>
<ul>
<li>
<input id="radio-2-1" class="radio" name="radio-group-2" type="radio" checked>
<label for="radio-2-1" class="input-label">Second Choice</label>
</li>

<li>
<input id="radio-2-2" class="radio" name="radio-group-2" type="radio" checked>
<label for="radio-2-2" class="input-label">Third Choice</label>
</li>

<li>
<input id="radio-2-3" class="radio" name="radio-group-2" type="radio" checked>
<label for="radio-2-3" class="input-label">Fourth Choice</label>
</li>

<li>
<input id="radio-2-4" class="radio" name="radio-group-2" type="radio" checked>
<label for="radio-2-4" class="input-label">Fifth Choice</label>
</li>

</ul>



<h3>Inputs - Inline</h3>

<table style="width:100%">
<tr>
<td style="text-align: right">
<label class="input-label input-label-xs">Name </label>
</td>
<td>
<input class="input input-xs" type="text" placeholder="Enter your Name"/>
</td>
</tr>
<tr>
<td style="text-align: right">
<label class="input-label">Name </label>
</td>
<td>
<input class="input" type="text" placeholder="Enter your Name"/>
</td>
</tr>
<tr>
<td style="text-align: right">
<label class="input-label input-label-md">Name </label>
</td>
<td>
<input class="input input-md" type="text" placeholder="Enter your Name"/>
</td>
</tr>
<tr>
<td style="text-align: right">
<label class="input-label input-label-lg">Name </label>
</td>
<td>
<input class="input input-lg" type="text" placeholder="Enter your Name"/>
</td>
</tr>
</table>

<h3>Inputs</h3>

<label class="input-label">Name </label>
<input class="input" type="text" placeholder="Enter your Name"/>

<label class="input-label">Password </label>
<input class="input" type="password" placeholder="Choose a password"/>

<label class="input-label">Email </label>
<input class="input" type="email" placeholder="[email protected]"/>

<label class="input-label">Amount </label>
<input class="input" type="number" placeholder="XX"/>

<br/>
<br/>



<h3>Inputs (Disabled) </h3>

<label class="input-label input-label-sm">Name </label>
<input class="input disabled" type="text" placeholder="Enter your Name" disabled/>

<label class="input-label input-label-sm">Password </label>
<input class="input disabled" type="password" placeholder="Choose a password" disabled/>

<label class="input-label input-label-sm">Email </label>
<input class="input disabled" type="email" placeholder="[email protected]" disabled/>

<label class="input-label input-label-sm">Amount </label>
<input class="input disabled" type="number" placeholder="XX" disabled/>

<h3>Inputs (Readonly) </h3>

<label class="input-label input-label-sm">Name </label>
<input class="input readonly" type="text" placeholder="Enter your Name" value="Tester" readonly/>

<label class="input-label input-label-sm">Password </label>
<input class="input readonly" type="password" placeholder="Choose a password" readonly/>

<label class="input-label input-label-sm">Email </label>
<input class="input readonly" type="email" placeholder="[email protected]" readonly/>

<label class="input-label input-label-sm">Amount </label>
<input class="input readonly" type="number" placeholder="XX" readonly/>

<h3>Inputs (Focus) </h3>

<label class="input-label input-label-sm">Name </label>
<input class="input focus" type="text" placeholder="Enter your Name"/>

<label class="input-label input-label-sm">Password </label>
<input class="input focus" type="password" placeholder="Choose a password"/>

<label class="input-label input-label-sm">Email </label>
<input class="input focus" type="email" placeholder="[email protected]"/>

<label class="input-label input-label-sm">Amount </label>
<input class="input focus" type="number" placeholder="XX"/>

<h3>Inputs (Active) </h3>

<label class="input-label input-label-sm">Name </label>
<input class="input active" type="text" placeholder="Enter your Name"/>

<label class="input-label input-label-sm">Password </label>
<input class="input active" type="password" placeholder="Choose a password"/>

<label class="input-label input-label-sm">Email </label>
<input class="input active" type="email" placeholder="[email protected]"/>

<label class="input-label input-label-sm">Amount </label>
<input class="input active" type="number" placeholder="XX"/>

<h3>Inputs (Error) </h3>

<label class="input-label error">Name </label>
<input class="input error" type="text" placeholder="Enter your Name"/>
<label class="input-label input-label-block error">We were unable to process your input.</label>

<label class="input-label error">Password </label>
<input class="input error" type="password" placeholder="Choose a password"/>
<label class="input-label input-label-block error">We were unable to process your input.</label>

<label class="input-label error">Email </label>
<input class="input error" type="email" placeholder="[email protected]"/>
<label class="input-label input-label-block error">We were unable to process your input.</label>

<label class="input-label error">Amount </label>
<input class="input error" type="number" placeholder="XX"/>
<label class="input-label input-label-block error">We were unable to process your input.</label>
</body>
</html>
25 changes: 25 additions & 0 deletions scss/atoms/inputs/_inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
* ==========================================================================
* Inputs
* ==========================================================================
*/

@import
"dist/chassis",
"mixins";

.input {
@include input();
}

.input-label {
@include input-label();
}

.radio {
@include radio();
}

.checkbox {
@include checkbox();
}
Loading