fix(plugins/plugin-iter8): avoid collisions with global css rules

Fixes #5432
kubernetes-sigs · Aug 21, 2020 · 17e296a · 17e296a
1 parent 4d646ae
commit 17e296a
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 174 deletions.
diff --git a/plugins/plugin-iter8/src/modes/decisionForm.tsx b/plugins/plugin-iter8/src/modes/decisionForm.tsx
@@ -621,7 +621,7 @@ export class DecisionBase extends React.Component<{}, DecisionState> {
     ++this.notifKey // To regenerate notification
     const { trafficSplit } = this.state
     return (
-      <Form className="formProps" style={{ display: 'block' }}>
+      <Form className="plugin-iter8-formProps" style={{ display: 'block' }}>
         <FormGroup legendText="">
           <InlineLoading
             description={

diff --git a/plugins/plugin-iter8/src/modes/exprForm.tsx b/plugins/plugin-iter8/src/modes/exprForm.tsx
@@ -286,7 +286,7 @@ class ExprBase extends React.Component<{}, Formstate> {
   public render() {
     const { criteria } = this.state
     return (
-      <Form className="formProps" onSubmit={this.preventFormRefresh}>
+      <Form className="plugin-iter8-formProps" onSubmit={this.preventFormRefresh}>
         <div>
           <FormGroup legendText="" style={{ width: 600 }}>
             <h3>

diff --git a/plugins/plugin-iter8/src/web/scss/static/decisionForm.scss b/plugins/plugin-iter8/src/web/scss/static/decisionForm.scss
@@ -21,154 +21,155 @@ $font_courier: 'Courier New', Courier, monospace;
 $dark-purple: #282936;
 $blue: #62d6e8;
 $trans-grey: #5e6367;
-// Overload for Loading Component Label
-.bx--inline-loading__text {
-  color: #ffffff !important;
-  font-size: 0.9rem !important;
-}
-// Overload for Slider Component label
-.bx--slider__range-label {
-  color: #ffffff !important;
-}
 
-// Overload for FormGroup
-.bx--fieldset {
-  margin-left: 1rem !important;
-}
-
-// Change the Pie Chart legend
-.apexcharts-legend-text {
-  font-size: 14px !important;
-  color: #ffffff !important;
-}
-
-.formProps {
-  overflow-y: auto;
-}
-.formGroupProps {
-  font-size: 1rem !important;
-  font-weight: 600 !important;
-}
-
-.endexpbtn {
-  .bx--btn--primary {
-    background-color: $darkteal;
+.plugin-iter8-formProps {
+  // Overload for Loading Component Label
+  .bx--inline-loading__text {
+    color: #ffffff !important;
+    font-size: 0.9rem !important;
   }
-  .bx--btn--primary:hover {
-    background-color: $teal;
+  // Overload for Slider Component label
+  .bx--slider__range-label {
+    color: #ffffff !important;
   }
-  .bx--btn.bx--btn--disabled .bx--btn:disabled {
-    background: #c6c6c6;
+
+  // Overload for FormGroup
+  .bx--fieldset {
+    margin-left: 1rem !important;
   }
-}
 
-.bx--data-table-header {
-  background-color: inherit !important;
-}
+  // Change the Pie Chart legend
+  .apexcharts-legend-text {
+    font-size: 14px !important;
+    color: #ffffff !important;
+  }
 
-.titletexts {
-  color: $teal;
-  fill: $teal;
-}
+  overflow-y: auto;
+  .formGroupProps {
+    font-size: 1rem !important;
+    font-weight: 600 !important;
+  }
 
-.tablevalues {
-  cursor: pointer;
-  position: relative;
-}
-.widthlarge {
-  width: 250px;
-  margin-left: -125px;
-}
-.red {
-  fill: red;
-  color: red;
-}
-.green {
-  fill: green;
-  color: green;
-}
-.orange .tablevalues .warningtext {
-  visibility: hidden;
-  text-align: center;
-  z-index: 1;
-  top: 100%;
-  left: 50%;
-
-  /* Design */
-  font-weight: 100;
-  font-family: $font_courier;
-  word-wrap: break-word;
-  color: $blue;
-  font-style: italic;
-
-  background-color: $dark-purple;
-  border-radius: 6px;
-  padding: 5px 5px 5px 5px;
-}
-.tablevalues:hover {
-  color: $darkteal;
-  .warningtext {
-    visibility: visible;
+  .endexpbtn {
+    .bx--btn--primary {
+      background-color: $darkteal;
+    }
+    .bx--btn--primary:hover {
+      background-color: $teal;
+    }
+    .bx--btn.bx--btn--disabled .bx--btn:disabled {
+      background: #c6c6c6;
+    }
   }
-}
 
-.currenttraffic {
-  /* Design */
-  font-weight: 100;
-  color: $blue;
-  font-style: italic;
-  width: 350px;
-  background-color: $dark-purple;
-  border-radius: 6px;
-}
+  .bx--data-table-header {
+    background-color: inherit !important;
+  }
+
+  .titletexts {
+    color: $teal;
+    fill: $teal;
+  }
 
-.advancedstats {
-  div {
+  .tablevalues {
+    cursor: pointer;
+    position: relative;
+  }
+  .widthlarge {
+    width: 250px;
+    margin-left: -125px;
+  }
+  .red {
+    fill: red;
+    color: red;
+  }
+  .green {
+    fill: green;
+    color: green;
+  }
+  .orange .tablevalues .warningtext {
     visibility: hidden;
-    position: absolute;
+    text-align: center;
     z-index: 1;
-    bottom: 100%;
+    top: 100%;
     left: 50%;
-    margin-left: -250px;
-    width: 500px;
 
     /* Design */
     font-weight: 100;
     font-family: $font_courier;
-    font-size: 14px;
+    word-wrap: break-word;
     color: $blue;
     font-style: italic;
-    display: inline;
+
     background-color: $dark-purple;
     border-radius: 6px;
     padding: 5px 5px 5px 5px;
   }
-  h4 {
-    color: $teal;
-    fill: $teal;
-    cursor: pointer;
-    position: relative;
+  .tablevalues:hover {
+    color: $darkteal;
+    .warningtext {
+      visibility: visible;
+    }
   }
 
-  sup:hover {
-    color: $darkteal;
+  .currenttraffic {
+    /* Design */
+    font-weight: 100;
+    color: $blue;
+    font-style: italic;
+    width: 350px;
+    background-color: $dark-purple;
+    border-radius: 6px;
+  }
+
+  .advancedstats {
     div {
-      visibility: visible;
+      visibility: hidden;
+      position: absolute;
+      z-index: 1;
+      bottom: 100%;
+      left: 50%;
+      margin-left: -250px;
+      width: 500px;
+
+      /* Design */
+      font-weight: 100;
+      font-family: $font_courier;
+      font-size: 14px;
+      color: $blue;
+      font-style: italic;
+      display: inline;
+      background-color: $dark-purple;
+      border-radius: 6px;
+      padding: 5px 5px 5px 5px;
+    }
+    h4 {
+      color: $teal;
+      fill: $teal;
+      cursor: pointer;
+      position: relative;
+    }
+
+    sup:hover {
+      color: $darkteal;
+      div {
+        visibility: visible;
+      }
     }
   }
-}
 
-.pad10 {
-  padding: 10px;
-}
-.apexcharts-yaxis-label {
-  fill: $darkteal;
-}
+  .pad10 {
+    padding: 10px;
+  }
+  .apexcharts-yaxis-label {
+    fill: $darkteal;
+  }
 
-.apexcharts-xaxis-label {
-  fill: $darkteal;
-}
+  .apexcharts-xaxis-label {
+    fill: $darkteal;
+  }
 
-.apexcharts-active {
-  color: $darkteal;
+  .apexcharts-active {
+    color: $darkteal;
+  }
 }