From ef26289ac2c587d5d78bc25799cf7226aca5dcbc Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Thu, 13 Feb 2020 19:10:26 +0900
Subject: [PATCH 01/12]  override variables of checkbox

---
 src/client/styles/scss/_override-bootstrap-variables.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/client/styles/scss/_override-bootstrap-variables.scss b/src/client/styles/scss/_override-bootstrap-variables.scss
index 737435b042f..7bc1773ad17 100644
--- a/src/client/styles/scss/_override-bootstrap-variables.scss
+++ b/src/client/styles/scss/_override-bootstrap-variables.scss
@@ -103,3 +103,8 @@ $progress-height: 4px;
 $progress-border-radius: 0;
 $progress-bg: #f0f0f0;
 $progress-box-shadow: none;
+
+//== Custom Checkbox
+$custom-checkbox-indicator-border-radius: 0px;
+$custom-checkbox-indicator-indeterminate-box-shadow: none;
+$custom-control-indicator-box-shadow: none;

From f95c531cec991965e2732b3ffe5e835455119524 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Thu, 13 Feb 2020 19:10:39 +0900
Subject: [PATCH 02/12] use custom input

---
 .../Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx
index e0989c6e931..67743d9d917 100644
--- a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx
+++ b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx
@@ -83,18 +83,18 @@ export default class ImportCollectionItem extends React.Component {
     } = this.props;
 
     return (
-      <div className="checkbox checkbox-info my-0">
+      <div className="custom-control custom-checkbox my-0">
         <input
           type="checkbox"
           id={collectionName}
           name={collectionName}
-          className="form-check-input"
+          className="custom-control-input"
           value={collectionName}
           checked={isSelected}
           disabled={isImporting}
           onChange={this.changeHandler}
         />
-        <label className="text-capitalize form-check-label" htmlFor={collectionName}>
+        <label className="text-capitalize custom-control-label" htmlFor={collectionName}>
           {collectionName}
         </label>
       </div>

From b163527f8e7c96c8eea61453618ab750d78899e7 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Tue, 25 Feb 2020 17:42:54 +0900
Subject: [PATCH 03/12] add css for custom-checkbox each theme-color

---
 .../ImportCollectionConfigurationModal.jsx    | 35 ++++++++++--------
 .../styles/scss/theme/_apply-colors.scss      | 36 +++++++++++++------
 2 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
index caaa3501dd6..ff687bc24b1 100644
--- a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
+++ b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
@@ -67,26 +67,28 @@ class ImportCollectionConfigurationModal extends React.Component {
     /* eslint-disable react/no-unescaped-entities */
     return (
       <>
-        <div className="checkbox checkbox-warning">
+        <div className="custom-control custom-checkbox custom-checkbox-danger">
           <input
             id="cbOpt4"
             type="checkbox"
+            className="custom-control-input"
             checked={option.isOverwriteAuthorWithCurrentUser || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ isOverwriteAuthorWithCurrentUser: !option.isOverwriteAuthorWithCurrentUser })}
           />
-          <label htmlFor="cbOpt4">
+          <label htmlFor="cbOpt4" className="custom-control-label">
             {t(`${translationBase}.overwrite_author.label`)}
             <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
           </label>
         </div>
-        <div className="checkbox checkbox-warning">
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
           <input
             id="cbOpt1"
             type="checkbox"
+            className="custom-control-input"
             checked={option.makePublicForGrant2 || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ makePublicForGrant2: !option.makePublicForGrant2 })}
           />
-          <label htmlFor="cbOpt1">
+          <label htmlFor="cbOpt1" className="custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Anyone with the link') })}
             <p
               className="help-block mt-0"
@@ -94,26 +96,28 @@ class ImportCollectionConfigurationModal extends React.Component {
             />
           </label>
         </div>
-        <div className="checkbox checkbox-warning">
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
           <input
             id="cbOpt2"
             type="checkbox"
+            className="custom-control-input"
             checked={option.makePublicForGrant4 || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ makePublicForGrant4: !option.makePublicForGrant4 })}
           />
-          <label htmlFor="cbOpt2">
+          <label htmlFor="cbOpt2" className="custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Just me') })}
             <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Just me') }) }} />
           </label>
         </div>
-        <div className="checkbox checkbox-warning">
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
           <input
             id="cbOpt3"
             type="checkbox"
+            className="custom-control-input"
             checked={option.makePublicForGrant5 || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ makePublicForGrant5: !option.makePublicForGrant5 })}
           />
-          <label htmlFor="cbOpt3">
+          <label htmlFor="cbOpt3" className="custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Only inside the group') })}
             <p
               className="help-block mt-0"
