Skip to content

Commit 8d68368

Browse files
philwarehamphilwareham
committed
Checkbox and radio button style amends
1 parent cb85988 commit 8d68368

File tree

2 files changed

+35
-16
lines changed

2 files changed

+35
-16
lines changed

‎scss/modules/_checkboxradio.scss

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,50 @@
2222

2323
.ui-checkboxradio-label {
2424
.ui-icon-background {
25-
border: 0;
26-
border-radius: 0.12em;
27-
box-shadow: inset 1px 1px 1px #cccccc;
25+
border: 1px solid $color-border;
26+
border-radius: 0.2em;
27+
background-color: $color-background-box;
28+
box-sizing: border-box;
29+
}
30+
31+
&.ui-checkboxradio-checked {
32+
.ui-icon {
33+
border: 0;
34+
background: $color-text-footnote url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E");
35+
}
36+
37+
&.ui-state-focus .ui-icon {
38+
background-color: $color-link-focus;
39+
}
40+
}
41+
42+
&.ui-checkboxradio-checked:hover .ui-icon {
43+
background-color: $color-text;
2844
}
2945
}
3046

3147
.ui-checkboxradio-radio-label {
3248
.ui-icon-background {
33-
width: 16px;
34-
height: 16px;
35-
border: 0;
36-
border-radius: 1em;
37-
overflow: visible;
49+
border-radius: 100%;
3850
}
3951

40-
&.ui-checkboxradio-checked,
41-
&.ui-checkboxradio-checked:hover {
52+
&.ui-checkboxradio-checked {
4253
.ui-icon {
43-
width: 8px;
44-
height: 8px;
45-
border-width: 4px;
46-
border-style: solid;
47-
background-image: none;
54+
border: 0.384615384615385em solid $color-text-footnote; // 5px / 13px
55+
border-radius: 100%;
56+
background: $color-background-form;
57+
}
58+
59+
&.ui-state-focus .ui-icon {
60+
border-color: $color-link-focus;
61+
background-color: $color-background-form;
4862
}
4963
}
64+
65+
&.ui-checkboxradio-checked:hover .ui-icon {
66+
border-color: $color-text;
67+
background: $color-background-form;
68+
}
5069
}
5170

5271
.ui-checkboxradio-disabled {

‎scss/modules/_icons.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ input[type="button"],
291291
.ui-icon-info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M7 6h2v7H7zM7 3h2v2H7z'/%3E%3Cpath d='M8 1C4.134 1 1 4.134 1 8s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm0 13c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z'/%3E%3C/g%3E%3C/svg%3E"); }
292292
.ui-icon-notice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M0 8c0-1 3-6 8-6s8 5 8 6-3 6-8 6-8-5-8-6zm8 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
293293
.ui-icon-help { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M7 11h2v2H7zM11 6c0-1.657-1.343-3-3-3S5 4.343 5 6h2c0-.553.447-1 1-1s1 .447 1 1-.447 1-1 1-1 .447-1 1v2h2V8.816c1.163-.413 2-1.51 2-2.816z'/%3E%3Cpath d='M8 1C4.134 1 1 4.134 1 8s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm0 13c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z'/%3E%3C/g%3E%3C/svg%3E"); }
294-
.ui-icon-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 2l-8 8-2-2-2 2 4 4L15 4z'/%3E%3C/svg%3E"); }
294+
.ui-icon-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 3l-7 7-2-2-2 2 4 4L15 5z'/%3E%3C/svg%3E"); }
295295
.ui-icon-bullet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='%23333' cx='8' cy='8' r='5'/%3E%3C/svg%3E"); }
296296
.ui-icon-radio-on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 8a5 5 0 0 1-5 5c-2.762 0-5-2.238-5-5s2.238-5 5-5a5 5 0 0 1 5 5zm-5 2a2 2 0 1 0-.001-4.001A2 2 0 0 0 8 10z'/%3E%3C/svg%3E"); }
297297
.ui-icon-radio-off { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 8a5 5 0 0 1-5 5c-2.762 0-5-2.238-5-5s2.238-5 5-5a5 5 0 0 1 5 5zm-5 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/%3E%3C/svg%3E"); }

0 commit comments

Comments
 (0)