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

Commit 398e46f

Browse files
nashvailnashvail
committed
Input: Alpha styling
1 parent 437f2a2 commit 398e46f

File tree

7 files changed

+133
-1
lines changed

7 files changed

+133
-1
lines changed

‎demos/inputs/inputs.css

Whitespace-only changes.

‎demos/inputs/inputs.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Chassis - Inputs</title>
6+
<meta name="description" content="Button skeleton for styling">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="../../dist/css/chassis.css">
9+
<link rel="stylesheet" href="../demos.css">
10+
<link rel="stylesheet" href="./inputs.css">
11+
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,700italic" rel="stylesheet">
12+
</head>
13+
<body>
14+
<h1>Inputs</h1>
15+
<input type="text" placeholder="Enter your name" disabled>
16+
<input type="text" placeholder="Enter your name">
17+
</body>
18+
</html>

‎scss/atoms/inputs/_inputs.scss

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* ==========================================================================
3+
* Inputs
4+
* ==========================================================================
5+
*/
6+
7+
@import
8+
"dist/chassis",
9+
"mixins";
10+
11+
input[type=text],
12+
input[type=url],
13+
input[type=tel],
14+
input[type=number],
15+
input[type=color],
16+
input[type=email],
17+
input[type=search],
18+
input[type=password] {
19+
@include input-normal();
20+
&:focus {
21+
@include input-focus();
22+
}
23+
24+
&:active {
25+
// @include input-active();
26+
}
27+
28+
&:disabled {
29+
@include input-disabled();
30+
}
31+
}

‎scss/atoms/inputs/_mixins.scss

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
* ==========================================================================
3+
* File : _mixins.scss
4+
* For : Inputs
5+
* ==========================================================================
6+
*/
7+
8+
@mixin input-normal() {
9+
padding: em(map-get($inputs-single-line, padding));
10+
margin: em(map-get($inputs-single-line, margin));
11+
border: map-get($inputs-single-line, border);
12+
box-shadow: map-get($inputs-shadows, normal);
13+
border-radius: em(map-get($inputs-single-line, border-radius));
14+
font-size: em(16px);
15+
width: 100%;
16+
}
17+
18+
@mixin input-focus() {
19+
box-shadow: map-get($inputs-shadows, focus);
20+
}
21+
22+
@mixin input-disabled() {
23+
background: map-get($inputs-disabled, background);
24+
box-shadow: map-get($inputs-shadows, disabled);
25+
border: map-get($inputs-disabled, border);
26+
color: map-get($inputs-disabled, color);
27+
}

‎scss/style.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
@import
1111
"atoms/icons/icons",
1212
"atoms/typography/typography",
13-
"atoms/buttons/buttons";
13+
"atoms/buttons/buttons",
14+
"atoms/inputs/inputs";
1415

1516
@import
1617
"views/main";

‎scss/variables/colors.js

+8
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,14 @@ chassis.colors = {
7575
value: {
7676
"base": "#fff"
7777
}
78+
},
79+
"grey": {
80+
name: "Shades of grey",
81+
value: {
82+
"lighter": "#FEF9F9",
83+
"light": "#D2CECE",
84+
"black": "#000000"
85+
}
7886
}
7987
};
8088
return chassis;

‎scss/variables/inputs.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
( function( root, factory ) {
2+
if ( typeof define === "function" && define.amd ) {
3+
define( [ "./chassis" ], factory );
4+
} else if ( typeof exports === "object" ) {
5+
module.exports = factory( require( "./chassis" ) );
6+
} else {
7+
root.chassis = factory( root.chassis );
8+
}
9+
}( this, function( chassis ) {
10+
11+
chassis.inputs = {
12+
"shadows": {
13+
name: "Styles for input shadows",
14+
value: {
15+
"disabled": "none",
16+
"normal": "none",
17+
"focus": "0px 0px 4px 0px rgba(0,0,0,0.24)",
18+
}
19+
},
20+
"single-line": {
21+
name: "Generic styles for single line inputs",
22+
value: {
23+
"padding": "10px",
24+
"margin": "8px",
25+
"border": "1px solid " + chassis.colors.grey.value.black,
26+
"background": chassis.colors.background.value.base,
27+
"border-radius": "3px"
28+
}
29+
},
30+
"disabled": {
31+
name: "Styles for disabled input",
32+
value: {
33+
"border": "1px solid " + chassis.colors.grey.value.light,
34+
"background": chassis.colors.grey.value.lighter,
35+
"color": chassis.colors.grey.value.light
36+
}
37+
},
38+
"focus": {
39+
name: "Styles for in focus inputs",
40+
value: {
41+
"border": "1px solid " + chassis.colors.primary.value.base,
42+
"background": chassis.colors.background.value.base
43+
}
44+
}
45+
};
46+
return chassis;
47+
} ) );

0 commit comments

Comments
 (0)