cockpit: Stop importing cockpit's base1/patternfly.css
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
parent
bc24785d98
commit
de0b71d62c
13 changed files with 1007 additions and 27 deletions
36
lib/patternfly/_fonts.scss
Normal file
36
lib/patternfly/_fonts.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
/*
|
||||||
|
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/_fonts.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin printRedHatFont(
|
||||||
|
$weightValue: 400,
|
||||||
|
$weightName: "Regular",
|
||||||
|
$familyName: "RedHatText",
|
||||||
|
$style: "normal",
|
||||||
|
$relative: true
|
||||||
|
) {
|
||||||
|
$filePath: "../../static/fonts" + "/" + $familyName + "-" + $weightName;
|
||||||
|
@font-face {
|
||||||
|
font-family: $familyName;
|
||||||
|
src: url('#{$filePath}.woff2') format('woff2');
|
||||||
|
font-style: #{$style};
|
||||||
|
font-weight: $weightValue;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include printRedHatFont(700, "Bold", $familyName: "RedHatDisplay");
|
||||||
|
@include printRedHatFont(700, "BoldItalic", $style: "italic", $familyName: "RedHatDisplay");
|
||||||
|
@include printRedHatFont(300, "Black", $familyName: "RedHatDisplay");
|
||||||
|
@include printRedHatFont(300, "BlackItalic", $style: "italic", $familyName: "RedHatDisplay");
|
||||||
|
@include printRedHatFont(300, "Italic", $style: "italic", $familyName: "RedHatDisplay");
|
||||||
|
@include printRedHatFont(400, "Medium", $familyName: "RedHatDisplay");
|
||||||
|
@include printRedHatFont(400, "MediumItalic", $style: "italic", $familyName: "RedHatDisplay");
|
||||||
|
@include printRedHatFont(300, "Regular", $familyName: "RedHatDisplay");
|
||||||
|
|
||||||
|
@include printRedHatFont(300, "Bold");
|
||||||
|
@include printRedHatFont(300, "BoldItalic", $style: "italic");
|
||||||
|
@include printRedHatFont(300, "Italic");
|
||||||
|
@include printRedHatFont(700, "Medium");
|
||||||
|
@include printRedHatFont(700, "MediumItalic", $style: "italic");
|
||||||
|
@include printRedHatFont(400, "Regular");
|
||||||
15
lib/patternfly/patternfly-4-cockpit.scss
Normal file
15
lib/patternfly/patternfly-4-cockpit.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
/*
|
||||||
|
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-4-cockpit.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Set fake font and icon path variables - we are going to indentify these through
|
||||||
|
* patternfly.sed and remove the relevant font-face declarations
|
||||||
|
*/
|
||||||
|
$pf-global--font-path: 'patternfly-fonts-fake-path';
|
||||||
|
$pf-global--fonticon-path: 'patternfly-icons-fake-path';
|
||||||
|
$pf-global--disable-fontawesome: true !default; // Disable Font Awesome 5 Free
|
||||||
|
|
||||||
|
@import '~@patternfly/patternfly/patternfly-base.scss';
|
||||||
|
|
||||||
|
/* Import our own fonts since the PF4 font-face rules are filtered out with patternfly.sed */
|
||||||
|
@import "./fonts";
|
||||||
11
lib/patternfly/patternfly-cockpit.scss
Normal file
11
lib/patternfly/patternfly-cockpit.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/*
|
||||||
|
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-cockpit.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
$icon-font-path: 'patternfly-icons-fake-path/';
|
||||||
|
$font-path: 'patternfly-fonts-fake-path/';
|
||||||
|
|
||||||
|
@import "./patternfly-overrides-variables";
|
||||||
|
@import "~patternfly/dist/sass/patternfly";
|
||||||
|
@import "./patternfly-4-cockpit.scss";
|
||||||
|
@import "./patternfly-overrides.scss";
|
||||||
87
lib/patternfly/patternfly-overrides-variables.scss
Normal file
87
lib/patternfly/patternfly-overrides-variables.scss
Normal 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;
|
||||||
753
lib/patternfly/patternfly-overrides.scss
Normal file
753
lib/patternfly/patternfly-overrides.scss
Normal file
|
|
@ -0,0 +1,753 @@
|
||||||
|
/*
|
||||||
|
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-overrides.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Global Cockpit overrides for PatternFly variables
|
||||||
|
|
||||||
|
// Fonts
|
||||||
|
$font-family-base: "RedHatText", "Open Sans", Helvetica, Arial, sans-serif;
|
||||||
|
$font-family-mono: SFMono-Regular, menlo, monaco, consolas, "Liberation Mono", Courier New, monospace;
|
||||||
|
|
||||||
|
// Resize headings
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
line-height: var(--pf-global--LineHeight--sm);
|
||||||
|
font-family: var(--pf-global--FontFamily--redhatfont--heading--sans-serif);
|
||||||
|
|
||||||
|
.breadcrumb + & {
|
||||||
|
// Vertically align contents of headings directly following breadcrumbs
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--pf-global--FontSize--4xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: var(--pf-global--FontSize--3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: var(--pf-global--FontSize--2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: var(--pf-global--FontSize--xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: var(--pf-global--FontSize--lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restyle inputs & dropdowns
|
||||||
|
.input-group-addon,
|
||||||
|
.bootstrap-select.btn-group .btn,
|
||||||
|
.content-header-extra .dropdown-toggle,
|
||||||
|
.dropdown-toggle,
|
||||||
|
.form-control:not(.ct-select):not(.rbt-input):not(select) {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group-addon,
|
||||||
|
.bootstrap-select.btn-group .btn,
|
||||||
|
.content-header-extra .dropdown-toggle,
|
||||||
|
.dropdown-toggle,
|
||||||
|
.form-control:not(.ct-select) {
|
||||||
|
border-radius: 3px;
|
||||||
|
border-color: var(--pf-global--BorderColor--300);
|
||||||
|
border-bottom-color: var(--pf-global--Color--200);
|
||||||
|
color: var(--pf-global--Color--100);
|
||||||
|
box-shadow: none !important;
|
||||||
|
min-height: 2.25rem;
|
||||||
|
|
||||||
|
&:not(.bootstrap-select):not(.dropdown-form-control) {
|
||||||
|
padding: 1px 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-caret-down {
|
||||||
|
align-self: center;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "\f0d7";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--pf-global--Color--dark-200);
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
border-color: var(--pf-global--BorderColor--300);
|
||||||
|
border-bottom-color: var(--pf-global--primary-color--100);
|
||||||
|
color: var(--pf-global--Color--100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
// Take 1px from the padding and add it to the border
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-disabled=true],
|
||||||
|
&:disabled {
|
||||||
|
background-color: var(--pf-global--disabled-color--300);
|
||||||
|
border-color: var(--pf-global--disabled-color--300);
|
||||||
|
color: var(--pf-global--disabled-color--100);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-error &,
|
||||||
|
&.has-error {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&, &:hover, &:focus {
|
||||||
|
border-color: var(--pf-global--BorderColor--300);
|
||||||
|
border-bottom: 2px solid var(--pf-global--danger-color--100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Truncate text in Cockpit/PF3 dropdowns (when necessary)
|
||||||
|
.dropdown-toggle > span {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix split dropdowns
|
||||||
|
.input-group:not(.combobox-with-reset){
|
||||||
|
display: inline-flex;
|
||||||
|
|
||||||
|
.combobox-container & {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .form-control {
|
||||||
|
display: flex;
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .input-group-addon,
|
||||||
|
> .dropdown,
|
||||||
|
> .dropdown-toggle {
|
||||||
|
display: flex;
|
||||||
|
width: auto;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .input-group-btn {
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
> .btn {
|
||||||
|
min-width: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select dropdowns in Composer & typeahead find
|
||||||
|
.rbt-input.form-control,
|
||||||
|
select.form-control {
|
||||||
|
--dropdown-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8'%3E%3Cpath fill='%23151515' d='M18.804 1h8.392c.58 0 .87.701.46 1.112L23.46 6.31a.653.653 0 0 1-.922 0l-4.194-4.197A.651.651 0 0 1 18.805 1z'/%3E%3C/svg%3E");
|
||||||
|
--dropdown-background: var(--pf-global--BackgroundColor--100);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background: var(--dropdown-image) no-repeat 100% 50%, var(--dropdown-background) !important;
|
||||||
|
padding-right: 2.5em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust typeahead find style
|
||||||
|
.rbt {
|
||||||
|
&-input {
|
||||||
|
// Support typehead hints
|
||||||
|
&-hint {
|
||||||
|
// Stretch the hint and its input child 100% tall
|
||||||
|
&,
|
||||||
|
> input {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shave off the border and padding, as these misalign the elemnt
|
||||||
|
// (as this widget uses inline styles (ugh!), we _have to_ use !important)
|
||||||
|
> input {
|
||||||
|
border-width: 0 1px !important;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust spinner position
|
||||||
|
&-aux {
|
||||||
|
right: 2rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust dropdown menus
|
||||||
|
.dropdown-menu {
|
||||||
|
> li {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.disabled) > a {
|
||||||
|
color: var(--pf-global--Color--100);
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--pf-global--BackgroundColor--light-300);
|
||||||
|
border-color: var(--pf-global--BackgroundColor--light-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active > a,
|
||||||
|
> a:active {
|
||||||
|
// PF3 reverts the active color with an !important
|
||||||
|
// so we also use an !important here to override it
|
||||||
|
color: var(--pf-global--Color--100) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active > a {
|
||||||
|
// PF3 also modifies these colors with an !important
|
||||||
|
&,
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: var(--pf-global--Color--100) !important;
|
||||||
|
background-color: var(--pf-global--BackgroundColor--light-300) !important;
|
||||||
|
border-color: var(--pf-global--BackgroundColor--light-300) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected > a {
|
||||||
|
color: var(--pf-global--Color--100);
|
||||||
|
background-color: var(--pf-global--BackgroundColor--light-300);
|
||||||
|
border-color: var(--pf-global--BackgroundColor--light-300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stretch dropdown menus to at least the width of the dropdown
|
||||||
|
.dropdown > & {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restyle buttons
|
||||||
|
.pagination a[role=button],
|
||||||
|
.btn {
|
||||||
|
padding: 0.375rem 1rem;
|
||||||
|
transition: background 0.3s, border 0.3s, color 0.3s;
|
||||||
|
|
||||||
|
&:not(.dropdown-toggle):not(.dropdown):not(.bootstrap-select):not(.ct-select) {
|
||||||
|
background-image: none !important;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
&:not(:active):not(:focus):not(:hover) {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:disabled):not([aria-disabled=true]):not(.btn-link) {
|
||||||
|
&:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger) {
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
border-color: var(--pf-global--primary-color--100);
|
||||||
|
box-shadow: inset 0 0 0 1px var(--pf-global--primary-color--100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-primary {
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
background-color: var(--pf-global--primary-color--200);
|
||||||
|
border-color: var(--pf-global--primary-color--200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-success {
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
background-color: var(--pf-global--success-color--200);
|
||||||
|
border-color: var(--pf-global--success-color--200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-info {
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
background-color: var(--pf-global--info-color--200);
|
||||||
|
border-color: var(--pf-global--info-color--200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-warning {
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
background-color: var(--pf-global--warning-color--200);
|
||||||
|
border-color: var(--pf-global--warning-color--200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-danger {
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
background-color: var(--pf-global--danger-color--200);
|
||||||
|
border-color: var(--pf-global--danger-color--200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-disabled=true],
|
||||||
|
&.disabled,
|
||||||
|
&:disabled {
|
||||||
|
&:not(.btn-link):not(a) {
|
||||||
|
&, &:hover {
|
||||||
|
background-color: var(--pf-global--disabled-color--200) !important;
|
||||||
|
border-color: var(--pf-global--disabled-color--200) !important;
|
||||||
|
color: var(--pf-global--disabled-color--100) !important;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
// Backgrounds are a bit too visually weighty in button groups
|
||||||
|
.btn-group > & {
|
||||||
|
background-color: var(--pf-global--disabled-color--300) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root .btn {
|
||||||
|
&-primary,
|
||||||
|
&-success,
|
||||||
|
&-info,
|
||||||
|
&-warning,
|
||||||
|
&-danger {
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shrink embedded buttons
|
||||||
|
.ct-form &,
|
||||||
|
.content-filter &,
|
||||||
|
.listing-ct-head &,
|
||||||
|
.listing-ct-body &,
|
||||||
|
.listing-ct-item &,
|
||||||
|
.action &,
|
||||||
|
.panel-heading &,
|
||||||
|
.panel tr & {
|
||||||
|
padding: 0.125rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restyle button dropdowns to have button borders
|
||||||
|
.btn-group > & + .dropdown-toggle {
|
||||||
|
border-color: var(--pf-global--primary-color--100);
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Center-align icon buttons
|
||||||
|
&.pficon,
|
||||||
|
&.fa {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix up panel action buttons
|
||||||
|
.panel-actions & {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unround touching corners in button and input groups
|
||||||
|
.btn-group,
|
||||||
|
.input-group {
|
||||||
|
> :not(:first-of-type) {
|
||||||
|
border-top-left-radius: 0 !important;
|
||||||
|
border-bottom-left-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
> :not(:last-of-type) {
|
||||||
|
border-top-right-radius: 0 !important;
|
||||||
|
border-bottom-right-radius: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust height of inline edit buttons
|
||||||
|
.form-control-pf-editable > button {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pagination buttons
|
||||||
|
.pagination {
|
||||||
|
ul, li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[role=button] {
|
||||||
|
display: flex;
|
||||||
|
height: 2.25rem;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&[aria-disabled=true],
|
||||||
|
&:disabled {
|
||||||
|
// Backgrounds are a bit too visually weighty in pagination
|
||||||
|
background-color: var(--pf-global--disabled-color--300) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Kebab menu buttons should get special treatment
|
||||||
|
.dropdown-kebab-pf > button {
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restyle modals
|
||||||
|
.modal {
|
||||||
|
&-header {
|
||||||
|
background: var(--pf-global--BackgroundColor--100);
|
||||||
|
padding: 0 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: var(--pf-global--FontWeight--normal);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-footer {
|
||||||
|
> .pf-c-button:not(:last-child) {
|
||||||
|
--pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
|
||||||
|
margin-right: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
|
||||||
|
}
|
||||||
|
--pf-c-modal-box__footer--MarginTop: var(--pf-global--spacer--xl);
|
||||||
|
margin-top: var(--pf-c-modal-box__footer--MarginTop);
|
||||||
|
text-align: unset;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
> .pf-c-button:first-of-type {
|
||||||
|
--pf-c-modal-box__footer__c-button--first-of-type--MarginLeft: 0;
|
||||||
|
margin-left: var(--pf-c-modal-box__footer__c-button--first-of-type--MarginLeft);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust list group font sizes
|
||||||
|
.list-group {
|
||||||
|
font-size: var(--pf-global--FontSize--sm);
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
.dialog-list-ct > &.active {
|
||||||
|
background-color: var(--pf-global--active-color--100);
|
||||||
|
color: var(--pf-global--Color--light-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
> p {
|
||||||
|
font-size: var(--pf-global--FontSize--md);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigation should be standard size
|
||||||
|
nav > & {
|
||||||
|
font-size: var(--pf-global--FontSize--md);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust list views
|
||||||
|
.list-view-pf {
|
||||||
|
.list-group-item-heading {
|
||||||
|
font-size: var(--pf-global--FontSize--md);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Standardize small font size to PF4 small font
|
||||||
|
small {
|
||||||
|
font-size: var(--pf-global--FontSize--sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
// Add PF4 padding to desktop mode
|
||||||
|
.content,
|
||||||
|
.page-ct,
|
||||||
|
.container,
|
||||||
|
.container-fluid {
|
||||||
|
padding: 2rem 3rem;
|
||||||
|
|
||||||
|
.breadcrumb,
|
||||||
|
.breadcrumb + & {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-pf + & {
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rely on page-ct padding; don't duplicate
|
||||||
|
.page-ct .container,
|
||||||
|
.page-ct .container-fluid {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove excess padding from dialogs
|
||||||
|
.modal-dialog .content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change label size & weight to match PF4
|
||||||
|
label {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-block,
|
||||||
|
.label,
|
||||||
|
.list-group-item-heading,
|
||||||
|
.control-label,
|
||||||
|
.info-table-ct > tbody > tr > td:first-child,
|
||||||
|
th > label {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust labels in tables
|
||||||
|
// (used in accounts & containers)
|
||||||
|
.info-table-ct > tbody > tr > td:first-child,
|
||||||
|
td > label,
|
||||||
|
th > label {
|
||||||
|
vertical-align: baseline;
|
||||||
|
// Fake spacing (not quite right, but close)
|
||||||
|
padding: 0.125rem 0.25rem 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust nav tab sizes
|
||||||
|
.nav-tabs {
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
|
||||||
|
> li {
|
||||||
|
|
||||||
|
> a {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active > a {
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
height: 2px;
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
right: -1px;
|
||||||
|
content: "";
|
||||||
|
background: var(--pf-global--active-color--100);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// listing-ct uses tertitiary nav, which has a bottom line
|
||||||
|
.listing-ct-panel &::before {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a PF4 shadow to panels
|
||||||
|
.panel {
|
||||||
|
box-shadow: var(--pf-global--BoxShadow--sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change breadcrumb font size
|
||||||
|
.breadcrumb {
|
||||||
|
padding: 1rem 0;
|
||||||
|
font-size: var(--pf-global--FontSize--sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust modal dialog sizes
|
||||||
|
.modal {
|
||||||
|
&-dialog {
|
||||||
|
width: auto;
|
||||||
|
max-width: 45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-sm {
|
||||||
|
max-width: 35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-lg {
|
||||||
|
max-width: 60rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bump down graph text size
|
||||||
|
.server-graph {
|
||||||
|
font-size: var(--pf-global--FontSize--xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restyle nav tabs (in content header only, for services)
|
||||||
|
// in Cockpit, nav-tabs are also used in lists
|
||||||
|
// and Cockpit's lists use underlines, not overlines
|
||||||
|
.content-header-extra > .nav-tabs > li {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.active::after {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--pf-global--primary-color--100);
|
||||||
|
content: "";
|
||||||
|
height: 2px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flatten the progress bar trough
|
||||||
|
.progress {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust spacing of expand/collapse divider
|
||||||
|
.expand-collapse-pf .expand-collapse-pf-separator.bordered {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restyle slider to look more modern (PF4-like)
|
||||||
|
.slider {
|
||||||
|
&-selection {
|
||||||
|
background: var(--pf-global--active-color--100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-track {
|
||||||
|
border: none;
|
||||||
|
background: var(--pf-global--BorderColor--100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slider-horizontal .slider-track {
|
||||||
|
height: 0.25rem;
|
||||||
|
margin-top: -0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-handle {
|
||||||
|
background: var(--pf-global--primary-color--100);
|
||||||
|
border: none;
|
||||||
|
width: 0.75rem;
|
||||||
|
height: 0.75rem;
|
||||||
|
margin: 0.125rem 0 0 0.125rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.slider-horizontal {
|
||||||
|
/* Move right by half the width */
|
||||||
|
margin-left: -0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Replace native outline with a stylized one */
|
||||||
|
&:focus {
|
||||||
|
--focus-offset: -3px;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: var(--focus-offset);
|
||||||
|
left: var(--focus-offset);
|
||||||
|
right: var(--focus-offset);
|
||||||
|
bottom: var(--focus-offset);
|
||||||
|
border: 2px solid var(--pf-global--primary-color--100);
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: var(--pf-global--primary-color--200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-pf {
|
||||||
|
margin: 0 1rem 0 0;
|
||||||
|
min-height: 2.25rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slider labels */
|
||||||
|
> b {
|
||||||
|
color: var(--pf-global--Color--300);
|
||||||
|
font: inherit;
|
||||||
|
font-size: var(--pf-global--FontSize--xs);
|
||||||
|
position: absolute;
|
||||||
|
top: 1.5rem;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Readjust the tooltip for our needs */
|
||||||
|
.tooltip {
|
||||||
|
margin: -2.75rem 0 0 -2px !important;
|
||||||
|
/* Center horizontally based on its own width */
|
||||||
|
transform: translateX(-50%);
|
||||||
|
/* Don't trap mouse hovering */
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Round off badges, similar to PF4 */
|
||||||
|
.badge {
|
||||||
|
border-radius: 30em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix PF3 carets */
|
||||||
|
.caret {
|
||||||
|
/* PF3 oddly uses borders and a dropdown triangle */
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
/* Use a solid triangle, like PF4, not the lined "v" icon */
|
||||||
|
content: "\f0d7";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix small icon size (for Composer)
|
||||||
|
.pf-icon-small::before {
|
||||||
|
// PF3 uses (1.7em * 12px = 20.4px); PF4 1.25rem = 20px
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix small list icon size (for Composer)
|
||||||
|
.list-pf-icon-small::before {
|
||||||
|
// PF3 uses (1.4em * 12px = 16.8px); PF4 1rem = 16px
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-size: $font-size-base;
|
||||||
|
}
|
||||||
13
package.json
13
package.json
|
|
@ -15,12 +15,14 @@
|
||||||
"@babel/core": "^7.0.0",
|
"@babel/core": "^7.0.0",
|
||||||
"@babel/preset-env": "^7.0.0",
|
"@babel/preset-env": "^7.0.0",
|
||||||
"@babel/preset-react": "^7.0.0",
|
"@babel/preset-react": "^7.0.0",
|
||||||
|
"@patternfly/patternfly": "^4.10.31",
|
||||||
"babel-eslint": "^9.0.0",
|
"babel-eslint": "^9.0.0",
|
||||||
"babel-loader": "^8.0.0",
|
"babel-loader": "^8.0.0",
|
||||||
|
"bootstrap-sass": "^3.4.1",
|
||||||
"chrome-remote-interface": "^0.25.5",
|
"chrome-remote-interface": "^0.25.5",
|
||||||
"compression-webpack-plugin": "^1.1.11",
|
"compression-webpack-plugin": "^1.1.11",
|
||||||
"copy-webpack-plugin": "^4.5.2",
|
"copy-webpack-plugin": "^4.5.2",
|
||||||
"css-loader": "^0.28.11",
|
"css-loader": "^3.2.0",
|
||||||
"eslint": "^5.4.0",
|
"eslint": "^5.4.0",
|
||||||
"eslint-config-standard": "^11.0.0",
|
"eslint-config-standard": "^11.0.0",
|
||||||
"eslint-config-standard-react": "^6.0.0",
|
"eslint-config-standard-react": "^6.0.0",
|
||||||
|
|
@ -31,17 +33,18 @@
|
||||||
"eslint-plugin-promise": "^4.0.0",
|
"eslint-plugin-promise": "^4.0.0",
|
||||||
"eslint-plugin-react": "^6.9.0",
|
"eslint-plugin-react": "^6.9.0",
|
||||||
"eslint-plugin-standard": "^3.1.0",
|
"eslint-plugin-standard": "^3.1.0",
|
||||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
|
||||||
"htmlparser": "^1.7.7",
|
"htmlparser": "^1.7.7",
|
||||||
"jed": "^1.1.1",
|
"jed": "^1.1.1",
|
||||||
"jshint": "~2.9.1",
|
"jshint": "~2.9.1",
|
||||||
"jshint-loader": "~0.8.3",
|
"jshint-loader": "~0.8.3",
|
||||||
"less": "~3.0.1",
|
"less": "~3.0.1",
|
||||||
"less-loader": "~4.0.6",
|
"less-loader": "~4.0.6",
|
||||||
|
"mini-css-extract-plugin": "^0.9.0",
|
||||||
"po2json": "^0.4.5",
|
"po2json": "^0.4.5",
|
||||||
"sass-loader": "^7.0.3",
|
"sass-loader": "^8.0.2",
|
||||||
"sizzle": "^2.3.3",
|
"sizzle": "^2.3.3",
|
||||||
"stdio": "^0.2.7",
|
"stdio": "^0.2.7",
|
||||||
|
"string-replace-loader": "^2.3.0",
|
||||||
"webpack": "^4.19.0",
|
"webpack": "^4.19.0",
|
||||||
"webpack-cli": "^3.1.0"
|
"webpack-cli": "^3.1.0"
|
||||||
},
|
},
|
||||||
|
|
@ -57,8 +60,8 @@
|
||||||
"jquery": "3.3.1",
|
"jquery": "3.3.1",
|
||||||
"moment": "2.22.2",
|
"moment": "2.22.2",
|
||||||
"mustache": "2.3.0",
|
"mustache": "2.3.0",
|
||||||
"node-sass": "^4.9.0",
|
"node-sass": "4.14.1",
|
||||||
"patternfly": "3.35.1",
|
"patternfly": "3.59.4",
|
||||||
"prop-types": "^15.6.2",
|
"prop-types": "^15.6.2",
|
||||||
"raw-loader": "^0.5.1",
|
"raw-loader": "^0.5.1",
|
||||||
"react": "^16.4.2",
|
"react": "^16.4.2",
|
||||||
|
|
|
||||||
|
|
@ -22,9 +22,7 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
||||||
<head>
|
<head>
|
||||||
<title translate>Journal</title>
|
<title translate>Journal</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link href="../base1/patternfly.css" rel="stylesheet">
|
<link href="config.css" rel="stylesheet">
|
||||||
<link href="table.css" rel="stylesheet">
|
|
||||||
<link href="recordings.css" rel="stylesheet">
|
|
||||||
<script type="text/javascript" src="../base1/cockpit.js"></script>
|
<script type="text/javascript" src="../base1/cockpit.js"></script>
|
||||||
<script src="../*/po.js"></script>
|
<script src="../*/po.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,9 @@
|
||||||
*/
|
*/
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
import '../lib/patternfly/patternfly-cockpit.scss';
|
||||||
|
import './recordings.css';
|
||||||
|
|
||||||
let cockpit = require("cockpit");
|
let cockpit = require("cockpit");
|
||||||
let React = require("react");
|
let React = require("react");
|
||||||
let ReactDOM = require("react-dom");
|
let ReactDOM = require("react-dom");
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,9 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
|
import '../lib/patternfly/patternfly-cockpit.scss';
|
||||||
|
|
||||||
import { Application } from './app.jsx';
|
import { Application } from './app.jsx';
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,6 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
||||||
<head>
|
<head>
|
||||||
<title translate>Journal</title>
|
<title translate>Journal</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link href="../base1/patternfly.css" rel="stylesheet">
|
|
||||||
<link href="recordings.css" rel="stylesheet">
|
<link href="recordings.css" rel="stylesheet">
|
||||||
<script type="text/javascript" src="../base1/jquery.js"></script>
|
<script type="text/javascript" src="../base1/jquery.js"></script>
|
||||||
<script type="text/javascript" src="../base1/cockpit.js"></script>
|
<script type="text/javascript" src="../base1/cockpit.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -348,7 +348,7 @@ table.listing.listing-ct > caption {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Align table title */
|
/* Align table title */
|
||||||
table.listing-ct -> caption {
|
table.listing-ct > caption {
|
||||||
padding-left: 10px !important;
|
padding-left: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,9 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
|
|
||||||
|
import '../lib/patternfly/patternfly-cockpit.scss';
|
||||||
|
import './recordings.css';
|
||||||
|
|
||||||
let $ = require("jquery");
|
let $ = require("jquery");
|
||||||
let cockpit = require("cockpit");
|
let cockpit = require("cockpit");
|
||||||
let _ = cockpit.gettext;
|
let _ = cockpit.gettext;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
const copy = require("copy-webpack-plugin");
|
const copy = require("copy-webpack-plugin");
|
||||||
const extract = require("extract-text-webpack-plugin");
|
const extract = require("mini-css-extract-plugin");
|
||||||
const fs = require("fs");
|
const fs = require("fs");
|
||||||
const webpack = require("webpack");
|
const webpack = require("webpack");
|
||||||
const CompressionPlugin = require("compression-webpack-plugin");
|
const CompressionPlugin = require("compression-webpack-plugin");
|
||||||
|
|
@ -24,13 +24,9 @@ var info = {
|
||||||
entries: {
|
entries: {
|
||||||
"recordings": [
|
"recordings": [
|
||||||
"./recordings.jsx",
|
"./recordings.jsx",
|
||||||
"./recordings.css",
|
|
||||||
"./pkg/lib/listing.less",
|
|
||||||
],
|
],
|
||||||
"config": [
|
"config": [
|
||||||
"./config.jsx",
|
"./config.jsx",
|
||||||
"./recordings.css",
|
|
||||||
"./table.css",
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
files: [
|
files: [
|
||||||
|
|
@ -39,11 +35,8 @@ var info = {
|
||||||
"player.jsx",
|
"player.jsx",
|
||||||
"player.css",
|
"player.css",
|
||||||
"recordings.jsx",
|
"recordings.jsx",
|
||||||
"recordings.css",
|
|
||||||
"table.css",
|
|
||||||
"manifest.json",
|
"manifest.json",
|
||||||
"timer.css",
|
"timer.css",
|
||||||
"./pkg/lib/listing.less",
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -95,7 +88,7 @@ info.files = files;
|
||||||
|
|
||||||
var plugins = [
|
var plugins = [
|
||||||
new copy(info.files),
|
new copy(info.files),
|
||||||
new extract("[name].css")
|
new extract({filename: "[name].css"})
|
||||||
];
|
];
|
||||||
|
|
||||||
/* Only minimize when in production mode */
|
/* Only minimize when in production mode */
|
||||||
|
|
@ -120,6 +113,7 @@ module.exports = {
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
"fs": path.resolve(nodedir, "fs-extra"),
|
"fs": path.resolve(nodedir, "fs-extra"),
|
||||||
|
"font-awesome": path.resolve(nodedir, 'font-awesome-sass/assets/stylesheets'),
|
||||||
},
|
},
|
||||||
modules: [libdir, nodedir],
|
modules: [libdir, nodedir],
|
||||||
},
|
},
|
||||||
|
|
@ -154,17 +148,92 @@ module.exports = {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.less$/,
|
test: /\.less$/,
|
||||||
loader: extract.extract("css-loader!less-loader")
|
use: [
|
||||||
},
|
extract.loader,
|
||||||
{
|
{
|
||||||
exclude: /node_modules/,
|
loader: 'css-loader',
|
||||||
loader: extract.extract('css-loader!sass-loader'),
|
options: {
|
||||||
test: /\.scss$/
|
url: false
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: extract.extract("css-loader?minimize=&root=" + libdir),
|
|
||||||
test: /\.css$/,
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"less-loader"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* HACK: remove unwanted fonts from PatternFly's css */
|
||||||
|
{
|
||||||
|
test: /patternfly-cockpit.scss$/,
|
||||||
|
use: [
|
||||||
|
extract.loader,
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
url: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'string-replace-loader',
|
||||||
|
options: {
|
||||||
|
multiple: [
|
||||||
|
{
|
||||||
|
search: /src:url[(]"patternfly-icons-fake-path\/glyphicons-halflings-regular[^}]*/g,
|
||||||
|
replace: 'font-display:block; src:url("../base1/fonts/glyphicons.woff") format("woff");',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
search: /src:url[(]"patternfly-fonts-fake-path\/PatternFlyIcons[^}]*/g,
|
||||||
|
replace: 'src:url("../base1/fonts/patternfly.woff") format("woff");',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
search: /src:url[(]"patternfly-fonts-fake-path\/fontawesome[^}]*/,
|
||||||
|
replace: 'font-display:block; src:url("../base1/fonts/fontawesome.woff?v=4.2.0") format("woff");',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
search: /src:url\("patternfly-icons-fake-path\/pficon[^}]*/g,
|
||||||
|
replace: 'src:url("../base1/fonts/patternfly.woff") format("woff");',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
search: /@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g,
|
||||||
|
replace: '',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'sass-loader',
|
||||||
|
options: {
|
||||||
|
sassOptions: {
|
||||||
|
includePaths: [
|
||||||
|
// Teach webpack to resolve these references in order to build PF3 scss
|
||||||
|
path.resolve(nodedir, 'font-awesome-sass', 'assets', 'stylesheets'),
|
||||||
|
path.resolve(nodedir, 'patternfly', 'dist', 'sass'),
|
||||||
|
path.resolve(nodedir, 'bootstrap-sass', 'assets', 'stylesheets'),
|
||||||
|
],
|
||||||
|
outputStyle: 'compressed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.s?css$/,
|
||||||
|
exclude: /patternfly-cockpit.scss/,
|
||||||
|
use: [
|
||||||
|
extract.loader,
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
url: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'sass-loader',
|
||||||
|
options: {
|
||||||
|
sassOptions: {
|
||||||
|
outputStyle: 'compressed',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
plugins: plugins
|
plugins: plugins
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue