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 4 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
295 changes: 295 additions & 0 deletions demos/inputs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,295 @@
<!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>Inputs - (Size: Default)</h2>

<h3>Checkboxes</h3>
<!-- Custom check boxes -->
Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

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

@sfrisk sfrisk Jun 28, 2016

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

@sfrisk sfrisk Jun 28, 2016

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="checkbox-label">Choose this</label>

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

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

<!-- Custom Radio button -->

<h3>Radio buttons</h3>

Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

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 radio inputs

<div>
Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

not sure how I feel these just being random empty non classed divs

<input id="radio-1" class="radiobutton" name="radio-group" type="radio" checked>
Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

need 'value' attribute

Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

All of these values are checked, but only one radio element can be checked. That's why the demo is defaulting to the last radio button.

<label for="radio-1" class="radiobutton-label">Second Choice</label>
</div>

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

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

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


Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

Need label for new section

<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">Color: </label>
Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

Is there a reason why these are commented out?

Copy link
Contributor Author

@nashvail nashvail Jun 28, 2016

Choose a reason for hiding this comment

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

Color, date e.t.c inputs are not supported in many browsers. Uncommenting them would upset Travis

Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

I would remove them then, rather than having them commented out.

<input class="input" type="color">
-->
<label class="input-label">Email: </label>
<input class="input" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input" type="number" placeholder="XX">
<h2>Inputs (Disabled) </h2>
<label class="input-label">Name: </label>
<input class="input disabled" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input disabled" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input disabled" type="color">
-->
<label class="input-label">Email: </label>
<input class="input disabled" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input disabled" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input disabled" type="number" placeholder="XX">
<h2>Inputs (Focus) </h2>
<label class="input-label">Name: </label>
<input class="input focus" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input focus" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input focus" type="color">
-->
<label class="input-label">Email: </label>
<input class="input focus" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input focus" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input focus" type="number" placeholder="XX">
<h2>Inputs (Active) </h2>
<label class="input-label">Name: </label>
<input class="input active" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input active" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input active" type="color">
-->
<label class="input-label">Email: </label>
<input class="input active" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input active" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input active" type="number" placeholder="XX">
<h2>Inputs (Error) </h2>
<label class="input-label">Name: </label>
<input class="input error" type="text" placeholder="Enter your Name">
<label class="input-label error">We were unable to process your input.</label>
<label class="input-label">Password: </label>
<input class="input error" type="password" placeholder="Choose a password">
<label class="input-label error">We were unable to process your input.</label>
<!-- <label class="input-label">Color: </label>
<input class="input error" type="color">
<label class="input-label error">We were unable to process your input.</label>
-->
<label class="input-label">Email: </label>
<input class="input error" type="email" placeholder="name@example.com">
<label class="input-label error">We were unable to process your input.</label>
<!-- <label class="input-label">Date: </label>
<input class="input error" type="date">
<label class="input-label error">We were unable to process your input.</label>
-->
<label class="input-label">Amount: </label>
<input class="input error" type="number" placeholder="XX">
<label class="input-label error">We were unable to process your input.</label>
<h2>Inputs - (Size: Small)</h2>
<label class="input-label">Name: </label>
<input class="input input-sm" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input input-sm" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input" type="color">
-->
<label class="input-label">Email: </label>
<input class="input input-sm" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input input-sm" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input input-sm" type="number" placeholder="XX">
<h2>Inputs (Disabled) </h2>
<label class="input-label">Name: </label>
<input class="input disabled input-sm" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input disabled input-sm" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input disabled input-sm" type="color">
-->
<label class="input-label">Email: </label>
<input class="input disabled input-sm" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input disabled input-sm" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input disabled input-sm" type="number" placeholder="XX">
<h2>Inputs (Focus) </h2>
<label class="input-label">Name: </label>
<input class="input focus input-sm" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input focus input-sm" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input focus input-sm" type="color">
-->
<label class="input-label">Email: </label>
<input class="input focus input-sm" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input focus input-sm" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input focus input-sm" type="number" placeholder="XX">
<h2>Inputs (Active) </h2>
<label class="input-label">Name: </label>
<input class="input active input-sm" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input active input-sm" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input active input-sm" type="color">
-->
<label class="input-label">Email: </label>
<input class="input active input-sm" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input active input-sm" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input active input-sm" type="number" placeholder="XX">
<h2>Inputs (Error) </h2>
<label class="input-label">Name: </label>
<input class="input error input-sm" type="text" placeholder="Enter your Name">
<label class="input-label error">We were unable to process your input.</label>
<label class="input-label">Password: </label>
<input class="input error input-sm" type="password" placeholder="Choose a password">
<label class="input-label error">We were unable to process your input.</label>
<!-- <label class="input-label">Color: </label>
<input class="input error input-sm" type="color">
<label class="input-label error">We were unable to process your input.</label>
-->
<label class="input-label">Email: </label>
<input class="input error input-sm" type="email" placeholder="name@example.com">
<label class="input-label error">We were unable to process your input.</label>
<!-- <label class="input-label">Date: </label>
<input class="input error input-sm" type="date">
<label class="input-label error">We were unable to process your input.</label>
-->
<label class="input-label">Amount: </label>
<input class="input error input-sm" type="number" placeholder="XX">
<label class="input-label error">We were unable to process your input.</label>
<h2>Inputs - (Size: Large)</h2>
<label class="input-label">Name: </label>
<input class="input input-lg" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input input-lg" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input" type="color">
-->
<label class="input-label">Email: </label>
<input class="input input-lg" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input input-lg" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input input-lg" type="number" placeholder="XX">
<h2>Inputs (Disabled) </h2>
<label class="input-label">Name: </label>
<input class="input disabled input-lg" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input disabled input-lg" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input disabled input-lg" type="color">
-->
<label class="input-label">Email: </label>
<input class="input disabled input-lg" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input disabled input-lg" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input disabled input-lg" type="number" placeholder="XX">
<h2>Inputs (Focus) </h2>
<label class="input-label">Name: </label>
<input class="input focus input-lg" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input focus input-lg" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input focus input-lg" type="color">
-->
<label class="input-label">Email: </label>
<input class="input focus input-lg" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input focus input-lg" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input focus input-lg" type="number" placeholder="XX">
<h2>Inputs (Active) </h2>
<label class="input-label">Name: </label>
<input class="input active input-lg" type="text" placeholder="Enter your Name">
<label class="input-label">Password: </label>
<input class="input active input-lg" type="password" placeholder="Choose a password">
<!-- <label class="input-label">Color: </label>
<input class="input active input-lg" type="color">
-->
<label class="input-label">Email: </label>
<input class="input active input-lg" type="email" placeholder="name@example.com">
<!-- <label class="input-label">Date: </label>
<input class="input active input-lg" type="date">
-->
<label class="input-label">Amount: </label>
<input class="input active input-lg" type="number" placeholder="XX">
<h2>Inputs (Error) </h2>
<label class="input-label">Name: </label>
<input class="input error input-lg" type="text" placeholder="Enter your Name">
<label class="input-label error">We were unable to process your input.</label>
<label class="input-label">Password: </label>
<input class="input error input-lg" type="password" placeholder="Choose a password">
<label class="input-label error">We were unable to process your input.</label>
<!-- <label class="input-label">Color: </label>
<input class="input error input-lg" type="color">
<label class="input-label error">We were unable to process your input.</label>
-->
<label class="input-label">Email: </label>
<input class="input error input-lg" type="email" placeholder="name@example.com">
<label class="input-label error">We were unable to process your input.</label>
<!-- <label class="input-label">Date: </label>
<input class="input error input-lg" type="date">
<label class="input-label error">We were unable to process your input.</label>
-->
<label class="input-label">Amount: </label>
<input class="input error input-lg" type="number" placeholder="XX">
<label class="input-label error">We were unable to process your input.</label>
</body>
</html>
37 changes: 37 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,37 @@
/*
* ==========================================================================
* Inputs
* ==========================================================================
*/

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

.input {
@include input();
}

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

/* Input Sizes */
Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

Do we want any other input sizes? we have a larger variety of buttons. I could see smaller inputs being needed. Also the small size seems to be closer to the 'medium' button size.


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

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

/* Checkboxes and RadioButtons (IDK why radiobuttons remind me of radiohead yo!) */
Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

take out note about radio head

Radio buttons is two words


.radiobutton {
Copy link
Contributor

@sfrisk sfrisk Jun 28, 2016

Choose a reason for hiding this comment

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

could make this just .radio, since it's not really a button

@include radiobutton();
}

.checkbox {
@include checkbox();
}
Loading