/** * Licensed Materials - Property of IBM * * IBM Cognos Products: BI UI Commons * * (C) Copyright IBM Corp. 2015, 2018 * * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. */ .glass .dialogBlocker { position: absolute; @include theming(background-color, primary3, 0.4); width: 100%; height: 100% !important; top: 0; left: 0; z-index: $modal-layer; border: 1px solid theming(neutral-color); display: flex !important; flex-direction: column; justify-content: space-between; &.messageBox { z-index: $message-layer; } } .glass .dialogBlocker .dialogBlockerCell { visibility: visible; position: relative; height: auto; width: 70%; @include theming(color, neutral-color); z-index: 1000; text-align: center; margin: auto; min-height: 1px; } .glass .dialogBlocker .inputDialog { width: 25%; } .glass .dialogBlocker .dialogHeader{ margin: $space-m $space-m; width: auto !important; .dialogCloseX { margin-top: -20px; @include theming(color, neutral-color); float: right; cursor: pointer; &:hover, &:focus { @include theming(color, primary1); } & .svgIcon { width: 16px; height: 16px; } } } .glass .dialogBlocker .dialogHeader header{ height: auto; padding: 0; border: none; line-height: 100%; margin-right: 20px; } .glass .dialogBlocker .messageBox { padding: 0; background: none !important; margin: 0; min-height: 0; word-break: break-word; } .glass .dialogBlocker .dialogContent { margin-left: $space-m; margin-right: $space-m; min-height: 0; @include theming(color, neutral-color); } .glass .dialogBlocker .dialogContent:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .glass .dialogBlocker footer { border: none; margin: $space-l $space-m $space-m $space-m; text-align: right; min-height: 1px; } .glass .dialogBlocker footer .footerContainer { display: flex; justify-content: flex-end; } .glass .dialogBlocker footer.errorDialog { display: flex; justify-content: flex-end; padding: 0; height: auto; } .glass .dialogBlocker footer:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .glass .dialogBlocker .dialogBlockerCell:focus { outline: 0; } .glass .dialogBlocker .dialogBlockerCell .modalDialog { display: inline-flex; flex-direction:column; @include theming(background, background-color); text-align: left; border-top: solid 4px; @include theming(border-top-color, primary3); outline: 1px solid transparent; max-width: 100%; min-width: 300px; } .glass .dialogBlocker .dialogBlockerCell .modalDialog .crossBtn { padding: 1px 4px 0px 4px; } .glass .dialogBlocker .dialogBlockerCell .modalDialog:focus { outline: 0; } .glass .dialogBlocker.aboutDialog .dialogBlockerCell .modalDialog { display: inline-block; } .glass .dialogBlocker .dialogBlockerCell .dialogTitle { @include theming(color, gray5); text-align: left; overflow-wrap: break-word; @extend %heading-xs; } .glass .dialogBlocker .dialogBlockerCell .dialogTitle:focus { outline: 1px dotted; @include theming(outline-color, focus); } .glass .dialogBlocker .dialogBlockerCell .messageBox:focus { outline: 1px dotted; @include theming(outline-color, focus); } /** Button Styles **/ .glass .dialogBlocker .dialogBlockerCell .dialogButton, .buttonBar button { text-align: center; cursor: pointer; @include theming(color, primary1); width: auto; min-width: 90px; margin: 0 $space-s 0 0; height: 36px; @include theming(background-color, background-color); border: 2px solid; @include theming(border-color, primary1); @extend %body-text-s; } .glass .dialogBlocker .dialogBlockerCell footer .dialogButton { vertical-align: top; } .glass .dialogBlocker .dialogBlockerCell .dialogButton.secondary, .buttonBar button { display: inline-block; margin-right: $space-s; } .glass .dialogBlocker .dialogBlockerCell .dialogButton.primary { @include theming(background-color, primary1); border: 2px solid; @include theming(border-color, primary1); @include theming(color, background-color); } .glass .dialogBlocker .dialogBlockerCell .dialogButton.secondary { display: inline-block; @include theming(background-color, background-color); border: 2px solid; @include theming(border-color, primary1); @include theming(color, primary1); } .glass .dialogBlocker .dialogBlockerCell .dialogButton.primary:hover, .buttonBar button:hover { @include theming(color, background-color); @include theming(background-color, primary2); @include theming(border-color, primary2); } .glass .dialogBlocker .dialogBlockerCell .dialogButton.secondary:hover { @include theming(color, background-color); @include theming(background-color, primary1); @include theming(border-color, primary1); } .glass .dialogBlocker .dialogBlockerCell .dialogButton.primary:focus, .glass .dialogBlocker .dialogBlockerCell .dialogButton.secondary:focus, .buttonBar button.button:focus, .buttonBar button:focus { outline: 2px solid; @include theming(outline-color, focus); } .buttonBar button:active, .glass .dialogBlocker .dialogBlockerCell .dialogButton.primary:active, .glass .dialogBlocker .dialogBlockerCell .dialogButton.secondary:active { @include theming(color, background-color); border: 2px solid; @include theming(background-color, primary3); @include theming(border-color, primary3); } .glass .dialogBlocker .dialogBlockerCell .dialogButton.primary.disabled, .glass .dialogBlocker .dialogBlockerCell .dialogButton.secondary.disabled, .buttonBar button.disabled { opacity: $disabled-opacity; outline: 0; } .dialogHeader .dialogTitle .svgIcon { height: 24px; width: 24px; @include theming(fill, primary2); vertical-align: text-bottom; margin-right: $space-s; } .contentListDialog { width: 700px !important; } @media screen and (max-width: 769px) { .contentListDialog{ width: 600px !important; } } .errMessage { @include theming(color, communication3); text-align: center; margin-top: $space-m; width: 300px; font-weight: $fw-bold; }