Skip to content

Commit eb3b7a0

Browse files
wintondeshongwintondeshong
committed
Added checkbox button component
1 parent 491ae9c commit eb3b7a0

14 files changed

Lines changed: 337 additions & 2 deletions

‎src/assets/scss/4-elements/__elements.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@
1212

1313
@import "anchors";
1414
@import "buttons";
15+
@import "checkboxes";

‎src/assets/scss/4-elements/_checkboxes.scss‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.e-checkbox {
2+
@include font-style(
3+
$font-primary,
4+
"small",
5+
get-color("primary", "black"),
6+
400,
7+
20px
8+
);
9+
@include padding-left(36px);
10+
@include margin(2px, 0px);
11+
display: block;
12+
position: relative;
13+
cursor: pointer;
14+
-webkit-user-select: none;
15+
-moz-user-select: none;
16+
-ms-user-select: none;
17+
user-select: none;
18+
19+
&.-disabled {
20+
cursor: not-allowed;
21+
}
22+
23+
&:hover input ~ .e-checkbox__checkmark {
24+
background-color: #ccc;
25+
}
26+
27+
input {
28+
position: absolute;
29+
opacity: 0;
30+
cursor: pointer;
31+
height: 0;
32+
width: 0;
33+
34+
&:checked ~ .e-checkbox__checkmark:after {
35+
display: block;
36+
}
37+
38+
&:focus ~ .e-checkbox__checkmark {
39+
border-color: get-color-neutral("dark-text");
40+
}
41+
}
42+
43+
&__checkmark {
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
height: 20px;
48+
width: 20px;
49+
border: 1px solid #bdc4c9;
50+
box-sizing: border-box;
51+
border-radius: 5px;
52+
53+
&:after {
54+
content: "";
55+
position: absolute;
56+
display: none;
57+
}
58+
59+
&:after {
60+
left: 7px;
61+
top: 4px;
62+
width: 5px;
63+
height: 10px;
64+
border: solid get-color("neutral", "dark-text");
65+
border-width: 0 3px 3px 0;
66+
-webkit-transform: rotate(45deg);
67+
-ms-transform: rotate(45deg);
68+
transform: rotate(45deg);
69+
}
70+
}
71+
}

‎src/assets/scss/6-components/__components.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
COMPONENTS
33
\*------------------------------------*/
44

5-
@import "atoms/__atoms";
6-
// "molecules/__molecules", "organisms/__organisms", "pages/__pages", "templates/__templates";
5+
@import "atoms/__atoms", "molecules/__molecules";
6+
// "organisms/__organisms", "pages/__pages", "templates/__templates";

‎src/assets/scss/6-components/atoms/__atoms.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
ATOMS
33
\*------------------------------------*/
44
@import "buttons";
5+
@import "checkbox-button";

‎src/assets/scss/6-components/atoms/_checkbox-button.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.c-checkbox-button {
2+
@include margin-bottom(24px);
3+
@include padding(8px, 16px);
4+
display: inline-flex;
5+
align-items: center;
6+
background: get-color-neutral("white");
7+
box-shadow: 0px 1px 0px get-color-neutral("30");
8+
border: 1px solid get-color-accents("blue-dark");
9+
border-radius: $border-radius-large;
10+
color: get-color-accents("blue-dark");
11+
12+
&.-checked {
13+
background: get-color-accents("blue-dark");
14+
color: get-color-neutral("white");
15+
path {
16+
fill: get-color-neutral("white");
17+
}
18+
}
19+
20+
&:focus-within,
21+
&:hover {
22+
box-shadow: 0 0 0 3px rgba(0, 176, 202, 0.4);
23+
}
24+
25+
+ .c-checkbox-button {
26+
@include margin-left(16px);
27+
28+
@include respond-to("phone") {
29+
margin-left: 0;
30+
}
31+
}
32+
33+
.c-icon {
34+
@include margin-right(16px);
35+
}
36+
37+
path {
38+
fill: get-color-neutral("30");
39+
}
40+
}

‎src/assets/scss/6-components/molecules/__molecules.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*------------------------------------*\
2+
MOLECULES
3+
\*------------------------------------*/
4+
@import "form-fields";
5+
@import "forms";

‎src/assets/scss/6-components/molecules/_form-fields.scss‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.c-form-field {
2+
@include margin-bottom(20px);
3+
4+
&__required {
5+
color: get-color-status("info");
6+
}
7+
8+
label {
9+
@include font-style(
10+
$font-primary,
11+
"small",
12+
get-color-neutral("90"),
13+
400,
14+
18px
15+
);
16+
}
17+
18+
.e-checkbox {
19+
@include rem-fallback("line-height", 20px);
20+
}
21+
22+
input:not([type="checkbox"]),
23+
.c-select,
24+
select,
25+
textarea {
26+
@include margin-top(5px);
27+
display: block;
28+
width: 100%;
29+
}
30+
31+
&.-password {
32+
@include clearfix;
33+
34+
button {
35+
@include font-style($font-primary, "small", #0e7fe7, 400, 18px);
36+
37+
float: right;
38+
border: none;
39+
background: none;
40+
41+
&:before {
42+
@include margin-right(5px);
43+
@include font-style($family: $font-icon);
44+
@include rem-fallback("top", 2px);
45+
position: relative;
46+
// @extend .c-icon.-eye;
47+
}
48+
}
49+
}
50+
&.-invalid {
51+
label {
52+
color: get-color-primary("error");
53+
}
54+
input:not([type="checkbox"]) {
55+
@include form-field-error-styles();
56+
}
57+
}
58+
59+
&.-search {
60+
position: relative;
61+
> input[type="text"] {
62+
@include padding-right(45px);
63+
margin-top: 0;
64+
}
65+
> button {
66+
position: absolute;
67+
top: 0;
68+
right: 0;
69+
width: 45px;
70+
height: 100%;
71+
border-radius: 0 5px 5px 0;
72+
padding: 0;
73+
}
74+
}
75+
76+
&__bottom {
77+
display: flex;
78+
79+
&__errors {
80+
@include margin-top(8px);
81+
@include margin-right(8px);
82+
flex-grow: 1;
83+
font-style: italic;
84+
85+
label {
86+
display: block;
87+
color: get-color-status("error");
88+
}
89+
}
90+
91+
&__character-count {
92+
@include margin-top(8px);
93+
text-align: right;
94+
color: get-color-neutral("90");
95+
font-size: get-font-size("xsmall");
96+
}
97+
}
98+
}

‎src/assets/scss/6-components/molecules/_forms.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.c-form {
2+
> .c-form-field {
3+
@include margin-bottom(25px);
4+
}
5+
> .c-button {
6+
width: 108px;
7+
}
8+
}

‎src/atoms/constants/heading-priority.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export enum HeadingPriority {
2+
One = 1,
3+
Two = 2,
4+
Three = 3,
5+
Four = 4,
6+
Five = 5,
7+
Six = 6,
8+
}

‎src/atoms/constants/input-types.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export enum InputTypes {
2+
Button = "button",
3+
Checkbox = "checkbox",
4+
Email = "email",
5+
Password = "password",
6+
Phone = "tel",
7+
Text = "text",
8+
}

0 commit comments

Comments
 (0)