make scss file for notification-component

lib/views/_form.html

@@ -30,11 +30,11 @@
     <div class="form-inline page-form-setting d-flex align-items-center" id="page-form-setting" data-slack-configured="{{ slackConfigured() }}">
       {% if slackConfigured() %}
       <span class="input-group input-group-sm input-group-slack extended-setting m-r-5">
-        <div class="input-group-addon">
+        <label class="input-group-addon">
           <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18">
           <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18">
           <input class="" type="checkbox" name="pageForm[notify][slack][on]" value="1">
-        </div>
+        </label>
         <input class="form-control" type="text" name="pageForm[notify][slack][channel]" value="{{ page.extended.slack|default('') }}" placeholder="slack-channel-name"
           id="page-form-slack-channel"
           data-toggle="popover"

resource/styles/scss/_comment_growi.scss

@@ -104,17 +104,5 @@
         height: 180px;
       }
     }
-
-    // slack
-    .input-group-slack {
-      .input-group-addon {
-        padding: 4px 4px;
-        line-height: 1em;
-        img, input {
-          vertical-align: middle;
-          margin: 1px;
-        }
-      }
-    }
   }
 }

resource/styles/scss/_notification.scss

@@ -0,0 +1,10 @@
+// Slack
+.input-group-slack {
+  .input-group-addon {
+    padding: 2px 8px;
+    line-height: 1em;
+    img, input {
+      vertical-align: middle;
+    }
+  }
+}

resource/styles/scss/_on-edit.scss

@@ -113,18 +113,6 @@ body.on-edit {
           width: 100px;
         }
       }
-
-      // slack
-      .input-group-slack {
-        .input-group-addon {
-          padding: 2px 8px;
-          line-height: 1em;
-          img, input {
-            vertical-align: middle;
-          }
-        }
-      }
-
     }
   }
 

resource/styles/scss/style.scss

@@ -26,6 +26,7 @@
 @import 'layout_crowi_sidebar';
 @import 'layout_growi';
 @import 'login';
+@import 'notification';
 @import 'on-edit';
 @import 'page_list';
 @import 'page';