Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cockpit: Stop importing cockpit's base1/patternfly.css

Browse source 
This is deprecated API and will be dropped at some point, in favor
of projects shipping their own CSS.

Follow https://github.com/cockpit-project/starter-kit/blob/master/webpack.config.js
approach on how to use PF CSS.

Also:
* Replace extract-text-webpack-plugin with mini-css-webpack-plugin as
the former is deprecated: https://webpack.js.org/plugins/extract-text-webpack-plugin/#usage
* Upgrade PF module dependency
* Reduce the css files that are linked through webpack. Instead include
from the JS the CSS files and let mini-css-extract-plugin do the rest of
the work
This commit is contained in:
Katerina Koukiou 2020-06-24 18:56:21 +02:00
parent bc24785d98
commit de0b71d62c
13 changed files with 1007 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

87
lib/patternfly/patternfly-overrides-variables.scss Normal file
View file

@ -0,0 +1,87 @@
/*
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-overrides-variables.scss
*/
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000;
$gray-darker: lighten($gray-base, 13.5%); // #222
$gray-dark: lighten($gray-base, 20%); // #333
$gray: lighten($gray-base, 33.5%); // #555
$gray-light: lighten($gray-base, 46.7%); // #777
$gray-lighter: lighten($gray-base, 93.5%); // #eee
$brand-primary: #06c;
$brand-success: #92d400;
$brand-info: #73bcf7;
$brand-warning: #f0ab00;
$brand-danger: #c9190b;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fafafa;
//** Global text color on `<body>`.
$text-color: #151515;
$navbar-pf-vertical-bg-color: $text-color;
//** Global textual link color.
//$link-color: var(--pf-global--link--Color);
//** Link hover color set via `darken()` function.
//$link-hover-color: var(--pf-global--link--Color--hover);
$link-color: #06c;
$link-hover-color: #004080;
//** Link hover decoration.
$link-hover-decoration: underline;
//** Global color for active items (e.g., navs or dropdowns).
$component-active-color: var(--pf-global--active-color--100);
//** Global background color for active items (e.g., navs or dropdowns).
$component-active-bg: $brand-primary;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$btn-font-weight: normal;
$btn-default-color: $brand-primary;
$btn-default-bg: #fff;
$btn-default-border: $brand-primary;
$btn-primary-color: #fff;
$btn-primary-bg: $brand-primary;
$btn-primary-border: $brand-primary;
$btn-success-color: #fff;
$btn-success-bg: $brand-success;
$btn-success-border: $btn-success-bg;
$btn-info-color: #fff;
$btn-info-bg: $brand-info;
$btn-info-border: $btn-info-bg;
$btn-warning-color: #fff;
$btn-warning-bg: $brand-warning;
$btn-warning-border: $btn-warning-bg;
$btn-danger-color: #fff;
$btn-danger-bg: $brand-danger;
$btn-danger-border: $btn-danger-bg;
$btn-link-disabled-color: $gray-light;
$line-height-base: 1.5;
$font-size-base : 16px;