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

Commit 73d9452

Browse files
nashvailnashvail
committed
Inputs: Added xs size and code improvements
1 parent 5946e34 commit 73d9452

File tree

4 files changed

+56
-16
lines changed

4 files changed

+56
-16
lines changed

‎demos/demos.css

+1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ body {
77
ul {
88
margin: 0;
99
padding: 0;
10+
list-style-type: none;
1011
}

‎demos/inputs.html

+24-12
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
</head>
1111
<body>
1212

13-
<h3>Inputs</h3>
13+
<h2>Chassis - Inputs</h2>
14+
15+
<h3>Checkboxes and Radios</h3>
1416
<label class="input-label input-label-md input-label-block">Make multiple choices</label>
1517
<!-- Custom check boxes -->
1618

@@ -44,25 +46,25 @@ <h3>Inputs</h3>
4446
<br/>
4547

4648
<label class="input-label input-label-md input-label-block">Make a choice</label>
47-
<ul style="list-style-type:none">
49+
<ul>
4850
<li>
49-
<input id="radio-1" class="radio" name="radio-group" type="radio" checked>
50-
<label for="radio-1" class="input-label">Second Choice</label>
51+
<input id="radio-2-1" class="radio" name="radio-group-2" type="radio" checked>
52+
<label for="radio-2-1" class="input-label">Second Choice</label>
5153
</li>
5254

5355
<li>
54-
<input id="radio-2" class="radio" name="radio-group" type="radio" checked>
55-
<label for="radio-2" class="input-label">Third Choice</label>
56+
<input id="radio-2-2" class="radio" name="radio-group-2" type="radio" checked>
57+
<label for="radio-2-2" class="input-label">Third Choice</label>
5658
</li>
5759

5860
<li>
59-
<input id="radio-3" class="radio" name="radio-group" type="radio" checked>
60-
<label for="radio-3" class="input-label">Fourth Choice</label>
61+
<input id="radio-2-3" class="radio" name="radio-group-2" type="radio" checked>
62+
<label for="radio-2-3" class="input-label">Fourth Choice</label>
6163
</li>
6264

6365
<li>
64-
<input id="radio-4" class="radio" name="radio-group" type="radio" checked>
65-
<label for="radio-4" class="input-label">Fifth Choice</label>
66+
<input id="radio-2-4" class="radio" name="radio-group-2" type="radio" checked>
67+
<label for="radio-2-4" class="input-label">Fifth Choice</label>
6668
</li>
6769

6870
</ul>
@@ -71,8 +73,16 @@ <h3>Inputs</h3>
7173

7274
<h3>Inputs - Inline</h3>
7375

74-
<table>
75-
<tr style="margin-bottom:10px">
76+
<table style="width:100%">
77+
<tr>
78+
<td style="text-align: right">
79+
<label class="input-label input-label-xs">Name </label>
80+
</td>
81+
<td>
82+
<input class="input input-xs" type="text" placeholder="Enter your Name"/>
83+
</td>
84+
</tr>
85+
<tr>
7686
<td style="text-align: right">
7787
<label class="input-label">Name </label>
7888
</td>
@@ -98,6 +108,8 @@ <h3>Inputs - Inline</h3>
98108
</tr>
99109
</table>
100110

111+
<h3>Inputs</h3>
112+
101113
<label class="input-label">Name </label>
102114
<input class="input" type="text" placeholder="Enter your Name"/>
103115

‎scss/atoms/inputs/_mixins.scss

+19-4
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@
77

88
$margin: em(map-get($inputs-input-full-width, margin));
99
$margin-label: em(map-get($inputs-label, margin));
10+
$input-padding: em(map-get($inputs-input-full-width, padding));
1011

1112
@mixin input() {
12-
padding: em(map-get($inputs-input-full-width, padding));
13+
padding: $input-padding 0 $input-padding $input-padding;
1314
margin: $margin;
1415
border: map-get($inputs-input-full-width, border);
1516
border-color: map-deep-get($inputs-input-full-width, border-color, light);
@@ -44,6 +45,10 @@ $margin-label: em(map-get($inputs-label, margin));
4445
}
4546

4647
/* Sizes */
48+
&.input-xs {
49+
@include input-xs();
50+
}
51+
4752
&.input-md {
4853
@include input-md();
4954
}
@@ -55,6 +60,10 @@ $margin-label: em(map-get($inputs-label, margin));
5560

5661
/* Input Sizes */
5762

63+
@mixin input-xs() {
64+
font-size: em(map-get($inputs-input-xs, font-size));
65+
}
66+
5867
@mixin input-md() {
5968
font-size: em(map-get($inputs-input-md, font-size));
6069
}
@@ -111,6 +120,10 @@ $margin-label: em(map-get($inputs-label, margin));
111120
@include input-label-lg();
112121
}
113122

123+
&.input-label-xs {
124+
@include input-label-xs();
125+
}
126+
114127
&.error {
115128
@include input-label-error();
116129
}
@@ -132,7 +145,9 @@ $margin-label: em(map-get($inputs-label, margin));
132145
font-size: em(map-get($inputs-label-lg, font-size));
133146
}
134147

135-
148+
@mixin input-label-xs() {
149+
font-size: em(map-get($inputs-label-xs, font-size));
150+
}
136151

137152
/* Radio Buttons */
138153

@@ -157,7 +172,7 @@ $radio-checked-border: map-deep-get($inputs-radio, checked-color, base);
157172
vertical-align: middle;
158173
width: map-get($inputs-radio, width);
159174
height: map-get($inputs-radio, height);
160-
box-shadow: inset 0 0 0 1px $radio-default-border;
175+
box-shadow: inset 0 0 0 1px $radio-default-border, inset 0 2px 2px 0 rgba(0,0,0,.10);
161176
padding: 2px;
162177
margin-right: 10px;
163178
text-align: center;
@@ -194,7 +209,7 @@ $checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base);
194209
vertical-align: middle;
195210
width: map-get($inputs-checkbox, width);
196211
height: map-get($inputs-checkbox, height);
197-
// box-shadow: 0 2px 2px 0 rgba(0,0,0,.24);
212+
box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.10);
198213
padding: 2px;
199214
border: 1px solid $checkbox-default-border;
200215
margin-right: 10px;

‎scss/variables/inputs.js

+12
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ chassis.inputs = {
4747
"font-size": "36px"
4848
}
4949
},
50+
"label-xs": {
51+
name: "Styles for extra small input labels",
52+
value: {
53+
"font-size": "14px"
54+
}
55+
},
5056
"label-error": {
5157
name: "Styles for error labels",
5258
value: {
@@ -117,6 +123,12 @@ chassis.inputs = {
117123
"font-size": "36px"
118124
}
119125
},
126+
"input-xs": {
127+
name: "Styles for extra small sized inputs",
128+
value: {
129+
"font-size": "14px"
130+
}
131+
},
120132
"radio": {
121133
name: "Styles for custom radio buttons",
122134
value: {

0 commit comments

Comments
 (0)