@senx/discovery-widgets
Version:
Discovery Widgets Elements
272 lines (266 loc) • 8.01 kB
CSS
/*!
* 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.
*/
/*!
* 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.
*/
.gts-classname {
font-size: var(--warp-view-font-size, 1rem);
color: var(--gts-classname-font-color, #004eff);
}
.gts-labelname {
font-size: var(--warp-view-font-size, 1rem);
color: var(--gts-labelname-font-color, #19A979);
}
.gts-attrname {
font-size: var(--warp-view-font-size, 1rem);
color: var(--gts-attrname-font-color, #ED4A7B);
}
.gts-separator {
font-size: var(--warp-view-font-size, 1rem);
color: var(--gts-separator-font-color, #a0a0a0);
}
.gts-labelvalue {
font-size: var(--warp-view-font-size, 1rem);
color: var(--gts-labelvalue-font-color, #000000);
font-style: italic;
}
.gts-attrvalue {
font-size: var(--warp-view-font-size, 1rem);
color: var(--gts-attrvalue-font-color, #000000);
font-style: italic;
}
:host {
width: 100%;
height: 100%;
position: relative;
}
:host > div {
width: 100%;
height: calc(100% - 10px);
position: relative;
display: flex;
justify-content: start;
flex-direction: column;
}
:host > div.vertical-wrapper {
flex-direction: row;
justify-content: center;
}
:host .wv-tooltip {
position: absolute;
width: auto;
height: auto;
display: none;
border-style: solid;
white-space: nowrap;
z-index: 9999999;
box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
background-color: rgba(255, 255, 255, 0.8);
border-width: 1px;
border-radius: 4px;
color: rgb(102, 102, 102);
font: 14px/21px sans-serif;
padding: 10px;
top: 0;
left: 0;
transform: translate3d(30px, 10px, 0px);
border-color: rgb(255, 255, 255);
pointer-events: none;
}
:host .wv-tooltip .label {
font-size: 14px;
color: #666;
font-weight: 400;
margin-left: 2px;
}
:host .wv-tooltip .value {
float: right;
margin-left: 20px;
font-size: 14px;
color: #666;
font-weight: 900;
}
:host .wv-tooltip div {
word-wrap: anywhere;
}
:host .discovery-chart-spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
z-index: 900;
}
:host .discovery-progress-group {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: start;
height: auto;
margin: 10px;
}
:host .discovery-progress-group p {
margin-top: 0;
}
:host .discovery-progress-group .small {
font-size: 0.8em;
}
:host .discovery-progress-group h3.discovery-legend {
margin: 0;
text-align: center;
color: var(--warp-view-font-color, #404040);
}
:host .discovery-progress-group .discovery-progress-container-horizontal {
display: flex;
flex-direction: row;
font-size: 0.75rem;
background-color: var(--warp-view-progress-bg-color, #e9ecef);
border-radius: 0.25rem;
border: solid 1px var(--warp-view-chart-grid-color, #8e8e8e);
height: var(--warp-view-progress-size, 1rem);
width: 100%;
}
:host .discovery-progress-group .discovery-progress-container-vertical {
display: flex;
flex-direction: row;
font-size: 0.75rem;
background-color: var(--warp-view-progress-bg-color, #e9ecef);
border-radius: 0.25rem;
border: solid 1px var(--warp-view-chart-grid-color, #8e8e8e);
width: var(--warp-view-progress-size, 1rem);
height: 100%;
}
:host .discovery-progress-group .discovery-progress {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
}
:host .discovery-progress-group .discovery-progress.positive {
border-left: solid 1px var(--warp-view-chart-grid-color, #8e8e8e);
}
:host .discovery-progress-group .discovery-progress.negative {
border-right: solid 1px var(--warp-view-chart-grid-color, #8e8e8e);
justify-content: end;
}
:host .discovery-progress-group .discovery-progress:hover {
cursor: pointer;
}
:host .discovery-progress-group .discovery-progress .ticks {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: var(--warp-view-progress-size, 1rem);
display: flex;
flex-direction: row;
align-items: end;
justify-content: space-evenly;
}
:host .discovery-progress-group .discovery-progress .ticks .tick {
width: 1px;
height: var(--warp-view-progress-size, 1rem);
background-color: var(--warp-view-chart-grid-color, #8e8e8e);
}
:host .discovery-progress-group .discovery-progress .discovery-progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
transition: width 0.6s ease;
}
:host .discovery-progress-group.discovery-progress-group-vertical {
height: 100%;
flex-flow: column-reverse;
align-items: center;
justify-content: center;
width: auto;
}
:host .discovery-progress-group.discovery-progress-group-vertical .discovery-progress {
width: var(--warp-view-progress-size, 1rem);
height: 100%;
align-items: end;
position: relative;
}
:host .discovery-progress-group.discovery-progress-group-vertical .discovery-progress .ticks {
height: 100%;
width: var(--warp-view-progress-size, 1rem);
display: flex;
flex-direction: column;
align-items: start;
justify-content: space-evenly;
bottom: unset;
left: auto;
right: auto;
top: 0;
}
:host .discovery-progress-group.discovery-progress-group-vertical .discovery-progress .ticks .tick {
height: 1px;
width: var(--warp-view-progress-size, 1rem);
}
:host .discovery-progress-group.discovery-progress-group-vertical .discovery-progress .discovery-progress-bar {
transition: height 0.6s ease;
}