123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- /**
- * IBM Confidential
- * OCO Source Materials
- * IBM Business Platform: Dashboard
- * (C) Copyright IBM Corp. 2018, 2020
- * The source code for this program is not published or otherwise divested of its trade secrets,
- * irrespective of what has been deposited with the U.S. Copyright Office
- **/
- @import "../lib/@ba-ui-toolkit/essentials/_essentials.scss";
- html {
- .glass {
- .dialogBlocker {
- .modelDialogBlockerCell {
- width: 100%;
- }
- }
- }
- }
- %blocker {
- @include absolute-position(0, 0, 0, 0);
- height: 100%;
- width: 100%;
- display: none;
- text-align: center;
- @include theming(background-color, ui-background);
- border: none;
- z-index: 3000;
- overflow: auto;
- }
- .dialogBlocker {
- @extend %blocker;
- }
- .loadingBlocker {
- @extend %blocker;
- display: flex;
- @include theming(background-color, ui-01);
- }
- .dialogBlocker.transparent {
- background-color: transparent;
- }
- .dialogBlocker.show {
- display: table;
- }
- .dialogBlockerCell {
- display: block;
- margin-top: 10vmin;
- margin-right: auto;
- margin-left: auto;
- text-align: center;
- }
- .dialogVerticalAlign {
- position: relative;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- margin-top: auto;
- margin-bottom: auto;
- }
- .modalDialog {
- display: inline-block;
- text-align: left;
- @include theming(background-color, ui-01);
- &[dir="rtl"] {
- text-align: right;
- }
- }
- .modalDialog .dialogHeader {
- position: relative;
- }
- .dialogHeader header {
- border-bottom: 1px solid;
- @include theming(border-bottom, ui-03);
- padding: 21px 24px;
- line-height: 100%;
- height: 65px;
- text-align: center;
- @include theming(color, text-01);
- font-weight: $fw-medium;
- font-style: normal;
- @include theming(background-color, ui-01);
- font-size: $heading-size-s;
- }
- .dialogContent {
- min-height: 100px;
- }
- .dialogButton {
- display: inline-block;
- text-align: center;
- cursor: pointer;
- @include theming(color, interactive-01);
- width: auto;
- min-width: 90px;
- padding: 0px;
- margin: 0px;
- height: 36px;
- @include theming(background-color, ui-01);
- }
- /* set primary button style */
- .dialogButton.primary {
- @include theming(color, ui-01);
- @include theming(background-color, interactive-01);
- padding-left: 32px;
- padding-right: 32px;
- margin: 0px 16px 20px 0px;
- border-width: 2px;
- border-style: solid;
- @include theming(border-color, interactive-01);
- &[dir="rtl"] {
- margin: 0px 0px 20px 16px;
- }
- &:hover {
- @include theming(color, ui-01);
- @include theming(background-color, hover-primary);
- }
- &:focus {
- @include theming(outline-color, focus);
- outline-style: solid;
- outline-width: 2px;
- }
- &:active {
- @include theming(color, ui-01);
- @include theming(background-color, active-primary);
- border-width: 2px;
- border-style: solid;
- @include theming(border-color, active-primary);
- }
- &.selected {
- @include theming(color, ui-01);
- @include theming(background-color, interactive-01);
- }
- &.disabled,
- &:disabled {
- @include theming(background-color, disabled-02);
- }
- }
- /* set secondary button style */
- .dialogButton.secondary {
- @include theming(background-color, interactive-02);
- @include theming(color, ui-01);
- margin: 0px;
- display: inline-block;
- border-width: 2px;
- border-style: solid;
- @include theming(border-color, interactive-02);
- &:hover {
- @include theming(background-color, hover-secondary);
- @include theming(color, ui-01);
- }
- &:focus {
- @include theming(outline-color, focus);
- outline-style: solid;
- outline-width: 2px;
- }
- &:active {
- @include theming(color, ui-01);
- @include theming(background-color, active-secondary);
- border-width: 2px;
- border-style: solid;
- @include theming(border-color, active-secondary);
- }
- &.selected {
- @include theming(background-color, selected-ui);
- }
- &.disabled,
- &:disabled {
- @include theming(background-color, disabled-02);
- cursor: default;
- }
- }
- .dashboardMessageBox {
- min-height: 40px;
- padding-left: 40px;
- margin: 10px;
- white-space: pre-wrap;
- word-wrap: break-word;
- @include user-select(text);
- &[dir="rtl"] {
- padding-left: 0px;
- padding-right: 40px;
- }
- &.info {
- background: url(icons/mb_info.png) no-repeat;
- }
- &.warning {
- background: url(icons/mb_warning.png) no-repeat;
- }
- &.error {
- background: url(../images/error.png) no-repeat;
- }
- &.selectableInfo {
- max-height: 500px;
- width: 65vw;
- white-space: pre;
- overflow-y: scroll;
- }
- &.editableInfo {
- max-height: 500px;
- height: 80vw;
- width: 65vw;
- white-space: pre;
- overflow-y: scroll;
- }
- &.none {
- margin: 0px;
- padding-left: 0px;
- padding-right: 0px;
- }
- }
- .blockerCenterContents {
- align-items: center !important;
- justify-content: center !important;
- }
|