Merge pull request #346 from dabapps/327-checkbox-radius

JakeSidSmith · web-flow · commit d36013519cf1 · 2021-03-04T10:02:30.000Z
Add override option for checkbox radius
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
diff --git a/src/less/overrides.less b/src/less/overrides.less
@@ -186,7 +186,7 @@ input[type='radio'] {
 }
 
 input[type='checkbox'] {
-  border-radius: @border-radius-base * 2;
+  border-radius: @checkbox-border-radius;
 
   &:checked {
     background-color: @checkbox-active-background;
diff --git a/src/less/variables.less b/src/less/variables.less
@@ -186,6 +186,7 @@
 @checkbox-icon-background: @checkbox-background;
 @checkbox-icon-border: 2px solid @checkbox-icon-background;
 @checkbox-shadow: inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.1);
+@checkbox-border-radius: @border-radius-base * 2;
 
 @pagination-button-color: @grey-dark;
 @pagination-button-background: @grey-lighter;
diff --git a/src/ts/components/forms/form-group.examples.md b/src/ts/components/forms/form-group.examples.md
@@ -75,4 +75,5 @@
 @checkbox-icon-background: @checkbox-background;
 @checkbox-icon-border: 2px solid @checkbox-icon-background;
 @checkbox-shadow: inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.1);
+@checkbox-border-radius: @border-radius-base * 2;
 ```

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@dabapps/roe",`
`3`		`- "version": "0.12.2",`
	`3`	`+ "version": "0.12.3",`
`4`	`4`	`"description": "A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.",`
`5`	`5`	`"main": "dist/js/index.js",`
`6`	`6`	`"types": "dist/js/index.d.ts",`
Original file line number	Diff line number	Diff line change
`@@ -186,7 +186,7 @@ input[type='radio'] {`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`input[type='checkbox'] {`
`189`		`- border-radius: @border-radius-base * 2;`
	`189`	`+ border-radius: @checkbox-border-radius;`
`190`	`190`
`191`	`191`	`&:checked {`
`192`	`192`	`background-color: @checkbox-active-background;`