From bf60f647ef168e89af1c78be830e01ebdf0a1e50 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Wed, 8 Aug 2018 14:17:53 +0300
Subject: [PATCH] feat(checkbox): add overrride
---
.../hindawi-theme/src/elements/Checkbox.js | 49 +++++++++++++++++++
packages/hindawi-theme/src/elements/index.js | 3 +-
packages/hindawi-theme/src/index.js | 14 +++++-
3 files changed, 64 insertions(+), 2 deletions(-)
create mode 100644 packages/hindawi-theme/src/elements/Checkbox.js
diff --git a/packages/hindawi-theme/src/elements/Checkbox.js b/packages/hindawi-theme/src/elements/Checkbox.js
new file mode 100644
index 000000000..5f4475f9c
--- /dev/null
+++ b/packages/hindawi-theme/src/elements/Checkbox.js
@@ -0,0 +1,49 @@
+import { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+ <path fill="#fff" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
+</svg>`
+
+// const partialCheck = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+// <path fill="#939393" fill-rule="evenodd" d="M1.994 0A1.995 1.995 0 0 0 0 1.994v12.012C0 15.107.895 16 1.994 16h12.012A1.995 1.995 0 0 0 16 14.006V1.994A1.995 1.995 0 0 0 14.006 0H1.994zm6.962 7.167h4.388c.201-.002.391.658.391.86 0 .202-.19.866-.391.864H2.78c-.2.01-.343-.647-.352-.847-.01-.2.119-.867.318-.877h6.209z"/>
+// </svg>
+// `
+
+const Checkbox = css`
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBase')};
+ line-height: ${th('lineHeightBase')};
+ opacity: ${props => (props.disabled ? 0.3 : 1)};
+
+ input:checked + span::before {
+ border-color: ${th('colorPrimary')};
+ background: url('data:image/svg+xml;utf8,${encodeURIComponent(
+ checkIcon,
+ )}') center no-repeat, ${th('colorPrimary')};
+ }
+`
+
+Checkbox.Input = css`
+ position: absolute;
+ opacity: 0;
+ z-index: -1;
+`
+
+Checkbox.Label = css`
+ &::before {
+ content: ' ';
+ background: transparent;
+ border: 2px solid ${th('checkbox.borderColor')};
+ border-radius: ${th('borderRadius')};
+ box-sizing: border-box;
+ display: inline-block;
+ margin-right: ${th('gridUnit')};
+ vertical-align: middle;
+
+ height: calc(${th('gridUnit')} * 3);
+ width: calc(${th('gridUnit')} * 3);
+ }
+`
+
+export default Checkbox
diff --git a/packages/hindawi-theme/src/elements/index.js b/packages/hindawi-theme/src/elements/index.js
index 0c5db8d50..ea8f3a3da 100644
--- a/packages/hindawi-theme/src/elements/index.js
+++ b/packages/hindawi-theme/src/elements/index.js
@@ -1,7 +1,8 @@
import Icon from './Icon'
import Menu from './Menu'
import Button from './Button'
+import Checkbox from './Checkbox'
import TextField from './TextField'
import ValidatedTextField from './ValidatedTextField'
-export { Icon, Menu, Button, TextField, ValidatedTextField }
+export { Icon, Menu, Checkbox, Button, TextField, ValidatedTextField }
diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js
index c0ca12d32..93b3cbacb 100644
--- a/packages/hindawi-theme/src/index.js
+++ b/packages/hindawi-theme/src/index.js
@@ -2,7 +2,14 @@
import { injectGlobal } from 'styled-components'
import './fonts/index.css'
-import { Icon, Menu, Button, TextField, ValidatedTextField } from './elements'
+import {
+ Icon,
+ Menu,
+ Button,
+ Checkbox,
+ TextField,
+ ValidatedTextField,
+} from './elements'
injectGlobal`
body {
@@ -64,6 +71,10 @@ const hindawiTheme = {
optionBackground: 'rgba(0, 126, 146, 0.1)',
},
+ checkbox: {
+ borderColor: '#939393',
+ },
+
/* Text variables */
// fonts
fontInterface: "'Myriad Pro Bold'",
@@ -114,6 +125,7 @@ const hindawiTheme = {
Icon,
Menu,
Button,
+ Checkbox,
TextField,
ValidatedTextField,
},
--
GitLab