Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use SVG for checkbox (https://github.com/woocommerce/woocommerce-blocks/pull/2320) 

* use svg for checkbox

* update borders

* switch to rems

* define a rem function

* fix ie11 issue

* fix focus

* add ie hack

* fix spacing and switch to em

* switch to rem
This commit is contained in:
Seghir Nadir 2020-08-11 09:59:59 +01:00 committed by GitHub
parent 4a8026623e
commit fc9f6fe71a
2 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js
View File

@ -38,6 +38,15 @@ const CheckboxControl = ( {
onChange={ ( event ) => onChange( event.target.checked ) }
{ ...rest }
/>
<svg
className="wc-block-components-checkbox__mark"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 20"
>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
</svg>
<span className="wc-block-components-checkbox__label">
{ label }
</span>

44
plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
View File

@ -7,37 +7,45 @@
.wc-block-components-checkbox__input[type="checkbox"] {
appearance: none;
border: 1px solid currentColor;
height: 1em;
border: 2px solid currentColor;
border-radius: 2px;
height: em(18px);
width: em(18px);
margin: 0;
min-height: 16px;
min-width: 16px;
min-height: 18px;
min-width: 18px;
overflow: hidden;
position: static;
vertical-align: middle;
width: 1em;
background-color: #fff;
&:checked {
background: currentColor;
border-color: currentColor;
&::before {
color: #fff;
content: "\2713";
display: block;
height: calc(1rem - 2px);
min-height: 14px;
min-width: 14px;
margin: 0;
line-height: 100%;
text-align: center;
width: calc(1rem - 2px);
}
&:not(:checked) + .wc-block-components-checkbox__mark {
display: none;
}
}
.wc-block-components-checkbox__input[type="checkbox"] + .wc-block-components-checkbox__label {
.wc-block-components-checkbox__mark {
fill: #fff;
position: absolute;
left: em(1px);
top: em(-2px);
width: em(16px);
height: em(16px);
}
.wc-block-components-checkbox__label {
padding-left: $gap-smaller;
vertical-align: middle;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.wc-block-components-checkbox__mark {
display: none;
}
}