170 lines
4.0 KiB
SCSS
170 lines
4.0 KiB
SCSS
@mixin orientedImageryViewerBase() {
|
|
align-items: flex-start;
|
|
background: var(--calcite-ui-foreground-2);
|
|
border: 1px solid var(--calcite-ui-border-1);
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
@mixin orientedImageryViewer() {
|
|
.esri-oriented-imagery-viewer {
|
|
&--floating {
|
|
@include orientedImageryViewerBase();
|
|
max-height: 78vh;
|
|
max-width: 80vw;
|
|
min-height: 400px;
|
|
min-width: 386px;
|
|
}
|
|
|
|
&--docked {
|
|
@include orientedImageryViewerBase();
|
|
bottom: 0;
|
|
height: 100%;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
div {
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__header {
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
background: var(--calcite-ui-foreground-1);
|
|
box-shadow: inset 0px -1px 0px var(--calcite-ui-border-1);
|
|
display: flex;
|
|
flex-direction: row;
|
|
min-width: max-content;
|
|
order: 0;
|
|
padding: 0 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
&__body {
|
|
align-self: stretch;
|
|
background: var(--calcite-ui-foreground-1);
|
|
display: flex;
|
|
flex: none;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
order: 1;
|
|
|
|
&-current-coverage {
|
|
--calcite-ui-icon-color: var(--calcite-ui-danger);
|
|
}
|
|
|
|
&-additional {
|
|
&-camera-locations {
|
|
--calcite-ui-icon-color: var(--calcite-ui-brand);
|
|
}
|
|
|
|
&-coverage {
|
|
--calcite-ui-icon-color: var(--calcite-ui-info);
|
|
}
|
|
}
|
|
&-footprint {
|
|
--calcite-ui-icon-color: var(--calcite-ui-success);
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
color: var(--calcite-ui-text-1);
|
|
flex: none;
|
|
flex-grow: 1;
|
|
font-family: "Avenir Next";
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
order: 0;
|
|
|
|
&-container {
|
|
align-items: center;
|
|
align-self: stretch;
|
|
display: flex;
|
|
flex: none;
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
height: 59px;
|
|
justify-content: center;
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
&__close {
|
|
align-items: center;
|
|
background: var(--calcite-ui-foreground-1);
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-grow: 0;
|
|
height: 59px;
|
|
justify-content: center;
|
|
order: 7;
|
|
width: 48px;
|
|
}
|
|
|
|
&__viewer {
|
|
cursor: url("data:text/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A");
|
|
display: flex;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
margin: 0;
|
|
width: 100%;
|
|
|
|
&--hide {
|
|
display: none;
|
|
}
|
|
|
|
&-container {
|
|
align-self: stretch;
|
|
background: var(--calcite-ui-foreground-1);
|
|
border-radius: 0px 0px 3px 3px;
|
|
border-top: 1px solid var(--calcite-ui-border-3);
|
|
display: flex;
|
|
flex: none;
|
|
flex-grow: 1;
|
|
height: calc(100% - 49px);
|
|
order: 1;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__pro {
|
|
.esri-oriented-imagery-viewer {
|
|
height: 100%;
|
|
max-height: unset;
|
|
max-width: unset;
|
|
position: static;
|
|
width: 100%;
|
|
}
|
|
|
|
&__message-box {
|
|
display: block;
|
|
font-size: $font-size__body;
|
|
|
|
&--error {
|
|
background-color: $font-color--error;
|
|
}
|
|
|
|
&--warn {
|
|
background-color: $Calcite_Orange_150;
|
|
}
|
|
|
|
&--info {
|
|
background-color: $Calcite_Blue_150;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $include_OrientedImageryViewer == true {
|
|
@include orientedImageryViewer();
|
|
}
|