change to checkbox

src/client/js/components/Admin/Notification/TriggerEventCheckBox.jsx

@@ -6,15 +6,14 @@ const TriggerEventCheckBox = (props) => {
   const { t } = props;
 
   return (
-    <div className="custom-control custom-switch checkbox-success">
+    <div className="checkbox checkbox-inverse">
       <input
         type="checkbox"
-        className="custom-control-input"
         id={`trigger-event-${props.event}`}
         checked={props.checked}
         onChange={props.onChange}
       />
-      <label className="custom-control-label" htmlFor={`trigger-event-${props.event}`}>
+      <label htmlFor={`trigger-event-${props.event}`}>
         {props.children}{' '}
         {t(`notification_setting.event_${props.event}`)}
       </label>

src/client/styles/scss/_form.scss

@@ -0,0 +1,88 @@
+/* =============
+   Checkbox and Radios
+============= */
+.checkbox {
+  padding-left: 20px;
+
+  label {
+    position: relative;
+    display: inline-block;
+    padding-left: 5px;
+
+    &::before {
+      position: absolute;
+      left: 0;
+      display: inline-block;
+      width: 17px;
+      height: 17px;
+      margin-left: -20px;
+      content: '';
+      background-color: $white;
+      border: 1px solid darken($border, 10%);
+      border-radius: 1px;
+      outline: none !important;
+      -o-transition: 0.3s ease-in-out;
+      -webkit-transition: 0.3s ease-in-out;
+      transition: 0.3s ease-in-out;
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      padding-top: 1px;
+      padding-left: 3px;
+      margin-left: -20px;
+      font-size: 11px;
+      color: $dark;
+    }
+  }
+  input[type='checkbox'] {
+    z-index: 1;
+    cursor: pointer;
+    outline: none !important;
+    opacity: 0;
+
+    &:disabled + label {
+      opacity: 0.65;
+    }
+  }
+
+  input[type='checkbox']:focus + label {
+    &::before {
+      outline: none;
+      outline: thin dotted;
+      outline-offset: -2px;
+    }
+  }
+
+  input[type='checkbox']:checked + label {
+    &::after {
+      font-family: 'FontAwesome';
+      content: '\f00c';
+    }
+  }
+
+  input[type='checkbox']:disabled + label {
+    &::before {
+      cursor: not-allowed;
+      background-color: $light;
+    }
+  }
+}
+
+.checkbox-inverse {
+  input[type='checkbox']:checked + label {
+    &::before {
+      background-color: $inverse;
+      border-color: $inverse;
+    }
+
+    &::after {
+      color: $white;
+    }
+  }
+}

src/client/styles/scss/_variables.scss

@@ -2,12 +2,10 @@
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
 
-$font-family-monospace-not-strictly: Monaco,
-  Menlo,
-  Consolas,
-  'Courier New',
-  MeiryoKe_Gothic,
-  monospace;
+$font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
+
+// Color
+$inverse: #3e4d6c;
 
 //== Layout
 $grw-navbar-height: 50px;

src/client/styles/scss/style-app.scss

@@ -54,6 +54,7 @@
 @import 'staff_credit';
 @import 'waves';
 @import 'wiki';
+@import 'form';
 
 /*
  * for Guest User Mode