Addition of ancillary css partials to support bootstrap and pf3 while…

… their dependencies are removed from package.json. In conjunction with their removal we are enabling the pf4 reset and removing the shield-inheritables rules. Also additional changes to rules and variables no longer in use.

frontend/package.json

@@ -163,7 +163,6 @@
     "murmurhash-js": "1.0.x",
     "null-loader": "^3.0.0",
     "openshift-logos-icon": "1.7.1",
-    "patternfly": "3.59.5",
     "pluralize": "^8.0.0",
     "point-in-svg-path": "1.0.1",
     "popper.js": "^1.15.0",
@@ -247,7 +246,6 @@
     "acorn": "^7.0.0",
     "acorn-jsx": "5.2.0",
     "babel-loader": "^8.1.0",
-    "bootstrap-sass": "^3.3.7",
     "browser-env": "3.x",
     "cache-loader": "1.x",
     "chalk": "2.4.x",

frontend/packages/console-app/src/components/cloud-shell/CloudShellExec.scss

@@ -1,12 +1,10 @@
-@import '~patternfly/dist/sass/patternfly/color-variables';
-
 .co-cloudshell-exec {
   &__container-error {
     background-color: var(--pf-global--BackgroundColor--100);
     height: 100%;
   }
 
   &__error-msg {
-    color: $color-pf-red !important;
+    color: var(--pf-global--danger-color--100) !important;
   }
 }

frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/_create-volume-snapshot.scss

