@rh-support/troubleshoot 2.4.10-beta.7 → 2.5.0

package/lib/esm/scss/_pf-overrides.scss

@@ -0,0 +1,792 @@
+// Overrides for Patternfly 4 components
+
+:root {
+    //   --pf-v5-global--FontFamily--sans-serif: "Red Hat Text", "Overpass", Helvetica, sans-serif !important;
+    --pfe-theme--font-size: 14.54545454px !important;
+}
+
+.pf-v5-c-backdrop {
+    -webkit-backdrop-filter: blur(10px);
+    background-color: rgba(3, 3, 3, 0.619608);
+    box-sizing: border-box;
+    color: rgb(21, 21, 21);
+
+    .pf-v5-c-modal-box {
+        max-width: 90%;
+
+        @media (min-width: 992px) {
+            max-width: 75%;
+        }
+
+        @media (min-width: 1320px) {
+            max-width: 50%;
+        }
+
+        .pf-v5-c-title {
+            margin-bottom: 1rem;
+            font-size: 20px;
+        }
+
+        .pf-v5-c-modal-box__body {
+            margin-top: 0;
+            margin-bottom: 0;
+
+            p {
+                margin-bottom: 0;
+            }
+        }
+
+        .pf-v5-c-modal-box__footer {
+            margin: 0;
+
+            button:first-child {
+                margin-right: 1rem;
+            }
+        }
+
+        // feedback form specific overrides
+        &.feedback-modal {
+            .pf-v5-c-title {
+                margin-bottom: 1.5rem;
+            }
+
+            .pf-v5-c-modal-box__body {
+                fieldset {
+                    display: -ms-flexbox;
+                    display: flex;
+                    -ms-flex-direction: column;
+                    flex-direction: column;
+                }
+
+                legend {
+                    margin-bottom: 0.5rem;
+                    font-weight: bold;
+                    color: rgb(21, 21, 21);
+                }
+
+                .radio-inline + .radio-inline,
+                .checkbox-inline + .checkbox-inline {
+                    margin-left: 0;
+                }
+
+                .radio input[type='radio'],
+                .radio-inline input[type='radio'],
+                .checkbox input[type='checkbox'],
+                .checkbox-inline input[type='checkbox'] {
+                    position: initial;
+                    margin-right: 0.2rem;
+                    padding-left: 22px;
+                }
+
+                textarea {
+                    max-height: 250px;
+                }
+
+                @media (min-width: 732px) {
+                    fieldset {
+                        display: block;
+                    }
+
+                    .radio-inline + .radio-inline,
+                    .checkbox-inline + .checkbox-inline {
+                        margin-left: 1.2rem;
+                    }
+                }
+            }
+        }
+    }
+
+    .pf-modal-overflow-visible .pf-v5-c-modal-box__body {
+        overflow: visible !important;
+    }
+}
+
+.pf-v5-c-divider {
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.pf-v5-c-alert {
+    .pf-v5-c-alert__title {
+        font-weight: 600 !important;
+        font-size: 15px;
+    }
+
+    .pf-v5-c-alert__description .restore-session-list {
+        margin-bottom: 0;
+        padding-left: 0;
+        list-style: none;
+
+        li {
+            margin-bottom: 0.2rem;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        .restore-session-summary {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            max-width: 98%;
+        }
+
+        .restore-session-questions {
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-align: baseline;
+            align-items: baseline;
+            font-size: 14px;
+
+            label {
+                font-weight: 400;
+            }
+
+            & > button {
+                padding: 0 10px;
+
+                &:hover svg {
+                    color: var(--pf-v5-global--palette--blue-500) !important;
+                }
+            }
+        }
+    }
+
+    .pf-v5-c-alert__action {
+        button {
+            padding: 6px 12px;
+            background: transparent;
+            font-size: 16px;
+            text-shadow: 0 1px 0 #fff;
+        }
+    }
+
+    &.pf-v5-c-alert.pf-m-info.pf-m-inline {
+        --pf-v5-c-alert--m-inline--before--BackgroundColor: #39a5dc;
+        --pf-v5-c-alert__icon--Color: #39a5dc;
+
+        .pf-v5-c-alert__description > * {
+            margin-bottom: 0;
+        }
+    }
+}
+
+#rh-support-case {
+    .pf-v5-c-expandable-section {
+        .pf-v5-c-expandable-section__content {
+            margin-top: 0 !important;
+            padding: 10px 5px;
+            border: 1px solid #d2d2d2;
+            border-top: none;
+        }
+
+        .pf-v5-c-expandable-section__toggle {
+            font-size: 16px;
+
+            .pf-v5-c-expandable-section__toggle-text {
+                margin-left: 8px;
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.pf-v5-c-accordion {
+    padding: 0;
+    .pf-m-expanded ul {
+        list-style-type: none; //Because, FF
+    }
+
+    h3 {
+        margin-bottom: 0;
+        margin-top: 0;
+
+        .pf-v5-c-accordion__toggle {
+            .pf-v5-c-accordion__toggle-text {
+                font-size: 16px;
+            }
+
+            &.pf-m-expanded {
+                .pf-v5-c-accordion__toggle-text {
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+}
+
+.critical-solutions-modal {
+    &.pf-v5-c-modal-box {
+        max-width: 60% !important;
+
+        .pf-v5-c-modal-box__body {
+            margin-bottom: 0;
+            padding-top: 0.5rem;
+            padding-bottom: 0;
+        }
+    }
+
+    .pf-v5-c-accordion {
+        h3 {
+            margin-top: 0;
+        }
+
+        .pf-v5-c-accordion__toggle {
+            padding: 0.8rem 1rem;
+
+            .pf-v5-c-accordion__toggle-text {
+                overflow: visible;
+                max-width: 95%;
+                white-space: normal;
+                text-align: left;
+                font-size: 15px;
+                display: flex;
+                align-items: center;
+                letter-spacing: 0.2px;
+            }
+        }
+
+        .pf-v5-c-accordion__expanded-content-body {
+            padding: 1rem 1.5rem;
+
+            & > *:not(.ea-rule) .cta-link {
+                padding: 0 0.8rem;
+                border: none;
+                font-size: 14px;
+                font-weight: 700;
+            }
+            .cta-link::after {
+                border: 0;
+                margin-left: 0 !important;
+            }
+        }
+
+        .pf-v5-c-accordion__toggle-text .pf-v5-c-label {
+            font-weight: 400;
+            padding: 4px 8px;
+            line-height: 21px;
+        }
+    }
+}
+
+.pf-v5-c-alert-group {
+    list-style: none;
+}
+
+.popular-solutions {
+    background-color: #286869 !important;
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+
+    .card-title {
+        color: #fff !important;
+        font-weight: 900;
+    }
+    div > button > span > svg {
+        color: white !important;
+    }
+    .file-recs-actions-toggle {
+        color: white !important;
+    }
+}
+
+.popular-solutions-toggle-button {
+    padding-right: 5px;
+    margin-top: 2px;
+}
+
+.file-diag {
+    border: 1px solid #ededed;
+}
+
+.file-diag > .card-heading {
+    display: flex;
+    -ms-flex-align: center;
+    margin-bottom: 0;
+    padding: 0.5rem 0.8rem;
+    font-size: 15px;
+    background-color: var(--pf-v5-global--palette--black-500);
+    border: 1px solid var(--pf-v5-global--palette--black-500);
+    color: var(--pf-v5-global--palette--white);
+}
+
+.file-diag .file-buttons .pf-v5-c-switch .pf-v5-c-switch__label {
+    padding-left: 10px;
+    font-size: 15px;
+}
+
+.common-suggestions {
+    position: relative;
+}
+
+.common-suggestions .PFElement h3 button[aria-expanded='false']::after {
+    top: 20px !important;
+}
+
+.pf-v5-c-button.pf-m-secondary[disabled]::after {
+    border: 0;
+}
+
+.pf-v5-c-button .pf-m-active {
+    color: #06c;
+}
+
+// Override disable color on darker backgrounds
+.case-overview-secondary,
+#review {
+    .pf-v5-c-select__toggle.pf-m-disabled,
+    .pf-v5-c-select__toggle:disabled {
+        --pf-v5-c-select__toggle--Color: #ccc;
+        --pf-v5-c-select__toggle--BackgroundColor: #fff;
+    }
+}
+
+// Override PFE Collapse discloser = false
+div.common-suggestions pfe-accordion {
+    --pfe-accordion--FontSize--header: 16px;
+    --pfe-accordion--FontWeight--header: 600;
+}
+
+// Override PFE Collapse discloser = false
+section.grid-aside-content pfe-accordion {
+    --pfe-accordion--FontSize--header: 16px;
+    --pfe-accordion--FontWeight--header: 600;
+}
+
+div.pf-v5-c-modal-box__body label.pf-v5-c-switch {
+    padding: 1rem;
+}
+// override added padding
+div.pf-v5-c-alert__description div.ea-rule p a.pf-v5-c-button {
+    padding: 0;
+}
+
+//override pfe-accordion discloser for modal
+div pfe-accordion {
+    --pfe-accordion--FontSize--header: 16px;
+    --pfe-accordion--FontWeight--header: 600;
+}
+
+section div.file-recommendations {
+    padding: 0 !important;
+}
+
+section div.file-recommendations h5 {
+    margin: 0 !important;
+}
+
+section div.file-recommendations h5 span div.pf-v5-c-label-group {
+    display: flex;
+}
+
+div input.pf-v5-c-form-control.pf-m-search {
+    background-image: none;
+}
+// To override font weight in CEP Form - PCM-11644
+div#cep-details-modal.pf-v5-c-modal-box__body {
+    form.pf-v5-c-form.push-top-narrow {
+        div.pf-v5-c-form__group {
+            div.pf-v5-c-form__group-label {
+                label.pf-v5-c-form__label {
+                    span.pf-v5-c-form__label-text {
+                        font-weight: 600 !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// To override font weight in Request Escalation Form - PCM-11644
+div#request-mgmt-escalation-modal.request-escalation-modal {
+    div.pf-v5-c-modal-box__body {
+        form.pf-v5-c-form.request-escalation-form {
+            div.pf-v5-l-grid.pf-m-all-12-col-on-md.pf-m-gutter {
+                div.pf-v5-l-grid__item.pf-m-6-col {
+                    div.pf-v5-c-form__group {
+                        div.pf-v5-c-form__group-label {
+                            label.pf-v5-c-form__label {
+                                span.pf-v5-c-form__label-text {
+                                    font-weight: 600 !important;
+                                }
+                            }
+                        }
+                    }
+                }
+                div.pf-v5-c-form__group {
+                    div.pf-v5-c-form__group-label {
+                        label.pf-v5-c-form__label {
+                            span.pf-v5-c-form__label-text {
+                                font-weight: 600 !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// To override font weight on reopen case modal - PCM-11644
+#case-reopen-modal {
+    form.pf-v5-c-form.case-reopen-modal-form {
+        div.pf-v5-c-form__group {
+            div.pf-v5-c-form__group-label {
+                .pf-v5-c-form__label {
+                    .pf-v5-c-form__label-text {
+                        font-weight: 500 !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+pfe-accordion {
+    box-shadow: inset 1px 1px 0px #d2d2d2, inset -1px -1px 0px #d2d2d2;
+}
+
+.pf-v5-c-wizard__main,
+.pf-v5-c-wizard__footer,
+.pf-v5-c-wizard__nav {
+    z-index: 1 !important;
+}
+
+.pf-v5-c-options-menu__menu {
+    z-index: 9 !important;
+}
+
+#tc-product-dropdown-selector {
+    .pf-v5-c-select__menu {
+        z-index: 90 !important;
+    }
+}
+
+div.case-details-summary {
+    margin-bottom: 1.5rem;
+}
+
+.all-product-selector-dropdown .pf-v5-c-select__menu-group-title:empty {
+    display: none;
+}
+
+.green-card-heading {
+    font-size: 16px !important;
+}
+
+.update-info-button {
+    --pf-v5-c-button--BackgroundColor: #fff;
+    --pf-v5-c-button--hover--BackgroundColor: #ededed;
+    --pf-v5-c-button--active--BackgroundColor: #ededed;
+    --pf-v5-c-button--focus--BackgroundColor: #ededed;
+}
+
+.submit-case-check-icon {
+    margin-right: 1rem;
+}
+
+.file-upload-group {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+}
+
+.pf-v5-c-alert p {
+    margin-bottom: 0;
+}
+
+.pf-v5-c-label-group__list {
+    margin-bottom: 0;
+}
+
+.pf-v5-c-panel__main-body {
+    padding: 0;
+}
+.pf-v5-c-form-control textarea,
+.pf-v5-c-form-control input {
+    outline: none;
+    &:focus {
+        border-bottom-color: #06c;
+    }
+}
+
+.pf-v5-c-wizard__main {
+    padding: 0 !important;
+}
+.pf-v5-c-card {
+    header {
+        font-weight: 500;
+    }
+}
+
+ul.pf-v5-c-tabs__list {
+    margin-bottom: 0px;
+}
+
+ul.pf-v5-c-chip-group__list {
+    margin: 0px;
+}
+
+span.pf-v5-c-input-group__text {
+    display: inline-flex;
+    width: 100%;
+}
+
+.bookmark-search-dropdown-wrapper {
+    div.pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action {
+        width: 100%;
+    }
+}
+
+.pf-v5-c-list {
+    padding: 0;
+}
+
+.product-selector-group {
+    .pf-v5-c-select__menu-group-title {
+        font-weight: 700;
+    }
+}
+
+.pf-v5-c-accordion__expandable-content {
+    margin: 0;
+}
+
+.top-content-suggestion-accordion {
+    dl dt {
+        margin: 0px;
+    }
+    .pf-v5-c-accordion.pf-m-bordered {
+        margin: 0px;
+        padding: 0px;
+    }
+
+    border: 1px solid #d2d2d2;
+}
+
+.pf-v5-c-alert__title {
+    margin-bottom: 0px;
+}
+
+.restore-session-alert {
+    .pf-v5-c-alert__icon {
+        font-size: 18px;
+    }
+    .pf-v5-c-alert__description {
+        margin-top: 0px;
+    }
+}
+
+#cep-details-modal {
+    .pf-v5-c-form__label-text {
+        font-weight: 500;
+    }
+}
+
+.file-recommendations-file-upload-alert {
+    .pf-v5-c-alert__icon {
+        margin-top: 5px;
+    }
+}
+
+.critical-solutions-file-upload-alert {
+    .pf-v5-c-alert__icon {
+        margin-top: 5px;
+    }
+}
+
+.close-case-modal-form {
+    .pf-v5-c-form__label {
+        .pf-v5-c-form__label-text {
+            font-weight: 500 !important;
+        }
+    }
+}
+
+ul.pf-v5-c-menu__list,
+.pf-v5-c-modal-box__title {
+    margin-bottom: 0px;
+    padding: 5px;
+}
+
+div.related-tasks-search-input-container#related-tasks-search-container {
+    float: right;
+    margin-bottom: 1rem;
+}
+
+.related-tasks-search-input {
+    width: 25rem;
+}
+
+button.pf-v5-c-toggle-group__button {
+    z-index: 1;
+}
+
+.top-content-suggestion-accordion {
+    .pf-v5-c-accordion .pf-v5-c-accordion__toggle {
+        padding: 0.5rem 1rem !important;
+    }
+    .pf-v5-c-accordion__toggle-text h3 {
+        font-size: 17px !important;
+        font-weight: 600;
+    }
+    .pf-v5-c-accordion__expandable-content-body {
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+    h3 {
+        color: black;
+    }
+}
+
+.file-diag-selected {
+    .file-description.form-control {
+        border: 1px solid #f0f0f0;
+        box-shadow: none;
+        border-bottom: 1px solid #6a6e73;
+        color: var(--pf-v5-c-form-control--Color);
+        &::-webkit-input-placeholder {
+            color: var(--pf-v5-c-form-control--m-placeholder--Color);
+        }
+    }
+    .text-muted {
+        color: var(--pf-v5-c-helper-text__item-icon--m-indeterminate--Color);
+    }
+}
+
+button.pf-m-plain.manage-bookmark-info-icon-button {
+    --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
+    --pf-c-button--m-plain--Color: var(--pf-v5-global--palette--black-900);
+    color: var(--pf-v5-global--palette--black-900);
+}
+
+.case-detail-collapse-panel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 1.8rem 1.5rem;
+    color: var(--pf-v5-global--palette--blue-500);
+    font-size: var(--pf-v5-global--FontSize--md);
+    font-weight: 500;
+    cursor: pointer;
+    &:hover {
+        background-color: #d1d1d1;
+        color: var(--pf-v5-global--palette--blue-500);
+        p.case-detail-collapse-label {
+            text-decoration: underline;
+        }
+    }
+    p.case-detail-collapse-label {
+        margin-bottom: 0;
+    }
+}
+
+#rh-support #rh-support-main .card.card-support .card-heading.case-detail-panel-card-heading {
+    background-color: var(--pf-v5-global--palette--black-600);
+    border: 1px solid var(--pf-v5-global--palette--black-600);
+}
+
+label.react-typeahead-label-wrapper {
+    width: 100%;
+    .react-select-custom,
+    .partner-share-bootstrap-typeahead,
+    .rbt-input-multi .rbt-input-wrapper,
+    p.form-instructions {
+        font-weight: var(--pf-v5-global--FontWeight--normal);
+    }
+    .rbt-token.rbt-token-removeable {
+        color: var(--pf-v5-global--palette--blue-400);
+    }
+    .rbt-token.rbt-token-removeable.rbt-token-active {
+        color: #ffffff;
+    }
+}
+#case-history-paginated-timeline-pagination-bottom-pagination {
+    justify-content: flex-start;
+    background-color: var(--pf-v5-global--palette--black-200);
+}
+
+.phone-review-banner {
+    .pf-v5-c-alert__action-group {
+        padding-top: var(--pf-v5-global--spacer--sm);
+    }
+}
+.case-public-private-link {
+    padding: 0.5rem;
+}
+
+a.case-resource-recommendation-link {
+    padding: 0.5rem;
+    padding-left: 0px;
+}
+
+.title-summary-counter {
+    display: inline-flex;
+    font-size: smaller;
+    font-weight: 400;
+}
+
+.description-textarea {
+    &.pf-v5-c-form-control {
+        &:disabled,
+        &.kt1-disabled {
+            &::after,
+            &:after {
+                border-block-end: none !important;
+            }
+        }
+    }
+}
+
+.kt1-disabled {
+    background-color: #f0f0f0 !important;
+}
+
+.issue-title-disabled {
+    background-color: #f0f0f0 !important;
+}
+
+.kt-progress-bar {
+    padding-top: 1em;
+}
+
+.title-summary-error {
+    margin-top: -8px !important;
+}
+
+.extra-tips-for-describing {
+    display: block;
+}
+
+.star-icon-info {
+    color: var(--pf-v5-global--palette--blue-400);
+}
+
+.badge-icon-info {
+    background-color: var(--pf-v5-global--palette--blue-50);
+    font-weight: 400;
+}
+
+.popover-body-info-description {
+    max-width: 494px;
+}
+
+.edit-question span.form-control {
+    padding: 0;
+    margin-bottom: 1rem;
+}
+div.case-details-tabs pre {
+    background-color: white;
+}
+
+.get-support-summary-input {
+    margin-bottom: 1rem;
+}
+
+#external-ssousername-filter {
+    @media (min-width: 1300px) {
+        min-width: calc(100% + 269px) !important;
+    }
+}