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

Commit df186fc

Browse files
nashvailnashvail
committed
Inputs: [Alpha] Added checkboxes
1 parent fa7a0ff commit df186fc

File tree

4 files changed

+93
-5
lines changed

4 files changed

+93
-5
lines changed

‎demos/inputs.html

+16
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,25 @@
99
<link rel="stylesheet" href="demos.css">
1010
</head>
1111
<body>
12+
1213
<h2>Inputs - (Size: Default)</h2>
1314

15+
<h3>Checkboxes</h3>
16+
<!-- Custom check boxes -->
17+
18+
<input id="check1" type="checkbox" class="checkbox">
19+
<label for="check1" class="checkbox-label">Choose this</label>
20+
21+
<input id="check2" type="checkbox" class="checkbox">
22+
<label for="check2" class="checkbox-label">And this</label>
23+
24+
<input id="check3" type="checkbox" class="checkbox">
25+
<label for="check3" class="checkbox-label">And this too</label>
26+
1427
<!-- Custom Radio button -->
28+
29+
<h3>Radio buttons</h3>
30+
1531
<div>
1632
<input id="radio-1" class="radiobutton" name="radio-group" type="radio" checked>
1733
<label for="radio-1" class="radiobutton-label">Second Choice</label>

‎scss/atoms/inputs/_inputs.scss

+4
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,7 @@
3131
.radiobutton {
3232
@include radiobutton();
3333
}
34+
35+
.checkbox {
36+
@include checkbox();
37+
}

‎scss/atoms/inputs/_mixins.scss

+64-4
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ $margin-label: em(map-get($inputs-label, margin));
9393

9494
/* Radio Buttons */
9595

96-
$default-border: map-deep-get($inputs-radiobutton, default-color, base);
97-
$checked-border: map-deep-get($inputs-radiobutton, checked-color, base);
96+
$radio-default-border: map-deep-get($inputs-radiobutton, default-color, base);
97+
$radio-checked-border: map-deep-get($inputs-radiobutton, checked-color, base);
9898

9999
@mixin radiobutton() {
100100
opacity: 0;
@@ -114,7 +114,7 @@ $checked-border: map-deep-get($inputs-radiobutton, checked-color, base);
114114
vertical-align: middle;
115115
width: map-get($inputs-radiobutton, width);
116116
height: map-get($inputs-radiobutton, height);
117-
box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 1px $default-border;
117+
box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 1px $radio-default-border;
118118
padding: 2px;
119119
margin-right: 10px;
120120
text-align: center;
@@ -123,7 +123,67 @@ $checked-border: map-deep-get($inputs-radiobutton, checked-color, base);
123123
}
124124

125125
&:checked + &-label:before {
126-
box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 7px $checked-border;
126+
box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), inset 0 0 0 7px $radio-checked-border;
127127
transition: box-shadow .2s;
128128
}
129129
}
130+
131+
/* Checkboxes */
132+
133+
$checkbox-default-border: map-deep-get($inputs-checkbox, default-color, base);
134+
$checkbox-checked-border: map-deep-get($inputs-checkbox, checked-color, base);
135+
136+
@mixin checkbox() {
137+
opacity: 0;
138+
position: absolute;
139+
140+
&-label {
141+
display: inline-block;
142+
vertical-align: middle;
143+
margin: 5px;
144+
cursor: pointer;
145+
position: relative;
146+
}
147+
148+
& + &-label:before {
149+
content: "";
150+
display: inline-block;
151+
vertical-align: middle;
152+
width: map-get($inputs-checkbox, width);
153+
height: map-get($inputs-checkbox, height);
154+
box-shadow: 0 2px 2px 0 rgba(0,0,0,.24);
155+
padding: 2px;
156+
border: 1px solid $checkbox-default-border;
157+
margin-right: 10px;
158+
text-align: center;
159+
border-radius: 3px;
160+
transition: background-color .1s;
161+
}
162+
163+
& + &-label:after {
164+
content: "";
165+
width: 12px;
166+
height: 6px;
167+
position: absolute;
168+
top: 9px;
169+
left: 6px;
170+
border: 3px solid #fff;
171+
border-top: none;
172+
border-right: none;
173+
background: transparent;
174+
opacity: 0;
175+
transform: rotate(-65deg);
176+
}
177+
178+
&:checked + &-label:before {
179+
background: $checkbox-checked-border;
180+
border-color: $checkbox-checked-border;
181+
transition: background-color .1s;
182+
}
183+
184+
&:checked + &-label:after {
185+
opacity: 1;
186+
transform: rotate(-45deg);
187+
transition: transform .1s;
188+
}
189+
}

‎scss/variables/inputs.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,16 @@ chassis.inputs = {
109109
"default-color": () => "colors.text",
110110
"checked-color": () => "colors.info"
111111
}
112+
},
113+
"checkbox": {
114+
name: "Styles for custom radio buttons",
115+
value: {
116+
"width": "20px",
117+
"height": "20px",
118+
"default-color": () => "colors.text",
119+
"checked-color": () => "colors.info"
120+
}
112121
}
113-
114122
};
115123
return chassis;
116124
} ) );

0 commit comments

Comments
 (0)