@@ -1,4 +1,4 @@
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '../../../../../../public/style/vars';
 @import '../../../../../console-shared/src/styles/skeleton-screen.scss';
 
 .co-volume-snapshot__body {

frontend/packages/console-shared/src/components/dashboard/dashboard.scss

@@ -1,5 +1,3 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
 @import '../../../../../public/style/vars';
 
 .co-dashboard-body {

frontend/packages/console-shared/src/components/dashboard/resource-quota-card/ResourceQuotaItem.tsx

@@ -24,9 +24,7 @@ const ResourceQuotaItem: React.FC<ResourceQuotaItemProps> = ({ resourceQuota })
           namespace={resourceQuota.metadata.namespace}
           inline="true"
         />
-        {scopes && (
-          <QuotaScopesInline className="co-resource-quota-dashboard-scopes" scopes={scopes} />
-        )}
+        {scopes && <QuotaScopesInline scopes={scopes} />}
       </div>
       <QuotaGaugeCharts
         quota={resourceQuota}

frontend/packages/console-shared/src/components/editor/YAMLEditorToolbar.scss

@@ -1,4 +1,4 @@
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '../../../../../public/style/vars';
 
 .ocs-yaml-editor-toolbar {
   align-items: center;

frontend/packages/console-shared/src/components/form-utils/FormFooter.scss

@@ -1,5 +1,4 @@
 @import '../../../../../public/style/vars';
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
 
 .ocs-form-footer {
   padding: var(--pf-global--spacer--md) ($grid-gutter-width/2);

frontend/packages/operator-lifecycle-manager/src/style.scss

@@ -1,9 +1,3 @@
-// Bootstrap Core variables and mixins
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
-
-// Patternfly Core variables and mixins
-@import '~patternfly/dist/sass/patternfly/variables';
-
 // OpenShift variables
 @import '../../../public/style/vars';
 

frontend/packages/topology/src/components/list-view/TopologyListView.scss

@@ -1,6 +1,4 @@
 @import '../../../../../public/style/vars';
-@import '../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
-@import '~@patternfly/patternfly/sass-utilities/colors';
 
 .odc-topology-list-view {
   --odc-topology-list-view-type-icon-size: 16px;

frontend/packages/topology/src/components/list-view/cells/AlertsCell.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '../../../../../../public/style/vars';
 
 .odc-topology-list-view__alert-cell {
   min-width: 0; // To enable text-overflow: ellipsis within a css-grid area

frontend/packages/topology/src/components/list-view/cells/MemoryCell.scss

@@ -1,5 +1,4 @@
 @import '../../../../../../public/style/vars';
-@import '../../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
 
 .odc-topology-list-view__metrics-cell {
   &__metric-tooltip {

frontend/packages/topology/src/components/list-view/cells/MetricsCell.scss

@@ -1,5 +1,4 @@
 @import '../../../../../../public/style/vars';
-@import '../../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
 
 .odc-topology-list-view__metrics-cell {
   &__metric-tooltip {

frontend/packages/topology/src/components/list-view/cells/StatusCell.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '../../../../../../public/style/vars';
 
 .odc-topology-list-view__detail--status {
   text-align: right;

frontend/packages/topology/src/filters/TopologyFilterBar.scss

@@ -1,5 +1,4 @@
 @import '../../../../public/style/vars';
-@import '../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
 
 .odc-topology-filter-bar {
   background-color: var(--pf-chart-global--Fill--Color--white);

frontend/public/components/_build-pipeline.scss

@@ -1,12 +1,12 @@
-$pipeline-aborted-color: $color-pf-black-300;
-$pipeline-border-color: $color-pf-black-300;
-$pipeline-failed-color: $color-pf-red-100;
+$pipeline-aborted-color: $pf-color-black-300;
+$pipeline-border-color: $pf-color-black-300;
+$pipeline-failed-color: $pf-color-red-100;
 $pipeline-font-base: 13px;
-$pipeline-in-progress-color: $color-pf-blue-400;
-$pipeline-new-color: $color-pf-blue-100;
-$pipeline-pending-color: $color-pf-black-300;
+$pipeline-in-progress-color: $pf-color-blue-400;
+$pipeline-new-color: $pf-color-blue-100;
+$pipeline-pending-color: $pf-color-black-300;
 $pipeline-success-color: var(--pf-chart-color-green-400);
-$pipeline-require-attention-color: $color-pf-gold-400;
+$pipeline-require-attention-color: $pf-color-gold-400;
 $pipeline-circle-animation-time: 0.35s;
 $pipeline-circle-diameter: 18px;
 $pipeline-line-border-width: 8px;

frontend/public/components/_deploy-image.scss

@@ -10,8 +10,8 @@
 }
 
 .co-image-name-results {
-  border-bottom: 1px solid $color-pf-black-200;
-  border-top: 1px solid $color-pf-black-200;
+  border-bottom: 1px solid $pf-color-black-200;
+  border-top: 1px solid $pf-color-black-200;
   margin: 30px 0;
   padding: 30px 0;
 

frontend/public/components/_detail-table.scss

@@ -17,7 +17,7 @@
 
   &,
   &__section {
-    border-color: $color-pf-black-200;
+    border-color: $pf-color-black-200;
     border-style: solid;
   }
 

frontend/public/components/_dropdown.scss

@@ -1,8 +1,8 @@
 @import '~@patternfly/patternfly/sass-utilities/scss-variables';
 
-$color-bookmarker--hover: $color-pf-black-500;
-$color-bookmarker: $color-pf-black-400;
-$dropdown-background--hover: $color-pf-black-200; // pf-c-dropdown__menu-item--hover--BackgroundColor
+$color-bookmarker--hover: $pf-color-black-500;
+$color-bookmarker: $pf-color-black-400;
+$dropdown-background--hover: $pf-color-black-200; // pf-c-dropdown__menu-item--hover--BackgroundColor
 
 .dropdown--full-width {
   &,
@@ -27,15 +27,15 @@ $dropdown-background--hover: $color-pf-black-200; // pf-c-dropdown__menu-item--h
 }
 
 .dropdown-menu__divider {
-  background-color: $color-pf-black-200;
+  background-color: $pf-color-black-200;
   height: 1px;
   flex-grow: 1;
   margin: 9px 0;
   overflow: hidden;
 }
 
 .dropdown-menu__header {
-  color: $color-pf-black-600;
+  color: $pf-color-black-600;
   flex-grow: 1;
   font-size: ($font-size-base - 1);
   padding: 3px 10px;

frontend/public/components/_global-notification.scss

@@ -1,7 +1,7 @@
-$global-notification-text: $color-pf-white;
+$global-notification-text: $pf-color-white;
 
 .co-global-notification {
-  background-color: $color-pf-blue-400;
+  background-color: $pf-color-blue-400;
   color: $global-notification-text;
   padding: 4px ($grid-gutter-width / 2);
   text-align: center;

frontend/public/components/_horizontal-nav.scss

@@ -5,7 +5,7 @@ $co-m-horizontal-nav__menu-item-link-padding-lr: ($grid-gutter-width / 2);
   display: flex;
   flex-shrink: 0; // prevent collapse of tabs
   list-style: none;
-  margin: 0;
+  margin: 0 !important;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 0;
@@ -16,7 +16,7 @@ $co-m-horizontal-nav__menu-item-link-padding-lr: ($grid-gutter-width / 2);
   }
   &--within-sidebar {
     border-top: 1px solid $color-grey-background-border;
-    margin-bottom: $grid-gutter-width;
+    margin-bottom: $grid-gutter-width !important;
     margin-left: -($grid-gutter-width / 2);
     margin-right: -($grid-gutter-width / 2);
     overflow: visible; // so focus indicator is not clipped since these don't need to scroll
@@ -42,7 +42,7 @@ $co-m-horizontal-nav__menu-item-link-padding-lr: ($grid-gutter-width / 2);
   button {
     background: transparent;
     border: 0;
-    color: $color-pf-black-700;
+    color: $pf-color-black-700;
     display: block;
     padding: 6px $co-m-horizontal-nav__menu-item-link-padding-lr 8px;
     position: relative;
@@ -52,7 +52,7 @@ $co-m-horizontal-nav__menu-item-link-padding-lr: ($grid-gutter-width / 2);
       color: #252525;
       text-decoration: none;
       &::after {
-        background: $color-pf-black-400;
+        background: $pf-color-black-400;
       }
     }
     &::after {
@@ -68,9 +68,9 @@ $co-m-horizontal-nav__menu-item-link-padding-lr: ($grid-gutter-width / 2);
   &.co-m-horizontal-nav-item--active {
     a,
     button {
-      color: $link-color;
+      color: var(--pf-global--link--Color);
       &::after {
-        background: $link-color;
+        background: var(--pf-global--link--Color);
       }
     }
   }

frontend/public/components/_image-stream.scss

@@ -19,13 +19,13 @@
 
 .co-images-stream-tag-timeline__circle-icon,
 .co-images-stream-tag-timeline__square-icon {
-  color: $color-pf-black-300;
+  color: $pf-color-black-300;
   left: 8px;
   position: relative;
 }
 
 .co-images-stream-tag-timeline__info {
-  background: $color-pf-black-150;
+  background: $pf-color-black-150;
   border-radius: 3px;
   line-height: 30px;
   margin: 8px 0 24px 40px;
@@ -43,7 +43,7 @@
 }
 
 .co-images-stream-tag-timeline__line {
-  border: 2px solid $color-pf-black-300;
+  border: 2px solid $pf-color-black-300;
   left: 14px;
   position: relative;
 }

frontend/public/components/_import-yaml-results.scss

@@ -1,6 +1,3 @@
-// Bootstrap Core variables and mixins
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
-
 .co-import-yaml-results-page {
   height: 100%;
 }

frontend/public/components/_nav-title.scss

@@ -1,5 +1,5 @@
 .co-actions {
-  align-items: flex-start; // Keep dropdown menu positioned correctly when titles wrap
+  align-items: baseline; // Keep dropdown menu positioned correctly
   display: flex;
   @media(max-width: $screen-xs){
     align-items: flex-end;

frontend/public/components/_quota.scss

@@ -4,10 +4,6 @@
   justify-content: space-evenly;
 }
 
-.co-resource-quota-dashboard-scopes {
-  font-size: $font-size-h5;
-}
-
 .co-resource-quota-gauge-chart {
   min-width: 170px;
 }

frontend/public/components/_resource-dropdown.scss

@@ -27,11 +27,15 @@
   display: flex;
   align-items: center;
   flex: 1;
+  .small {
+    font-weight: normal !important;
+  }
   .text-muted {
     margin-left: 10px;
   }
 }
 .co-search-group__accordion-toggle {
+  margin-top: 30px;
   .pf-c-accordion__toggle-text {
     display: flex;
     flex-direction: column;

frontend/public/components/_resource.scss

@@ -105,7 +105,7 @@
 
 @keyframes co-resource-icon__deleting {
   to {
-    color: $color-pf-black-600;
+    color: $pf-color-black-600;
   }
 }
 

frontend/public/components/_row-filter.scss

@@ -1,5 +1,5 @@
-$color-row-filter-border: $color-pf-black-300;
-$color-row-filter-border--active: $color-pf-blue-300;
+$color-row-filter-border: $pf-color-black-300;
+$color-row-filter-border--active: $pf-color-blue-300;
 
 .co-m-row-filter__controls {
   display: flex;
@@ -37,7 +37,7 @@ $color-row-filter-border--active: $color-pf-blue-300;
 }
 
 .row-filter__box {
-  background: $color-pf-black-150;
+  background: $pf-color-black-150;
   display: inline-block;
   margin: 0 -1px -1px 0;
   padding: 7px 10px;
@@ -61,7 +61,7 @@ $color-row-filter-border--active: $color-pf-blue-300;
 }
 
 .row-filter__box--active {
-  background: $color-pf-blue-50;
+  background: $pf-color-blue-50;
   border-color: $color-row-filter-border--active !important;
   // z-index is because latter blocks overlap the joining outline of former blocks
   z-index: 1;
@@ -71,14 +71,14 @@ $color-row-filter-border--active: $color-pf-blue-300;
 }
 
 .row-filter__box--empty {
-  color: $color-pf-black-500 !important;
+  color: $pf-color-black-500 !important;
   .row-filter__number-bubble {
     background: inherit;
   }
 }
 
 .row-filter__number-bubble {
-  background: $color-pf-white;
+  background: $pf-color-white;
   border-radius: 4px;
   border: 1px solid $color-row-filter-border;
   display: inline-block;

frontend/public/components/_sysevent-icon.scss

@@ -1,6 +1,6 @@
 .co-sysevent-icon {
   background-color: #fff;
-  border: solid 3px $color-pf-black-200;
+  border: solid 3px $pf-color-black-200;
   border-radius: 50%;
   color: #fff;
   position: relative;