/* Blueprint Edit layout */
.cmpsr-grid__wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"header header"
"inputsTitle editTitle"
"inputs edit";
overflow: auto;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/* Blueprint Edit page header */
.cmpsr-grid__wrapper .cmpsr-header {
grid-area: header;
margin: 0 20px;
}
/* Blueprint Edit panels */
.cmpsr-panel__title {
border: 1px solid #d1d1d1;
background: #f2f2f2;
padding: 10px 20px;
font-size: 14px;
color: inherit;
font-weight: bold;
margin: 0;
}
.cmpsr-panel__title--sidebar {
grid-area: inputsTitle;
margin-right: -1px;
margin-left: 20px;
}
.cmpsr-panel__title--main {
grid-area: editTitle;
margin-right: 20px;
}
.cmpsr-panel__body {
border-width: 0 1px 1px;
border-style: solid;
border-color: #d1d1d1;
}
.cmpsr-panel__body--sidebar {
grid-area: inputs;
margin-right: -1px;
margin-left: 20px;
}
.cmpsr-panel__body--main {
grid-area: edit;
background: var(--pf-global--BackgroundColor--100);
margin-right: 20px;
}
/* Blueprint Edit panel contents */
.cmpsr-grid__wrapper .cmpsr-panel__body {
overflow: auto;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
position: relative;
}
.cmpsr-panel__body .toolbar-pf {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
padding: 0;
}
.cmpsr-panel__body .toolbar-pf .btn-link {
border: none;
}
.cmpsr-panel__body > * {
margin: 0 20px;
}
.cmpsr-panel__body .toolbar-pf {
margin: 0;
}
.cmpsr-panel__body .toolbar-pf > * {
padding: 0 20px;
}
.cmpsr-panel__body .toolbar-pf .toolbar-pf-actions {
padding-top: 10px;
margin: 0 0 10px 0;
}
.cmpsr-panel__body--view {
margin-left: -20px;
margin-right: -20px;
}
.cmpsr-panel__body .list-pf {
border-bottom: none;
}
/* Blueprint view */
.cmpsr-pg__blueprint-view {
padding: 0 20px;
}
/* page header */
.cmpsr-header {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: baseline;
align-items: baseline;
flex-wrap: wrap;
}
.cmpsr-header--modal {
justify-content: flex-end;
}
.cmpsr-header > * {
margin: 8px 0 0 0;
padding: 0
}
.cmpsr-header--modal > * {
margin: 0 0 8px 0;
}
.cmpsr-header__actions .list-inline {
margin: 0;
}
.cmpsr-header__actions .list-inline > li {
vertical-align: middle;
}
.cmpsr-header__actions .list-inline > li:last-child {
padding-right: 0;
}
.cmpsr-header__actions .list-inline > li:first-child {
padding-left: 0;
}
.list-inline .list__subgroup-item--first {
border-left: 1px solid #e5e5e5;
padding-left: 10px;
margin-left: 5px;
}
.cmpsr-title {
display: -webkit-box;
display: flex;
-webkit-box-align: baseline;
align-items: baseline;
flex-basis: 100%;
margin-top: 20px;
margin-bottom: 10px;
}
.cmpsr-title__item {
margin: 0 10px 0 0;
}
h1.cmpsr-title__item {
font-size: var(--pf-global--FontSize--2xl);
}
/* List view */
.cmpsr-list-pf .list-pf-expansion .list-pf-container {
display: block;
} /* TODO: remove and switch to flexbox for expanded contents */
.cmpsr-list-pf .list-pf-main-content {
flex-basis: 100%;
}
.list-view-pf-main-info > .list-pf-icon {
margin-right: 20px;
}
.cmpsr-list-pf .list-pf-additional-content {
flex-basis: 100%;
flex-shrink: 0;
-webkit-box-pack: start;
justify-content: flex-start;
flex-wrap: nowrap;
}
.cmpsr-list-pf .list-view-pf-additional-info-item {
flex-basis: auto;
-webkit-box-align: baseline;
align-items: baseline;
flex-shrink: 0;
-webkit-box-flex: 0;
flex-grow: 0;
}
.cmpsr-list-pf .list-view-pf-additional-info-item-stacked {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
white-space: nowrap;
}
.cmpsr-list-pf .list-view-pf-additional-info-item-stacked strong {
margin-left: 5px;
margin-right: 0;
font-size: inherit;
}
.cmpsr-list-pf .list-pf-actions {
flex-shrink: 0;
justify-content: flex-end;
}
@media (min-width: 992px) {
.cmpsr-list-pf .list-pf-main-content {
flex-basis: 50%;
}
.cmpsr-list-pf .list-pf-additional-content {
flex-basis: 50%;
justify-content: space-around;
}
.cmpsr-list-pf .list-view-pf-additional-info-item {
flex-basis: 50%;
-webkit-box-align: center;
align-items: center;
}
.cmpsr-list-pf .list-view-pf-additional-info-item.i18n > span {
display: flex;
}
.cmpsr-list-pf .list-view-pf-additional-info-item-stacked,
.cmpsr-list-pf .list-view-pf-additional-info-item-stacked.i18n > span {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
}
.cmpsr-list-pf .list-view-pf-additional-info-item-stacked strong {
margin-left: 0;
}
}
.list-pf-item:hover .cmpsr-list-item__text--muted,
.list-pf-item.active .cmpsr-list-item__text--muted {
color: initial;
}
.cmpsr-list-sources .list-pf-content-wrapper {
flex-direction: column;
align-items: stretch;
}
.cmpsr-list-sources .list-pf-main-content {
flex-direction: column;
align-items: flex-start;
max-width: 100%;
}
.cmpsr-list-sources .list-pf-title, .cmpsr-list-sources .list-pf-description {
flex: 0 1 auto;
margin-right: 20px
}
.cmpsr-list-sources .list-pf-additional-content {
justify-content: flex-start;
margin-left: 0;
}
.cmpsr-list-sources .list-pf-actions {
flex-basis: 150px;
margin-left: 0;
}
@media (min-width: 640px) {
.cmpsr-list-sources .list-pf-main-content {
flex-direction: row;
}
}
@media (min-width: 992px) {
.cmpsr-list-sources .list-pf-title, .cmpsr-list-sources .list-pf-description {
flex-basis: calc(50% - 20px);
}
}
/* pagination */
.toolbar-pf-results .content-view-pf-pagination {
margin-bottom: 5px;
margin-top: 5px;
background-color: transparent;
border: none;
-webkit-box-pack: end;
justify-content: flex-end;
-webkit-box-align: baseline;
align-items: baseline;
}
.toolbar-pf-results .pagination {
align-self: center;
}
.toolbar-pf-results .pagination-pf-page,
.toolbar-pf-results .pagination.pagination-pf-forward {
margin-left: 5px;
}
.toolbar-pf-results .pagination-pf-page {
display: inline;
}
.pagination-cmpsr-pages {
display: -webkit-box;
display: flex;
}
/* given complexity of this component related to sr a11y and i18n,
this applies sr-only styles to the child span, which includes
the translated screenreader text, while the next line provides
the "-" that would display instead of the sr-only "to" */
.pagination-cmpsr-to > span {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.pagination-cmpsr-to:before {
content: "\2013";
}
/* sidebar */
.cmpsr-panel__body--sidebar .toolbar-pf-actions .toolbar-pf-filter {
width: auto;
}
.cmpsr-panel__body--sidebar {
background-color: #fafafa;
}
.cmpsr-panel__body--sidebar .pf-c-data-list {
margin: -1px 0;
}
.cmpsr-panel__body--sidebar .alert {
margin: 10px 20px;
}
.label-info {
background-color: var(--pf-global--link--Color);
}
/*Component details*/
.pf-icon-small {
font-size: 1.7rem;
height: 2.2rem;
line-height: 2.2rem;
width: 2.2rem;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.cmpsr-component-details--view {
margin-top: 20px;
}
.cmpsr-component-details__form {
background-color: #ededed;
border: 1px solid #24a4e1;
border-radius: 1px;
margin-bottom: 20px;
padding: 5px 10px;
}
.cmpsr-component-details__form .form-horizontal {
margin: 15px 0;
}
/* Blueprint details page */
.list-pf .list-group-item__separator,
.list-pf .list-group-item__separator:hover {
background-color: #f7f7f7;
}
.list-pf .list-group-item__separator .list-pf-container {
padding-top: 0;
padding-bottom: 0;
}
.cmpsr-blueprint__changes .list-group {
margin-bottom: 0;
border-top: 0;
}
.cmpsr-blueprint__changes .list-group-item:last-child {
border-bottom: 0;
}
/* Images list view */
.cmpsr-images .list-pf-actions {
flex-basis: 20%;
-webkit-box-pack: end;
justify-content: flex-end;
margin-left: 0;
}
.cmpsr-images.cmpsr-list-pf .list-view-pf-additional-info-item.cmpsr-images__status {
flex-basis: 15%;
margin-left: 10%;
-webkit-box-align: center;
align-items: center;
white-space: nowrap;
}
.cmpsr-images .list-pf-content-wrapper {
flex-basis: 55%;
}
.cc-c-data-list__item-status .pficon-in-progress {
-webkit-animation: 1s infinite linear rotate;
animation: 1s infinite linear rotate;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-359deg);
transform: rotate(-359deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-359deg);
transform: rotate(-359deg);
}
}
@media (min-width: 992px) {
.cmpsr-images .list-view-pf-additional-info-item {
flex-basis: 30%;
}
}
.list-pf-icon-bordered-dotted {
border-style: dotted;
}
.list-pf-icon-bordered-gray {
border-color: #949494;
}
/* tab contents */
.tab-container {
padding: 20px 0;
}
/* toolbar */
.toolbar-pf-actions .toolbar-pf-filter.form-group {
padding-left: 20px;
}
.toolbar-pf-actions .form-group:first-child {
padding-left: 0;
}
/* loading */
.cmpsr-loading {
text-align: center;
padding-top: 40px;
}
/* inline edit */
.form-control-pf-editable .sr-only + .pficon-edit {
margin-left: 0;
}
.form-control-pf-editable > .form-control-pf-value {
text-align: left;
}
.form-control-pf-editable > .form-control-pf-value > span {
word-break: break-all;
}
/* tables */
.cmpsr-table-actions {
width: 1%;
white-space: nowrap;
}
.cmpsr-table-actions .btn-link {
padding-top: 0;
padding-bottom: 0;
}
table .form-control {
margin-left: -7px;
box-sizing: content-box;
height: auto;
}
.cmpsr-table-row--editable .cmpsr-table-actions {
height: 0;
}
.cmpsr-inline-edit-btn-wrapper {
height: 100%;
width: 100%;
}
.cmpsr-table-row--editable .cmpsr-inline-edit-buttons {
position: absolute;
background-color: #def3ff;
border: 1px solid #d1d1d1;
border-top-color: #def3ff;
padding: 3px;
display: block;
transform: translate(calc(-100% + 10px), 3px);
}
.cmpsr-table-row--editable:hover .cmpsr-inline-edit-buttons {
background-color: #c4eaff;
border-color: #7DC3F0;
border-top-color: #c4eaff;
}
.table .cmpsr-width-60 {
width: 60%;
}
.table .cmpsr-width-20 {
width: 20%;
}
/* ------------------------------- */
/* modifications to patternfly css */
/* body displays in an iframe without nav */
/* resetting body so that grid layout can fill page */
body, html {
height: 100%;
}
body {
position: relative;
}
/* empty state */
.cmpsr-alert-blank-slate {
margin-top: 30px;
}
.cmpsr-alert-blank-slate {
margin-bottom: 5px;
}
/* notifications */
.toast-notifications-list-pf {
top: 8px;
}
/*toolbar*/
.toolbar-pf .form-group {
border-right: 1px solid #d1d1d1;
float: left;
margin-bottom: 0;
padding-left: 20px;
padding-right: 20px;
}
.toolbar-pf-action-right {
float: right;
}
/* list-pf */
.list-pf-title .text-muted {
font-weight: normal;
}
/* nav-tabs-pf */
#blueprint-tabs .nav-tabs {
margin-top: var(--pf-global--spacer--sm);
}
.nav-tabs .badge {
display: inline;
}
/* disabled state */
/* disable pointer events for both <a> and <button> */
.btn.disabled, fieldset[disabled] .btn {
pointer-events: none;
}
/* enable pointer events for disabled button that has a tooltip */
.disabled.cmpsr-has-tooltip {
pointer-events: initial;
}
[data-toggle] {
cursor: pointer;
}
/* text-muted inside strong element - for translatable strings */
strong > .text-muted {
font-weight: normal;
color: initial;
}
/* This is added for the export dialog so that the contents have higher contrast */
textarea.form-control[readonly] {
background-color: inherit;
color: inherit;
}
/* PF4 styles for PF3 classes */
body {
background: var(--pf-global--BackgroundColor--100);
}
.container-fluid {
padding: 0 20px;
}
.fields-status-pf {
color: var(--pf-global--Color--200);
}
.text-muted {
color: var(--pf-global--Color--200);
}
/* PF4 DataList customizations */
.pf-c-data-list.cc-m-compact {
--pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--sm);
--pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--sm);
--pf-c-data-list__item-content--PaddingBottom: var(--pf-global--spacer--sm);
--pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
--pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--sm);
--pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
--pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
--pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--sm);
--pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--sm);
}
.pf-c-data-list__expandable-content pre {
border-top: none;
}
.cc-u-not-visible {
visibility: hidden !important;
} /* used to visually hide elements, but still retain the spacing that they take up */
/* use this with aria-hidden to also hide from assistive technologies */
/* expand buttons are included for all nodes, but only visible for nodes with children */
.pf-c-data-list__item-control[aria-hidden="true"] .pf-c-button {
visibility: hidden;
}
.cc-c-data-list__item-icon {
flex: 0 0 1rem;
margin-right: var(--pf-c-data-list__item-control--MarginRight);
padding-top: var(--pf-c-data-list__cell--PaddingTop);
} /* sets size and spacing for custom icon column */
.cc-c-status {
display: grid;
grid-row-gap: var(--pf-global--spacer--md);
grid-column-gap: var(--pf-global--spacer--sm);
grid-template-columns: minmax(var(--pf-global--icon--FontSize--md) , min-content) auto;
}
.cc-c-status .cc-m-full-width {
grid-column-start: 1;
grid-column-end: 3;
}
.cc-c-status__icon {
justify-self: center;
}
.pf-c-data-list__item-action.cc-m-nowrap {
flex-wrap: nowrap;
} /* prevents actions from wrapping */
@media screen and (max-width: 62rem) {
.cc-m-nowrap-on-lg .pf-c-data-list__item-content {
display: grid;
width: 100%;
grid-template-columns: auto 1fr;
padding-bottom: 0;
}
.cc-m-nowrap-on-lg .pf-c-data-list__cell {
padding-bottom: var(--pf-global--spacer--xs);
}
.cc-m-nowrap-on-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
margin-left: 0;
padding-top: 0;
}
.cc-m-nowrap-on-lg .pf-c-data-list__cell:last-child {
padding-bottom: var(--pf-global--spacer--md);
}
} /* changes with media query for when contents start to wrap */
@media screen and (max-width: 75rem) {
.cc-m-nowrap-on-xl .pf-c-data-list__item-content {
display: grid;
width: 100%;
grid-template-columns: auto 1fr;
padding-bottom: 0;
}
.cc-m-nowrap-on-xl .pf-c-data-list__cell {
padding-bottom: var(--pf-global--spacer--xs);
}
.cc-m-nowrap-on-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
margin-left: 0;
padding-top: 0;
}
.cc-m-nowrap-on-xl .pf-c-data-list__cell:last-child {
padding-bottom: var(--pf-global--spacer--md);
}
} /* changes with media query for when contents start to wrap */
/* customizations for Components list view */
/* Defines different grid areas when list item contents have display:grid (up to lg breakpoint) */
/* Defines different flex properties when list item contents have display:flex */
.cc-component .pf-c-data-list__item-content {
grid-template-areas:
"name name"
"version release";
grid-template-columns: minmax(auto,50%) 1fr;
flex-wrap: nowrap;
}
.cc-component .pf-c-data-list__cell:not(:last-child) {
margin-right: var(--pf-global--spacer--md);
}
.cc-component__name.pf-c-data-list__cell {
grid-area: name;
flex: 0 0 calc(55% - var(--pf-c-data-list__cell-cell--MarginRight));
}
.cc-component__version.pf-c-data-list__cell {
grid-area: version;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 0 calc(15% - var(--pf-c-data-list__cell-cell--MarginRight));
}
.cc-component__release.pf-c-data-list__cell {
grid-area: release;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 0 30%;
} /* sets spacing for icon column */
/* modifies default datalist styles to always have contents in this element stacked */
.pf-c-data-list__item-content.cc-m-stacked {
display: grid;
width: 100%;
padding-top: var(--pf-c-data-list__cell--PaddingTop);
padding-bottom: var(--pf-global--spacer--md);
grid-gap: var(--pf-global--spacer--md);
}
.pf-c-data-list__item-content.cc-m-stacked .pf-c-data-list__cell {
padding-top: 0 !important;
padding-bottom: 0;
grid-column: unset;
grid-column-start: 1;
}
@media screen and (min-width: 54rem) {
.pf-c-data-list__item-content.cc-m-split-on-lg {
grid-template-columns: 50% 50%;
grid-gap: var(--pf-global--spacer--xs);
}
.pf-c-data-list__item-content.cc-m-split-on-lg .pf-c-data-list__cell:last-child {
grid-column-start: 2;
}
}
/* form group checkbox alignment fix */
.pf-c-form__horizontal-group .pf-c-check,
.pf-c-form__horizontal-group .pf-c-radio,
.cc-c-form__static-text {
padding-top: var(--pf-global--spacer--form-element);
padding-bottom: var(--pf-global--spacer--form-element);
}
.pf-c-form__horizontal-group .pf-c-check input[type=checkbox],
.cc-c-form__static-text input[type=checkbox] {
margin-top: 0px;
}
.pf-c-form__horizontal-group .pf-c-check__label {
line-height: var(--pf-global--LineHeight--md);
}
/* spacing below warning alert in wizard */
.pf-c-wizard__main-body .pf-c-alert,
.cc-c-alert__warning {
margin-bottom: var(--pf-global--gutter);
}
/* horizontal group with popover justification fix*/
.cc-c-popover__horizontal-group {
display: flex;
justify-content: space-between;
}
.cc-c-form__horizontal-align {
align-items: baseline;
}
.cc-c-form__required-text {
margin-bottom: var(--pf-global--gutter);
}
.cc-c-text__warning-icon {
color: var(--pf-global--warning-color--100);
vertical-align: -0.125em;
}
.cc-c-text__danger-icon {
color: var(--pf-global--danger-color--100);
vertical-align: -0.125em;
}
/* Setting a fixed width similar to the values used in horizontal forms */
/* var(--pf-c-form--m-horizontal--md__group--GridTemplateColumns) */
/* NOTE that 576px is defined as a sass variable in PF source code as min-width: $pf-global--breakpoint--sm */
@media screen and (min-width: 576px) {
.pf-c-content dl.cc-m-column__fixed-width {
grid-template-columns: 200px 1fr;
}
}
.pf-c-form.pf-m-horizontal.cc-m-wide-label .pf-c-form__group {
grid-template-columns: 200px 1fr;
}
.pf-icon svg {
vertical-align: -0.125em;
}