@@ -121,26 +125,28 @@ class ImportCollectionConfigurationModal extends React.Component {
             />
           </label>
         </div>
-        <div className="checkbox checkbox-default">
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
           <input
             id="cbOpt5"
             type="checkbox"
+            className="custom-control-input"
             checked={option.initPageMetadatas || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ initPageMetadatas: !option.initPageMetadatas })}
           />
-          <label htmlFor="cbOpt5">
+          <label htmlFor="cbOpt5" className="custom-control-label">
             {t(`${translationBase}.initialize_meta_datas.label`)}
             <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_meta_datas.desc`) }} />
           </label>
         </div>
-        <div className="checkbox checkbox-default">
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
           <input
             id="cbOpt6"
             type="checkbox"
+            className="custom-control-input"
             checked={option.initHackmdDatas || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ initHackmdDatas: !option.initHackmdDatas })}
           />
-          <label htmlFor="cbOpt6">
+          <label htmlFor="cbOpt6" className="custom-control-label">
             {t(`${translationBase}.initialize_hackmd_related_datas.label`)}
             <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_hackmd_related_datas.desc`) }} />
           </label>
@@ -159,14 +165,15 @@ class ImportCollectionConfigurationModal extends React.Component {
     /* eslint-disable react/no-unescaped-entities */
     return (
       <>
-        <div className="checkbox checkbox-warning">
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
           <input
             id="cbOpt1"
             type="checkbox"
+            className="custom-control-input"
             checked={option.isOverwriteAuthorWithCurrentUser || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ isOverwriteAuthorWithCurrentUser: !option.isOverwriteAuthorWithCurrentUser })}
           />
-          <label htmlFor="cbOpt1">
+          <label htmlFor="cbOpt1" className="custom-control-label">
             {t(`${translationBase}.overwrite_author.label`)}
             <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
           </label>
diff --git a/src/client/styles/scss/theme/_apply-colors.scss b/src/client/styles/scss/theme/_apply-colors.scss
index 2f3c49958f0..fd3a3fd1c07 100644
--- a/src/client/styles/scss/theme/_apply-colors.scss
+++ b/src/client/styles/scss/theme/_apply-colors.scss
@@ -3,27 +3,45 @@
 //
 @import '~bootstrap/scss/bootstrap-reboot';
 
-@each $color,
-  $value in $theme-colors {
+@each $color, $value in $theme-colors {
   @include bg-variant('.bg-#{$color}', $value);
 }
 
-@each $color,
-  $value in $theme-colors {
+@each $color, $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
   }
 }
 
-@each $color,
-  $value in $theme-colors {
+@each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @include button-outline-variant($value);
   }
 }
 
