zahmis 5 years ago
parent
commit
b007342745

+ 2 - 2
src/client/js/components/SlackNotification.jsx

@@ -40,9 +40,9 @@ class SlackNotification extends React.Component {
 
     return (
       <div className="grw-slack-notification">
-        <div className="input-group  extended-setting grw-custom-switch-slack">
+        <div className="input-group  extended-setting">
           <label className="input-group-addon">
-            <div className="custom-control custom-switch custom-switch-lg">
+            <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
               <input
                 type="checkbox"
                 className="custom-control-input border-0"

+ 17 - 0
src/client/styles/scss/_on-edit.scss

@@ -120,8 +120,25 @@ body.on-edit {
   }
 
   .grw-slack-notification {
+    $input-height-slack: 1.8rem;
     background-color: white;
     border-color: $gray-200;
+
+    border-style: solid;
+    border-width: 1px;
+    border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
+
+    .form-control {
+      width: 80px;
+      height: $input-height-slack;
+      border: transparent;
+      @include media-breakpoint-up(sm) {
+        width: 130px;
+      }
+      @include media-breakpoint-up(md) {
+        width: 180px;
+      }
+    }
   }
 
   .grw-editor-navbar-bottom {

+ 1 - 19
src/client/styles/scss/atoms/_custom_control.scss

@@ -70,13 +70,7 @@ label.custom-control-label {
   }
 }
 
-.grw-custom-switch-slack {
-  $input-height-slack: 1.8rem;
-
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
-
+.custom-switch.custom-switch-slack {
   .custom-control-label {
     &::after {
       background-image: url(/images/icons/slack/slack-logo-off.svg);
@@ -94,16 +88,4 @@ label.custom-control-label {
       vertical-align: middle;
     }
   }
-
-  .form-control {
-    width: 80px;
-    height: $input-height-slack;
-    border: transparent;
-    @include media-breakpoint-up(sm) {
-      width: 130px;
-    }
-    @include media-breakpoint-up(md) {
-      width: 180px;
-    }
-  }
 }

+ 0 - 0
src/client/styles/scss/molecules/slack-notification.scss