Skip to content

Commit 5084d10

Browse files
cabutler10cabutler10
committed
fix(checkbox): styled checkbox according to zeppelin designs
1 parent e69a739 commit 5084d10

File tree

10 files changed

+1480
-50
lines changed

10 files changed

+1480
-50
lines changed

‎src/App.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ButtonPage from './elements/button/ButtonPage.jsx';
44
import TagPage from './elements/tag/TagPage.jsx';
55
import CheckboxPage from './elements/checkbox/CheckboxPage.jsx';
66
import './base_bundle_entry.scss';
7+
import './zeppelin-element-library.css';
78
// import './icons.font';
89

910
function App() {

‎src/assets/fonts/zepicons.eot

26.6 KB
Binary file not shown.

‎src/assets/fonts/zepicons.svg

Lines changed: 330 additions & 0 deletions
Loading

‎src/assets/fonts/zepicons.ttf

26.4 KB
Binary file not shown.

‎src/assets/fonts/zepicons.woff

15.7 KB
Binary file not shown.

‎src/assets/fonts/zepicons.woff2

13.2 KB
Binary file not shown.

‎src/base_bundle_entry.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@ $include-typography: true !default;
2727

2828
@import './elements/button/button';
2929
@import './elements/tag/tag';
30+
@import './elements/checkbox/checkbox';

‎src/elements/checkbox/CheckboxPage.jsx

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,54 @@ function CheckboxPage() {
66
<div className="theme-zeppelin">
77
<div className="zep-checkbox">
88
<input
9-
className="zep-checkbox--input"
9+
className="zep-checkbox__input"
1010
type="checkbox"
1111
value=""
12-
id="checkboxId"
12+
id="checkboxZep"
1313
/>
14-
<label className="zep-checkbox-label" htmlFor="checkboxId">
14+
<label className="zep-checkbox__label" htmlFor="checkboxZep">
1515
Zeppelin Checkbox
1616
</label>
1717
</div>
18+
</div>
19+
<div className="theme-cat">
20+
<div className="zep-checkbox">
21+
<input
22+
className="zep-checkbox__input"
23+
type="checkbox"
24+
value=""
25+
id="checkboxCat"
26+
/>
27+
<label className="zep-checkbox__label" htmlFor="checkboxCat">
28+
Cat Checkbox
29+
</label>
30+
</div>
31+
</div>
32+
<div className="theme-rental">
1833
<div className="zep-checkbox">
1934
<input
20-
className="zep-checkbox--input"
35+
className="zep-checkbox__input"
2136
type="checkbox"
2237
value=""
23-
id="checkboxId"
24-
disabled
38+
id="checkboxRental"
2539
/>
26-
<label className="zep-checkbox-label" htmlFor="checkboxId">
27-
Disabled Checkbox
40+
<label className="zep-checkbox__label" htmlFor="checkboxRental">
41+
Rental Checkbox
2842
</label>
2943
</div>
3044
</div>
45+
<div className="zep-checkbox">
46+
<input
47+
className="zep-checkbox__input"
48+
type="checkbox"
49+
value=""
50+
id="checkboxDisabled"
51+
disabled
52+
/>
53+
<label className="zep-checkbox__label" htmlFor="checkboxDisabled">
54+
Disabled Checkbox
55+
</label>
56+
</div>
3157
</>
3258
);
3359
}

‎src/elements/checkbox/_checkbox.scss

Lines changed: 75 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,83 @@
1-
//Checkbox - base style
2-
31
@mixin checkbox {
2+
$lineHeight: 2.125rem;
3+
$fontSize: 36px;
4+
// strip the units (expecting a px value, but remove so we've just got an int)
5+
$baseFont: ($fontSize) / ($fontSize * 0 + 1);
6+
// ensure our base is a rem val
7+
$base: ($lineHeight) / ($lineHeight * 0 + 1) * 1rem;
8+
// get our borderwidth in rems
9+
$borderWidth: (2 / (2 * 0 + 1) / $baseFont) * 1rem;
10+
$boxSize: $base/1.7;
411
.#{$prefix}checkbox {
5-
position: relative;
6-
display: block;
7-
margin-bottom: 0.5rem;
8-
border: 2px solid get('colors.gray.gray-dark.hex');
9-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
10-
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
11-
}
12-
13-
.#{$prefix}checkbox.disabled .#{$prefix}-checkbox--label {
14-
color: get('colors.gray.gray.hex');
15-
cursor: not-allowed;
16-
}
17-
18-
.#{$prefix}checkbox--label {
19-
@include themify($themes) {
20-
//color: themed('primary');
21-
color: 'orange';
22-
padding-left: 12px;
23-
margin-bottom: 0;
12+
.#{$prefix}checkbox__label {
2413
cursor: pointer;
14+
line-height: $base;
15+
position: relative;
16+
display: inline-block;
17+
padding-left: $base;
18+
font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont,
19+
Segoe UI, Open Sans, Helvetica Neue, Arial, sans-serif;
20+
margin-bottom: 0;
21+
&:before,
22+
&:after {
23+
box-sizing: border-box;
24+
line-height: $base;
25+
content: ' ';
26+
display: block;
27+
position: absolute;
28+
top: $base/4.75;
29+
left: 0;
30+
width: $boxSize;
31+
height: $boxSize;
32+
border-radius: 0;
33+
}
34+
&:before {
35+
cursor: pointer;
36+
width: ($boxSize) + $borderWidth * 2;
37+
height: ($boxSize) + $borderWidth * 2;
38+
margin: -$borderWidth;
39+
border: 2px solid get('colors.gray.gray.hex');
40+
border-radius: 0;
41+
}
2542
}
26-
}
2743

28-
.#{$prefix}checkbox--input {
29-
position: absolute;
30-
margin-top: 0.25rem;
31-
margin-left: -1.25rem;
32-
}
33-
34-
.#{$prefix}checkbox--input:only-child {
35-
position: static;
36-
}
37-
38-
.#{$prefix}checkbox--inline {
39-
display: inline-block;
40-
}
41-
42-
.#{$prefix}checkbox--inline .#{$prefix}checkbox--label {
43-
vertical-align: middle;
44-
}
45-
46-
.#{$prefix}checkbox--inline + .#{$prefix}checkbox--inline {
47-
margin-left: 0.75rem;
44+
/* hide the input element */
45+
.#{$prefix}checkbox__input {
46+
opacity: 0;
47+
&:disabled + .#{$prefix}checkbox__label:before {
48+
cursor: not-allowed;
49+
background: get('colors.gray.grayLighter.hex');
50+
border: 2px solid get('colors.gray.gray.hex');
51+
}
52+
&:disabled + .#{$prefix}checkbox__label {
53+
cursor: not-allowed;
54+
}
55+
&:checked + .#{$prefix}checkbox__label:before {
56+
font-family: zepicons;
57+
content: '\f112';
58+
//content: '\2713';
59+
display: inline-block;
60+
background: get('colors.gray.white.hex');
61+
line-height: $boxSize + $borderWidth;
62+
font-size: 18px;
63+
text-align: center;
64+
transform: scale(1);
65+
@include themify($themes) {
66+
color: themed('primary');
67+
}
68+
}
69+
&:checked:focus + .#{$prefix}checkbox__label:before {
70+
@include themify($themes) {
71+
box-shadow: 0 0 5px 1px themed('primary');
72+
background: get('colors.gray.white.hex');
73+
}
74+
}
75+
&:active + .#{$prefix}checkbox__label:before {
76+
@include themify($themes) {
77+
background: themed('hover');
78+
}
79+
}
80+
}
4881
}
4982
}
5083

0 commit comments

Comments
 (0)