UNPKG

@senx/discovery-widgets

Version:

Discovery Widgets Elements

88 lines 2.59 kB
/*! * Copyright 2022 SenX S.A.S. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*! * Copyright 2022-2024 SenX S.A.S. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ :host div.modal { position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ } :host div.modal .modal-content { margin: 5% auto; padding-left: 10px; padding-right: 10px; border: 1px solid #888; min-height: 80%; width: 80%; position: relative; display: flex; flex-direction: column; justify-content: start; align-items: stretch; } :host div.modal .modal-content .modal-wrapper { height: calc(100% - 70px); min-height: calc(100% - 70px); width: 100%; overflow-y: auto; overflow-x: hidden; flex-grow: 1; } :host div.modal .modal-content .modal-wrapper .discovery-dashboard-tile { width: 100%; height: 100%; } :host div.modal .modal-content .modal-wrapper .discovery-dashboard-tile > div { width: 100%; height: 100%; margin-bottom: -20px; } :host div.modal .header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } :host div.modal .header .title { margin: 0; font-size: 18px; } :host div.modal .header .close { font-size: 28px; font-weight: bold; } :host div.modal .header .close:hover, :host div.modal .header .close:focus { color: var(--warp-view-font-color-hover, #000000); text-decoration: none; cursor: pointer; }