Refs #37882 - move css from vendor to foreman

app/views/layouts/base.html.erb

@@ -10,7 +10,6 @@
 
     <%= favicon_link_tag "favicon.ico"%>
 
-    <%= get_webpack_foreman_vendor_css %>
     <%= stylesheet_link_tag 'application' %>
     <%= yield(:stylesheets) %>
 

webpack/assets/javascripts/react_app/Root/ReactApp.js

@@ -11,6 +11,7 @@ import apolloClient from './apollo';
 import ToastsList from '../components/ToastsList';
 import ErrorBoundary from '../components/common/ErrorBoundary';
 import ConfirmModal from '../components/ConfirmModal';
+import '../common/scss/vendor-core.scss';
 
 const ReactApp = ({ layout, metadata, toasts }) => {
   const [context, setContext] = useState({ metadata });

webpack/assets/javascripts/react_app/common/scss/mixins.scss

@@ -0,0 +1,21 @@
+// Mixins - Bootstrap overrides
+// -------------------
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Form control outline
+@mixin form-control-outline($color: $input-border-focus){
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    border-color: $color;
+    outline: 0 !important;
+    @include box-shadow(unquote("inset 0 1px 1px rgba(3, 3, 3, 0.075), 0 0 8px #{$color-rgba}"));
+  }
+}
+/**
+  Third Party mixins imports here
+*/
+@import '~patternfly/dist/sass/patternfly/bootstrap-mixin-overrides';
+@import '~patternfly/dist/sass/patternfly/mixins';

webpack/assets/javascripts/react_app/common/scss/vendor-core.scss

@@ -0,0 +1,22 @@
+/**
+  Third Party libraries imports here
+*/
+@import '../variables';
+@import './mixins';
+
+@import '~multiselect/css/multi-select.css';
+@import '~react-diff-view/style/index.css';
+@import '~select2/select2-bootstrap.css';
+@import '~select2/select2.css';
+@import "~dsmorse-gridster/dist/jquery.gridster";
+@import "~datatables.net-bs/css/dataTables.bootstrap.css";
+// @import "~@redhat-cloud-services/frontend-components/index.css";
+
+// patternfly v3
+@import '~patternfly-react/dist/sass/_patternfly-react.scss';
+@import '~patternfly-react-extensions/dist/sass/_select.scss';
+@import '~patternfly/dist/sass/patternfly/_loading-state';
+
+// patternfly v4
+@import '~@patternfly/patternfly/patternfly';
+@import '~@patternfly/patternfly/patternfly-addons';

webpack/assets/javascripts/react_app/common/variables.scss

@@ -1,3 +1,22 @@
-@import '~@theforeman/vendor/scss/variables.scss';
+/**
+  Third Party variables imports here
+*/
+// patternfly v3
+$font-path: '~patternfly/dist/fonts/';
+$img-path: '~patternfly/dist/img/';
+$icon-font-path: '~patternfly/dist/fonts/';
 
-$header-max-width: calc(#{$pf-global--breakpoint--lg} + 70px); //TODO move into @theforeman/vendor/scss/variables
+// patternfly v4
+$pf-global--font-path: '~@patternfly/patternfly/assets/fonts';
+$fa-font-path: '~@patternfly/patternfly/assets/fonts/webfonts';
+$pf-global--fonticon-path: '~@patternfly/patternfly/assets/pficon';
+$pf-global--image-path: '~@patternfly/patternfly/assets/images';
+
+// patternfly v3
+@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '~patternfly/dist/sass/patternfly/variables';
+
+// patternfly v4
+@import '~@patternfly/patternfly/base/patternfly-variables';
+
+$header-max-width: calc(#{$pf-global--breakpoint--lg} + 70px);

webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "../../../../common/variables";
 
 @keyframes blink {
   0% {

webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../../../common/variables.scss';
 
 .pf-c-masthead .pf-c-toolbar {
   .pf-c-context-selector__menu-search {

webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../common/variables.scss';
 
 $caption_font_weight: 600;
 $background_image: url('../LoginPage/background.svg');

webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../../common/variables.scss';
 
 .bookmarks-dropdown-item {
   word-break: break-word;

webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss

@@ -1,5 +1,5 @@
-@import "~@theforeman/vendor/scss/variables";
 @import '../../common/colors.scss';
+@import '../../common/variables.scss';
 
 .ReactPasswordStrength {
   .ReactPasswordStrength-input {

webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../common//variables.scss';
 
 .autocomplete-search {
   width: 100%;

webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "../../../../common/variables.scss";
 
 $screen-md:                  992px !default;
 $screen-md-min:              $screen-md !default;

webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss

@@ -1,5 +1,5 @@
-@import "~@theforeman/vendor/scss/variables";
-@import "~@theforeman/vendor/scss/mixins";
+@import "../../../common/variables";
+@import "../../../common/scss/mixins";
 
 .foreman-numeric-input {
   position: relative;