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

Commit

Permalink
Inputs: Added initial components with styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@nashvail
nashvail committed Jun 8, 2016
1 parent 437f2a2 commit 416f942
Show file tree
Hide file tree
Showing 4 changed files with 315 additions and 0 deletions.
121 changes: 121 additions & 0 deletions demos/inputs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!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</h2>

<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>
<input class="input" type="color">
-->
<label class="input-label">Email: </label>
<input class="input" type="email" placeholder="[email protected]">

<!-- <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="[email protected]">

<!-- <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="[email protected]">

<!-- <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="[email protected]">

<!-- <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="[email protected]">
<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>


</body>
</html>
17 changes: 17 additions & 0 deletions scss/atoms/inputs/_inputs.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*
* ==========================================================================
* Inputs
* ==========================================================================
*/

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

.input {
@include input();
}

.input-label {
@include input-label();
}
82 changes: 82 additions & 0 deletions scss/atoms/inputs/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/*
* ==========================================================================
* File : _mixins.scss
* For : Inputs
* ==========================================================================
*/

$margin: em(map-get($inputs-element, margin));
$margin-label: em(map-get($inputs-label, margin));

@mixin input() {
padding: em(map-get($inputs-element, padding));
margin: $margin;
border: map-get($inputs-element, border);
border-color: map-deep-get($inputs-element, border-color, base);
background: map-deep-get($inputs-element, background, base);
box-shadow: map-get($inputs-shadows, normal);
border-radius: em(map-get($inputs-element, border-radius));
transition: map-get($inputs-transitions, blur-shadow), map-get($inputs-transitions, blur-border-color);
font-size: em(map-get($inputs-element, font-size));
width: map-get($inputs-element, width);

&:focus,
&.focus {
@include input-focus();
}

&:disabled,
&.disabled {
@include input-disabled();
}

&:active,
&.active {
@include input-active();
}

&.error {
@include input-error();
}
}

// Input state mixins

@mixin input-focus() {
border-color: map-deep-get($inputs-focus, border-color, light);
transition: map-get($inputs-transitions, focus-shadow), map-get($inputs-transitions, focus-border-color);
outline: map-get($inputs-focus, outline);
box-shadow: map-get($inputs-shadows, focus-base), map-get($inputs-shadows, focus-spread);
}

@mixin input-disabled() {
background: map-deep-get($inputs-disabled, background, base);
box-shadow: map-get($inputs-shadows, disabled);
border-color: map-deep-get($inputs-disabled, border-color, darker);
color: map-deep-get($inputs-disabled, color, darker);
cursor: map-get($inputs-disabled, cursor);
}

@mixin input-active() {
border-color: map-deep-get($inputs-active, border-color, light);
}

@mixin input-error() {
border-color: map-deep-get($inputs-error, border-color, base);
box-shadow: map-get($inputs-shadows, error-base), map-get($inputs-shadows, error-spread);
background: rgba(map-deep-get($inputs-error, background, base), .08);
}

@mixin input-label() {
display: map-get($inputs-label, display);
max-width: map-get($inputs-label, max-width);
font-size: em(map-get($inputs-label, font-size));
font-weight: map-get($inputs-label, font-weight);
margin: $margin-label 0;

&.error {
font-size: em(map-get($inputs-label-error, font-size));
color: map-deep-get($inputs-label-error, color, base);
font-weight: map-get($inputs-label-error, font-weight);
}
}
95 changes: 95 additions & 0 deletions scss/variables/inputs.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
( function( root, factory ) {
if ( typeof define === "function" && define.amd ) {
define( [ "./chassis" ], factory );
} else if ( typeof exports === "object" ) {
module.exports = factory( require( "./chassis" ) );
} else {
root.chassis = factory( root.chassis );
}
}( this, function( chassis ) {

chassis.inputs = {
"shadows": {
name: "Styles for input shadows",
value: {
"disabled": "0 0 2px 0 rgba(0, 0, 0, 0.12)",
"normal": "0 2px 2px 0 rgba(0, 0, 0, 0.12)",
"focus-base": "0 0 8px 0 rgba(0, 0, 0, 0.08)",
"focus-spread": "0 8px 8px 0 rgba(0, 0, 0, 0.18)",
"error-base": "0 0 2px 0 rgba(198,62,54,0.24)",
"error-spread": "0 2px 2px 0 rgba(198,62,54,0.48)"
}
},
"transitions": {
name: "Transition animations",
value: {
"focus-shadow": "box-shadow .25s",
"focus-border-color": "border-color .25s",
"blur-shadow": "box-shadow .1s",
"blur-border-color": "border-color .1s"
}
},
"label": {
name: "Styles for input label",
value: {
"display": "block",
"max-width": "100%",
"font-size": "18px",
"font-weight": "600",
"margin": "8px"
}
},
"label-error": {
name: "Styles for error labels",
value: {
"font-size": "14px",
color: () => "colors.error",
"font-weight": "400"
}
},
"element": {
name: "Generic styles for single line inputs",
value: {
"padding": "15px",
"margin": "0px",
"border": "1px solid",
"border-color": () => "colors.text",
"border-radius": "3px",
"font-size": "18px",
"width": "100%",
"background": () => "colors.background"
}
},
"disabled": {
name: "Styles for disabled input",
value: {
"border-color": () => "colors.default",
"background": () => "colors.default",
"color": () => "colors.default",
"cursor": "not-allowed"
}
},
"focus": {
name: "Styles for in focus inputs",
value: {
"border-color": () => "colors.info",
"outline": "none"
}
},
"active": {
name: "Styles for active inputs",
value: {
"border-color": () => "colors.info"
}
},
"error": {
name: "Styles for error state of inputs",
value: {
"border-color": () => "colors.error",
"background": () => "colors.error"
}
}

};
return chassis;
} ) );

0 comments on commit 416f942

Please sign in to comment.