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/preset-env": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@patternfly/patternfly": "^4.10.31",
|
||||
"babel-eslint": "^9.0.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"bootstrap-sass": "^3.4.1",
|
||||
"chrome-remote-interface": "^0.25.5",
|
||||
"compression-webpack-plugin": "^1.1.11",
|
||||
"copy-webpack-plugin": "^4.5.2",
|
||||
"css-loader": "^0.28.11",
|
||||
"css-loader": "^3.2.0",
|
||||
"eslint": "^5.4.0",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-config-standard-react": "^6.0.0",
|
||||
|
|
@ -31,17 +33,18 @@
|
|||
"eslint-plugin-promise": "^4.0.0",
|
||||
"eslint-plugin-react": "^6.9.0",
|
||||
"eslint-plugin-standard": "^3.1.0",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"htmlparser": "^1.7.7",
|
||||
"jed": "^1.1.1",
|
||||
"jshint": "~2.9.1",
|
||||
"jshint-loader": "~0.8.3",
|
||||
"less": "~3.0.1",
|
||||
"less-loader": "~4.0.6",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"po2json": "^0.4.5",
|
||||
"sass-loader": "^7.0.3",
|
||||
"sass-loader": "^8.0.2",
|
||||
"sizzle": "^2.3.3",
|
||||
"stdio": "^0.2.7",
|
||||
"string-replace-loader": "^2.3.0",
|
||||
"webpack": "^4.19.0",
|
||||
"webpack-cli": "^3.1.0"
|
||||
},
|
||||
|
|
@ -57,8 +60,8 @@
|
|||
"jquery": "3.3.1",
|
||||
"moment": "2.22.2",
|
||||
"mustache": "2.3.0",
|
||||
"node-sass": "^4.9.0",
|
||||
"patternfly": "3.35.1",
|
||||
"node-sass": "4.14.1",
|
||||
"patternfly": "3.59.4",
|
||||
"prop-types": "^15.6.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "^16.4.2",
|
||||
|
|
|
|||
|
|
@ -22,9 +22,7 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
|||
<head>
|
||||
<title translate>Journal</title>
|
||||
<meta charset="utf-8">
|
||||
<link href="../base1/patternfly.css" rel="stylesheet">
|
||||
<link href="table.css" rel="stylesheet">
|
||||
<link href="recordings.css" rel="stylesheet">
|
||||
<link href="config.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="../base1/cockpit.js"></script>
|
||||
<script src="../*/po.js"></script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@
|
|||
*/
|
||||
"use strict";
|
||||
|
||||
import '../lib/patternfly/patternfly-cockpit.scss';
|
||||
import './recordings.css';
|
||||
|
||||
let cockpit = require("cockpit");
|
||||
let React = require("react");
|
||||
let ReactDOM = require("react-dom");
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@
|
|||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import '../lib/patternfly/patternfly-cockpit.scss';
|
||||
|
||||
import { Application } from './app.jsx';
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
|||
<head>
|
||||
<title translate>Journal</title>
|
||||
<meta charset="utf-8">
|
||||
<link href="../base1/patternfly.css" rel="stylesheet">
|
||||
<link href="recordings.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="../base1/jquery.js"></script>
|
||||
<script type="text/javascript" src="../base1/cockpit.js"></script>
|
||||
|
|
|
|||
|
|
@ -348,7 +348,7 @@ table.listing.listing-ct > caption {
|
|||
}
|
||||
|
||||
/* Align table title */
|
||||
table.listing-ct -> caption {
|
||||
table.listing-ct > caption {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import '../lib/patternfly/patternfly-cockpit.scss';
|
||||
import './recordings.css';
|
||||
|
||||
let $ = require("jquery");
|
||||
let cockpit = require("cockpit");
|
||||
let _ = cockpit.gettext;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const path = require("path");
|
||||
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 webpack = require("webpack");
|
||||
const CompressionPlugin = require("compression-webpack-plugin");
|
||||
|
|
@ -24,13 +24,9 @@ var info = {
|
|||
entries: {
|
||||
"recordings": [
|
||||
"./recordings.jsx",
|
||||
"./recordings.css",
|
||||
"./pkg/lib/listing.less",
|
||||
],
|
||||
"config": [
|
||||
"./config.jsx",
|
||||
"./recordings.css",
|
||||
"./table.css",
|
||||
]
|
||||
},
|
||||
files: [
|
||||
|
|
@ -39,11 +35,8 @@ var info = {
|
|||
"player.jsx",
|
||||
"player.css",
|
||||
"recordings.jsx",
|
||||
"recordings.css",
|
||||
"table.css",
|
||||
"manifest.json",
|
||||
"timer.css",
|
||||
"./pkg/lib/listing.less",
|
||||
],
|
||||
};
|
||||
|
||||
|
|
@ -95,7 +88,7 @@ info.files = files;
|
|||
|
||||
var plugins = [
|
||||
new copy(info.files),
|
||||
new extract("[name].css")
|
||||
new extract({filename: "[name].css"})
|
||||
];
|
||||
|
||||
/* Only minimize when in production mode */
|
||||
|
|
@ -120,6 +113,7 @@ module.exports = {
|
|||
resolve: {
|
||||
alias: {
|
||||
"fs": path.resolve(nodedir, "fs-extra"),
|
||||
"font-awesome": path.resolve(nodedir, 'font-awesome-sass/assets/stylesheets'),
|
||||
},
|
||||
modules: [libdir, nodedir],
|
||||
},
|
||||
|
|
@ -154,17 +148,92 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
loader: extract.extract("css-loader!less-loader")
|
||||
},
|
||||
use: [
|
||||
extract.loader,
|
||||
{
|
||||
exclude: /node_modules/,
|
||||
loader: extract.extract('css-loader!sass-loader'),
|
||||
test: /\.scss$/
|
||||
},
|
||||
{
|
||||
loader: extract.extract("css-loader?minimize=&root=" + libdir),
|
||||
test: /\.css$/,
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
url: false
|
||||
}
|
||||
},
|
||||
"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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue