style(checkbox): update checkbox styling (#214)

blockchain · Jan 9, 2019 · 062f0fb · 062f0fb
1 parent 1edc154
commit 062f0fb
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/src/Atoms/Inputs/Checkbox.js b/src/Atoms/Inputs/Checkbox.js
@@ -19,10 +19,21 @@ const Wrapper = styled.div`
  outline: 1px solid transparent;
  }
 
+ input:disabled + label::after,
  input:checked + label::after {
  opacity: 1;
  transform: scale(1) rotate(-45deg);
  }
+
+ input:disabled + label::before {
+ background-color: ${theme('inputCheckboxColorDisabled')};
+ border: none;
+ }
+
+ input:disabled + label::after {
+ border-left: 2px solid ${theme('inputCheckboxCheckColorDisabled')};
+ border-bottom: 2px solid ${theme('inputCheckboxCheckColorDisabled')};
+ }
 `
 
 type InputPropsType = { +name?: string, +type: HtmlInputType } & E2ePropType
@@ -61,25 +72,26 @@ export const CheckboxLabel: ReactComponentFunctional<{
 
  &::before {
  background-color: ${theme('inputBackgroundColor')};
- border: 2px solid ${theme('inputBorderColor')};
+ border: 1px solid ${theme('inputBorderColor')};
  box-sizing: border-box;
  content: '';
  height: 16px;
  left: 1px;
  position: absolute;
  top: calc(50% - 0.5rem);
  width: 16px;
+ border-radius: 2px;
  }
 
  &::after {
  background: none;
- border-left: 1px solid ${theme('inputBackgroundColor')};
- border-bottom: 1px solid ${theme('inputBackgroundColor')};
+ border-left: 2px solid ${theme('inputBackgroundColor')};
+ border-bottom: 2px solid ${theme('inputBackgroundColor')};
  box-sizing: border-box;
  content: '';
  height: 5px;
- left: 0.3125rem;
- margin-top: -0.1875rem;
+ left: 5px;
+ margin-top: -3px;
  position: absolute;
  opacity: 0;
  top: 50%;

diff --git a/src/Atoms/Inputs/Input.stories.js b/src/Atoms/Inputs/Input.stories.js
@@ -16,7 +16,10 @@ storiesOf('Atoms/Inputs/Input', module)
  </>
  ))
  .add('with checkbox', () => (
- <Input label="Checkbox" name="test" type="checkbox" />
+ <div>
+ <Input disabled label="Disabled Checkbox" name="test" type="checkbox" />
+ <Input label="Checkbox" name="test2" type="checkbox" />
+ </div>
  ))
  .add('with radio', () => (
  <div>

diff --git a/src/Atoms/Inputs/__snapshots__/Input.spec.js.snap b/src/Atoms/Inputs/__snapshots__/Input.spec.js.snap
@@ -804,13 +804,24 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
  outline: 1px solid transparent;
 }
 
+.c0 input:disabled + label::after,
 .c0 input:checked + label::after {
  opacity: 1;
  -webkit-transform: scale(1) rotate(-45deg);
  -ms-transform: scale(1) rotate(-45deg);
  transform: scale(1) rotate(-45deg);
 }
 
+.c0 input:disabled + label::before {
+ background-color: rgba(0,0,0,0.10);
+ border: none;
+}
+
+.c0 input:disabled + label::after {
+ border-left: 2px solid #757679;
+ border-bottom: 2px solid #757679;
+}
+
 .c1 {
  border: 0;
  -webkit-clip: rect(0,0,0,0);
@@ -844,25 +855,26 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
 
 .c2::before {
  background-color: #FFF;
- border: 2px solid #CCC;
+ border: 1px solid #CCC;
  box-sizing: border-box;
  content: '';
  height: 16px;
  left: 1px;
  position: absolute;
  top: calc(50% - 0.5rem);
  width: 16px;
+ border-radius: 2px;
 }
 
 .c2::after {
  background: none;
- border-left: 1px solid #FFF;
- border-bottom: 1px solid #FFF;
+ border-left: 2px solid #FFF;
+ border-bottom: 2px solid #FFF;
  box-sizing: border-box;
  content: '';
  height: 5px;
- left: 0.3125rem;
- margin-top: -0.1875rem;
+ left: 5px;
+ margin-top: -3px;
  position: absolute;
  opacity: 0;
  top: 50%;

diff --git a/src/Tools/theme.js b/src/Tools/theme.js
@@ -39,6 +39,8 @@ const theme = {
  inputBackgroundColorDisabled: palette.gray0,
  inputBorderColor: palette.gray2,
  inputBorderRadius: borderRadius,
+ inputCheckboxCheckColorDisabled: palette.gray4,
+ inputCheckboxColorDisabled: palette.blackAlpha10,
  inputCheckedColor: palette.orient,
  inputColor: palette.gray5,
  inputLabelColor: palette.gray4,