-@each $theme-color,
-  $color in $theme-colors {
+@each $theme-color, $color in $theme-colors {
+  .custom-checkbox-#{$theme-color} {
+    input[type='checkbox']:checked + label:before {
+      background-color: $color;
+      border-color: $color;
+    }
+    input[type='checkbox']:checked + label:after {
+      color: white;
+    }
+    .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+      color: white;
+      background-color: $color;
+      border-color: $color;
+    }
+    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+      color: white;
+      background-color: white;
+      border-color: $color;
+    }
+  }
+}
+
+@each $theme-color, $color in $theme-colors {
   .alert.alert-#{$theme-color} {
     color: white;
     background: $color;
@@ -56,7 +74,6 @@
 
 // Dropdown
 .dropdown-item {
-
   &.active,
   &:active {
     @include gradient-bg($dropdown-link-active-bg);
@@ -89,7 +106,6 @@ body {
 }
 
 .logo {
-
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;

From d9e0989fac910c236941538093124ba1ad71f696 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Thu, 27 Feb 2020 22:52:21 +0900
Subject: [PATCH 04/12] none shadow around checkbox

---
 src/client/styles/scss/_override-bootstrap-variables.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/client/styles/scss/_override-bootstrap-variables.scss b/src/client/styles/scss/_override-bootstrap-variables.scss
index 7bc1773ad17..5dd5190cbf4 100644
--- a/src/client/styles/scss/_override-bootstrap-variables.scss
+++ b/src/client/styles/scss/_override-bootstrap-variables.scss
@@ -106,5 +106,4 @@ $progress-box-shadow: none;
 
 //== Custom Checkbox
 $custom-checkbox-indicator-border-radius: 0px;
-$custom-checkbox-indicator-indeterminate-box-shadow: none;
-$custom-control-indicator-box-shadow: none;
+$custom-control-indicator-focus-box-shadow: none;

From e2f6ddfd291f11b29d5c5f0ad86f5aaca2457ef8 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Wed, 4 Mar 2020 18:31:46 +0900
Subject: [PATCH 05/12] tin label

---
 src/client/styles/scss/_admin.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/client/styles/scss/_admin.scss b/src/client/styles/scss/_admin.scss
index 82687e94a4e..c283cd531f0 100644
--- a/src/client/styles/scss/_admin.scss
+++ b/src/client/styles/scss/_admin.scss
@@ -156,6 +156,10 @@
       background-color: rgba($info, 0.1);
     }
   }
+
+  label.custom-control-label {
+    font-weight: normal;
+  }
 }
 
 .admin-navigation > a + a {

From 518cc961a3864efeb174bc9ef1a59e7acf058ca1 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Wed, 4 Mar 2020 18:43:09 +0900
Subject: [PATCH 06/12] change help-blcok

---
 .../ImportCollectionConfigurationModal.jsx      | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
index ff687bc24b1..5e3d9b917a8 100644
--- a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
+++ b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
@@ -77,7 +77,7 @@ class ImportCollectionConfigurationModal extends React.Component {
           />
           <label htmlFor="cbOpt4" className="custom-control-label">
             {t(`${translationBase}.overwrite_author.label`)}
-            <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
+            <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
           </label>
         </div>
         <div className="custom-control custom-checkbox custom-checkbox-warning">
@@ -91,7 +91,7 @@ class ImportCollectionConfigurationModal extends React.Component {
           <label htmlFor="cbOpt1" className="custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Anyone with the link') })}
             <p
-              className="help-block mt-0"
+              className="form-text text-muted mt-0"
               dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Anyone with the link') }) }}
             />
           </label>
@@ -106,7 +106,10 @@ class ImportCollectionConfigurationModal extends React.Component {
           />
           <label htmlFor="cbOpt2" className="custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Just me') })}
-            <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Just me') }) }} />
+            <p
+              className="form-text text-muted mt-0"
+              dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Just me') }) }}
+            />
           </label>
         </div>
         <div className="custom-control custom-checkbox custom-checkbox-warning">
@@ -120,7 +123,7 @@ class ImportCollectionConfigurationModal extends React.Component {
           <label htmlFor="cbOpt3" className="custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Only inside the group') })}
             <p
-              className="help-block mt-0"
+              className="form-text text-muted mt-0"
               dangerouslySetInnerHTML={{ __html: t(`${translationBase}.set_public_to_page.desc`, { from: t('Only inside the group') }) }}
             />
           </label>
@@ -135,7 +138,7 @@ class ImportCollectionConfigurationModal extends React.Component {
           />
           <label htmlFor="cbOpt5" className="custom-control-label">
             {t(`${translationBase}.initialize_meta_datas.label`)}
-            <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_meta_datas.desc`) }} />
+            <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_meta_datas.desc`) }} />
           </label>
         </div>
         <div className="custom-control custom-checkbox custom-checkbox-warning">
@@ -148,7 +151,7 @@ class ImportCollectionConfigurationModal extends React.Component {
           />
           <label htmlFor="cbOpt6" className="custom-control-label">
             {t(`${translationBase}.initialize_hackmd_related_datas.label`)}
-            <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_hackmd_related_datas.desc`) }} />
+            <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_hackmd_related_datas.desc`) }} />
           </label>
         </div>
       </>
@@ -175,7 +178,7 @@ class ImportCollectionConfigurationModal extends React.Component {
           />
           <label htmlFor="cbOpt1" className="custom-control-label">
             {t(`${translationBase}.overwrite_author.label`)}
-            <p className="help-block mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
+            <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
           </label>
         </div>
       </>

From 32477859d6dfe486692a631c3f036ed84bb2e400 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Wed, 4 Mar 2020 18:48:11 +0900
Subject: [PATCH 07/12] remove miss

---
 src/client/styles/scss/_override-bootstrap-variables.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/client/styles/scss/_override-bootstrap-variables.scss b/src/client/styles/scss/_override-bootstrap-variables.scss
index 5dd5190cbf4..737435b042f 100644
--- a/src/client/styles/scss/_override-bootstrap-variables.scss
+++ b/src/client/styles/scss/_override-bootstrap-variables.scss
@@ -103,7 +103,3 @@ $progress-height: 4px;
 $progress-border-radius: 0;
 $progress-bg: #f0f0f0;
 $progress-box-shadow: none;
-
-//== Custom Checkbox
-$custom-checkbox-indicator-border-radius: 0px;
-$custom-control-indicator-focus-box-shadow: none;

From 806a45c8b5e4a10680e0712596cd414ffe734a41 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Wed, 4 Mar 2020 18:52:10 +0900
Subject: [PATCH 08/12] Revert "remove miss"

This reverts commit 32477859d6dfe486692a631c3f036ed84bb2e400.
---
 src/client/styles/scss/_override-bootstrap-variables.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/client/styles/scss/_override-bootstrap-variables.scss b/src/client/styles/scss/_override-bootstrap-variables.scss
index 737435b042f..5dd5190cbf4 100644
--- a/src/client/styles/scss/_override-bootstrap-variables.scss
+++ b/src/client/styles/scss/_override-bootstrap-variables.scss
@@ -103,3 +103,7 @@ $progress-height: 4px;
 $progress-border-radius: 0;
 $progress-bg: #f0f0f0;
 $progress-box-shadow: none;
+
+//== Custom Checkbox
+$custom-checkbox-indicator-border-radius: 0px;
+$custom-control-indicator-focus-box-shadow: none;

From a7b176f2d32145ac09aaf32a9b3aae19be33d3e0 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Wed, 4 Mar 2020 19:28:27 +0900
Subject: [PATCH 09/12] adjust

---
 .../GrowiArchive/ImportCollectionConfigurationModal.jsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
index 5e3d9b917a8..0d6036aea68 100644
--- a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
+++ b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx
@@ -67,7 +67,7 @@ class ImportCollectionConfigurationModal extends React.Component {
     /* eslint-disable react/no-unescaped-entities */
     return (
       <>
-        <div className="custom-control custom-checkbox custom-checkbox-danger">
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
           <input
             id="cbOpt4"
             type="checkbox"

From 3dd79864cc462ec9ae521aa6dde4ac972c4c9c68 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Wed, 4 Mar 2020 19:28:50 +0900
Subject: [PATCH 10/12] apply custom-checkbox

---
 .../Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx
index 67743d9d917..1aff5140f70 100644
--- a/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx
+++ b/src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx
@@ -83,7 +83,7 @@ export default class ImportCollectionItem extends React.Component {
     } = this.props;
 
     return (
-      <div className="custom-control custom-checkbox my-0">
+      <div className="custom-control custom-checkbox custom-checkbox-info my-0">
         <input
           type="checkbox"
           id={collectionName}
@@ -205,9 +205,7 @@ export default class ImportCollectionItem extends React.Component {
         <div className="card-header bg-light">
           <div className="d-flex justify-content-between align-items-center">
             {/* left */}
-            <div className="pl-4">
-              {this.renderCheckbox()}
-            </div>
+            {this.renderCheckbox()}
             {/* right */}
             <span className="d-flex align-items-center">
               {this.renderModeSelector()}

From 07d9fdb9e81213eb73d6843cc495a32247f23c62 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Wed, 4 Mar 2020 19:29:14 +0900
Subject: [PATCH 11/12] add variable for custom-checkbox design

---
 src/client/styles/scss/_override-bootstrap-variables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/client/styles/scss/_override-bootstrap-variables.scss b/src/client/styles/scss/_override-bootstrap-variables.scss
index 5dd5190cbf4..247147e1f6c 100644
--- a/src/client/styles/scss/_override-bootstrap-variables.scss
+++ b/src/client/styles/scss/_override-bootstrap-variables.scss
@@ -107,3 +107,4 @@ $progress-box-shadow: none;
 //== Custom Checkbox
 $custom-checkbox-indicator-border-radius: 0px;
 $custom-control-indicator-focus-box-shadow: none;
+$custom-control-indicator-size: 1.2rem;

From f2eb4471d8ab088c6d6d8538748cfb88300dfa97 Mon Sep 17 00:00:00 2001
From: yusuketk <yusuketk@weseek.co.jp>
Date: Wed, 4 Mar 2020 19:29:36 +0900
Subject: [PATCH 12/12] change checkbox design

---
 src/client/styles/scss/theme/_apply-colors.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/client/styles/scss/theme/_apply-colors.scss b/src/client/styles/scss/theme/_apply-colors.scss
index fd3a3fd1c07..4713dce43c0 100644
--- a/src/client/styles/scss/theme/_apply-colors.scss
+++ b/src/client/styles/scss/theme/_apply-colors.scss
@@ -21,11 +21,15 @@
 
 @each $theme-color, $color in $theme-colors {
   .custom-checkbox-#{$theme-color} {
-    input[type='checkbox']:checked + label:before {
+    .custom-control-label::before {
+      border-color: #d7d7d7;
+      transition: 0.3s ease-in-out;
+    }
+    .custom-control-input:checked + .custom-control-label::before {
       background-color: $color;
       border-color: $color;
     }
-    input[type='checkbox']:checked + label:after {
+    .custom-control-input:checked + .custom-control-label::after {
       color: white;
     }
     .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
@@ -36,7 +40,7 @@
     .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
       color: white;
       background-color: white;
-      border-color: $color;
+      border-color: #d7d7d7;
     }
   }
 }