geosphere/geosphere-maps
15
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

First commit

Browse source
This commit is contained in:
Thomas Fuhrmann 2023-09-22 11:33:13 +02:00
parent 91447f74b4
commit 6ab4bb6daa
13123 changed files with 60099 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

14
public/assets/esri/themes/base/widgets/_AreaMeasurement2D.scss Normal file
View file

@ -0,0 +1,14 @@
@mixin areaMeasurement2D() {
.esri-area-measurement-2d__measurement {
padding: $cap-spacing $side-spacing;
margin: $cap-spacing 0;
background-color: $background-color--offset;
animation: esri-fade-in 250ms ease-in-out;
}
@include measurementWidgetStyles("esri-area-measurement-2d");
}
@if $include_AreaMeasurement2D == true {
@include areaMeasurement2D();
}

14
public/assets/esri/themes/base/widgets/_AreaMeasurement3D.scss Normal file
View file

@ -0,0 +1,14 @@
@mixin areaMeasurement3D() {
.esri-area-measurement-3d__measurement {
padding: $cap-spacing $side-spacing;
margin: $cap-spacing 0;
background-color: $background-color--offset;
animation: esri-fade-in 250ms ease-in-out;
}
@include measurementWidgetStyles("esri-area-measurement-3d");
}
@if $include_AreaMeasurement3D == true {
@include areaMeasurement3D();
}

286
public/assets/esri/themes/base/widgets/_Attachments.scss Normal file
View file

@ -0,0 +1,286 @@
$attachment-icon-size: $button-height !default;
$attachment-icon-container-width: $button-width * 2 !default;
$attachment-icon-container-height: $button-height * 2 !default;
$attachment-image-container-width: 100% !default;
$attachment-image-container-height: auto !default;
$attachment-height--loading: 150px !default;
$border: 1px solid $border-color;
@mixin attachments() {
.esri-attachments {
background-color: transparent;
width: 100%;
}
.esri-attachments__loader-container {
height: $attachment-height--loading;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.esri-attachments__loader {
height: 64px;
width: 100%;
background: url(../base/images/loading-throb.gif) no-repeat center center;
}
.esri-attachments__actions {
display: flex;
flex-flow: row wrap;
padding: $cap-spacing--half $side-spacing--half;
}
.esri-attachments__item-add-icon {
padding: 0 $side-spacing--quarter;
}
.esri-attachments__delete-button {
width: auto;
color: $font-color--error;
margin-right: auto; // RTL
}
.esri-attachments .esri-attachments__items {
display: flex;
padding: 0;
margin: 0;
width: 100%;
}
.esri-attachments .esri-attachments__item {
line-height: 1.2em;
list-style-type: none;
margin: 0;
}
.esri-attachments__item-button {
display: flex;
align-items: center;
width: 100%;
background-color: $background-color;
cursor: pointer;
border: $border;
border-color: transparent;
border-radius: $border-radius;
color: $interactive-font-color;
text-align: unset;
text-decoration: none;
padding: $cap-spacing--half $side-spacing--half;
margin: 0 0 $cap-spacing--half;
outline-offset: -4px;
transition: border-color 125ms ease-in-out;
@include cardBoxShadow();
&:focus,
&:hover {
border-color: $border-color--hover;
}
}
.esri-attachments__item-link {
display: block;
position: relative;
text-decoration: none;
&:hover,
&:focus {
.esri-attachments__item-link-overlay {
opacity: 1;
}
}
}
.esri-attachments__item-add {
background-color: transparent;
padding: $cap-spacing--half 0;
}
.esri-attachments__add-attachment-button {
border-radius: $border-radius;
font-size: $font-size--small;
justify-content: flex-start;
padding: $cap-spacing $side-spacing--quarter;
transition: background-color 250ms ease-in-out;
&:hover {
background-color: $background-color;
text-decoration: none;
@include defaultBoxShadow();
}
}
.esri-attachments__item-add-icon {
padding: 0 $side-spacing--half;
}
.esri-attachments__item-link-overlay {
opacity: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
user-select: none;
transition: opacity 250ms ease-in-out;
&-icon {
background-color: rgba($background-color--inverse, 0.5);
color: $background-color;
border-radius: 100%;
display: flex;
padding: $cap-spacing--plus-half;
align-items: center;
justify-content: center;
svg {
fill: $interactive-font-color--inverse;
}
}
}
.esri-attachments__item-mask {
display: flex;
overflow: hidden;
position: relative;
justify-content: center;
align-items: center;
width: $attachment-icon-container-width;
height: $attachment-icon-container-height;
box-shadow: 0 0 0 1px $border-color--subtle;
}
.esri-attachments__item-mask--icon {
background-color: $background-color--offset;
padding: $cap-spacing--double 0;
}
.esri-attachments__item-mask--icon .esri-attachments__image {
width: $attachment-icon-size;
height: $attachment-icon-size;
}
.esri-attachments__metadata {
display: flex;
justify-content: space-between;
margin-top: $cap-spacing--quarter;
.esri-attachments__metadata-fieldset {
background-color: $background-color;
border: none;
flex: 0 1 calc(50% - 1px);
font-size: $font-size--small;
margin: 0;
padding: $cap-spacing--half $side-spacing--half;
text-align: center;
}
}
.esri-attachments__file-name {
display: inline-block;
font-size: $font-size--small;
margin-bottom: $cap-spacing--quarter;
@include wordbreak();
}
.esri-attachments__file-fieldset {
border: none;
padding: $cap-spacing $side-spacing--half;
margin: 0;
}
.esri-attachments__file-input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.esri-attachments__container--list {
// List
.esri-attachments__items {
flex-direction: column;
flex-wrap: nowrap;
}
.esri-attachments__item-mask {
flex: 0 0 auto;
margin-right: $side-spacing--half;
position: relative;
}
.esri-attachments__image {
max-width: unset;
max-height: unset;
left: 50%;
}
.esri-attachments__label {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
}
.esri-attachments__filename {
flex: 1 0 0%;
cursor: pointer;
@include wordbreak();
}
.esri-attachments__item-chevron-icon {
cursor: pointer;
flex: 0 0 auto;
padding: 0 $side-spacing;
}
}
.esri-attachments__container--preview {
// Preview
.esri-attachments__items {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.esri-attachments__item {
margin-bottom: $cap-spacing;
width: 100%;
}
.esri-attachments__item-mask {
width: $attachment-image-container-width;
height: $attachment-image-container-height;
}
.esri-attachments__item-button {
flex-flow: column nowrap;
box-shadow: none;
}
.esri-attachments__item-button .esri-attachments__label {
margin: $cap-spacing 0;
}
.esri-attachments__image {
max-width: $attachment-image-container-width;
}
.esri-attachments__filename {
margin-top: $cap-spacing;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
width: calc(#{$attachment-image-container-width} - #{$side-spacing});
@include wordbreak();
}
.esri-attachments__item-mask--icon {
background-color: transparent;
}
}
.esri-attachments__form-node {
// Form
background-color: $background-color;
padding: $cap-spacing--half $side-spacing--half;
@include cardBoxShadow();
.esri-attachments__item-mask {
width: unset;
height: unset;
box-shadow: none;
}
.esri-attachments__image {
max-width: 100%;
}
}
.esri-attachments__error-message {
padding: $cap-spacing $side-spacing;
margin: $cap-spacing--half $side-spacing--half;
background-color: $background-color;
border-top: 3px solid $border-color--error;
animation: esri-fade-in-down 250ms ease-in-out;
@include defaultBoxShadow();
}
.esri-attachments__progress-bar {
position: absolute;
width: 100%;
}
@include loopingProgressBar(".esri-attachments__progress-bar");
[dir="rtl"] {
.esri-attachments__item-mask {
margin-right: 0;
margin-left: $side-spacing--half;
}
}
}
@if $include_Attachments == true {
@include attachments();
}

57
public/assets/esri/themes/base/widgets/_Attribution.scss Normal file
View file

@ -0,0 +1,57 @@
@mixin attribution() {
.esri-attribution {
font-size: $font-size--small;
line-height: 16px; // TODO: refactor to let Attribution inherit line-height.
background-color: rgba($background-color, 0.8);
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.esri-attribution__link {
color: currentColor;
text-decoration: none;
&:hover,
&:active,
&:visited,
&:focus {
color: currentColor;
}
}
.esri-attribution__sources {
font-weight: $font-weight--light;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
align-self: flex-start;
flex: 1 0;
}
.esri-attribution__sources[role="button"] {
font-size: 1em;
}
.esri-attribution__powered-by {
font-weight: $font-weight;
padding: 0 5px;
text-align: right;
white-space: nowrap;
align-self: flex-end;
}
.esri-attribution--open {
z-index: 2;
}
.esri-attribution__sources--open {
white-space: normal;
}
}
@if $include_Attribution == true {
@include attribution();
}

246
public/assets/esri/themes/base/widgets/_BasemapGallery.scss Normal file
View file

@ -0,0 +1,246 @@
@mixin basemapGallery() {
$transition-duration: 250ms;
$animation-duration: 500ms;
$thumbnail-width: 120px;
$thumbnail-width--narrow: 80px;
$item-border-size: 1px;
$item-content-height: 40px;
.esri-basemap-gallery {
color: $font-color;
background-color: $background-color;
overflow-y: auto;
position: relative;
width: auto;
&.no-animations * {
animation: none !important;
transition: none !important;
transition-duration: 0 !important;
outline: none !important;
}
&:focus-within {
@include outlineStyle();
}
&__item-container {
display: flex;
flex-flow: column nowrap;
position: relative;
transition: opacity $transition-duration ease-in-out;
list-style: none;
margin: 0;
padding-inline: $side-spacing--quarter;
padding-block: $cap-spacing--quarter;
gap: $cap-spacing--quarter;
}
&--grid &__item-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($thumbnail-width, 1fr));
padding-inline: $side-spacing;
padding-block: $cap-spacing;
column-gap: $side-spacing;
row-gap: $cap-spacing;
}
&--source-refreshing &__item-container,
&.esri-disabled &__item {
opacity: $opacity--disabled;
pointer-events: none;
animation: none;
}
&__empty-message {
padding: $cap-spacing $side-spacing;
animation: esri-fade-in $animation-duration ease-in-out;
}
&__item {
$transition: background-color $transition-duration ease-in-out, border-color $transition-duration ease-in-out;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
cursor: pointer;
border: $item-border-size solid transparent;
box-sizing: border-box;
animation: esri-fade-in $animation-duration ease-in-out;
transition: $transition;
&--error {
cursor: auto;
opacity: $opacity--disabled;
}
&-thumbnail {
flex-shrink: 0;
min-width: $thumbnail-width;
width: $thumbnail-width;
aspect-ratio: 1.5;
border-inline-end: $item-border-size solid $border-color--subtle;
transition: $transition;
}
@supports (object-fit: cover) {
&-thumbnail {
object-fit: cover;
}
}
&-title {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
padding: $cap-spacing--third $side-spacing--half;
font-size: $font-size--small;
color: $interactive-font-color;
transition: color $transition-duration ease-in-out, font-weight $transition-duration ease-in-out;
span {
width: 100%;
text-align: start;
// Used for truncating after two lines
// https://css-tricks.com/line-clampin/#aa-the-standardized-way
// https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word; // Force long words to break
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
&--selected,
&.esri-basemap-gallery__item--selected:hover,
&.esri-basemap-gallery__item--selected:focus {
cursor: auto;
border-color: $border-color--active;
background-color: $background-color--active;
.esri-basemap-gallery__item-title {
color: $font-color;
font-weight: $font-weight--medium;
}
}
&:hover,
&:focus {
outline: none;
border-color: $interactive-font-color;
background-color: $background-color--hover;
.esri-basemap-gallery__item-title {
color: $font-color;
}
}
&.esri-basemap-gallery__item--error:hover,
&.esri-basemap-gallery__item--error:focus {
background-color: $background-color;
border-color: transparent;
}
&-content {
display: flex;
flex-direction: column;
gap: $cap-spacing;
padding-inline: $side-spacing--half;
padding-block: $cap-spacing--eighth;
min-width: 0;
}
&-tags-container {
display: flex;
flex-direction: row;
gap: $side-spacing--quarter;
calcite-chip {
--calcite-font-size--2: var(--calcite-font-size--3);
--calcite-chip-spacing-s-internal: 0.15rem;
cursor: inherit;
height: 16px;
max-width: 60px;
}
}
}
// When we don't have a lot of horizontal space, we make the thumbnails square.
// See https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/52202
&--narrow-items &__item {
&-thumbnail {
min-width: $thumbnail-width--narrow;
width: $thumbnail-width--narrow;
aspect-ratio: 1;
}
}
// When displayed as a grid, the title of each item is placed below the thumbnail.
&--grid &__item {
flex-direction: column;
flex-flow: column wrap;
text-align: center;
border: $item-border-size solid $border-color--subtle;
&-thumbnail {
// Thumbnail is above, to move the border to the bottom.
border-inline-end: none;
border-block-end: $item-border-size solid $border-color--subtle;
// Thumbnail should fill the whole item instead of having a specific width.
min-width: 0;
width: 100%;
height: auto;
}
&-content {
width: 100%;
height: $item-content-height;
position: relative;
padding: 0;
}
&-tags-container {
position: absolute;
inset-block-end: $item-content-height + $side-spacing--third;
inset-inline-end: $side-spacing--third;
calcite-chip {
max-width: floor(($thumbnail-width - 2 * $side-spacing--third - $side-spacing--quarter) * 0.5);
}
}
}
&__loader {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
width: 100%;
animation: esri-fade-in $animation-duration ease-in-out;
}
@include loopingProgressBar(".esri-basemap-gallery__loader");
}
.esri-view .esri-basemap-gallery {
width: $panel-width;
}
// On large screens, allow the gallery to be larger.
.esri-view-width-greater-than-large .esri-ui-corner .esri-basemap-gallery {
width: $panel-width--plus-half;
}
}
@if $include_BasemapGallery == true {
@include basemapGallery();
}

530
public/assets/esri/themes/base/widgets/_BasemapLayerList.scss Normal file
View file

@ -0,0 +1,530 @@
@mixin basemapLayerList() {
$message-warning-border-color: $Calcite_Yellow_a150;
$indicator-size: 6px;
.esri-basemap-layer-list {
color: $font-color;
background-color: $background-color--offset;
padding: calc(var(--esri-widget-padding-y) * 0.5) calc(var(--esri-widget-padding-x) * 0.5);
overflow-y: auto;
display: flex;
flex-flow: column;
}
.esri-basemap-layer-list__title-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: $cap-spacing--quarter 0;
}
.esri-widget__heading.esri-basemap-layer-list__main-heading {
flex: 1 1;
margin: 0;
padding: $cap-spacing--quarter $side-spacing--quarter $cap-spacing--quarter 0;
font-size: $font-size;
}
.esri-basemap-layer-list__editing-card {
display: flex;
flex-flow: column;
padding: $cap-spacing $side-spacing;
background-color: $background-color;
@include defaultBoxShadow();
border-radius: $border-radius;
width: 100%;
animation: esri-fade-in-down 250ms ease-in-out;
}
.esri-basemap-layer-list__editing-input {
display: flex;
flex-flow: column;
}
.esri-basemap-layer-list__editing-actions {
display: flex;
justify-content: flex-end;
margin: $cap-spacing--half 0 0 0;
.esri-button {
font-size: $font-size--small;
min-height: $button-height--half;
width: 33%;
}
}
.esri-basemap-layer-list__edit-button {
background-color: transparent;
border: none;
color: $interactive-font-color;
width: $button-width;
height: $button-height;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 $button-width;
border-radius: $border-radius;
transition: background-color 125ms ease-in-out;
cursor: pointer;
&:hover,
&:focus {
background-color: $border-color;
color: $interactive-font-color--hover;
}
}
.esri-widget__heading.esri-basemap-layer-list__list-heading {
font-size: $font-size--small;
padding: 0;
font-weight: $font-weight;
}
.esri-basemap-layer-list__list {
list-style: none;
margin: 0 0 0 $side-spacing;
padding: 0;
@include sortableChosen("esri-basemap-layer-list--chosen");
}
.esri-basemap-layer-list__list,
.esri-basemap-layer-list__item {
&.esri-basemap-layer-list--chosen .esri-basemap-layer-list__item {
background-color: transparent;
}
}
.esri-basemap-layer-list__item--has-children {
padding-bottom: $cap-spacing--half;
}
.esri-basemap-layer-list__item--has-children .esri-basemap-layer-list__list:not([hidden]) {
animation: esri-fade-in 375ms ease-in-out;
}
.esri-basemap-layer-list__list[hidden] {
display: none;
}
.esri-basemap-layer-list__list--root {
margin: 0;
}
.esri-basemap-layer-list__item--selectable .esri-basemap-layer-list__item-container {
cursor: pointer;
&:hover {
border-left-color: $border-color;
}
}
.esri-basemap-layer-list__item[aria-selected="true"] > .esri-basemap-layer-list__item-container {
border-left-color: $border-color--active;
&:hover {
border-left-color: $border-color--active;
}
}
.esri-basemap-layer-list__item-container ~ .esri-basemap-layer-list__list .esri-basemap-layer-list__item {
border-bottom-width: 0;
}
.esri-basemap-layer-list__item {
background-color: $background-color;
border-bottom: 1px solid $border-color;
position: relative;
overflow: hidden;
list-style: none;
margin: $cap-spacing--quarter 0;
padding: 0;
@include sortableChosen("esri-basemap-layer-list--chosen");
}
.esri-basemap-layer-list__item-container {
border-left: $border-size--active solid transparent;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: $cap-spacing $side-spacing--half $cap-spacing ($side-spacing + 5);
transition: border-color 250ms ease-in-out;
}
.esri-basemap-layer-list__item--invisible-at-scale .esri-basemap-layer-list__item-title {
color: $interactive-font-color--disabled;
}
.esri-basemap-layer-list__item--has-children > .esri-basemap-layer-list__item-container {
padding-left: 5px;
}
.esri-basemap-layer-list__item--has-children > .esri-basemap-layer-list__list {
font-size: $font-size--small;
}
.esri-basemap-layer-list__child-toggle {
color: $interactive-font-color;
width: $side-spacing; // Matches side padding on items that don't have this toggle.
align-self: center;
display: flex;
cursor: pointer;
}
.esri-basemap-layer-list__child-toggle {
@include icomoonIconSelector() {
line-height: 1.2em;
}
}
.esri-basemap-layer-list__child-toggle .esri-basemap-layer-list__child-toggle-icon--opened,
.esri-basemap-layer-list__child-toggle .esri-basemap-layer-list__child-toggle-icon--closed-rtl,
.esri-basemap-layer-list__child-toggle--open .esri-basemap-layer-list__child-toggle-icon--closed {
display: none;
}
.esri-basemap-layer-list__child-toggle--open .esri-basemap-layer-list__child-toggle-icon--opened {
display: block;
}
.esri-basemap-layer-list__item-label {
display: flex;
flex-flow: row;
justify-content: flex-start;
align-items: center;
flex: 1;
user-select: none;
}
.esri-basemap-layer-list__item-label[role="switch"],
.esri-basemap-layer-list__item-label[role="checkbox"],
.esri-basemap-layer-list__item-label[role="radio"] {
cursor: pointer;
}
.esri-basemap-layer-list--new-ui {
.esri-basemap-layer-list__item-toggle-icon {
visibility: hidden;
}
.esri-basemap-layer-list__item--invisible .esri-basemap-layer-list__item-toggle-icon {
color: inherit;
}
// show icon on focus of toggle/label
.esri-basemap-layer-list__item-toggle:focus .esri-basemap-layer-list__item-toggle-icon,
.esri-basemap-layer-list__item-label:focus .esri-basemap-layer-list__item-toggle-icon,
// how icon on hover of item container
.esri-basemap-layer-list__item-container:hover .esri-basemap-layer-list__item-toggle-icon,
// always show icon when item is not visible
.esri-basemap-layer-list__item--invisible > .esri-basemap-layer-list__item-container .esri-basemap-layer-list__item-toggle-icon {
visibility: visible;
}
}
.esri-basemap-layer-list__item-title {
flex: 1;
padding-left: $side-spacing--third;
padding-right: $side-spacing--third;
line-height: $line-height;
word-break: break-word;
overflow-wrap: break-word;
transition: color 125ms ease-in-out;
}
.esri-basemap-layer-list__status-indicator {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-block: 0;
height: $indicator-size;
width: $indicator-size;
margin-inline: $cap-spacing;
}
.esri-basemap-layer-list__publishing {
border: 1px solid $interactive-font-color;
animation: publishing 2s normal infinite;
}
.esri-basemap-layer-list__updating {
background-color: $updating;
border-radius: 50%;
animation: updating 2s normal infinite;
}
.esri-basemap-layer-list__connection-status {
height: $button-width--half;
width: $button-width--half;
margin-inline: $side-spacing--half;
color: $connection-disconnected;
}
.esri-basemap-layer-list__connection-status--connected {
color: $connection-connected;
}
.esri-basemap-layer-list__item-message {
display: flex;
align-items: center;
visibility: hidden;
height: 0;
margin-top: -1px;
padding: $cap-spacing--half $side-spacing--half;
overflow: hidden;
font-size: $font-size--small;
transition: transform 250ms ease-in-out;
transform: scale(1, 0);
animation: esri-fade-in-down 250ms ease-in-out;
transform-origin: center top;
background-color: $background-color--offset-subtle;
margin-inline-start: 3rem;
border-inline-start: $border-size--active solid $message-warning-border-color;
margin-block-end: 0.25rem;
margin-inline-end: 0.25rem;
}
.esri-basemap-layer-list__item-message {
@include icomoonIconSelector() {
margin-right: 0.3rem;
}
}
.esri-basemap-layer-list__item--has-message {
.esri-basemap-layer-list__item-message {
visibility: visible;
height: auto;
transform: scale(1, 1);
}
}
.esri-basemap-layer-list__item-toggle {
padding: 0 $side-spacing--quarter;
cursor: pointer;
color: $interactive-font-color;
display: flex;
align-items: center;
}
.esri-basemap-layer-list__item-actions-menu {
align-self: center;
display: flex;
}
.esri-basemap-layer-list__item-actions-menu-item {
display: flex;
flex: 1 0 auto;
justify-content: center;
align-items: center;
color: $interactive-font-color;
cursor: pointer;
padding: 0 $side-spacing--half;
transition: border-color 250ms ease-in-out;
}
.esri-basemap-layer-list__item-actions-menu-item .esri-disabled-element {
pointer-events: none;
opacity: $opacity--disabled;
}
.esri-basemap-layer-list__item-actions-menu-item:first-of-type {
margin: 0 2px;
}
.esri-basemap-layer-list__item-actions-menu-item:hover {
background-color: $background-color--hover;
}
.esri-basemap-layer-list__item-actions-menu-item--active,
.esri-basemap-layer-list__item-actions-menu-item--active:hover {
background-color: $background-color--active;
}
.esri-basemap-layer-list__item-actions {
position: relative;
background-color: $background-color--offset;
color: $interactive-font-color;
margin: -1px $side-spacing--half $cap-spacing--half;
height: auto;
}
.esri-basemap-layer-list__item-actions[aria-expanded="true"] {
animation: esri-fade-in 250ms ease-in-out;
}
.esri-basemap-layer-list__item-actions-section {
animation: esri-fade-in 375ms ease-in-out;
}
.esri-basemap-layer-list__item-actions[hidden] {
display: none;
}
.esri-basemap-layer-list__item-actions-close {
color: $interactive-font-color;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
padding: 5px;
z-index: 1;
}
.esri-basemap-layer-list__item-actions-list {
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
padding: $cap-spacing--half 0;
list-style: none;
border-top: 2px solid $background-color;
}
.esri-basemap-layer-list__item-actions-list:first-of-type {
border-top: 0;
}
.esri-basemap-layer-list__item-action,
.esri-basemap-layer-list__action-toggle {
border: 1px solid transparent;
display: flex;
justify-content: flex-start;
align-items: flex-start;
cursor: pointer;
font-size: $font-size--small;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: $cap-spacing--half $side-spacing;
opacity: 1;
transition: opacity 250ms ease-in-out 250ms, background-color 250ms ease-in-out;
}
.esri-basemap-layer-list__item-action {
justify-content: flex-start;
flex-flow: row;
}
.esri-basemap-layer-list__action-toggle {
flex-flow: row-reverse;
justify-content: space-between;
.esri-basemap-layer-list__item-action-title {
margin-left: 0;
}
.esri-basemap-layer-list__item-action-icon {
background-color: $background-color--inverse;
border-radius: $toggle-height;
box-shadow: 0 0 0 1px $interactive-font-color--inverse;
flex: 0 0 $toggle-width;
height: $toggle-height;
overflow: hidden;
padding: 0;
position: relative;
transition: background-color 125ms ease-in-out;
width: $icon-size;
&:before {
// Toggle handle. Overrides any icon class
background-color: $interactive-font-color--inverse;
border-radius: 100%;
content: "";
display: block;
height: $toggle-handle-size;
left: 0;
margin: 2px;
position: absolute;
top: 0;
transition: background-color 125ms ease-in-out, left 125ms ease-in-out;
width: $toggle-handle-size;
}
}
}
.esri-basemap-layer-list__action-toggle--on .esri-basemap-layer-list__item-action-icon {
// Toggle on
background-color: $interactive-font-color--inverse;
&:before {
background-color: $background-color--inverse;
box-shadow: 0 0 0 1px $background-color--inverse;
left: $toggle-handle-size;
}
}
.esri-basemap-layer-list__item-action:hover,
.esri-basemap-layer-list__action-toggle:hover {
background-color: $background-color--hover;
}
.esri-basemap-layer-list__item-actions[hidden] .esri-basemap-layer-list__item-action {
opacity: 0;
}
.esri-basemap-layer-list__item-action-icon {
flex: 0 0 $icon-size;
font-size: $icon-size;
display: inline-block;
width: $icon-size;
height: $icon-size;
margin-top: 0.1em;
}
.esri-basemap-layer-list__item-action-image {
flex: 0 0 $icon-size;
width: $icon-size;
height: $icon-size;
font-size: $font-size;
text-align: center;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.esri-basemap-layer-list__item-action-title {
margin-left: 5px;
}
.esri-basemap-layer-list-panel {
margin: $cap-spacing $side-spacing;
}
.esri-basemap-layer-list__hr {
border: none;
height: 1px;
width: 100%;
background-color: $border-color;
}
.esri-basemap-layer-list__no-items {
color: $interactive-font-color;
text-align: center;
padding: $cap-spacing--double $side-spacing;
}
// Legend as content
.esri-basemap-layer-list-panel__content--legend .esri-legend__service {
padding: 0 0 $cap-spacing 0;
}
[dir="rtl"] .esri-basemap-layer-list {
.esri-basemap-layer-list__item--has-children > .esri-basemap-layer-list__item-container {
padding-left: $side-spacing + 5;
padding-right: 5px;
}
.esri-basemap-layer-list__list {
margin: 0 $side-spacing 0 0;
}
.esri-basemap-layer-list__list--root {
margin: 0;
}
.esri-basemap-layer-list__child-toggle .esri-basemap-layer-list__child-toggle-icon--closed {
display: none;
}
.esri-basemap-layer-list__child-toggle .esri-basemap-layer-list__child-toggle-icon--closed-rtl {
display: block;
}
.esri-basemap-layer-list__child-toggle--open .esri-basemap-layer-list__child-toggle-icon--closed-rtl {
display: none;
}
.esri-basemap-layer-list__item-action-title {
margin-left: 0;
margin-right: 5px;
}
.esri-basemap-layer-list__action-toggle .esri-basemap-layer-list__action-toggle {
margin-right: 0;
}
.esri-basemap-layer-list__item:after {
animation: looping-progresss-bar-ani $looping-progress-bar-params reverse;
}
.esri-basemap-layer-list__item-message {
@include icomoonIconSelector() {
margin-right: 0;
margin-left: 0.3rem;
}
}
.esri-basemap-layer-list__item--selectable .esri-basemap-layer-list__item-container {
border-left: none;
border-right: $border-size--active solid transparent;
&:hover {
border-right-color: $border-color;
}
}
.esri-basemap-layer-list__item[aria-selected="true"] > .esri-basemap-layer-list__item-container {
border-right-color: $border-color--active;
&:hover {
border-right-color: $border-color--active;
}
}
}
@keyframes updating {
0%,
40% {
background-color: transparent;
}
50%,
80% {
background-color: var(--calcite-ui-brand);
}
100% {
background-color: transparent;
}
}
@keyframes publishing {
0%,
20% {
transform: rotate(45deg);
}
80%,
100% {
transform: rotate(135deg);
}
}
}
@if $include_BasemapLayerList==true {
@include basemapLayerList();
}

123
public/assets/esri/themes/base/widgets/_BasemapToggle.scss Normal file
View file

@ -0,0 +1,123 @@
$basemap_toggle_offset: 5px !default;
$basemap_toggle_size: $button-width--double !default;
@mixin basemapToggle() {
.esri-basemap-toggle {
cursor: pointer;
position: relative;
overflow: visible;
width: $basemap_toggle_size + $basemap_toggle_offset;
height: $basemap_toggle_size + $basemap_toggle_offset;
background-color: transparent;
@include boxShadow("none");
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
&:hover {
background-color: transparent;
}
}
.esri-basemap-toggle__container,
.esri-basemap-toggle__image {
width: $basemap_toggle_size;
height: $basemap_toggle_size;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.esri-basemap-toggle__container {
@include defaultBoxShadow();
}
.esri-basemap-toggle__image {
background-color: $background-color;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(../base/images/basemap-toggle-64.svg);
}
.esri-basemap-toggle__image--loading {
background-image: unset;
align-items: center;
display: flex;
justify-content: center;
}
.esri-basemap-toggle__image--secondary {
margin-top: $basemap_toggle_offset;
margin-left: $basemap_toggle_offset;
@include defaultBoxShadow();
animation: esri-basemap-slide 2000ms ease-in-out;
}
.esri-basemap-thumbnail__overlay-scrim {
--calcite-scrim-background: rgba(0, 0, 0, 0.5);
color: var(--calcite-ui-text-inverse);
}
.esri-basemap-toggle__image-overlay {
position: absolute;
width: 100%;
height: 100%;
transition: background-color 125ms ease-in-out;
background-color: rgba(255, 255, 255, 0);
display: flex;
align-items: flex-end;
justify-content: center;
.esri-basemap-toggle:hover {
background-color: rgba($interactive-font-color--hover, 0.4);
}
}
.esri-basemap-toggle__title {
flex: 1 0 100%;
height: auto;
font-size: 9px;
font-weight: $font-weight--medium;
line-height: $line-height;
padding: 0.5em;
background-color: rgba(255, 255, 255, 0.7);
text-align: center;
}
.esri-basemap-toggle.esri-disabled {
cursor: auto;
}
.esri-widget.esri-basemap-toggle,
.esri-ui-corner {
.esri-widget.esri-basemap-toggle {
background-color: transparent;
@include boxShadow("none");
}
}
}
////////////////////////////////////////
// ANIMATIONS
@keyframes esri-basemap-slide {
0% {
margin-top: 0;
margin-left: 0;
opacity: 0;
}
75% {
margin-top: 0;
margin-left: 0;
opacity: 0;
}
100% {
margin-top: $basemap_toggle_offset;
margin-left: $basemap_toggle_offset;
opacity: 1;
}
}
@if $include_BasemapToggle == true {
@include basemapToggle();
}

7
public/assets/esri/themes/base/widgets/_BinaryColorSizeSlider.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin binaryColorSizeSlider() {
@include smartMappingSlider(esri-binary-color-size-slider);
}
@if $include_BinaryColorSizeSlider == true {
@include binaryColorSizeSlider();
}

360
public/assets/esri/themes/base/widgets/_Bookmarks.scss Normal file
View file

@ -0,0 +1,360 @@
@mixin bookmarks() {
$bookmarks-height--loading: 150px !default;
$bookmarks-thumbnail-size: 64px !default;
.esri-bookmarks {
background-color: transparent;
.esri-widget__content--empty {
background-color: $background-color--offset;
}
}
.esri-bookmarks__loader-container {
height: $bookmarks-height--loading;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.esri-bookmarks__loader {
height: 64px;
width: 100%;
background: url(../base/images/loading-throb.gif) no-repeat center center;
}
.esri-bookmarks__list {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.esri-bookmarks__bookmark {
align-items: center;
border-bottom: 1px solid $border-color--subtle;
position: relative;
display: flex;
background-color: $background-color;
transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
overflow: hidden;
}
.esri-bookmarks__bookmark.sortable-chosen {
background-color: $background-color--active;
transition: background-color 250ms ease-in-out;
}
.esri-bookmarks__bookmark-button {
border: none;
background-color: transparent;
padding: 0;
padding-inline-start: $side-spacing--half;
color: $interactive-font-color;
cursor: pointer;
display: flex;
font-family: $font-family;
font-weight: $font-weight--regular;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
overflow: hidden;
flex: 1 1 auto;
&:hover {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
}
&:hover:active {
background-color: transparent;
color: $interactive-font-color;
}
text-align: left; // fallback for IE11
@supports (text-align: initial) {
text-align: initial; // modern browsers
}
}
.esri-bookmarks__list--sortable .esri-bookmarks__bookmark-button {
padding-inline-start: 0;
}
.esri-bookmarks_bookmark-drag-handle {
align-items: center;
align-self: stretch;
background-color: transparent;
border: none;
color: $font-color--placeholder;
cursor: move;
display: flex;
flex: 0 0 auto;
justify-content: center;
margin: 0 0;
padding: 0 $side-spacing--quarter;
transition: background-color 250ms ease-in-out;
&:focus,
&:hover {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
}
}
.esri-bookmarks_bookmark-drag-handle[aria-pressed="true"] {
background-color: $background-color--active;
color: $interactive-font-color--hover;
}
@include loopingProgressBar(".esri-bookmarks__bookmark--active");
.esri-bookmarks__bookmark--active {
color: $font-color;
background-color: $background-color--active;
cursor: default;
&:hover,
&:focus {
color: $font-color;
background-color: $background-color--active;
cursor: default;
}
}
.esri-bookmarks__bookmark-label {
display: flex;
flex-flow: column;
flex: 1 1 auto;
padding: $cap-spacing $side-spacing--three-quarters;
}
.esri-bookmarks__bookmark-name {
color: $font-color;
font-size: $font-size--small;
flex: 1;
overflow: hidden;
padding: 0;
overflow-wrap: break-word; /* Firefox */
word-break: break-word;
}
.esri-bookmarks__bookmark-time-extent {
font-size: $font-size--small;
flex: 1;
overflow: hidden;
padding: 0;
overflow-wrap: break-word; /* Firefox */
word-break: break-word;
}
.esri-bookmarks__time-extent {
margin-top: $cap-spacing--quarter;
display: grid;
grid-template-columns: auto auto;
column-gap: $side-spacing--half;
}
.esri-bookmarks__bookmark-image-container {
align-items: center;
display: flex;
flex: 0 0 auto;
justify-content: center;
max-width: $button-width--double;
position: relative;
}
.esri-bookmarks__bookmark-image-container--has-image {
overflow: hidden;
}
.esri-button-menu {
position: absolute;
bottom: 2px;
right: 2px;
z-index: 1;
}
.esri-bookmarks__image {
width: $bookmarks-thumbnail-size;
background-color: $background-color--offset;
margin: $cap-spacing--half 0;
}
.esri-bookmarks__bookmark-edit-button-container {
display: flex;
flex: 0 0 auto;
align-self: stretch;
align-items: stretch;
}
.esri-bookmarks__bookmark-edit-button {
align-items: center;
background-color: transparent;
border: none;
color: $interactive-font-color;
cursor: pointer;
padding: 0 $side-spacing;
display: flex;
&:hover {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
}
}
.esri-bookmarks__time-extent-container {
padding: $cap-spacing--half $side-spacing $cap-spacing;
--calcite-label-margin-bottom: 0;
}
.esri-bookmarks__time-extent-group {
color: $interactive-font-color;
display: grid;
font-size: $font-size--small;
grid-template-rows: auto auto;
}
.esri-bookmarks__add-bookmark {
align-items: center;
background-color: $background-color--offset;
display: flex;
justify-content: center;
padding: $cap-spacing--half $side-spacing--half $cap-spacing;
}
.esri-bookmarks__add-bookmark-button {
align-items: center;
background-color: $background-color;
border-radius: $button-height;
font-size: $font-size--small;
flex: 0 1 auto;
justify-content: center;
padding: $cap-spacing--three-quarters $side-spacing--half;
transition: background-color 250ms ease-in-out;
width: auto;
&:hover {
text-decoration: none;
@include defaultBoxShadow();
}
}
.esri-bookmarks__add-bookmark-icon {
font-size: $font-size;
padding-inline-start: $side-spacing--quarter;
padding-inline-end: $side-spacing--half;
}
.esri-bookmarks__authoring-card {
background-color: $background-color--offset;
padding: $cap-spacing--half $side-spacing--half;
animation: esri-fade-in-down 250ms ease-in-out;
}
.esri-bookmarks__authoring-card .esri-bookmarks__bookmark-image-container {
width: $bookmarks-thumbnail-size;
height: $bookmarks-thumbnail-size;
border: 1px solid $border-color;
background-image: url("../base/images/transparent-bg.png");
.esri-bookmarks__image {
margin-bottom: 0;
margin-top: 0;
}
}
.esri-bookmarks__authoring-form {
display: flex;
flex-flow: column;
background-color: $background-color;
@include defaultBoxShadow();
border-radius: $border-radius;
}
.esri-bookmarks__authoring-container {
align-items: center;
display: flex;
flex-flow: row;
padding: $cap-spacing $side-spacing;
.esri-bookmarks__authoring-label {
padding-top: 0;
padding-bottom: 0;
width: calc(100% - #{$bookmarks-thumbnail-size}); // Firefox fix
}
}
.esri-bookmarks__authoring-form--adding {
.esri-bookmarks__authoring-label {
padding-inline: $side-spacing;
}
}
.esri-bookmarks__authoring-label {
display: flex;
flex-flow: column;
flex: 1 0 auto;
padding-block: $cap-spacing;
}
.esri-bookmarks__authoring-label--start-padding {
padding-inline-start: $side-spacing;
}
.esri-bookmarks__authoring-actions {
border-top: solid 1px $border-color;
display: flex;
justify-content: flex-end;
padding: $cap-spacing--half $side-spacing;
margin-top: $cap-spacing--half;
.esri-button {
font-size: $font-size--small;
min-height: $button-height--half;
width: 33%;
}
.esri-bookmarks__authoring-delete-button {
color: $font-color--error;
margin-right: auto;
padding-left: 0;
padding-right: 0;
width: auto;
}
}
.esri-widget__no-bookmark-icon {
font-size: $button-height;
line-height: $button-height--double;
width: $button-height--double;
height: $button-height--double;
display: inline-block;
text-align: center;
}
.esri-bookmarks--fade-in {
opacity: 0;
transition: opacity 375ms ease-out;
}
.esri-bookmarks--fade-in-active {
opacity: 1;
}
[dir="rtl"] .esri-bookmarks {
.esri-bookmarks__bookmark {
&--active:after {
animation: looping-progresss-bar-ani $looping-progress-bar-params reverse;
}
}
.esri-bookmarks__bookmark-container {
margin-right: 0;
margin-left: $side-spacing--half;
}
.esri-bookmarks__authoring-actions .esri-bookmarks__authoring-delete-button {
margin-right: 0;
margin-left: auto;
}
.esri-bookmarks__bookmark-button {
text-align: right; // fallback for IE11
@supports (text-align: initial) {
text-align: initial; // modern browsers
}
}
.esri-bookmarks__bookmark-image-container .esri-button-menu {
right: unset;
left: 2px;
}
}
}
@if $include_Bookmarks==true {
@include bookmarks();
}

151
public/assets/esri/themes/base/widgets/_BuildingDisciplinesTree.scss Normal file
View file

@ -0,0 +1,151 @@
@mixin buildingDisciplinesNode() {
$base: "esri-building-disciplines-tree-node";
$root: "#{$base}--root";
$leaf: "#{$base}--leaf";
$label: "#{$base}__label";
$checkbox: "#{$base}__checkbox";
$checkbox--checked: "#{$base}__checkbox--checked";
$checkbox--indeterminate: "#{$base}__checkbox--indeterminate";
$collapse-toggle: "#{$base}__collapse-toggle";
$collapse-toggle--collapsed: "#{$base}__collapse-toggle--collapsed";
$children: "#{$base}__children";
$collapse-toggle-size: 18px;
$collapse-toggle-icon-size: 10px;
$checkbox-size: 14px;
$checkbox-border-size: 1px;
$checkbox-icon-size: 10px;
$max-levels: 5;
$indent-size: $side-spacing--three-quarters;
@for $level from 1 through $max-levels {
.#{$base}--level-#{$level} {
$padding: $indent-size * ($level - 1);
padding-left: $padding;
&.#{$leaf} {
padding-left: $padding + $collapse-toggle-size;
}
}
}
.#{$label} {
display: flex;
flex-direction: row;
font-size: $font-size;
font-weight: $font-weight--light;
padding-top: $side-spacing--quarter;
padding-bottom: $side-spacing--quarter;
cursor: pointer;
align-items: center;
}
.#{$collapse-toggle} {
font-size: $collapse-toggle-icon-size;
line-height: $collapse-toggle-icon-size;
display: inline-block;
width: $collapse-toggle-size;
height: $collapse-toggle-size;
margin: 0;
padding: ($collapse-toggle-size - $collapse-toggle-icon-size) * 0.5;
transition: transform 0.1s ease-in-out;
border: none;
background: none;
flex-shrink: 0;
appearance: none;
&:not(.#{$collapse-toggle--collapsed}) {
transform: rotate(90deg);
}
}
.#{$checkbox} {
font-size: $checkbox-icon-size;
line-height: $checkbox-icon-size;
display: inline-block;
width: $checkbox-size;
height: $checkbox-size;
margin: 0;
margin-right: $side-spacing--half;
padding: ($checkbox-size - $checkbox-icon-size - $checkbox-border-size * 2) * 0.5;
transition: all 0.1s ease-in-out;
border: solid 1px $border-color;
background: none;
flex-shrink: 0;
appearance: none;
&:before {
color: $interactive-font-color--inverse;
}
}
.#{$checkbox--indeterminate} {
&:before {
color: $interactive-font-color;
}
}
.#{$checkbox--checked} {
background: $border-color--active;
border-color: $border-color--active;
&:before {
color: $interactive-font-color--inverse;
}
}
[dir="rtl"] {
.#{$checkbox} {
margin-right: 0;
margin-left: $side-spacing--half;
}
.#{$collapse-toggle} {
transform: rotate(180deg);
&:not(.#{$collapse-toggle--collapsed}) {
transform: rotate(90deg);
}
}
@for $level from 1 through $max-levels {
.#{$base}--level-#{$level} {
$padding: $indent-size * ($level - 1);
padding-left: 0;
padding-right: $padding;
&.#{$leaf} {
padding-left: 0;
padding-right: $padding + $collapse-toggle-size;
}
}
}
}
}
/**
* Adds all the styles for the "Categories & Disciplines" tree used in the building explorer.
*/
@mixin buildingDisciplinesTree() {
$base: "esri-building-disciplines-tree";
@include buildingDisciplinesNode();
}

51
public/assets/esri/themes/base/widgets/_BuildingExplorer.scss Normal file
View file

@ -0,0 +1,51 @@
@import "BuildingLevelPicker";
@import "BuildingPhasePicker";
@import "BuildingDisciplinesTree";
@mixin buildingExplorer() {
$base: "esri-building-explorer";
$loading-container: "#{$base}__loading-container";
$section: "#{$base}__section";
$panel--error: "#{$base}__panel--error";
.#{$base} {
position: relative;
overflow-y: auto;
overflow-x: hidden;
width: $panel-width;
max-width: 100%;
max-height: calc(100vh - #{$side-spacing--double});
padding: $side-spacing;
.esri-widget__heading {
font-weight: $font-weight;
}
}
.#{$loading-container} {
text-align: center;
calcite-loader {
box-sizing: content-box;
}
}
.#{$section}:not(:last-child) {
margin-bottom: $side-spacing--double;
}
.#{$panel--error} {
color: $font-color--error;
margin: 0;
animation: esri-fade-in 250ms ease-in-out;
}
}
@if $include_BuildingExplorer==true {
@include buildingLevelPicker();
@include buildingPhasePicker();
@include buildingDisciplinesTree();
@include buildingExplorer();
}

253
public/assets/esri/themes/base/widgets/_BuildingLevelPicker.scss Normal file
View file

@ -0,0 +1,253 @@
/**
* Adds the styles for the label which displays the currently selected level.
*/
@mixin _buildingLevelPickerLabel($container, $theme) {
$base: "#{$container}-label";
$active: "#{$base}--active";
$hover: "#{$base}--hover";
$empty: "#{$base}--empty";
$clear-button: "#{$base}__clear-button";
$clear-button-icon: "#{$base}__clear-button-icon";
$width: 90px;
$height: 40px;
$padding: map-get($theme, padding);
.#{$base} {
color: map-get($theme, label-color);
text-align: center;
font-size: $height;
line-height: $height;
}
.#{$base},
.#{$empty} {
position: relative;
width: $width;
cursor: pointer;
transition: opacity 0.3s;
text-align: center;
&.#{$active} {
color: map-get($theme, label-color--active);
}
}
.#{$empty} {
font-size: $font-size;
font-weight: $font-weight--light;
color: map-get($theme, label-color--empty);
cursor: default;
}
.#{$clear-button} {
$size: 20px;
$icon-size: 12px;
font-size: $icon-size;
line-height: $icon-size;
position: absolute;
top: 10px; // Align with the label.
display: none;
width: $size;
height: $size;
margin-left: $side-spacing--quarter;
padding: ($size - $icon-size) * 0.5;
cursor: pointer;
transition: all 0.1s ease-in-out;
color: $interactive-font-color;
border: none;
border-radius: 50%;
appearance: none;
&:hover {
background: $background-color--hover;
}
}
// Show the button when we have an active level.
.#{$active} .#{$clear-button} {
display: inline-block;
}
}
/**
* Adds the styles for each of the levels in the level picker level stack.
*/
@mixin _buildingLevelPickerLevel($container, $theme) {
$item-container: "#{$container}-item";
$base: "#{$container}-item__base";
$hover: "#{$container}-item--hover";
$active: "#{$container}-item--active";
$animate-level: "#{$container}--animate-level";
.#{$item-container} {
border: 1px solid transparent;
will-change: height;
touch-action: none;
}
.#{$base} {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
will-change: height;
.rect {
position: absolute;
top: 50%;
left: 50%;
margin-top: 3px;
transform: translate(-50%, -50%) rotateX(66deg) rotateZ(45deg);
pointer-events: none;
border: map-get($theme, level-border-width) solid map-get($theme, level-border-color);
outline: solid 1px transparent; // So things don't move when focusing
background-color: map-get($theme, level-background-color);
will-change: height;
}
}
.#{$hover} .#{$base} {
.rect {
border-color: map-get($theme, level-border-color--hover);
background-color: map-get($theme, level-background-color--hover);
box-shadow: 0 0 2px 1px map-get($theme, level-border-color--hover);
}
}
.#{$active} .#{$base} {
.rect {
border-color: map-get($theme, level-border-color--active);
background-color: map-get($theme, level-background-color--active);
}
}
$in-duration: 0.1s;
$out-duration: 0.3s;
$bg-transition: background-color $in-duration ease-in-out;
$border-transition: border-color $in-duration ease-in-out;
$spring: cubic-bezier(0.63, -0.265, 0.48, 1.64);
$size-transition-out: height $out-duration $spring, width $out-duration $spring;
$size-transition-in: height $in-duration ease-out, width $in-duration ease-out;
.#{$item-container} {
&,
.#{$base},
.rect {
transition: $size-transition-in, $bg-transition, $border-transition;
}
}
// Animate everything when the $animate-level class is present in the parent.
.#{$animate-level} .#{$item-container} {
&,
.#{$base},
.rect {
transition: $size-transition-out, $bg-transition, $border-transition;
}
}
}
/**
* Adds all the styles for the level picker used in the building explorer.
*/
@mixin buildingLevelPicker() {
$container: "esri-building-level-picker";
$levels-container: "#{$container}__levels-container";
$levels-inner-container: "#{$container}__inner-levels-container";
$label-container: "#{$container}__label-container";
$no-level: "#{$container}--no-level";
$arrow-up: "#{$container}__arrow-up";
$arrow-down: "#{$container}__arrow-down";
$padding: 12px;
$theme: (
padding: $padding,
label-color: $interactive-font-color,
label-color--empty: $font-color,
label-color--active: $border-color--active,
level-border-width: 2px,
level-border-color: $border-color,
level-border-color--hover: $border-color--active,
level-border-color--active: $border-color--active,
level-background-color: rgba(#fff, 0.7),
level-background-color--hover: rgba(#fff, 0.7),
level-background-color--active: $border-color--active
);
.#{$container} {
display: flex;
flex-direction: row;
align-items: center;
&.#{$no-level} {
display: none;
}
}
.#{$levels-container} {
display: flex;
flex-direction: column;
width: 50%;
padding: 20px 0;
cursor: pointer;
transform: rotate(180deg); // So that our levels stack properly.
justify-content: flex-start;
align-items: center;
}
.#{$levels-inner-container} {
transition: margin 0.3s;
}
.#{$label-container} {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 50%;
height: 90px;
margin-right: $padding;
align-items: center;
}
@include _buildingLevelPickerLabel($container, $theme);
@include _buildingLevelPickerLevel($container, $theme);
.#{$arrow-up},
.#{$arrow-down} {
@include arrowButton();
}
.#{$arrow-up} {
@extend .esri-arrow-up;
}
.#{$arrow-down} {
@extend .esri-arrow-down;
}
}

92
public/assets/esri/themes/base/widgets/_BuildingPhasePicker.scss Normal file
View file

@ -0,0 +1,92 @@
/**
* Adds all the styles for the phase picker used in the building explorer.
*/
@mixin buildingPhasePicker() {
$container: "esri-building-phase-picker";
$phases-container: "#{$container}__phases-container";
$phase: "#{$container}__phase";
$phase-active: "#{$container}__phase--active";
$phase-current: "#{$container}__phase--current";
$divider: "#{$container}__divider";
$divider-active: "#{$container}__divider--active";
$arrow-left: "#{$container}__arrow-left";
$arrow-right: "#{$container}__arrow-right";
$phase-size: 32px;
$border-width: 1px;
$divider-min-width: $side-spacing;
.#{$container},
.#{$phases-container} {
display: flex;
flex-direction: row;
align-items: center;
}
.#{$phases-container} {
flex-grow: 0;
flex-shrink: 1;
overflow: hidden;
padding: 5px;
}
.#{$phase} {
width: $phase-size;
height: $phase-size;
font-weight: $font-weight;
cursor: pointer;
transition: all 250ms;
color: $font-color;
border: solid $border-width $border-color;
border-radius: 100%;
background: $background-color;
appearance: none;
flex-shrink: 0;
&:hover {
box-shadow: 0 0 2px 1px $border-color--active;
transform: scale(1.1); // Make it slightly bigger w/o affecting layout
}
&.#{$phase-active} {
border-color: $border-color--active;
background-color: $background-color--active;
}
&.#{$phase-current} {
color: $interactive-font-color--inverse;
background-color: $border-color--active;
}
}
.#{$divider} {
height: $border-width;
min-width: $divider-min-width;
background: $border-color;
flex-grow: 0;
&.#{$divider-active} {
background-color: $border-color--active;
}
}
.#{$arrow-left},
.#{$arrow-right} {
@include arrowButton();
}
.#{$arrow-left} {
@extend .esri-arrow-left;
}
.#{$arrow-right} {
@extend .esri-arrow-right;
}
}

129
public/assets/esri/themes/base/widgets/_ButtonMenu.scss Normal file
View file

@ -0,0 +1,129 @@
@mixin buttonMenu() {
.esri-button-menu {
width: $button-width;
height: $button-height;
.esri-button-menu__button {
align-items: center;
background-color: transparent;
border: none;
color: $interactive-font-color;
display: flex;
font-size: $icon-size;
height: $button-height;
justify-content: center;
text-align: center;
transition: background-color 125ms ease-in-out;
width: $button-width;
&:disabled {
cursor: default;
color: $interactive-font-color--disabled;
}
&:hover,
&:focus {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
cursor: pointer;
}
&.esri-button-menu__button--selected,
&.esri-button-menu__button--selected:hover {
background: $background-color--inverse;
color: $interactive-font-color--inverse;
}
}
.esri-button-menu__content-wrapper {
position: relative;
display: inline-block;
}
}
.esri-button-menu__content {
border-radius: $border-radius;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.33);
background-color: $background-color;
max-height: 250px;
min-width: 200px;
overflow: auto;
z-index: 1;
.esri-button-menu__item-wrapper,
.esri-button-menu__embedded-content-wrapper {
list-style: none;
margin: 0;
padding: 0;
}
}
.esri-button-menu__item {
display: block;
padding: 0;
.esri-button-menu__item-label {
align-items: center;
color: $font-color;
cursor: pointer;
display: flex;
font-family: $font-family;
font-weight: $font-weight;
font-size: $font-size;
justify-content: flex-start;
margin: 0;
padding: $cap-spacing $side-spacing;
position: relative;
text-decoration: none;
.esri-button-menu__item-label-content {
padding: 0 $side-spacing--half;
width: auto;
}
&:hover {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
}
}
.esri-button-menu__icon {
color: $button-color;
}
.esri-button-menu__checkbox {
position: absolute;
opacity: 0;
&:checked {
& ~ .esri-button-menu__embedded-content-wrapper {
display: block;
}
}
}
.esri-button-menu__embedded-content-wrapper {
display: none;
.esri-button-menu__checkbox {
&:checked {
& ~ .esri-button-menu__item-label {
.esri-button-menu__icon {
display: block;
}
}
}
}
}
}
.esri-button-menu__item--selectable {
.esri-button-menu__icon {
display: none;
}
}
}
@if $include_ButtonMenu == true {
@include buttonMenu();
}

7
public/assets/esri/themes/base/widgets/_ClassedColorSlider.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin classedColorSlider() {
@include smartMappingSlider(esri-classed-color-slider);
}
@if $include_ClassedColorSlider == true {
@include classedColorSlider();
}

7
public/assets/esri/themes/base/widgets/_ClassedSizeSlider.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin classedSizeSlider() {
@include smartMappingSlider(esri-classed-size-slider);
}
@if $include_ClassedSizeSlider == true {
@include classedSizeSlider();
}

74
public/assets/esri/themes/base/widgets/_ColorPicker.scss Normal file
View file

@ -0,0 +1,74 @@
@mixin colorPicker() {
$checkerboard-dark: $background-color;
$checkerboard-light: $font-color;
.esri-color-picker {
display: inline-block;
position: relative;
width: max-content;
height: max-content;
&__toggle-button {
position: relative;
z-index: 1;
background: var(--esri-color-picker-value);
border: solid 1px var(--calcite-ui-border-1);
}
&__bg-pattern {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
// Checkerboard pattern (see https://www.magicpattern.design/tools/css-backgrounds)
background-color: $checkerboard-light;
opacity: 0.3;
background-image: repeating-linear-gradient(
45deg,
$checkerboard-dark 25%,
transparent 25%,
transparent 75%,
$checkerboard-dark 75%,
$checkerboard-dark
),
repeating-linear-gradient(
45deg,
$checkerboard-dark 25%,
$checkerboard-light 25%,
$checkerboard-light 75%,
$checkerboard-dark 75%,
$checkerboard-dark
);
background-position: 0 0, calc(100% / 2) calc(100% / 2);
background-size: calc(100% / 2) calc(100% / 2);
}
&__popover {
background: var(--calcite-ui-foreground-1); // match color picker background
width: 272px; // calcite-color-picker may not render immediately, so we make sure we have the right width right away.
overflow-y: auto;
overflow-x: hidden;
max-height: 70vh;
@include defaultBoxShadow();
}
&__opacity-slider-container {
padding: $cap-spacing $side-spacing;
}
&__opacity-slider {
margin-inline: 8px; // Align slider handles
}
&__calcite-color-picker {
--calcite-ui-border-1: transparent;
}
}
}
@if $include_ColorPicker == true {
@include colorPicker();
}

7
public/assets/esri/themes/base/widgets/_ColorSizeSlider.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin colorSizeSlider() {
@include smartMappingSlider(esri-color-size-slider);
}
@if $include_ColorSizeSlider == true {
@include colorSizeSlider();
}

7
public/assets/esri/themes/base/widgets/_ColorSlider.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin colorSlider() {
@include smartMappingSlider(esri-color-slider);
}
@if $include_ColorSlider == true {
@include colorSlider();
}

16
public/assets/esri/themes/base/widgets/_Compass.scss Normal file
View file

@ -0,0 +1,16 @@
$compass_size: 20px !default;
@mixin compass() {
.esri-compass {
border-radius: 50%;
}
.esri-compass .esri-compass__icon {
font-size: $compass_size;
}
// TODO: update with correctly sized compass SVG.
}
@if $include_Compass == true {
@include compass();
}

236
public/assets/esri/themes/base/widgets/_CoordinateConversion.scss Normal file
View file

@ -0,0 +1,236 @@
@mixin coordinateConversion() {
.esri-coordinate-conversion {
cursor: default;
font-size: $font-size--small;
position: relative;
width: 400px;
.esri-select option[disabled] {
color: $interactive-font-color--disabled;
}
}
.esri-coordinate-conversion.esri-disabled {
pointer-events: none;
color: $interactive-font-color--disabled;
@include icomoonIconSelector() {
&:before {
color: $interactive-font-color--disabled;
}
}
}
.esri-coordinate-conversion--no-basemap {
padding: 1em;
width: auto;
}
.esri-coordinate-conversion--capture-mode {
.esri-coordinate-conversion__mode-toggle {
color: $interactive-font-color;
background: $background-color--offset;
}
}
.esri-coordinate-conversion__conversion-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.esri-coordinate-conversion__display {
direction: ltr;
flex: 1 1 auto;
min-height: 2em;
padding: 0.5em;
@include wordbreak();
}
.esri-coordinate-conversion__display:hover,
.esri-coordinate-conversion__select-row:hover {
background-color: $background-color--hover;
}
.esri-coordinate-conversion__button {
color: $interactive-font-color;
border-color: $interactive-font-color;
background-color: $background-color;
min-width: 30%;
max-width: 50%;
width: auto;
}
.esri-coordinate-conversion__convert-button-span {
overflow: hidden;
text-overflow: ellipsis;
}
.esri-coordinate-conversion__button:hover {
color: $background-color;
background-color: $interactive-font-color;
border-color: $interactive-font-color;
}
.esri-coordinate-conversion__input-group {
align-items: center;
display: flex;
justify-content: space-between;
width: 80%;
margin: $cap-spacing auto $cap-spacing auto;
label {
display: flex;
align-items: center;
}
}
.esri-coordinate-conversion .esri-coordinate-conversion__input-coordinate[type="text"] {
width: 100%;
margin: 0;
padding: 0 0.5em;
border: 1px solid $border-color;
font-size: $font-size--small;
height: 2em;
}
.esri-coordinate-conversion__input-coordinate--rejected {
text-decoration: underline red;
}
.esri-coordinate__settings {
display: flex;
flex-direction: column;
align-items: center;
.esri-select {
font-size: inherit;
}
}
.esri-coordinate-conversion__settings-group {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
margin-top: $cap-spacing;
}
.esri-coordinate-conversion__settings-group > * {
margin-bottom: 0.5em;
}
.esri-coordinate-conversion__settings-group-horizontal {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
}
.esri-coordinate-conversion__settings-group:last-child {
margin-bottom: $cap-spacing--half;
text-align: center;
width: 100%;
}
.esri-coordinate-conversion__preview-coordinate {
min-height: 1.25em;
}
.esri-coordinate-conversion__row {
padding: 0 $side-spacing 0 $side-spacing;
display: flex;
justify-content: space-between;
align-items: center;
height: 3em;
.esri-coordinate-conversion__row-button {
display: none;
}
}
.esri-coordinate-conversion__row:hover .esri-coordinate-conversion__row-button {
display: flex;
}
.esri-coordinate-conversion__row:focus-within .esri-coordinate-conversion__row-button {
display: flex;
}
.esri-coordinate-conversion__pattern-input {
padding: 4px;
width: 100%;
height: $button-height;
}
.esri-coordinate-conversion__tools {
flex: 0 0 auto;
display: flex;
position: relative;
padding: 0;
}
.esri-coordinate-conversion__select-primary {
font-size: inherit;
margin: 0;
padding: 0 2.5em 0 0.5em;
width: auto;
}
.esri-coordinate-conversion__select-row {
font-size: inherit;
background: $background-color;
height: 2em;
margin: 0;
text-align-last: center;
flex: 0 0 75px;
padding: 0 0.5em 0 0.5em;
}
.esri-coordinate-conversion__conversions-view {
margin: $cap-spacing--half 0 $cap-spacing--half 0;
}
.esri-ui-top-right .esri-coordinate-conversion__conversions-view,
.esri-ui-top-left .esri-coordinate-conversion__conversions-view,
.esri-coordinate-conversion div.esri-coordinate-conversion__conversions-view--expand-down {
display: flex;
flex-direction: column;
.esri-coordinate-conversion__conversion-list {
flex-direction: column;
}
}
.esri-ui-bottom-right .esri-coordinate-conversion__conversions-view,
.esri-ui-bottom-left .esri-coordinate-conversion__conversions-view,
.esri-coordinate-conversion div.esri-coordinate-conversion__conversions-view--expand-up {
display: flex;
flex-direction: column-reverse;
.esri-coordinate-conversion__conversion-list {
flex-direction: column-reverse;
}
.esri-widget--button {
.esri-icon-up,
.esri-icon-down {
transform: rotate(180deg);
}
}
}
.esri-coordinate-conversion__heading {
width: 100%;
height: $button-height;
background-color: $background-color--offset;
display: flex;
align-items: center;
.esri-widget__heading {
margin: 0 auto 0 auto;
}
.esri-coordinate-conversion__back-button {
position: absolute;
margin-inline-start: 0;
background-color: $background-color--offset;
&:hover {
background-color: $background-color;
}
}
}
.esri-coordinate-conversion__popup {
animation: esri-fade-in 250ms linear;
color: $interactive-font-color--inverse;
white-space: nowrap;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
white-space: inherit;
text-align: center;
transform: translate(-50%, -50%);
background-color: $background-color--inverse;
opacity: 0.8;
padding: 1em;
}
.esri-coordinate-conversion__clipboard-popup {
user-select: none;
width: auto;
pointer-events: none;
font-size: $font-size--tiny;
top: auto;
left: auto;
transform: none;
}
}
@if $include_CoordinateConversion == true {
@include coordinateConversion();
}

169
public/assets/esri/themes/base/widgets/_DatePicker.scss Normal file
View file

@ -0,0 +1,169 @@
@mixin date-picker() {
$section_margin: $cap-spacing--half;
$cell_border: 1px solid $border-color;
.esri-date-picker {
display: inline-flex;
border: 1px solid $border-color;
background-color: $background-color;
}
.esri-date-picker__calendar {
@include defaultBoxShadow();
padding: $section_margin;
.esri-widget--button {
// Prevent scroll/zoom which can happen when quickly tapping button.
// https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
touch-action: none;
}
}
.esri-date-picker__day-picker,
.esri-date-picker__month-picker,
.esri-date-picker__year-picker {
display: flex;
justify-content: center;
align-items: center;
}
.esri-date-picker__day-picker {
flex-wrap: wrap;
flex-direction: column;
}
.esri-date-picker__day-picker,
.esri-date-picker__month-picker {
margin-bottom: $section_margin;
}
.esri-date-picker__date {
margin: 0 $cap-spacing--double 0 0;
}
.esri-date-picker__calendar-toggle {
border: none;
font-size: $font-size;
width: 100%;
margin: 0;
padding: 0 0.5em;
height: $button-height;
color: $font-color;
}
.esri-date-picker .esri-date-picker__month-dropdown {
border: none;
font-weight: $font-weight__heading;
padding-right: 2.3em;
}
.esri-date-picker__week-item {
display: flex;
justify-content: center;
}
.esri-date-picker__day-item--header {
background: $background-color--offset;
font-weight: $font-weight__heading;
cursor: auto;
}
.esri-date-picker__day-item {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-bottom: $cell_border;
border-right: $cell_border;
cursor: pointer;
}
.esri-date-picker__day-item--header {
border-top: $cell_border;
}
.esri-date-picker__day-item:first-child {
border-left: $cell_border;
}
.esri-date-picker__day-item--nearby-month {
color: $interactive-font-color--disabled;
}
.esri-date-picker__day-item--today {
color: $button-color;
}
.esri-date-picker__day-item--active {
background: $border-color;
}
.esri-date-picker__month-picker {
font-weight: $font-weight__heading;
justify-content: space-between;
}
.esri-date-picker__year-picker-item {
color: $font-color;
padding: $section_margin;
margin: 0 4px;
cursor: pointer;
}
.esri-date-picker__day-item--selected,
.esri-date-picker__year-picker-item--selected {
color: $button-color--inverse;
background-color: $button-color;
cursor: auto;
}
.esri-date-picker__input {
position: relative;
display: flex;
align-items: center;
}
.esri-date-picker__text-input.esri-input {
margin: 0;
padding-left: $side-spacing--double;
border: none;
}
.esri-date-picker__icon--leading {
position: absolute;
left: $side-spacing--half;
}
[dir="rtl"] {
.esri-date-picker__calendar {
right: 0;
}
.esri-date-picker__date {
margin: 0 0 0 $cap-spacing--double;
}
.esri-date-picker__day-item:first-child {
border-left: none;
}
.esri-date-picker__day-item:last-child {
border-left: $cell_border;
}
.esri-date-picker__text-input.esri-input {
padding-left: unset;
padding-right: $side-spacing--double;
}
.esri-date-picker__icon--leading {
left: unset;
right: $side-spacing--half;
}
}
}
@if $include_DatePicker == true {
@include date-picker();
}

165
public/assets/esri/themes/base/widgets/_Daylight.scss Normal file
View file

@ -0,0 +1,165 @@
@use "sass:color";
@mixin daylight() {
@-webkit-keyframes pulse {
to {
box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
}
}
@-moz-keyframes pulse {
to {
box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
}
}
@-ms-keyframes pulse {
to {
box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
}
}
@keyframes pulse {
to {
box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
}
}
.esri-daylight {
padding: var(--esri-widget-padding);
width: 350px;
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-basis: auto;
justify-content: space-between;
gap: $cap-spacing;
&__anchor {
font-size: $font-size--small;
}
&__panel--error {
padding: 0 $side-spacing;
animation: esri-fade-in 250ms ease-in-out;
}
&__container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: $side-spacing;
}
.esri-date-picker,
&__season-picker {
flex-grow: 1;
}
.esri-date-picker__calendar-toggle {
height: 32px;
font-size: $font-size--small;
}
&__container,
&__season-picker {
&--disabled {
opacity: $opacity--disabled;
pointer-events: none;
}
}
&__play-pause-button {
flex: 0;
}
@include timeSlider();
.esri-slider.esri-slider--horizontal .esri-slider__thumb {
$thumb-size: 27px;
width: $thumb-size;
height: $thumb-size;
left: -$thumb-size * 0.5;
top: -$thumb-size * 0.5;
background-color: $button-color;
border: 7px solid #0079c14d;
background-clip: padding-box;
background-position: 0 0 !important;
&:hover,
&:active,
&:focus {
background-color: $button-color--hover;
}
}
.esri-slider.esri-slider--horizontal {
z-index: 1;
.esri-slider-with-dropdown__box {
display: flex;
align-items: center;
font-size: $font-size--tiny-time-slider;
min-width: inherit;
white-space: nowrap;
margin: 0;
margin-top: -$cap-spacing--three-quarters;
gap: $cap-spacing--eighth;
z-index: 1;
will-change: left;
text-align: center;
.esri-slider__label {
display: inline-block;
position: static;
inset-inline-start: auto;
margin: 0;
min-width: auto;
outline: none;
list-style: none;
line-height: 1em;
font-variant-numeric: tabular-nums;
}
.esri-slider__tick-label {
line-height: 1em;
}
.esri-slider__label-input {
display: inline-block;
}
}
.esri-slider-with-dropdown__box--drop-down-on,
.esri-slider-with-dropdown__box--drop-down-off {
width: min-content;
}
}
.esri-slider--ampm-on .esri-slider.esri-slider--horizontal {
padding: 30px 8px 42px 8px;
~ .esri-daylight__play-pause-button {
margin-bottom: 10px; // Align vertically with the slider
}
}
.esri-slider--shadow-on .esri-slider__thumb {
box-shadow: 2px 2px 5px 0px rgba(148, 148, 148, 0.63);
}
.esri-slider.esri-slider--horizontal .esri-widget__anchor.esri-slider-with-dropdown__anchor {
font-size: $font-size--tiny-time-slider;
color: $interactive-font-color;
&:hover {
color: $interactive-font-color--hover;
}
}
calcite-label {
--calcite-label-margin-bottom: 0;
}
}
}
@if $include_Daylight == true {
@include daylight();
}

7
public/assets/esri/themes/base/widgets/_DirectLineMeasurement3D.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin directLineMeasurement3D() {
@include measurementWidgetStyles("esri-direct-line-measurement-3d");
}
@if $include_DirectLineMeasurement3D == true {
@include directLineMeasurement3D();
}

478
public/assets/esri/themes/base/widgets/_Directions.scss Normal file
View file

@ -0,0 +1,478 @@
@mixin directions() {
$border_size: 2px;
$directions-height--max: 420px !default;
.esri-directions {
color: $font-color;
}
.esri-directions__panel-content {
padding: $cap-spacing 0;
}
.esri-directions__sign-in-panel {
color: $interactive-font-color;
display: flex;
justify-content: center;
}
.esri-directions__section {
margin-top: $cap-spacing;
margin-bottom: $cap-spacing;
}
.esri-directions__section-splitter {
width: 100%;
margin: $cap-spacing--plus-half 0;
border-top: 1px solid $border-color;
}
.esri-directions__travel-modes,
.esri-directions__departure-time {
margin: 0 $side-spacing $cap-spacing--half;
width: calc(100% - #{$side-spacing--double});
}
.esri-directions__panel-content--sign-in,
.esri-directions__panel-content--loading,
.esri-directions__panel-content--error {
min-height: $directions-height--max;
margin: 0 $cap-spacing;
color: $interactive-font-color;
display: flex;
align-items: center;
justify-content: center;
}
.esri-directions__loader {
height: 40px;
width: 32px;
background: url(../base/images/loading-throb.gif) no-repeat center;
}
.esri-directions__warning-card {
border-top: solid 2px $border-color--error;
color: $interactive-font-color;
@include defaultBoxShadow();
padding: 12px;
margin: 20px auto;
width: 90%;
}
.esri-directions__warning-header {
color: $font-color--error;
display: flex;
margin-bottom: 6px;
}
.esri-directions__warning-heading {
color: inherit;
margin: 0 4px;
}
.esri-directions__warning-message {
color: inherit;
font-weight: $font-weight;
}
.esri-directions__departure-time-controls {
display: flex;
width: 100%;
}
.esri-directions__departure-time-controls .esri-date-picker,
.esri-directions__departure-time-controls .esri-time-picker {
flex: 1 1 0%;
border: 1px solid $border-color--input;
border-top: 0;
}
.esri-directions__departure-time-controls .esri-widget:first-child {
border-right: 0;
}
.esri-directions__departure-time-controls .esri-time-picker {
padding: 0;
display: flex;
justify-content: center;
}
.esri-directions__departure-time-controls .esri-time-picker__input {
width: 100%;
padding: 0 0.5em;
margin: 0;
height: auto;
}
.esri-directions__departure-time-controls .esri-date-picker__calendar-toggle {
padding: 0 0.5em;
justify-content: flex-start;
}
.esri-directions__directions-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.esri-directions__sign-in-content {
align-self: flex-start;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.esri-directions__sign-in-button {
width: auto;
}
.esri-directions__content-title {
margin-top: 0;
padding: 0 $cap-spacing;
align-self: flex-start;
}
.esri-directions__summary {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.esri-directions__summary-controls {
display: flex;
align-items: center;
justify-content: flex-end;
}
.esri-directions__stops {
display: flex;
width: 100%;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.esri-directions__stop-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-top: dashed $border_size transparent;
background-color: $background-color;
}
.esri-directions__stop-row-ghost {
opacity: 0.25;
}
.esri-directions__stop-handle {
flex: 0 0 auto;
padding-inline-start: $side-spacing--half;
}
.esri-search__sources-button {
@include icomoonIconSelector() {
position: relative;
left: 1px;
}
}
.esri-directions__stop-input {
margin: 0 4px;
flex-grow: 0.8;
}
.esri-directions__stop-input .esri-search .esri-search__input {
border: 1px solid $border-color--input;
height: auto;
margin-bottom: $border_size;
outline-offset: 4px;
min-height: $button-height;
}
.esri-directions__remove-stop-icon,
.esri-directions__stop-row:hover .esri-directions__remove-stop-icon[hidden] {
visibility: hidden;
}
.esri-directions__remove-stop:focus .esri-directions__remove-stop-icon,
.esri-directions__stop-row:hover .esri-directions__remove-stop-icon {
visibility: visible;
}
.esri-directions__reverse-stops[hidden] {
display: inherit;
visibility: hidden;
}
.esri-directions__stop-options {
display: flex;
flex-grow: 0.1;
justify-content: space-between;
padding-right: $side-spacing--half;
}
.esri-directions__stop-row:first-child {
margin-top: 0;
}
.esri-directions__stop-row:last-child {
margin-bottom: 0;
}
.esri-directions__stop-icon[hidden] {
display: inline-block;
visibility: hidden;
}
.esri-directions__stop-icon--interactive {
cursor: pointer;
}
.esri-directions__stop-icon-container {
display: inline-block;
position: relative;
}
.esri-directions__stop-icon-container--last::after {
border: none;
}
.esri-directions__costs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 100%;
cursor: pointer;
padding: $cap-spacing $side-spacing 0;
}
.esri-directions__costs-details {
display: flex;
justify-content: space-around;
white-space: nowrap;
width: 80%;
margin-bottom: 6px;
}
.esri-directions__costs-units {
display: flex;
justify-content: space-around;
}
.esri-directions__costs-value,
.esri-directions__other-costs-total,
.esri-directions__vertical-splitter {
color: $interactive-font-color;
font-size: 1.5em;
line-height: 1.5;
}
.esri-directions__vertical-splitter {
border: 1px solid transparentize($font-color, 0.8);
}
.esri-directions__horizontal-splitter {
border-top: 1px solid $border-color;
flex-grow: 0.95;
}
.esri-directions__maneuvers {
display: flex;
flex-direction: column;
width: 100%;
margin: $cap-spacing--plus-half 0 0 0;
padding: 0;
border-top: 1px solid $border-color;
}
.esri-directions__maneuver-list {
padding: 0;
margin: 0;
}
.esri-directions__maneuver {
display: flex;
padding: $cap-spacing $side-spacing--half;
border: none;
border-inline-start: $border-size--active solid transparent;
cursor: pointer;
}
.esri-directions__maneuver:hover,
.esri-directions__maneuver:focus {
background-color: $background-color--hover;
}
.esri-directions__maneuver--active,
.esri-directions__maneuver--active:hover,
.esri-directions__maneuver--active:focus {
border-color: $border-color--active;
background-color: $background-color--active;
}
.esri-directions__maneuver-section--collapsible {
border-bottom: 1px solid $border-color;
&:last-child {
border-bottom: none;
}
.esri-directions__maneuver-list {
background-color: $background-color--offset;
padding-bottom: $cap-spacing;
padding-top: $cap-spacing;
}
}
.esri-directions__maneuver-section-header {
display: flex;
padding: 0 $side-spacing--half;
}
.esri-directions__maneuver-section-header-toggle-button {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: $cap-spacing $side-spacing--half;
.esri-directions__maneuver-section-title {
padding: 0;
}
}
.esri-directions__maneuver-section-title {
padding: $cap-spacing $side-spacing--half;
margin: 0;
}
.esri-directions__maneuver-section-toggle {
cursor: pointer;
}
.esri-directions__maneuver-icon {
fill: $font-color;
margin-right: 4px;
width: 24px;
height: 24px;
}
.esri-directions__maneuver-costs {
margin-top: $cap-spacing--half;
display: flex;
justify-content: space-between;
align-items: center;
white-space: nowrap;
}
.esri-directions__cost--intermediate {
font-size: $font-size--small;
}
.esri-directions__maneuver-costs-container {
width: 100%;
}
.esri-directions__scroller {
overflow-y: auto;
}
.esri-directions__stop-row--valid {
.esri-directions__stop-handle:hover {
cursor: move;
}
}
// search overrides
.esri-directions .esri-search {
box-shadow: none;
width: auto;
.esri-search__submit-button {
display: none;
}
}
.esri-directions .esri-search .esri-search__container:before {
display: none;
}
.esri-directions .esri-search .esri-search__container:after {
top: auto;
bottom: -2px;
}
.esri-ui-bottom-left,
.esri-ui-bottom-right {
.esri-directions {
.esri-search {
.esri-search__sources-button--up {
display: none;
}
.esri-search__sources-button--down {
display: flex;
}
}
}
}
.esri-ui-bottom-right,
.esri-ui-bottom-left {
.esri-directions .esri-menu {
top: 100%;
bottom: auto;
margin: $cap-spacing--eighth 0 0 0;
}
}
[dir="rtl"] {
.esri-directions__departure-time-controls .esri-time-picker {
border-right: none;
}
.esri-directions__departure-time-controls .esri-date-picker__calendar-toggle {
border-right: solid 1px $border-color;
}
}
.esri-directions {
&__save-section,
&__toolbar-section {
align-items: center;
display: flex;
flex-direction: column;
margin-top: 12px;
padding-inline: 15px;
width: 100%;
}
&__save-buttons,
&__toolbar-buttons {
display: flex;
flex-direction: row;
margin-bottom: 6px;
width: 100%;
}
&__save-button,
&__save-as-button,
&__add-stop-button {
margin-inline-end: 5px;
}
&__save-as-button-with-popover {
width: 100%;
}
}
.esri-directions__message_heading {
padding: 12px 7px;
margin: 0;
text-align: center;
}
}
@if $include_Directions == true {
@include directions();
}

7
public/assets/esri/themes/base/widgets/_DistanceMeasurement2D.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin distanceMeasurement2D() {
@include measurementWidgetStyles("esri-distance-measurement-2d");
}
@if $include_DistanceMeasurement2D == true {
@include distanceMeasurement2D();
}

256
public/assets/esri/themes/base/widgets/_Editor.scss Normal file
View file

@ -0,0 +1,256 @@
@mixin esri-editor__prompt($contextColor) {
background-color: var(--calcite-ui-background);
border-top: solid 3px $contextColor;
color: $font-color;
@include defaultBoxShadow();
padding: $cap-spacing $side-spacing;
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 85%;
display: flex;
flex-flow: column nowrap;
animation: esri-fade-in-up 250ms ease-in-out;
.esri-editor__prompt__header {
color: $contextColor;
display: flex;
margin-bottom: $cap-spacing;
flex: 0 0 auto;
align-items: center;
gap: $side-spacing--half;
&__heading {
color: $heading-color;
margin: 0 $side-spacing--quarter;
}
}
.esri-editor__prompt__message {
color: inherit;
font-weight: $font-weight;
word-break: break-word;
flex: 1 1 auto;
overflow: auto;
overflow-x: hidden;
padding: 0 0 $cap-spacing 0;
}
.esri-editor__prompt__divider {
color: inherit;
margin: 0 0 $cap-spacing 0;
border-bottom: $border;
border-color: $border-color--subtle;
flex: 0 0 auto;
}
.esri-editor__prompt__actions {
display: flex;
flex-direction: row;
}
}
@mixin editor() {
$headerOrFooterHeight: 56px;
$border: 1px solid $border-color;
$panel-background-color: var(--calcite-ui-background);
.esri-editor {
background-color: $panel-background-color;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
.esri-item-list {
background-color: transparent;
}
.esri-item-list__group {
margin-left: 0;
margin-right: 0;
&:first-of-type {
margin-top: 0;
}
}
.esri-item-list__filter-container,
.esri-item-list__filter-container--sticky {
background-color: var(--calcite-ui-background);
margin-bottom: 10px;
padding: 10px 0;
}
.esri-feature-form {
width: 100%;
padding: 0;
.esri-feature-form__label:last-child {
margin-bottom: 12px;
}
}
$template-item-content-end-margin: 0.75rem; // Matches default spacing used by Calcite
&__template-item-content-end {
display: block;
margin-inline: $template-item-content-end-margin;
&--success {
--calcite-ui-icon-color: var(--calcite-ui-success);
}
&--error {
--calcite-ui-icon-color: var(--calcite-ui-danger);
}
}
&__template-item-loader {
margin-inline: $template-item-content-end-margin;
color: $border-color--active;
}
}
.esri-editor__content {
justify-content: center;
align-items: flex-start;
flex: 1 1 auto;
min-height: 20vh;
display: flex;
flex-direction: row;
animation: esri-fade-in 250ms ease-in-out;
transition: min-height 250ms ease-in-out;
&:empty {
min-height: 0;
}
}
.esri-editor__content-group {
display: flex;
flex-direction: column;
flex: 1 0 100%;
}
.esri-editor__scroller {
overflow-y: auto;
padding-top: $cap-spacing--half;
padding-bottom: $cap-spacing;
}
.esri-expand__content {
.esri-editor {
.esri-feature-form {
max-height: fit-content;
overflow-y: visible;
}
}
}
.esri-editor__actions {
display: flex;
width: 100%;
row-gap: $cap-spacing--half;
calcite-button {
flex-grow: 1;
}
}
.esri-editor__help-message {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
padding-inline: calc(#{$side-spacing} - 0.5rem); // Align with the editor content
}
.esri-editor__prompt--info {
@include esri-editor__prompt(var(--calcite-ui-info));
}
.esri-editor__prompt--warning {
@include esri-editor__prompt(var(--calcite-ui-warning));
}
.esri-editor__prompt--danger {
@include esri-editor__prompt(var(--calcite-ui-danger));
}
.esri-editor__overlay {
position: absolute;
overflow: hidden;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: $background-color--overlay;
}
.esri-editor__panel-toolbar {
--divider-border: 1px solid var(--calcite-ui-border-2);
background-color: var(--calcite-ui-foreground-1);
border-bottom: var(--divider-border);
display: flex;
flex-direction: row;
}
.esri-editor__panel-content {
position: relative;
height: auto;
min-height: 20vh;
display: flex;
flex-direction: column;
padding-top: 0;
padding-bottom: 0;
&__section {
padding: $cap-spacing $side-spacing;
position: relative;
&__group {
display: flex;
flex-direction: column;
flex: 1 0 100%;
}
}
&__message {
display: flex;
flex-basis: 100%;
flex-grow: 1;
justify-content: center;
align-items: center;
font-size: var(--calcite-font-size-0);
padding: 0 15px;
text-align: center;
}
}
.esri-editor__panel-content__scrim-container {
overflow: hidden;
}
.esri-editor__settings {
width: 100%;
border: 0;
}
.esri-editor__feature-templates-container {
.esri-feature-templates {
width: 100%;
}
}
.esri-editor__notice {
margin-bottom: $cap-spacing;
}
}
@if $include_Editor == true {
@include editor();
}

439
public/assets/esri/themes/base/widgets/_ElevationProfile.scss Normal file
View file

@ -0,0 +1,439 @@
@mixin elevationProfile() {
$width: 550px;
$chart-height: 180px;
$header-height: 30px;
$header-icon-height: 16px;
$header-button-width: 34px;
$loading-spinner-size: 30px;
$loading-spinner-size-small: $header-icon-height;
$actions-spacing-h: $side-spacing--half;
$actions-spacing-v: $cap-spacing--half;
$statistics-font-size: $font-size--tiny;
$statistics-slope-values-spacing: $side-spacing--half;
$popover-padding: $cap-spacing $side-spacing;
$popover-border: 1px solid $border-color;
$popover-background-color: $background-color;
$legend-font-size: $font-size--small;
$legend-label-spacing: $side-spacing--plus-half;
$checkbox-size: 14px;
$checkbox-border-size: 1px;
$checkbox-icon-size: 10px;
$color-indicator-width: 8px;
$color-indicator-height: 8px;
$color-indicator-spacing: $side-spacing--half;
//----------------------------------------------------------------------------
// Checkbox
//----------------------------------------------------------------------------
.esri-elevation-profile,
.esri-elevation-profile-settings__popover-content {
input[type="checkbox"] {
font-size: $checkbox-icon-size;
line-height: $checkbox-icon-size;
display: inline-block;
width: $checkbox-size;
height: $checkbox-size;
margin: 0;
margin-inline-end: $side-spacing--half;
padding: ($checkbox-size - $checkbox-icon-size - $checkbox-border-size * 2) * 0.5;
transition: all 0.1s ease-in-out;
border: solid 1px $border-color;
background: none;
flex-shrink: 0;
appearance: none;
&:before {
// Copied from esri/themes/base/icons/style.scss
font-family: "#{$icomoon-font-family}" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $interactive-font-color--inverse;
}
&:checked {
background: $border-color--active;
border-color: $border-color--active;
&:before {
@extend .esri-icon-check-mark;
color: $interactive-font-color--inverse;
}
}
// Only change the cursor when the checkbox is not disabled
&:not(:disabled) {
cursor: pointer;
}
&:focus:not(:focus-visible) {
outline: none;
}
}
}
//----------------------------------------------------------------------------
// Widget
//----------------------------------------------------------------------------
.esri-elevation-profile {
position: relative;
padding: var(--esri-widget-padding);
isolation: isolate;
&.esri-component.esri-widget--panel {
width: $width;
max-width: 100%; // Don't overflow parent container, especially on mobile
}
&__header {
display: flex;
flex-direction: row;
height: $header-height;
align-items: center;
justify-content: flex-end;
button {
@extend .esri-button;
@extend .esri-button--tertiary;
width: $header-button-width;
flex-shrink: 0;
flex-grow: 0;
z-index: 1; // Above chart.
&:focus:not(:focus-visible) {
outline: none;
border: none;
}
}
}
&__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
margin-top: $cap-spacing;
}
&__action-button {
width: auto;
margin-inline-start: $actions-spacing-h;
&:focus:not(:focus-visible) {
outline: none;
border: none;
}
}
&__main-container {
position: relative;
width: 100%;
height: $chart-height;
}
&__chart-container {
position: relative;
width: 100%;
height: 100%;
// Fix for situations where apps (cough cough... SV) set `pointer-events: all`
// breaking the tooltips and zooming in the chart.
.amcharts-ValueAxis-group,
.amcharts-axis-tooltip,
.amcharts-Tooltip-group,
.amcharts-series-tooltip {
&,
* {
pointer-events: none !important;
}
}
}
&__prompt-container {
display: flex;
width: 100%;
height: 100%;
margin-bottom: 0;
padding: $cap-spacing $side-spacing;
padding-top: $cap-spacing--double + $cap-spacing;
text-align: center;
align-items: center;
justify-content: center;
> p {
margin: 0;
width: 100%;
}
}
&__chart-spinner {
font-size: $loading-spinner-size;
color: $border-color--active;
opacity: 0;
transition: opacity 150ms ease-in-out;
pointer-events: none;
// Position it in the middle of the container
position: absolute;
left: 50%;
top: 50%;
// center
margin-top: -$loading-spinner-size * 0.5;
margin-left: -$loading-spinner-size * 0.5;
// We show a spinner with a delay so that it is only visible if a preview
// takes too long to be generated.
&--visible {
transition-delay: 500ms;
opacity: 1;
}
&--small {
font-size: $loading-spinner-size-small;
top: -$loading-spinner-size-small - $header-icon-height * 0.5; // Align top of the chart with icon of header buttons;
left: 0;
margin-top: 0;
margin-left: 0;
}
}
// Portrait mode
// We have vertical space so we'll size the chart and let the widget scale vertically.
&--portrait,
&--portrait.esri-component.esri-widget--panel {
height: auto;
}
&--portrait &__footer {
flex-direction: column;
}
&--portrait &__action-button {
align-self: stretch;
margin-inline-start: 0;
&:not(:last-of-type) {
margin-bottom: $actions-spacing-v;
}
}
}
//----------------------------------------------------------------------------
// Settings
//----------------------------------------------------------------------------
.esri-elevation-profile-settings {
&__popover-content {
font-family: $font-family;
font-size: $font-size__body;
display: flex;
flex-direction: column;
padding: $popover-padding;
color: $font-color;
border: $popover-border;
background-color: $popover-background-color;
gap: $cap-spacing;
cursor: pointer;
}
&__select {
min-width: 150px; // Give some space for our labels to render properly
font-size: $font-size__body;
}
&__select-label {
display: block;
margin-bottom: $cap-spacing--eighth;
}
&__checkbox-label {
display: flex;
align-items: center;
white-space: nowrap;
}
}
//----------------------------------------------------------------------------
// Legend
//----------------------------------------------------------------------------
.esri-elevation-profile-legend {
margin-top: $cap-spacing--half;
}
//----------------------------------------------------------------------------
// Legend Item
//----------------------------------------------------------------------------
.esri-elevation-profile-legend-item {
position: relative;
background: $background-color--offset;
&:not(:last-of-type) {
margin-bottom: $cap-spacing--eighth;
}
&--disabled {
filter: grayscale(1);
opacity: $opacity--disabled;
}
&__color-indicator {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
}
&__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
&__content {
display: block;
padding: $cap-spacing $side-spacing;
padding-top: 0;
}
&__collapse-toggle {
width: auto;
color: $interactive-font-color;
flex-shrink: 0;
&:focus:not(:focus-visible) {
outline: none;
border: none;
}
}
&__collapse-toggle__icon {
margin: 0 $side-spacing--quarter;
transform: rotate(0);
transition: transform 0.1s ease-in-out;
}
&--expanded &__collapse-toggle__icon {
transform: rotate(180deg);
}
&__label {
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
flex-grow: 1;
min-width: 0; // allow the legend to shrink as much as needed.
padding-inline-start: $side-spacing;
// Only change the cursor when the checkbox is not disabled
&:not(&--disabled) {
cursor: pointer;
}
> span {
text-overflow: ellipsis;
overflow: hidden;
}
}
}
//----------------------------------------------------------------------------
// Statistics
//----------------------------------------------------------------------------
.esri-elevation-profile-statistics {
--max-width: 1px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--max-width), 1fr));
gap: $cap-spacing--eighth $side-spacing--plus-half;
width: 100%;
contain: layout paint style;
&__statistic {
display: block;
width: max-content;
white-space: nowrap;
text-align: start;
&__label {
font-size: $font-size--tiny;
font-weight: $font-weight--regular;
}
&__value {
font-size: $font-size--tiny;
font-weight: $font-weight--bold;
margin-top: -0.15em; // condense things slightly
}
}
&__slope-value {
> {
@include icomoonIconSelector() {
font-size: $statistics-font-size; // Keep the icon small.
&:not(:first-child) {
margin-inline-start: $statistics-slope-values-spacing;
}
}
}
}
}
.esri-elevation-profile--portrait {
.esri-elevation-profile-statistics {
gap: ($cap-spacing--eighth * 3) $side-spacing--plus-half;
margin-bottom: $cap-spacing;
}
.esri-elevation-profile-statistics__statistic__value {
margin-top: 2px;
}
}
//----------------------------------------------------------------------------
// RTL
//----------------------------------------------------------------------------
[dir="rtl"] {
.esri-elevation-profile-legend-item {
&__color-indicator {
left: auto;
right: 0;
}
}
.esri-elevation-profile {
&__chart-spinner--small {
left: auto;
right: 0;
}
}
}
}
@if $include_ElevationProfile == true {
@include elevationProfile();
}

264
public/assets/esri/themes/base/widgets/_Expand.scss Normal file
View file

@ -0,0 +1,264 @@
@mixin expand() {
.esri-expand {
overflow: visible;
min-height: $button-height;
min-width: $button-width;
}
.esri-expand__container {
position: relative;
transition: 300ms;
}
.esri-expand__content {
opacity: 0;
width: 0;
height: 0;
z-index: 1;
margin: 0 $side-spacing--quarter;
@include defaultBoxShadow();
transition: opacity 250ms ease-in-out, margin 250ms ease-in-out;
overflow: hidden;
visibility: hidden;
}
.esri-ui-top-left .esri-expand__content,
.esri-ui-bottom-left .esri-expand__content {
left: 100%;
}
.esri-ui-top-right .esri-expand__content,
.esri-ui-bottom-right .esri-expand__content {
right: 100%;
}
.esri-ui-top-left .esri-expand__content,
.esri-ui-top-right .esri-expand__content {
top: 0;
}
.esri-ui-bottom-left .esri-expand__content,
.esri-ui-bottom-right .esri-expand__content {
bottom: 0;
}
.esri-ui-top-left .esri-icon-expand,
.esri-ui-bottom-left .esri-icon-expand,
.esri-ui-top-left .esri-icon-collapse,
.esri-ui-bottom-left .esri-icon-collapse {
transform: rotate(180deg);
}
.esri-expand__content--expanded {
opacity: 1;
width: auto;
height: auto;
overflow: visible;
margin-left: $side-spacing--half;
margin-right: $side-spacing--half;
visibility: visible;
}
.esri-expand__content .esri-widget {
box-shadow: none;
}
.esri-expand__icon-number {
position: absolute;
top: $button-height--fifth * -1;
display: flex;
align-items: center;
justify-content: center;
font-size: $font-size--small;
line-height: 1em;
padding: 0.125em 0.333em;
height: $button-height--half;
border-radius: $button-height--half;
background-color: $interactive-font-color;
color: $background-color;
transform-origin: 50%;
animation: expand-number-intro-ani 1000ms ease-in-out;
}
.esri-ui-top-left .esri-expand__icon-number,
.esri-ui-bottom-left .esri-expand__icon-number {
right: $button-width--fifth * -1;
}
.esri-ui-top-right .esri-expand__icon-number,
.esri-ui-bottom-right .esri-expand__icon-number {
left: $button-width--fifth * -1;
}
.esri-ui-bottom-right .esri-expand__icon-number--expanded,
.esri-ui-top-right .esri-expand__icon-number--expanded,
.esri-ui-bottom-left .esri-expand__icon-number--expanded,
.esri-ui-top-left .esri-expand__icon-number--expanded {
position: static;
top: auto;
left: auto;
right: auto;
}
.esri-expand__icon-number--expanded {
display: none;
}
// Max heights
.esri-view-height-greater-than-medium {
.esri-ui-corner .esri-component .esri-expand__content {
max-height: $view-height--gt-medium__component-max-height;
}
}
.esri-view-height-medium {
.esri-ui-corner .esri-component .esri-expand__content {
max-height: $view-height--medium__component-max-height;
}
}
.esri-view-height-small {
.esri-ui-corner .esri-component .esri-expand__content {
max-height: $view-height--small__component-max-height;
}
}
.esri-view-height-xsmall {
.esri-ui-corner .esri-component .esri-expand__content {
max-height: $view-height--xsmall__component-max-height;
}
}
@include expandPanelOpen("esri-expand--drawer");
.esri-view-width-xsmall {
@include expandPanelOpen("esri-expand--auto");
}
@include expandPanelClosed("esri-expand--floating");
.esri-view-width-greater-than-xsmall {
@include expandPanelClosed("esri-expand--auto");
}
@keyframes expand-slide-rtl-ani {
from {
right: -600px;
}
to {
right: 0;
}
}
@keyframes expand-slide-ltr-ani {
from {
left: -600px;
}
to {
left: 0;
}
}
@keyframes expand-number-intro-ani {
0% {
transform: scale(1);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
}
@mixin expandPanelOpen($modeClass) {
.#{$modeClass} {
.esri-widget {
max-width: 100%;
width: 100%;
}
.esri-expand__container--expanded {
position: fixed;
top: 0;
bottom: 0;
margin: 0;
height: 100%;
background: $background-color;
z-index: 1;
overflow: auto;
.esri-expand__panel {
display: flex;
justify-content: space-between;
padding: 1.023rem;
align-items: center;
.esri-expand__icon-number--expanded {
display: block;
}
}
}
.esri-expand__mask--expanded {
background-color: #000;
position: fixed;
right: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
opacity: 0.8;
z-index: 1;
}
}
.esri-ui-top-right,
.esri-ui-bottom-right {
.#{$modeClass} {
.esri-expand__panel {
flex-flow: row nowrap;
}
.esri-expand__container--expanded {
width: 75%;
max-width: $panel-width;
animation: expand-slide-rtl-ani 300ms forwards;
}
}
}
.esri-ui-top-left,
.esri-ui-bottom-left {
#{$modeClass} {
.esri-expand__panel {
flex-flow: row-reverse nowrap;
}
.esri-expand__container--expanded {
width: 75%;
max-width: $panel-width;
animation: expand-slide-ltr-ani 300ms forwards;
}
}
}
}
@mixin expandPanelClosed($modeClass) {
.#{$modeClass} {
.esri-expand__content {
position: absolute;
}
.esri-expand__mask,
.esri-expand__content-panel {
display: none;
}
}
}
@if $include_Expand==true {
@include expand();
}

106
public/assets/esri/themes/base/widgets/_Feature.scss Normal file
View file

@ -0,0 +1,106 @@
@mixin feature() {
.esri-feature__title {
font-size: $font-size;
display: block;
word-break: break-word;
word-wrap: break-word;
}
.esri-feature calcite-icon {
box-sizing: content-box;
}
.esri-feature__attachments {
display: flex;
}
.esri-feature__loading-container {
width: 100%;
justify-content: center;
display: flex;
padding: $cap-spacing 0;
}
.esri-feature-relationship {
position: relative;
}
.esri-feature-relationship__list {
min-height: $list-item-height;
}
.esri-feature-relationship__list-item--hidden {
display: none;
}
.esri-feature__feature-observer {
position: relative;
z-index: 2;
bottom: 20px;
text-align: center;
}
.esri-feature__sticky-loading-container {
display: flex;
align-items: center;
justify-content: center;
height: $list-item-height;
padding: 0;
margin: 0;
pointer-events: none;
position: sticky;
bottom: 10px;
z-index: 2;
}
.esri-icon-loading-indicator {
display: inline-block;
}
.esri-feature {
width: 100%;
--calcite-ui-background: $background-color;
}
.esri-feature__content-element {
padding: 0 $side-spacing--half;
margin-bottom: $cap-spacing--double;
}
.esri-feature__content-element:last-child {
margin-bottom: $cap-spacing;
}
.esri-feature__content-node {
display: flex;
flex-direction: column;
}
.esri-feature__text {
line-height: 1.3;
}
// ATTACHMENTS
.esri-feature-attachments {
flex-flow: column wrap;
align-items: flex-start;
}
.esri-feature__last-edited-info {
font-size: $font-size--small;
padding-top: $cap-spacing--half;
}
// RTL
[dir="rtl"] {
.esri-feature__attachments-title {
margin: 0 0 0 auto;
}
.esri-feature__attachments--list .esri-feature__attachment-item-mask {
margin-right: 0;
margin-left: $side-spacing--half;
}
}
}
@if $include_Feature==true {
@include feature();
}

103
public/assets/esri/themes/base/widgets/_FeatureContent.scss Normal file
View file

@ -0,0 +1,103 @@
$content-height--loading: 150px !default;
@mixin featureContent() {
.esri-feature-content__loader-container {
height: $content-height--loading;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.esri-feature-content__loader {
height: 64px;
width: 100%;
background: url(../base/images/loading-throb.gif) no-repeat center center;
}
.esri-feature-content {
font-size: $font-size;
}
.esri-feature-content h1,
.esri-feature-content h2,
.esri-feature-content h3,
.esri-feature-content h4,
.esri-feature-content h5,
.esri-feature-content h6 {
color: $font-color;
margin: 0.5em 0 0.5em 0;
letter-spacing: 0;
font-weight: $font-weight__heading;
line-height: normal;
}
.esri-feature-content h1 {
font-size: 1.75em;
}
.esri-feature-content h2 {
font-size: 1.5em;
}
.esri-feature-content h3 {
font-size: 1.25em;
}
.esri-feature-content h4,
.esri-feature-content h5,
.esri-feature-content h6 {
font-size: 1em;
}
.esri-widget__heading.esri-feature-element-info__title {
color: $font-color;
font-size: $font-size__h1;
font-weight: $font-weight--regular;
margin-bottom: 0.2em;
margin-top: 0;
}
.esri-feature-element-info__description {
font-size: $font-size__body;
font-weight: $font-weight--regular;
margin-bottom: $cap-spacing--three-quarters;
}
.esri-feature-content p {
font-size: $font-size;
margin: 0 0 1.2em;
&:last-child {
margin-block-end: 0;
}
}
.esri-feature-content img {
max-width: 100%;
max-height: 100%;
image-orientation: from-image;
}
.esri-feature-content video {
max-width: 100%;
max-height: 100%;
}
.esri-feature-content figure {
padding: 0;
margin: 0;
}
.esri-feature-content figcaption {
font-size: $font-size--small;
font-style: italic;
padding: 0;
margin: 0.2em 0 0;
display: block;
}
.esri-feature-content ul,
.esri-feature-content ol {
margin-block: 1rem;
&:first-child {
margin-block-start: 0;
}
}
.esri-feature-content a {
color: $interactive-font-color;
&:hover,
&:focus {
color: $interactive-font-color--hover;
}
}
}
@if $include_FeatureContent == true {
@include featureContent();
}

255
public/assets/esri/themes/base/widgets/_FeatureForm.scss Normal file
View file

@ -0,0 +1,255 @@
@mixin featureForm() {
$group-border-width: 3px;
$panel-background-color: var(--calcite-ui-background);
.esri-feature-form {
background-color: $panel-background-color;
padding: var(--esri-widget-padding);
&__form {
display: flex;
flex-direction: column;
}
&__centered-button {
align-self: center;
}
&__description-text {
margin: $cap-spacing--quarter 0 0 0;
font-size: $font-size--small;
color: $interactive-font-color;
}
&__list-observer {
position: relative;
z-index: 2;
bottom: 20px;
text-align: center;
}
&__related-records {
&_header {
display: flex;
span {
flex-grow: 1;
}
}
&_list {
margin-bottom: $cap-spacing;
min-height: 40px;
}
}
}
.esri-feature-form__label {
@include wordbreak();
display: flex;
justify-content: space-between;
flex-direction: column;
margin-bottom: $cap-spacing;
position: relative;
opacity: 1;
transition: opacity 250ms, margin 250ms;
&:last-child {
margin-bottom: 0;
}
}
.esri-feature-form__relationship-label {
calcite-notice {
margin-bottom: $cap-spacing;
}
}
.esri-feature-form__form-header {
margin-bottom: $cap-spacing;
.esri-feature-form__description-text ~ .esri-widget__heading {
margin-bottom: 0;
}
.esri-feature-form__description-text {
margin-top: 0;
}
}
.esri-feature-form__input-wrapper {
position: relative;
order: 3;
display: inline-flex;
flex: 1 1 0%;
align-items: center;
}
.esri-feature-form__input-loader {
inset-block-start: 5px;
inset-inline: 1px;
pointer-events: none;
position: absolute;
display: block;
}
.esri-feature-form__input {
margin-top: $cap-spacing--third;
width: 100%;
&:focus {
outline: 2px solid var(--calcite-ui-brand);
outline-offset: -2px;
}
}
textarea.esri-feature-form__input {
resize: vertical;
}
.esri-feature-form__input--date,
.esri-feature-form__input--time {
resize: none;
}
.esri-feature-form__input--disabled {
background-color: var(--calcite-ui-background);
font-weight: var(--calcite-font-weight-medium);
}
.esri-feature-form__input--invalid {
border: 1px solid $border-color--error;
}
.esri-feature-form__input-icon--invalid {
position: absolute;
top: 28px;
inset-inline-end: 4px;
color: $font-color--error;
background-color: $panel-background-color;
}
.esri-feature-form__input:focus + .esri-feature-form__input-icon--invalid {
display: none;
}
.esri-feature-form__field-error-message {
padding: $side-spacing--half 0;
font-size: $font-size--small;
}
.esri-feature-form__date-input-container {
display: flex;
flex-direction: column;
.esri-feature-form__input {
border: none;
}
}
.esri-feature-form__input--radio-group {
display: flex;
flex-direction: column;
}
.esri-feature-form__input--radio-label {
display: flex;
align-items: center;
}
.esri-feature-form__input--radio {
margin: $side-spacing--half;
}
.esri-feature-form__input--switch {
margin: $side-spacing--half 0;
}
.esri-feature-form__group-description {
margin: $cap-spacing--half 0 $cap-spacing--third 0;
}
.esri-feature-form__group {
border: none;
border-bottom: 1px solid $border-color;
padding: 0 0 $cap-spacing 0;
margin: 0 0 $cap-spacing 0;
min-inline-size: unset;
transition: border-color 250ms;
&-label {
margin-bottom: 0;
}
&-header {
align-items: center;
display: flex;
cursor: pointer;
justify-content: space-between;
margin: 0 0 $cap-spacing--half 0;
padding: $cap-spacing--half 0;
// button reset
border: none;
background-color: inherit;
font-family: inherit;
text-align: unset;
width: 100%;
}
&-title {
flex: 0 1 auto;
}
&-toggle-icon {
justify-self: flex-end;
flex: 0 0 16px;
margin: 0 $side-spacing--half;
}
&:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
.esri-feature-form__group--sequential {
border-bottom: none;
border-inline-start: $group-border-width solid $border-color;
padding-bottom: 0;
padding-inline-start: $cap-spacing--half;
padding-inline-end: $cap-spacing--half;
.esri-feature-form__group-header {
padding-top: 0;
}
&:not(.esri-feature-form__group--collapsed) {
.esri-feature-form__group-header {
cursor: auto;
}
}
}
.esri-feature-form__group--active {
border-inline-start-color: $border-color--active;
}
.esri-feature-form__group--collapsed {
.esri-feature-form__group-header {
margin-bottom: 0;
}
.esri-feature-form__label {
pointer-events: none;
opacity: 0;
height: 0;
margin: 0;
transition: none;
}
}
[dir="rtl"] {
.esri-feature-form__date-input-part {
&:first-child .esri-feature-form__input {
border-right: 1px solid $border-color;
border-left: none;
}
}
}
}
@if $include_FeatureForm == true {
@include featureForm();
}

101
public/assets/esri/themes/base/widgets/_FeatureMedia.scss Normal file
View file

@ -0,0 +1,101 @@
@mixin featureMedia() {
.esri-feature-media__container {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.esri-feature-media__item-title {
font-size: $font-size__h2;
margin: 0;
}
.esri-feature-media__item-caption {
font-size: $font-size__body;
padding-block-start: $cap-spacing--quarter;
}
.esri-feature-media__container {
width: 100%;
min-height: 150px;
margin-top: $cap-spacing--half;
}
.esri-feature-media__container .esri-feature-media__pagination-button {
justify-content: center;
align-items: center;
background: transparent;
border: none;
color: $interactive-font-color;
cursor: pointer;
display: flex;
padding-inline: $side-spacing--half;
padding-block: $cap-spacing--half;
&:hover,
&:focus {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
fill: $interactive-font-color--hover;
}
}
.esri-feature-media__item {
width: 100%;
height: auto;
display: flex;
align-items: flex-start;
justify-content: center;
margin-block: $cap-spacing--half;
}
.esri-feature-media__item-navigation {
display: flex;
align-items: flex-start;
flex: 0 1 100%;
justify-content: space-between;
margin-block-end: $cap-spacing--half;
}
.esri-feature-media__item-text {
margin-inline-end: $side-spacing--half;
}
.esri-feature-media__pagination {
align-items: center;
display: flex;
flex: 0 0 auto;
overflow: hidden;
&:only-child {
margin-inline-start: auto;
}
}
.esri-feature-media__pagination-text {
font-size: $font-size--small;
color: $interactive-font-color;
padding-inline: $side-spacing--quarter;
}
.esri-feature-media__item-container {
flex: 0 1 auto;
width: 100%;
img {
max-width: 100%;
}
img[src$=".SVG"],
img[src$=".svg"] {
width: 100%;
}
}
.esri-feature-media__chart {
background-color: $background-color;
// Dimensions on containing div are required
// for Chart library to know how big to make the chart.
width: 100%;
height: 155px;
}
// RTL
[dir="rtl"] {
.esri-feature-media__image-summary {
margin: 0 0.5em 0 0;
}
.esri-feature-media__pagination-icon {
transform: rotate(180deg);
}
}
}
@if $include_FeatureMedia == true {
@include featureMedia();
}

272
public/assets/esri/themes/base/widgets/_FeatureTable.scss Normal file
View file

@ -0,0 +1,272 @@
$base-scrim-z-index: 50;
@mixin esri-feature-table__prompt($contextColor) {
animation: esri-fade-in-up 250ms ease-in-out;
background-color: var(--calcite-ui-background);
border: solid 3px $contextColor;
color: $font-color;
@include defaultBoxShadow();
display: flex;
flex-flow: column nowrap;
max-height: 85%;
padding: $cap-spacing $side-spacing;
.esri-feature-table__prompt__header {
color: $contextColor;
display: flex;
flex: 0 0 auto;
margin-bottom: $cap-spacing;
&__heading {
color: $heading-color;
margin: 0 $side-spacing--quarter;
}
}
.esri-feature-table__prompt__message {
color: inherit;
font-weight: $font-weight;
flex: 1 1 auto;
overflow: auto;
overflow-x: hidden;
padding: 0 0 $cap-spacing 0;
word-break: break-word;
}
.esri-feature-table__prompt__divider {
border-bottom: $border;
border-color: $border-color--subtle;
color: inherit;
flex: 0 0 auto;
margin: 0 0 $cap-spacing 0;
}
.esri-feature-table__prompt__actions {
display: flex;
flex-direction: row;
}
}
@mixin featureTable() {
.esri-feature-table {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.esri-feature-table__content {
flex: 1 1 0;
flex-grow: 1;
min-height: 0;
margin: 0;
padding: 0;
}
.esri-grid--no-column-menu {
.esri-column__menu-container {
display: none;
}
}
.esri-grid__grid {
height: 100%;
width: 100%;
.esri-column__menu-container.esri-button-menu {
height: 28px;
width: 28px;
position: inherit;
.esri-button-menu__button {
height: 26px;
width: 16px;
}
}
}
.esri-grid,
.esri-feature-table__menu,
.esri-column__menu-container,
.esri-button-menu,
.esri-button-menu__button {
background-color: transparent;
}
vaadin-grid {
font-family: $font-family;
font-size: $font-size;
background-color: inherit;
color: inherit;
::part(body-cell) {
background-color: transparent;
font-size: $font-size;
}
::part(row):hover {
background-color: var(--lumo-row-background-hover);
}
}
}
.esri-feature-table__menu {
height: 40px;
order: 3;
padding: 4px;
width: 40px;
.esri-button-menu {
bottom: auto;
position: relative;
}
}
.esri-feature-table__header {
display: flex;
flex-direction: row;
font-weight: $font-weight;
height: 40px;
line-height: 40px;
margin: 0;
width: 100%;
}
.esri-feature-table__title {
flex-grow: 1;
order: 2;
}
.esri-feature-table__loader-container {
height: 40px;
margin: 0 8px;
order: 1;
width: 32px;
}
.esri-feature-table__loader {
height: 40px;
width: 32px;
background: url(../base/images/loading-throb.gif) no-repeat center;
}
.esri-field-column__header-label {
align-items: center;
display: flex;
flex-grow: 1;
margin: 0 5px;
min-height: 28px;
overflow: auto;
}
.esri-field-column__header-content {
align-items: center;
display: flex;
font-weight: $font-weight;
flex-grow: 1;
overflow: visible;
}
.esri-field-column__cell-content {
font-size: 0.9em;
}
.esri-field-column__cell__date-input-container {
display: flex;
height: 100%;
width: 100%;
.esri-field-column__cell__date-input-wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.esri-date-picker {
flex: 1 1 0;
.esri-date-picker__text-input.esri-input {
width: 100%;
}
.esri-date-picker__calendar-toggle {
height: 26px;
}
}
.esri-time-picker {
display: inline-flex;
flex: 1 1 0;
input {
width: 100%;
}
}
}
.esri-field-column__button {
align-items: center;
background-color: transparent;
border: none;
color: $button-color;
display: flex;
font-size: $icon-size;
height: auto;
justify-content: center;
text-align: center;
transition: background-color 125ms ease-in-out;
width: 26px;
&:disabled {
cursor: default;
color: $interactive-font-color--disabled;
}
&:hover,
&:focus {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
cursor: pointer;
}
}
.esri-field-column__cell__input-container {
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
.esri-field-column__cell-input {
height: 100%;
width: 100%;
border: none;
padding: 0 5px;
flex: 1 1 0;
}
.esri-feature-table__prompt--info {
@include esri-feature-table__prompt(var(--calcite-ui-info));
}
.esri-feature-table__prompt--warning {
@include esri-feature-table__prompt(var(--calcite-ui-warning));
}
.esri-feature-table__prompt--danger {
@include esri-feature-table__prompt(var(--calcite-ui-danger));
}
[dir="rtl"] {
.esri-feature-table__menu-content {
left: 2px;
right: auto;
}
}
}
@if $include_FeatureTable == true {
@include featureTable();
}

44
public/assets/esri/themes/base/widgets/_FeatureTemplates.scss Normal file
View file

@ -0,0 +1,44 @@
@mixin featureTemplates() {
$icon_size: 48px;
$border: 1px solid $border-color;
.esri-feature-templates {
background: var(--calcite-ui-background);
}
.esri-feature-templates__list-item-icon {
flex: 0;
width: $icon_size;
min-width: $icon_size;
display: flex;
align-items: center;
justify-content: center;
}
.esri-feature-templates__list-item-icon > div {
// TemplateItem thumbnail uses plain div as wrapper
display: flex;
}
.esri-feature-templates__loader {
margin: 0 auto;
height: $icon_size;
width: 32px;
background: url(../base/images/loading-throb.gif) no-repeat center;
}
.esri-ui {
& .esri-feature-templates {
width: $panel-width;
}
// If FeatureTemplates is used _inside_ another widget, then .esri-feature-templates should fit inside it
& .esri-widget .esri-feature-templates {
width: 100%;
}
}
}
@if $include_FeatureTemplates == true {
@include featureTemplates();
}

55
public/assets/esri/themes/base/widgets/_Features.scss Normal file
View file

@ -0,0 +1,55 @@
@mixin features() {
.esri-features {
display: flex;
calcite-pagination {
flex: 1;
align-self: center;
}
calcite-flow {
position: relative;
z-index: 1;
}
}
.esri-features__container {
padding: $cap-spacing;
background-color: var(--calcite-ui-background);
}
.esri-features .esri-feature,
.esri-features .esri-feature-relationship {
background-color: transparent;
}
.esri-features__footer {
display: flex;
background-color: var(--calcite-ui-foreground-1);
justify-content: flex-end;
flex: 1;
calcite-action-group {
border-inline-start: 1px solid var(--calcite-ui-border-3);
}
}
.esri-features__content-feature {
--calcite-flow-item-footer-padding: 0;
}
.esri-features__feature-menu-observer {
position: relative;
z-index: 2;
bottom: 20px;
text-align: center;
}
.esri-features__action--exit {
transform: scaleX(-1);
}
}
@if $include_Features==true {
@include features();
}

486
public/assets/esri/themes/base/widgets/_FloorFilter.scss Normal file
View file

@ -0,0 +1,486 @@
$floor-filter-item-width--normal: 220px;
$floor-filter-item-width--compact: floor($floor-filter-item-width--normal * 3 * 0.25);
$floor-filter-scrollbar-thumb--color: #c1c1c1;
$floor-filter-scrollbar-track--color: #fafafa;
@mixin floorFilter() {
.esri-floor-filter {
display: flex;
flex-direction: row;
background: transparent;
border: none;
box-shadow: none !important;
&__position {
&--top {
align-items: flex-start;
.esri-floor-filter__levels-container,
.esri-floor-filter__close-levels-button,
.esri-floor-filter__zoom-button,
.esri-floor-filter__zoom-button--levels,
.esri-floor-filter__minimize-toggle-button {
border-width: 1px 0 0 0;
}
}
&--bottom {
align-items: flex-end;
.esri-floor-filter__levels-container,
.esri-floor-filter__close-levels-button,
.esri-floor-filter__zoom-button,
.esri-floor-filter__zoom-button--levels,
.esri-floor-filter__minimize-toggle-button {
border-width: 0 0 1px 0;
}
}
}
&__layout {
&--collapsed {
.esri-floor-filter__button-container {
display: flex;
flex-direction: column;
max-width: $button-width--plus-half;
.esri-icon {
position: relative;
top: 2px;
}
.esri-floor-filter__browse-button {
width: $button-width--plus-half;
height: $button-height--plus-half;
padding: 12px;
border: none;
}
.esri-floor-filter__zoom-button {
width: $button-width--plus-half;
height: $button-height--plus-half;
padding: 12px;
border-style: solid;
border-color: $border-color;
}
.esri-floor-filter__zoom-button--levels {
width: $button-width--plus-half;
height: $button-height;
padding: 8px 12px 8px 12px;
border-style: solid;
border-color: $border-color;
}
.esri-floor-filter__minimize-toggle-button {
width: $button-width--plus-half;
height: $button-height;
padding: 4px 12px 4px 12px;
border-style: solid;
border-color: $border-color;
}
}
}
&--expanded {
.esri-floor-filter__button-container {
display: flex;
flex-direction: column;
max-width: $panel-width;
.esri-icon {
position: relative;
top: 2px;
}
.esri-floor-filter__button-info {
margin-right: auto;
}
.esri-floor-filter__browse-button {
width: auto;
height: $button-height--plus-half;
padding: 12px;
border: none;
}
.esri-floor-filter__level-button {
text-align: left;
justify-content: flex-start;
padding: 16px;
}
.esri-floor-filter__zoom-button {
width: auto;
height: $button-height--plus-half;
padding: 12px;
border-style: solid;
border-color: $border-color;
}
.esri-floor-filter__zoom-button--levels {
width: auto;
height: $button-height;
padding: 8px 12px 8px 12px;
border-style: solid;
border-color: $border-color;
}
.esri-floor-filter__minimize-toggle-button {
width: auto;
height: $button-height;
padding: 4px 12px 4px 12px;
border-style: solid;
border-color: $border-color;
}
.esri-floor-filter__button-label {
margin-left: 8px;
}
}
}
}
.esri-floor-filter__level-button {
width: 100%;
border: none;
font-family: $font-family;
height: $button-height--plus-half;
}
.esri-floor-filter__level-button:focus {
background-color: $background-color--hover;
}
.esri-floor-filter__level-button.esri-widget--button-active:focus {
background-color: $background-color--active;
}
.esri-floor-filter__levels-container {
list-style-type: none;
overflow: auto;
max-height: $panel-max-height--small;
margin: unset;
padding: unset;
width: 100%;
border-style: solid;
border-color: $border-color;
scrollbar-width: thin;
.esri-widget--button-active {
font-weight: $font-weight--bold;
}
}
.esri-floor-filter__levels-container::-webkit-scrollbar {
width: 6px;
}
.esri-floor-filter__levels-container::-webkit-scrollbar-track {
background: $floor-filter-scrollbar-track--color;
}
.esri-floor-filter__levels-container::-webkit-scrollbar-thumb {
background-color: $floor-filter-scrollbar-thumb--color;
border-radius: 20px;
border: 3px solid $floor-filter-scrollbar-thumb--color;
}
.esri-widget--button-active {
background: $background-color--active;
color: $button-color--active;
}
.esri-floor-filter__button-container {
@include defaultBoxShadow();
}
.esri-floor-filter__filter-menu {
width: $panel-width;
max-height: $panel-max-height--small;
background: $background-color;
display: flex;
flex-direction: column;
align-items: stretch;
@include defaultBoxShadow();
.esri-floor-filter__filter-menu-header {
align-items: stretch;
display: flex;
flex-direction: row;
line-height: $line-height;
box-shadow: 0px 0.5px 0px $Calcite_Gray_300;
color: $font-color;
height: auto;
}
.esri-floor-filter__filter-menu-header-back {
padding: 26px 0px;
min-width: 28px;
border: none;
border-right: 1px solid $border-color;
display: flex;
align-items: center;
justify-content: center;
background-color: $background-color;
margin: unset;
}
.esri-floor-filter__filter-menu-header-back:hover {
background: $background-color--hover;
cursor: pointer;
}
.esri-floor-filter__filter-menu-header-text-group {
display: flex;
justify-content: center;
flex-direction: column;
padding: 12px;
max-width: calc(#{$panel-width} - 28px - 40px);
}
.esri-floor-filter__filter-menu-header-text {
font-style: normal;
font-weight: $font-weight--bold;
font-size: $font-size__header-text;
margin: unset;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.esri-floor-filter__filter-menu-header-subtext {
font-style: normal;
font-weight: $font-weight--regular;
margin: 4px 0 0 0;
font-size: $font-size;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.esri-icon-close {
padding: 26px 12px;
display: flex;
align-items: center;
background-color: $background-color;
border: none;
margin: 0 0 0 auto;
}
.esri-icon-close:hover {
background: $background-color--hover;
cursor: pointer;
}
.esri-floor-filter__filter-menu-search {
padding: 10px;
align-items: center;
display: flex;
background: $background-color--hover;
box-shadow: 0px 0.5px 0px $Calcite_Gray_300;
margin-top: 0.5px;
margin-bottom: 1px;
.esri-floor-filter__filter-menu-search-input {
margin-left: 6px;
width: 100%;
background: transparent;
border: none;
outline: none;
font-family: $font-family;
color: $font-color;
font-size: $font-size;
}
}
.esri-floor-filter__filter-menu-items {
list-style-type: none;
overflow-y: auto;
color: $font-color;
margin: unset;
padding: unset;
width: 100%;
max-height: 300px;
.esri-floor-filter__filter-menu-site:hover,
.esri-floor-filter__filter-menu-site:focus,
.esri-floor-filter__filter-menu-facility:hover,
.esri-floor-filter__filter-menu-facility:focus {
background: $background-color--hover;
cursor: pointer;
}
.esri-floor-filter__filter-menu-site:active,
.esri-floor-filter__filter-menu-facility:active {
background-color: $background-color--active;
color: $font-color;
}
.esri-floor-filter__filter-menu-site,
.esri-floor-filter__filter-menu-facility {
padding: 18px;
display: flex;
flex-direction: row;
align-items: center;
background: $background-color;
border: none;
width: 100%;
.esri-floor-filter__filter-menu-item-name {
font-family: $font-family;
font-size: $font-size;
}
.esri-floor-filter__filter-menu-item-name--selected {
font-weight: $font-weight--bold;
font-size: $font-size;
font-family: $font-family;
}
.esri-floor-filter__filter-menu-item-name,
.esri-floor-filter__filter-menu-item-name--selected {
text-align: left;
margin-right: 10px;
max-width: $floor-filter-item-width--normal;
}
.esri-icon-right {
margin-left: auto;
}
}
.esri-floor-filter__selected-item-circle {
margin-left: -10px;
margin-right: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: $Brand_Blue_200;
}
}
}
.esri-floor-filter__separator {
width: $view-ui-spacing;
background: transparent;
border: none;
box-shadow: none;
}
}
.esri-expand__content {
.esri-floor-filter {
width: max-content;
}
}
.esri-view-height-less-than-small .esri-floor-filter,
.esri-view-width-less-than-small .esri-floor-filter {
.esri-floor-filter__zoom-button,
.esri-floor-filter__zoom-button--levels {
display: none;
}
.esri-floor-filter__minimize-toggle-button {
display: none;
}
.esri-floor-filter__filter-menu {
width: $panel-width--three-quarters;
}
.esri-floor-filter__close-levels-button {
width: $button-width--plus-half;
height: $button-height--plus-half;
padding: 12px;
border-style: solid;
border-color: $border-color;
background: $Calcite_Gray_250;
}
.esri-floor-filter__filter-menu-header-text-group {
max-width: calc(#{$panel-width--three-quarters} - 28px - 40px);
}
.esri-floor-filter__filter-menu-item-name,
.esri-floor-filter__filter-menu-item-name--selected {
max-width: $floor-filter-item-width--compact !important;
}
}
.esri-view-height-small .esri-floor-filter {
.esri-floor-filter__levels-container {
max-height: calc(#{$panel-max-height--small} - 100px);
}
.esri-floor-filter__filter-menu {
max-height: calc(#{$panel-max-height--small} - 100px);
}
}
.esri-view-height-xsmall .esri-floor-filter {
.esri-floor-filter__levels-container {
max-height: calc(#{$button-height--plus-half} * 3 + 12px);
}
.esri-floor-filter__filter-menu {
max-height: $panel-max-height--xsmall;
}
}
[dir="rtl"] .esri-floor-filter {
&__layout--expanded {
.esri-floor-filter__button-info {
margin-left: auto;
margin-right: unset;
}
.esri-floor-filter__button-label {
margin-right: 8px;
margin-left: unset;
}
}
.esri-icon-close {
margin: 0 auto 0 0;
}
.esri-floor-filter__filter-menu .esri-floor-filter__filter-menu-header-back {
border-left: 1px solid $border-color;
border-right: none;
}
.esri-floor-filter__filter-menu-search .esri-floor-filter__filter-menu-search-input {
margin-right: 6px;
margin-left: unset;
}
.esri-floor-filter__filter-menu-items {
.esri-floor-filter__filter-menu-site,
.esri-floor-filter__filter-menu-facility {
.esri-icon-left {
margin-right: auto;
}
}
.esri-floor-filter__filter-menu-item-name,
.esri-floor-filter__filter-menu-item-name--selected {
text-align: right !important;
margin-right: unset !important;
margin-left: 10px !important;
}
.esri-floor-filter__selected-item-circle {
margin-right: -10px;
margin-left: 6px;
}
}
}
}
@if $include_FloorFilter == true {
@include floorFilter();
}

71
public/assets/esri/themes/base/widgets/_Grid.scss Normal file
View file

@ -0,0 +1,71 @@
@mixin grid() {
.esri-grid {
width: 100%;
height: 100%;
// Sets 'primary' color that other properties inherit from
--lumo-base-color: #{$background-color};
--lumo-primary-color: #{$button-color};
--lumo-primary-text-color: var(--lumo-primary-color);
// Uses shade of primary theme color for highlight
$row-selected-color: rgba($button-color, 0.2);
--lumo-primary-color-10pct: #{$row-selected-color};
// grid and checkbox background color(s) default and hover
--lumo-contrast-20pct: #{$interactive-font-color};
--lumo-contrast-30pct: #{$interactive-font-color--hover};
// grid border color(s)
--lumo-contrast-10pct: #{$background-color--hover};
// row hover
--lumo-row-background-hover: #{$background-color--hover};
.esri-grid__content {
width: 100%;
height: 100%;
background-color: inherit;
}
.esri-grid__grid {
height: 100%;
width: 100%;
a {
color: $interactive-font-color;
&:hover,
&:focus {
color: $interactive-font-color--hover;
}
}
}
.esri-column__sorter,
.esri-column__header-label {
align-items: center;
display: flex;
flex-grow: 1;
margin: 0 5px;
min-height: 28px;
overflow: auto;
}
.esri-column__menu-container {
display: inline-block;
margin: 0 5px;
}
.esri-column__header-content {
align-items: center;
display: flex;
flex-grow: 1;
overflow: visible;
}
}
}
@if $include_Grid == true {
@include grid();
}

7
public/assets/esri/themes/base/widgets/_HeatmapSlider.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin heatmapSlider() {
@include smartMappingSlider(esri-heatmap-slider);
}
@if $include_HeatmapSlider == true {
@include heatmapSlider();
}

56
public/assets/esri/themes/base/widgets/_Histogram.scss Normal file
View file

@ -0,0 +1,56 @@
@mixin histogram() {
.esri-histogram {
direction: ltr;
width: 100%;
height: 100%;
}
.esri-histogram__content {
height: 100%;
width: 100%;
}
.esri-histogram__svg {
display: inline-block;
height: 100%;
overflow: hidden;
width: 100%;
}
.esri-histogram__data-line {
stroke: #888;
stroke-width: 1px;
shape-rendering: crispedges;
}
.esri-histogram__label {
stroke: black;
font-size: 12px;
stroke-width: 0;
direction: ltr;
unicode-bidi: plaintext;
}
.esri-histogram__average-data-line {
stroke: #444;
}
.esri-histogram__average-symbol {
font-family: "Georgia, serif";
font-style: italic;
}
[dir="rtl"] {
.esri-histogram {
direction: rtl;
.esri-histogram__average-label {
direction: rtl;
unicode-bidi: plaintext;
}
}
}
}
@if $include_Histogram == true {
@include histogram();
}

105
public/assets/esri/themes/base/widgets/_HistogramRangeSlider.scss Normal file
View file

@ -0,0 +1,105 @@
@mixin histogramRangeSlider() {
.esri-histogram-range-slider {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
width: 100%;
.esri-slider .esri-slider__label {
top: 24px;
display: none;
}
.esri-slider__anchor--moving .esri-slider__label {
display: inline;
}
.esri-slider {
font-size: 12px;
}
.esri-slider__content {
display: flex;
flex-direction: column-reverse;
}
.esri-slider__max {
bottom: 0;
position: absolute;
right: 0;
text-align: right;
.esri-slider__range-input {
text-align: right;
}
}
.esri-slider__min {
bottom: 0;
left: 0;
position: absolute;
text-align: left;
.esri-slider__range-input {
text-align: left;
}
}
.esri-slider--horizontal {
.esri-slider__max,
.esri-slider__min {
display: inline;
min-width: 50%;
}
}
.esri-histogram {
display: flex;
align-self: flex-end;
}
.esri-histogram__bar {
touch-action: none;
}
.esri-slider__max {
.esri-slider__range-input {
float: right;
}
}
}
.esri-histogram-range-slider__slider-container {
align-self: flex-end;
margin-bottom: 24px;
width: 100%;
}
.esri-histogram-range-slider__histogram-container {
display: flex;
flex-grow: 1;
height: 100%;
min-height: 0;
width: 100%;
}
.esri-histogram-range-slider__range-type--less-than,
.esri-histogram-range-slider__range-type--at-most {
.esri-slider__segment-0 {
background-color: #0079c1;
}
}
.esri-histogram-range-slider__range-type--greater-than,
.esri-histogram-range-slider__range-type--at-least,
.esri-histogram-range-slider__range-type--between,
.esri-histogram-range-slider__range-type--not-between {
.esri-slider__segment-1 {
background-color: #0079c1;
}
}
}
@if $include_HistogramRangeSlider == true {
@include histogramRangeSlider();
}

22
public/assets/esri/themes/base/widgets/_IdentityForm.scss Normal file
View file

@ -0,0 +1,22 @@
@mixin identityForm() {
.esri-identity-form {
display: flex;
flex-flow: column;
}
.esri-identity-form__group {
margin-bottom: $cap-spacing;
}
.esri-identity-form__label {
display: flex;
flex-flow: column;
}
.esri-identity-form__footer {
display: flex;
justify-content: space-between;
margin-top: $cap-spacing;
}
}
@if $include_IdentityForm == true {
@include identityForm();
}

105
public/assets/esri/themes/base/widgets/_IdentityModal.scss Normal file
View file

@ -0,0 +1,105 @@
@mixin identityModal() {
.esri-identity-modal {
box-sizing: border-box;
color: $font-color;
display: none;
font-size: $font-size;
font-family: $font-family;
line-height: $line-height;
background-color: $background-color;
}
.esri-identity-modal--open {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: $background-color--overlay;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 1001;
transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
opacity: 1;
.esri-identity-modal__dialog {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
border: none;
background: $background-color;
overflow: auto;
border-radius: 0px;
outline: none;
padding: $cap-spacing--plus-half $side-spacing--plus-half;
max-width: 40vw;
max-height: 80vh;
box-sizing: border-box;
z-index: 102;
text-align: left;
display: inline-block;
vertical-align: middle;
transition: margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
margin-top: 0px;
}
}
.esri-identity-modal__title {
font-size: $font-size__h1;
margin: 0 0 $cap-spacing 0;
padding: 0;
}
.esri-identity-modal__close-button {
color: $interactive-font-color;
position: absolute;
top: $cap-spacing;
right: $side-spacing--half;
z-index: 1;
background: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
width: $button-width;
height: $button-height;
cursor: pointer;
}
.esri-identity-modal__content {
margin-top: $cap-spacing--plus-half;
}
.esri-identity-form__group {
margin-bottom: $cap-spacing;
}
.esri-identity-form__label {
display: flex;
flex-flow: column;
}
.esri-identity-form__footer {
display: flex;
justify-content: space-between;
margin-top: $cap-spacing;
}
@media only screen and (max-width: 680px) {
.esri-identity-modal--open .esri-identity-modal__dialog {
max-width: unset;
width: 75vw;
}
}
[dir="rtl"] {
.esri-identity-modal--open .esri-identity-modal__dialog {
text-align: right;
}
.esri-identity-modal__close-button {
right: unset;
left: $side-spacing--half;
}
}
}
@if $include_IdentityModal == true {
@include identityModal();
}

59
public/assets/esri/themes/base/widgets/_ItemList.scss Normal file
View file

@ -0,0 +1,59 @@
@mixin itemList() {
$border: 1px solid $border-color;
.esri-item-list {
width: 100%;
}
.esri-item-list__filter-container--sticky {
position: sticky;
top: 0;
z-index: 1;
}
.esri-item-list__group {
margin-top: $cap-spacing;
}
.esri-item-list__scroller {
overflow-y: auto;
}
.esri-ui .esri-item-list__scroller {
position: relative;
z-index: 0;
&--enabled {
max-height: $panel-max-height--small;
}
}
.esri-item-list__group__header {
color: var(--calcite-ui-text-2);
font-weight: var(--calcite-font-weight-medium);
}
.esri-item-list__list-item {
cursor: pointer;
min-height: $list-item-height;
@include icomoonIconSelector("&") {
padding-inline-end: $font-size * 0.2;
}
}
.esri-item-list__list-item-icon {
margin-inline: 0.75rem; // Matches default spacing used by Calcite
}
.esri-item-list__no-matches-message {
display: flex;
justify-content: center;
align-items: center;
height: $panel-min-height--small;
}
}
@if $include_ItemList == true {
@include itemList();
}

453
public/assets/esri/themes/base/widgets/_LayerList.scss Normal file
View file

@ -0,0 +1,453 @@
@mixin layerList() {
$message-warning-border-color: $Calcite_Yellow_a150;
$indicator-size: 6px;
.esri-layer-list {
color: $font-color;
background-color: $background-color--offset;
padding: calc(var(--esri-widget-padding-y) * 0.5) calc(var(--esri-widget-padding-x) * 0.5);
overflow-y: auto;
display: flex;
flex-flow: column;
}
.esri-layer-list__list {
list-style: none;
margin: 0 0 0 $side-spacing;
padding: $cap-spacing--eighth $side-spacing--eighth;
&:empty {
min-height: $list-item-height;
}
@include sortableChosen("esri-layer-list--chosen");
}
.esri-layer-list__list,
.esri-layer-list__item {
&.esri-layer-list--chosen .esri-layer-list__item {
background-color: transparent;
}
}
.esri-layer-list__item--has-children {
padding-bottom: $cap-spacing--half;
}
.esri-layer-list__item--has-children .esri-layer-list__list:not([hidden]) {
animation: esri-fade-in 375ms ease-in-out;
}
.esri-layer-list__list[hidden] {
display: none;
}
.esri-layer-list__list--root {
margin: 0;
}
.esri-layer-list__item--selectable .esri-layer-list__item-container {
cursor: pointer;
&:hover {
border-left-color: $border-color;
}
}
.esri-layer-list__item[aria-selected="true"] > .esri-layer-list__item-container {
border-left-color: $border-color--active;
&:hover {
border-left-color: $border-color--active;
}
}
.esri-layer-list__item-container ~ .esri-layer-list__list .esri-layer-list__item {
border-bottom-width: 0;
}
.esri-layer-list__item {
background-color: $background-color;
border-bottom: 1px solid $border-color;
position: relative;
overflow: hidden;
list-style: none;
margin: $cap-spacing--quarter 0;
padding: 0;
@include sortableChosen("esri-layer-list--chosen");
}
.esri-layer-list__item-container {
border-left: $border-size--active solid transparent;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: $cap-spacing $side-spacing--half $cap-spacing ($side-spacing + 5);
transition: border-color 250ms ease-in-out;
}
.esri-layer-list__item--invisible-at-scale .esri-layer-list__item-title {
color: $interactive-font-color--disabled;
}
.esri-layer-list__item--has-children > .esri-layer-list__item-container {
padding-left: 5px;
}
.esri-layer-list__item--has-children > .esri-layer-list__list {
font-size: $font-size--small;
}
.esri-layer-list__child-toggle {
color: $interactive-font-color;
width: $side-spacing; // Matches side padding on items that don't have this toggle.
align-self: center;
display: flex;
cursor: pointer;
}
.esri-layer-list__child-toggle {
@include icomoonIconSelector() {
line-height: 1.2em;
}
}
.esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--opened,
.esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--closed-rtl,
.esri-layer-list__child-toggle--open .esri-layer-list__child-toggle-icon--closed {
display: none;
}
.esri-layer-list__child-toggle--open .esri-layer-list__child-toggle-icon--opened {
display: block;
}
.esri-layer-list__item-label {
display: flex;
flex-flow: row;
justify-content: flex-start;
align-items: center;
flex: 1;
user-select: none;
}
.esri-layer-list__item-label[role="switch"],
.esri-layer-list__item-label[role="checkbox"],
.esri-layer-list__item-label[role="radio"] {
cursor: pointer;
}
.esri-layer-list--new-ui {
.esri-layer-list__item-toggle-icon {
visibility: hidden;
}
// show icon on focus of toggle/label
.esri-layer-list__item-toggle:focus .esri-layer-list__item-toggle-icon,
.esri-layer-list__item-label:focus .esri-layer-list__item-toggle-icon,
// show icon on hover of item container
.esri-layer-list__item-container:hover .esri-layer-list__item-toggle-icon,
// always show icon when item is not visible
.esri-layer-list__item--invisible > .esri-layer-list__item-container .esri-layer-list__item-toggle-icon {
visibility: visible;
}
}
.esri-layer-list__item-title {
flex: 1;
padding-left: $side-spacing--third;
padding-right: $side-spacing--third;
line-height: $line-height;
word-break: break-word;
overflow-wrap: break-word;
transition: color 125ms ease-in-out;
}
.esri-layer-list__status-indicator {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-block: 0;
height: $indicator-size;
width: $indicator-size;
margin-inline: $cap-spacing;
}
.esri-layer-list__publishing {
border: 1px solid $interactive-font-color;
animation: publishing 2s normal infinite;
}
.esri-layer-list__updating {
background-color: $updating;
border-radius: 50%;
animation: updating 2s normal infinite;
}
.esri-layer-list__connection-status {
height: $button-width--half;
width: $button-width--half;
margin-inline: $side-spacing--half;
color: $connection-disconnected;
}
.esri-layer-list__connection-status--connected {
color: $connection-connected;
}
.esri-layer-list__item-message {
display: flex;
align-items: center;
visibility: hidden;
height: 0;
margin-top: -1px;
padding: $cap-spacing--half $side-spacing--half;
overflow: hidden;
font-size: $font-size--small;
transition: transform 250ms ease-in-out;
transform: scale(1, 0);
animation: esri-fade-in-down 250ms ease-in-out;
transform-origin: center top;
background-color: $background-color--offset-subtle;
margin-inline-start: 3rem;
border-inline-start: $border-size--active solid $message-warning-border-color;
margin-block-end: 0.25rem;
margin-inline-end: 0.25rem;
}
.esri-layer-list__item-message {
@include icomoonIconSelector() {
margin-right: 0.3rem;
}
}
.esri-layer-list__item--has-message {
.esri-layer-list__item-message {
visibility: visible;
height: auto;
transform: scale(1, 1);
}
}
.esri-layer-list__item-toggle {
padding: 0 $side-spacing--quarter;
cursor: pointer;
color: $interactive-font-color;
display: flex;
align-items: center;
}
.esri-layer-list__item-actions-menu {
align-self: center;
display: flex;
}
.esri-layer-list__item-actions-menu-item {
display: flex;
flex: 1 0 auto;
justify-content: center;
align-items: center;
color: $interactive-font-color;
cursor: pointer;
padding: 0 $side-spacing--half;
transition: border-color 250ms ease-in-out;
}
.esri-layer-list__item-actions-menu-item .esri-disabled-element {
pointer-events: none;
opacity: $opacity--disabled;
}
.esri-layer-list__item-actions-menu-item:first-of-type {
margin: 0 2px;
}
.esri-layer-list__item-actions-menu-item:hover {
background-color: $background-color--hover;
}
.esri-layer-list__item-actions-menu-item--active,
.esri-layer-list__item-actions-menu-item--active:hover {
background-color: $background-color--active;
}
.esri-layer-list__item-actions {
position: relative;
background-color: $background-color--offset;
color: $interactive-font-color;
margin: -1px $side-spacing--half $cap-spacing--half;
height: auto;
}
.esri-layer-list__item-actions[aria-expanded="true"] {
animation: esri-fade-in 250ms ease-in-out;
}
.esri-layer-list__item-actions-section {
animation: esri-fade-in 375ms ease-in-out;
}
.esri-layer-list__item-actions[hidden] {
display: none;
}
.esri-layer-list__item-actions-close {
color: $interactive-font-color;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
padding: 5px;
z-index: 1;
}
.esri-layer-list__item-actions-list {
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
padding: $cap-spacing--half 0;
list-style: none;
border-top: 2px solid $background-color;
}
.esri-layer-list__item-actions-list:first-of-type {
border-top: 0;
}
.esri-layer-list__item-action,
.esri-layer-list__action-toggle {
border: 1px solid transparent;
display: flex;
box-sizing: border-box;
justify-content: flex-start;
align-items: flex-start;
cursor: pointer;
font-size: $font-size--small;
width: 100%;
margin: 0;
padding: $cap-spacing--half $side-spacing;
opacity: 1;
transition: opacity 250ms ease-in-out 250ms, background-color 250ms ease-in-out;
}
.esri-layer-list__item-action {
justify-content: flex-start;
flex-flow: row;
}
.esri-layer-list__action-toggle {
flex-flow: row-reverse;
justify-content: space-between;
.esri-layer-list__item-action-title {
margin-left: 0;
}
.esri-layer-list__item-action-icon {
background-color: $background-color--inverse;
border-radius: $toggle-height;
box-shadow: 0 0 0 1px $interactive-font-color--inverse;
flex: 0 0 $toggle-width;
height: $toggle-height;
overflow: hidden;
padding: 0;
position: relative;
transition: background-color 125ms ease-in-out;
width: $icon-size;
&:before {
// Toggle handle. Overrides any icon class
background-color: $interactive-font-color--inverse;
border-radius: 100%;
content: "";
display: block;
height: $toggle-handle-size;
left: 0;
margin: 2px;
position: absolute;
top: 0;
transition: background-color 125ms ease-in-out, left 125ms ease-in-out;
width: $toggle-handle-size;
}
}
&.esri-disabled-element {
pointer-events: none;
opacity: $opacity--disabled;
}
}
.esri-layer-list__action-toggle--on .esri-layer-list__item-action-icon {
// Toggle on
background-color: $interactive-font-color--inverse;
&:before {
background-color: $background-color--inverse;
box-shadow: 0 0 0 1px $background-color--inverse;
left: $toggle-handle-size;
}
}
.esri-layer-list__item-action:hover,
.esri-layer-list__action-toggle:hover {
background-color: $background-color--hover;
}
.esri-layer-list__item-actions[hidden] .esri-layer-list__item-action {
opacity: 0;
}
.esri-layer-list__item-action-icon {
flex: 0 0 $icon-size;
font-size: $icon-size;
display: inline-block;
width: $icon-size;
height: $icon-size;
margin-top: 0.1em;
}
.esri-layer-list__item-action-image {
flex: 0 0 $icon-size;
width: $icon-size;
height: $icon-size;
font-size: $font-size;
text-align: center;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.esri-layer-list__item-action-title {
margin-left: 5px;
}
.esri-layer-list-panel {
margin: $cap-spacing $side-spacing;
}
// Legend as content
.esri-layer-list-panel__content--legend .esri-legend__service {
padding: 0 0 $cap-spacing 0;
}
[dir="rtl"] .esri-layer-list {
.esri-layer-list__item--has-children > .esri-layer-list__item-container {
padding-left: $side-spacing + 5;
padding-right: 5px;
}
.esri-layer-list__list {
margin: 0 $side-spacing 0 0;
}
.esri-layer-list__list--root {
margin: 0;
}
.esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--closed {
display: none;
}
.esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--closed-rtl {
display: block;
}
.esri-layer-list__child-toggle--open .esri-layer-list__child-toggle-icon--closed-rtl {
display: none;
}
.esri-layer-list__item-action-title {
margin-left: 0;
margin-right: 5px;
}
.esri-layer-list__action-toggle .esri-layer-list__action-toggle {
margin-right: 0;
}
.esri-layer-list__item:after {
animation: looping-progresss-bar-ani $looping-progress-bar-params reverse;
}
.esri-layer-list__item-message {
@include icomoonIconSelector() {
margin-right: 0;
margin-left: 0.3rem;
}
}
.esri-layer-list__item-container {
border-left: none;
border-right: $border-size--active solid transparent;
}
.esri-layer-list__item[aria-selected="true"] > .esri-layer-list__item-container {
border-right-color: $border-color--active;
&:hover {
border-right-color: $border-color--active;
}
}
}
@keyframes updating {
0%,
40% {
background-color: transparent;
}
50%,
80% {
background-color: var(--calcite-ui-brand);
}
100% {
background-color: transparent;
}
}
@keyframes publishing {
0%,
20% {
transform: rotate(45deg);
}
80%,
100% {
transform: rotate(135deg);
}
}
}
@if $include_LayerList==true {
@include layerList();
}

551
public/assets/esri/themes/base/widgets/_Legend.scss Normal file
View file

@ -0,0 +1,551 @@
@use "sass:math";
$relationship_column_size: 85px;
@mixin legend() {
.esri-legend {
overflow: hidden;
overflow-y: auto;
}
.esri-legend__message {
padding: 0.5em 1em;
}
.esri-legend__service {
padding: $cap-spacing $side-spacing;
word-wrap: break-word;
border-bottom: 1px solid $border-color;
}
.esri-legend__service:last-child {
border-bottom: none;
}
.esri-legend__layer {
margin-left: $side-spacing--half;
overflow: auto;
}
.esri-legend__group-layer-child {
margin-left: $side-spacing--half;
padding-left: 0;
padding-right: 0;
}
.esri-legend__layer-table {
display: flex;
flex-flow: column;
width: 100%;
margin-bottom: $cap-spacing;
}
.esri-legend__layer-child-table {
display: table;
border-collapse: collapse;
width: 100%;
margin-bottom: $cap-spacing;
}
.esri-legend__layer-body {
margin-left: $side-spacing--half;
}
.esri-legend__layer-row {
display: flex;
}
.esri-legend__layer-cell {
min-width: 100px;
word-break: break-word;
padding: $cap-spacing--third 0;
vertical-align: middle;
}
.esri-legend__layer-cell--symbols {
min-width: 10px;
text-align: center;
}
// Size ramps
.esri-legend__layer-table--size-ramp {
display: table;
}
.esri-legend__layer-table--size-ramp .esri-legend__layer-row {
display: table-row;
}
.esri-legend__layer-table--size-ramp .esri-legend__layer-cell {
display: table-cell;
}
.esri-legend__size-ramp ~ .esri-legend__layer-cell--info {
max-width: 80%;
width: 80%;
}
.esri-legend__layer-cell--info {
font-size: $font-size--small;
padding-left: $side-spacing--half;
padding-right: $side-spacing--half;
word-wrap: normal;
word-break: normal;
max-width: 250px;
}
.esri-legend__imagery-layer-image--stretched {
margin-bottom: -2px; //imageData contains extra right and bottom 2px margin
display: block;
}
.esri-legend__imagery-layer-cell--stretched {
vertical-align: top;
line-height: 1;
padding: 0;
}
.esri-legend__imagery-layer-info--stretched {
vertical-align: top;
padding: 0 2px;
}
.esri-legend__symbol {
display: flex;
justify-content: center;
}
.esri-legend__layer-caption {
display: table-caption;
padding: $cap-spacing--half 0;
word-break: break-word;
}
.esri-legend__ramp-labels {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
}
.esri-legend__ramps {
margin-left: $side-spacing--quarter;
}
.esri-legend__color-ramp {
width: 24px;
}
.esri-legend__opacity-ramp {
background-image: url("../base/images/transparent-bg.png");
}
.esri-legend__ramp-tick {
position: absolute;
width: 4px;
border-top: 1px solid $border-color;
line-height: 0;
right: 1px;
left: auto;
}
.esri-legend__ramp-label {
position: relative;
padding: 0 $side-spacing--half;
white-space: nowrap;
line-height: 1em;
font-size: $font-size--small;
&:before {
position: absolute;
top: 0.25em;
right: 100%;
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent rgba($font-color, 0.8) transparent transparent;
}
&:first-child {
margin-top: floor(math.div($font-size, 3)) * -1;
}
&:last-child {
bottom: floor($font-size * 0.25) * -1;
}
}
.esri-legend-layer-caption {
display: table-caption;
padding: $cap-spacing--half 0;
}
[dir="rtl"] {
.esri-legend__ramp-label:before {
border-width: 3px 0 3px 4px;
border-color: transparent transparent transparent rgba($font-color, 0.8);
left: 100%;
right: auto;
}
.esri-legend__layer,
.esri-legend__group-layer-child,
.esri-legend__layer-body {
margin-left: 0;
margin-right: $side-spacing--half;
overflow: auto;
}
.esri-legend__ramps {
margin-left: auto;
margin-right: $side-spacing--quarter;
}
}
}
@mixin cardLegend() {
$legend_min_width: $panel-width;
$carousel_min_width: $legend_min_width;
$carousel_min_height: 250px;
$carousel_slide_side_length: $legend_min_width - 50;
$indicator_size: 10px;
.esri-legend--card {
display: flex;
overflow-x: auto;
transition: max-width 250ms ease-in-out;
background: $background-color;
position: relative;
}
.esri-legend--card__section {
font-size: $font-size__body;
min-width: $legend_min_width;
padding: $cap-spacing $side-spacing;
border-left: 1px solid $border-color;
overflow: auto;
&:first-child {
border-left: none;
}
}
.esri-legend--card__message {
padding: 0.5em 1em;
}
.esri-legend--card__service-caption-container {
font-weight: $font-weight__heading;
height: 45px;
padding: $cap-spacing $side-spacing;
border-bottom: 1px solid $border-color;
}
.esri-legend--card__service-caption-text {
margin: 0;
overflow: auto;
padding-bottom: 20px;
}
.esri-legend--card__layer-caption {
font-weight: $font-weight;
margin-bottom: $cap-spacing;
padding: $cap-spacing--half 0;
}
.esri-legend--card__service-content {
display: flex;
height: calc(100% - 45px);
}
.esri-legend--card__label-container {
display: flex;
flex-wrap: wrap;
}
.esri-legend--card__relationship-label-container {
display: flex;
flex-direction: column;
.esri-legend--card__layer-row {
padding-bottom: 0.5em;
}
.esri-legend--card__layer-row:last-child {
padding-bottom: 0em;
}
}
.esri-legend--card__relationship-section {
border: none;
}
.esri-legend--card__label-element {
margin: 0.1em;
padding: 0.5em 1em;
min-width: 4em;
min-height: 2.7em;
text-align: center;
}
.esri-legend--card__image-label {
padding-left: $side-spacing--half;
padding-right: $side-spacing--half;
}
.esri-legend--card__layer-row,
.esri-legend--card__size-ramp-container {
display: flex;
align-items: center;
}
.esri-legend--card__size-ramp-preview {
display: flex;
}
.esri-legend--card__ramp-label {
white-space: nowrap;
margin: 0 0.5em;
}
.esri-legend--card__pie-chart-ramp-preview {
display: flex;
justify-content: center;
}
.esri-legend--card__interval-separator {
text-align: center;
font-size: 0.5em;
}
.esri-legend--card__imagery-layer-image--stretched {
margin-bottom: -2px; //imageData contains extra right and bottom 2px margin
display: block;
}
.esri-legend--card__symbol-container {
position: relative;
}
.esri-legend--card__interval-separators-container {
position: absolute;
left: 50%;
top: 50px;
transform: translate(-50%, -50%);
}
.esri-legend--card__carousel-title {
margin: 0;
}
.esri-legend--card__service {
min-width: fit-content;
border-left: 1px solid $border-color;
}
.esri-legend--card__symbol {
display: block;
margin: auto;
}
.esri-legend--stacked {
min-width: $carousel_min_width;
display: flex;
flex-direction: column;
.esri-legend--card__section {
border: none;
overflow: auto;
height: auto;
width: $carousel_slide_side_length;
}
.esri-legend--card__size-ramp-row {
flex-direction: column;
}
.esri-legend--card__symbol-row {
display: table-row;
margin: 5px 0;
width: 100%;
}
.esri-legend--card__label-cell {
display: table-cell;
vertical-align: middle;
}
.esri-legend--card__symbol-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.esri-legend--card__carousel-indicator-container {
box-shadow: 0 -1px 0 $border-color;
display: flex;
height: $button-height;
width: $legend_min_width;
justify-content: center;
overflow: auto;
}
.esri-legend--card__carousel-indicator {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: $button-width--half;
}
.esri-legend--card__carousel-indicator:before {
background-color: transparent;
border-radius: 50%;
box-shadow: 0 0 0 1px $interactive-font-color;
content: "";
display: block;
height: $indicator_size;
transition: background-color 125ms ease-in-out;
width: $indicator_size;
}
.esri-legend--card__carousel-indicator:hover::before,
.esri-legend--card__carousel-indicator--activated:before,
.esri-legend--card__carousel-indicator--activated:hover::before {
background-color: $interactive-font-color;
}
}
//////////////////////////////
// UI CORNER
.esri-ui-corner {
max-width: 100%;
.esri-legend--card {
max-height: $panel-max-height--small;
}
}
// UI CORNER
//////////////////////////////
//////////////////////////////
// RTL
[dir="rtl"] .esri-view-width-greater-than-small {
// scoped to view size to not interfere with carousel
.esri-legend--card__section {
border-left: 0;
border-right: 1px solid $border-color;
}
.esri-legend--card__section:first-child {
border-right: none;
}
}
// RTL
//////////////////////////////
}
@mixin relationshipRamp() {
.esri-relationship-ramp--diamond__container {
display: flex;
font-size: $font-size--small;
}
.esri-relationship-ramp--diamond__left-column {
align-self: center;
padding-right: 5px;
text-align: right;
max-width: $relationship_column_size;
}
.esri-relationship-ramp--diamond__right-column {
align-self: center;
padding-left: 5px;
text-align: left;
max-width: $relationship_column_size;
}
.esri-relationship-ramp--diamond__middle-column {
display: flex;
flex-direction: column;
text-align: center;
}
.esri-relationship-ramp--diamond__middle-column--label {
align-self: center;
max-width: $relationship_column_size;
}
.esri-relationship-ramp--diamond__middle-column--ramp {
width: $relationship_column_size;
height: $relationship_column_size;
}
.esri-relationship-ramp--square__table {
display: table;
font-size: $font-size--small;
}
.esri-relationship-ramp--square__table-row {
display: table-row;
}
.esri-relationship-ramp--square__table-cell {
display: table-cell;
}
.esri-relationship-ramp--square__table-label {
max-width: 95px;
}
.esri-relationship-ramp--square__table-label--left-bottom {
text-align: left;
vertical-align: bottom;
}
.esri-relationship-ramp--square__table-label--right-bottom {
text-align: right;
vertical-align: bottom;
}
.esri-relationship-ramp--square__table-label--left-top {
text-align: left;
vertical-align: top;
}
.esri-relationship-ramp--square__table-label--right-top {
text-align: right;
vertical-align: top;
}
}
@mixin univariateAboveAndBelowRamp() {
.esri-univariate-above-and-below-ramp__symbol {
display: flex;
justify-content: center;
align-items: center;
}
.esri-univariate-above-and-below-ramp__label {
position: relative;
white-space: nowrap;
line-height: 1em;
font-size: $font-size--small;
margin-left: 7px;
&:before {
position: absolute;
top: 0.45em;
left: -19px;
display: block;
content: "";
width: 14px;
height: 0;
border-style: solid;
border-width: 1px 0 0 0;
}
&:first-child {
top: floor(math.div($font-size, 2.2)) * -1;
}
&:last-child {
bottom: floor(math.div($font-size, 2.2)) * -1;
}
}
.esri-univariate-above-and-below-ramp__color--card {
position: relative;
&:before {
position: absolute;
top: 1px;
display: block;
content: "";
width: 100%;
height: 15px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
}
[dir="rtl"] {
.esri-univariate-above-and-below-ramp__label {
margin-left: auto;
margin-right: 7px;
&:before {
left: auto;
right: -19px;
}
}
}
}
@if $include_Legend == true {
@include legend();
@include cardLegend();
@include relationshipRamp();
@include univariateAboveAndBelowRamp();
}

41
public/assets/esri/themes/base/widgets/_LineOfSight.scss Normal file
View file

@ -0,0 +1,41 @@
@mixin lineOfSight() {
.esri-line-of-sight__container {
position: relative;
padding: $cap-spacing 0;
overflow-y: auto;
a {
text-decoration: none;
}
}
.esri-line-of-sight__hint {
padding: 0 $side-spacing;
animation: esri-fade-in 250ms ease-in-out;
}
.esri-line-of-sight__hint-text {
margin: $cap-spacing 0;
padding: 0;
}
.esri-line-of-sight__panel--error {
color: $font-color--error;
padding: 0 $side-spacing;
animation: esri-fade-in 250ms ease-in-out;
}
.esri-line-of-sight__actions {
display: flex;
flex-flow: column;
justify-content: center;
padding: 0 $side-spacing;
}
.esri-line-of-sight__secondary-button {
margin-bottom: 10px;
}
}
@if $include_LineOfSight == true {
@include lineOfSight();
}

6
public/assets/esri/themes/base/widgets/_Measurement.scss Normal file
View file

@ -0,0 +1,6 @@
@mixin measurement() {
}
@if $include_Measurement == true {
@include measurement();
}

99
public/assets/esri/themes/base/widgets/_NavigationToggle.scss Normal file
View file

@ -0,0 +1,99 @@
$earmark_size: 6px !default;
@mixin navigationToggle() {
.esri-navigation-toggle {
display: flex;
flex-flow: column nowrap;
&:hover,
&:focus {
background-color: $background-color--hover;
.esri-navigation-toggle__button {
color: $interactive-font-color--hover;
}
}
}
.esri-navigation-toggle--horizontal {
flex-flow: row nowrap;
.esri-navigation-toggle__button--rotate {
border-top: none;
border-left: solid 1px $border-color;
}
}
.esri-navigation-toggle__button {
box-shadow: none;
position: relative;
background-color: transparent;
&:before {
@include earmarkStem();
opacity: 0;
border-width: 0 $earmark_size $earmark_size 0;
border-color: transparent $interactive-font-color--hover transparent transparent;
}
&:hover,
&:focus {
background-color: transparent;
}
}
.esri-navigation-toggle__button--rotate {
border-top: solid 1px $border-color;
}
.esri-navigation-toggle__button--pan {
margin-bottom: 0;
}
.esri-navigation-toggle__button--active {
color: $interactive-font-color--hover;
&:before {
opacity: 1;
}
}
.esri-navigation-toggle.esri-disabled {
.esri-navigation-toggle__button {
background-color: $background-color;
color: $interactive-font-color--disabled;
cursor: auto;
&:before {
opacity: 0;
}
}
}
[dir="rtl"] {
.esri-navigation-toggle--horizontal {
.esri-navigation-toggle__button--rotate {
border-left: none;
border-right: solid 1px $border-color;
}
}
.esri-navigation-toggle__button {
&:before {
border-width: $earmark_size $earmark_size 0 0;
border-color: $interactive-font-color--hover transparent transparent transparent;
right: auto;
left: 1px;
}
}
}
}
@mixin earmarkStem() {
position: absolute;
top: 1px;
right: 1px;
z-index: 0;
content: "";
width: 0;
height: 0;
border-style: solid;
transition: opacity 125ms ease-in-out;
}
@if $include_NavigationToggle == true {
@include navigationToggle();
}

7
public/assets/esri/themes/base/widgets/_OpacitySlider.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin opacitySlider() {
@include smartMappingSlider(esri-opacity-slider);
}
@if $include_OpacitySlider == true {
@include opacitySlider();
}

169
public/assets/esri/themes/base/widgets/_OrientedImageryViewer.scss Normal file
View file

@ -0,0 +1,169 @@
@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();
}

774
public/assets/esri/themes/base/widgets/_Popup.scss Normal file
View file

@ -0,0 +1,774 @@
@mixin popup() {
// z-indexes
$action-menu__viewport-z: 1;
$container-z: 1;
$main-z: 1;
$page-menu-z: 1;
$page-menu__viewport-z: 1;
// main container
// Heights slightly less than half of the correlated view height.
$main-container__height--xlarge: 460px !default;
$main-container__height--large: 400px !default;
$main-container__height--medium: 340px !default;
$main-container__height--less-than-medium: 300px !default;
$main-container__width--xlarge: 460px !default;
$main-container__width--large: 400px !default;
$main-container__width--medium: 340px !default;
$main-container__width--less-than-medium: 280px !default;
// pointer
$popup-pointer__width: 12 !default;
$popup-pointer__height: 12 !default;
$popup-pointer__scale-x: 0.75 !default;
$popup-pointer__scale-y: 2 !default;
$popup-pointer__scale-x--corner: 1 !default;
$popup-pointer__scale-y--corner: 3.5 !default;
// actions menu
$action-menu__width--max: 50% !default;
$action-size: $button-width--half !default;
$action-size--image: $button-width--half !default;
$footer-button__border-radius: 2px !default;
.esri-ui {
.esri-popup {
pointer-events: none;
position: absolute;
z-index: $container-z;
display: flex;
flex-flow: column nowrap;
}
}
.esri-popup--shadow {
@include boxShadow("0 1px 4px rgba(0, 0, 0, .8)");
}
.esri-popup__button {
border-radius: $border-radius;
padding: $cap-spacing--half $side-spacing--half;
margin: $cap-spacing--half 0;
line-height: $line-height;
cursor: pointer;
user-select: none;
color: $interactive-font-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
transition: background-color 125ms ease-in-out;
}
.esri-popup__button--disabled {
cursor: default;
opacity: $opacity--disabled;
color: $interactive-font-color--disabled;
}
.esri-popup__button:hover {
color: $interactive-font-color--hover;
background-color: $background-color--hover;
}
.esri-popup--aligned-top-center {
transform-origin: 50% 100%;
}
.esri-popup--aligned-bottom-center {
transform-origin: 50% -5%;
}
.esri-popup--aligned-top-left,
.esri-popup--aligned-bottom-left {
transform-origin: 100% 50%;
}
.esri-popup--aligned-top-right,
.esri-popup--aligned-bottom-right {
transform-origin: -5% 50%;
}
.esri-popup--aligned-top-center,
.esri-popup--aligned-top-left,
.esri-popup--aligned-top-right {
animation: popup-intro-animation-down 200ms ease-in-out;
}
.esri-popup--aligned-bottom-center,
.esri-popup--aligned-bottom-left,
.esri-popup--aligned-bottom-right {
animation: popup-intro-animation-up 200ms ease-in-out;
}
.esri-popup__main-container {
pointer-events: auto;
position: relative;
z-index: $main-z;
width: 340px;
max-height: $main-container__height--medium;
background-color: $background-color;
display: flex;
flex-flow: column nowrap;
}
.esri-popup__header {
position: relative;
font-size: $font-size__body;
align-items: flex-start;
justify-content: space-between;
display: flex;
flex: 0 0 auto;
}
.esri-popup__header-buttons {
padding: 0 $side-spacing--half;
margin: 0 0 0 auto; // `auto` here helps place each node at either end of the container node
display: flex;
}
.esri-popup__header-container {
flex: 1;
}
.esri-popup__header-container--button {
cursor: pointer;
align-items: flex-start;
border: none;
background: transparent;
display: flex;
justify-content: flex-start;
padding: 0;
font-size: 100%;
font-family: inherit;
color: inherit;
text-align: initial;
}
.esri-popup__header-container--button:hover {
background-color: $background-color--hover;
}
.esri-popup__header-title {
border-radius: $border-radius;
font-size: $font-size;
padding: $cap-spacing--half $side-spacing--half;
margin-inline: $side-spacing--half;
margin-block: $cap-spacing--half;
display: flex;
flex: 1 1 auto;
transition: background-color 125ms ease-in-out;
@include wordbreak();
}
.esri-popup__content {
display: flex;
flex-flow: column nowrap;
flex: 1 1 auto;
font-size: $font-size__body;
font-weight: $font-weight;
margin: 0 $side-spacing $cap-spacing;
overflow: auto;
line-height: normal;
--calcite-ui-background: $background-color;
}
.esri-content--has-flows {
margin: 0;
border-top: 1px solid $border_color;
border-bottom: 1px solid $border_color;
}
.esri-content__flow-item {
padding: $cap-spacing $side-spacing;
background-color: $background-color;
}
.esri-popup__action--exit {
transform: scaleX(-1);
}
.esri-popup__content img {
image-orientation: from-image;
}
.esri-popup__feature-menu-button {
align-items: center;
cursor: pointer;
color: $interactive-font-color;
display: flex;
font-size: $font-size--small;
padding-inline: $side-spacing--three-quarters;
border-inline-start: solid 1px $border_color;
transition: box-shadow 125ms ease-in-out, background-color 125ms ease-in-out;
&:hover {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
}
}
.esri-popup--feature-menu-open .esri-popup__feature-menu-button {
background-color: $background-color--active;
color: $font-color;
}
.esri-popup__feature-menu-button-icon {
margin-inline-end: $side-spacing--half;
}
.esri-popup--feature-menu-open .esri-popup__header,
.esri-popup--feature-menu-open .esri-popup__content {
flex: 0 1 0px;
overflow: hidden;
opacity: 0;
}
.esri-popup--feature-updated {
opacity: 0;
transition: opacity 375ms ease-out;
}
.esri-popup--feature-updated-active {
opacity: 1;
}
.esri-popup__pagination-page-text {
white-space: nowrap;
}
.esri-popup__footer {
align-items: stretch;
border-top: solid 1px $border_color;
display: flex;
flex: 0 0 auto;
justify-content: space-between;
}
.esri-popup__footer calcite-icon {
margin-inline: $side-spacing--quarter;
}
.esri-popup__footer .esri-popup__button {
font-weight: $font-weight;
font-size: $font-size--small;
position: relative;
display: flex;
justify-content: flex-start;
flex: 0 0 auto;
}
/* ACTIONS MENU */
.esri-popup__actions {
animation: esri-fade-in-scale 125ms ease-in-out;
background: $background-color;
@include defaultBoxShadow();
color: $interactive-font-color;
display: flex;
flex-flow: column;
margin: $cap-spacing--half $side-spacing--half;
max-width: $action-menu__width--max;
padding: 0;
position: absolute;
right: 0;
z-index: $action-menu__viewport-z;
.esri-popup__button[class*="esri-popup__action"] {
align-items: center;
border-bottom: 1px solid $border_color;
color: $interactive-font-color;
display: flex;
justify-content: flex-start;
padding: $cap-spacing $side-spacing--half;
margin-top: 0;
margin-bottom: 0;
font-size: $font-size--small;
&:hover {
background-color: $background-color--hover;
}
&:last-child {
border-bottom: none;
}
.esri-popup__icon {
flex: 0 0 $action-size--image;
}
}
}
.esri-popup__footer .esri-popup__actions-menu-button {
padding-inline: $side-spacing--half;
margin-inline-start: $side-spacing--half;
transition: box-shadow 125ms ease-in-out;
&:hover {
background-color: $background-color--hover;
}
}
.esri-popup--actions-menu-open .esri-popup__footer .esri-popup__actions-menu-button {
background-color: $background-color--offset;
color: $interactive-font-color--hover;
}
[class*="esri-popup--is-docked-bottom-"].esri-popup--is-docked .esri-popup__actions,
[class*="esri-popup--aligned-top-"] .esri-popup__actions {
bottom: $button_height;
top: auto;
transform-origin: bottom center;
}
[class*="esri-popup--is-docked-top-"].esri-popup--is-docked .esri-popup__actions,
[class*="esri-popup--aligned-bottom-"] .esri-popup__actions {
bottom: auto;
top: $button_height;
transform-origin: top center;
}
.esri-popup__icon {
width: $action-size;
height: $action-size;
display: inline-block;
flex: 0 0 $action-size--image;
}
[class*="esri-popup--is-docked-top-"] .esri-popup__footer,
[class*="esri-popup--aligned-bottom-"] .esri-popup__footer {
border-top: none;
border-bottom: solid 1px $border_color;
}
.esri-popup__navigation {
align-items: stretch;
display: flex;
flex: 1 0 auto;
margin: 0;
padding: 0;
position: relative;
border-inline-start: solid 1px $border_color;
.esri-popup__button {
margin: 0;
padding-inline: $side-spacing--half;
align-items: center;
}
}
.esri-popup__inline-actions-container {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
padding: 0 $side-spacing--half;
position: relative;
&:only-child {
width: 100%;
max-width: unset;
justify-content: flex-start;
.esri-popup__actions-menu-button {
margin-inline-start: auto;
}
}
> .esri-popup__action,
> .esri-popup__action-toggle {
flex: 0 1 auto;
}
.esri-popup__icon {
margin: 0 $side-spacing--quarter;
}
@include icomoonIconSelector() {
margin: 0 $side-spacing--quarter;
}
}
.esri-popup__footer--has-pagination .esri-popup__inline-actions-container {
width: 70%;
}
.esri-popup__action-toggle.esri-popup__action-toggle--on {
background-color: $background-color--active;
color: $interactive-font-color--hover;
&:hover {
background-color: $background-color--active;
color: $interactive-font-color--hover;
}
} ///////////////
// FEATURE MENU
.esri-popup__feature-menu {
left: 0;
font-size: $font-size__body;
font-weight: $font-weight;
position: absolute;
width: 100%;
background-color: $background-color;
color: $font-color;
z-index: $page-menu-z;
margin: $cap-spacing--half 0;
max-height: 0;
opacity: 0;
height: 0;
overflow: hidden;
@include defaultBoxShadow();
}
[class*="esri-popup--is-docked-bottom-"].esri-popup--is-docked .esri-popup__feature-menu,
[class*="esri-popup--aligned-top-"] .esri-popup__feature-menu {
bottom: $button_height;
top: auto;
transform-origin: bottom center;
}
[class*="esri-popup--is-docked-top-"].esri-popup--is-docked .esri-popup__feature-menu,
[class*="esri-popup--aligned-bottom-"] .esri-popup__feature-menu {
bottom: auto;
top: $button_height;
transform-origin: top center;
}
.esri-popup__feature-menu-list {
padding: 0;
margin: 0;
counter-reset: section;
}
.esri-popup__feature-menu-item {
list-style-type: none;
border: solid 1px $border-color;
display: flex;
flex-flow: row nowrap;
align-items: center;
transition: background-color 125ms ease-in-out;
margin-top: -1px;
position: relative;
}
.esri-popup__feature-menu-item:hover,
.esri-popup__feature-menu-item:focus {
cursor: pointer;
background-color: $background-color--hover;
}
.esri-popup__feature-menu-item::before {
counter-increment: section;
content: counter(section);
display: flex;
justify-content: center;
flex: 0 0 8%;
text-align: center;
}
.esri-popup__feature-menu-item--selected,
.esri-popup__feature-menu-item--selected:hover,
.esri-popup__feature-menu-item--selected:focus {
background-color: $background-color--active;
}
.esri-popup__feature-menu-item .esri-icon-check-mark {
padding: 0 0.5rem;
}
.esri-popup__feature-menu-title {
display: flex;
flex: 1 0 82%;
min-height: 1em;
margin: 0;
padding: 0.8em 4%;
border-left: solid 1px rgba(0, 0, 0, 0.25);
}
.esri-popup__feature-menu-viewport {
max-height: 0px;
opacity: 0;
overflow: auto;
position: relative;
z-index: $page-menu__viewport-z;
}
.esri-popup__feature-menu-header {
background-color: transparent;
border-bottom: solid 1px $border-color;
padding: 0;
margin: 0;
font-weight: $font-weight;
font-size: $font-size;
line-height: 1.2em;
overflow: hidden;
position: relative;
opacity: 0;
}
.esri-popup--feature-menu-open .esri-popup__feature-menu {
height: auto;
opacity: 1;
animation: esri-fade-in-scale 125ms ease-out;
max-height: none;
overflow: visible;
}
.esri-popup--feature-menu-open .esri-popup__feature-menu-header {
padding: $cap-spacing $side-spacing;
max-height: none;
display: block;
opacity: 1;
margin: 0;
}
.esri-popup--feature-menu-open .esri-popup__feature-menu-viewport {
max-height: 175px;
opacity: 1;
padding-top: 1px;
}
.esri-popup__feature-menu-loader {
position: sticky;
z-index: 2;
padding: 6px;
bottom: 10px;
text-align: center;
pointer-events: none;
}
.esri-popup__feature-menu-observer {
position: relative;
z-index: 2;
bottom: 20px;
text-align: center;
}
.esri-popup__loading-container {
margin: 0 $side-spacing--half;
text-align: center;
user-select: none;
}
.esri-popup__action-image {
width: $action-size--image;
height: $action-size--image;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
flex: 0 0 $action-size--image;
}
.esri-popup__action-text {
overflow: hidden;
text-overflow: ellipsis;
}
.esri-popup__collapse-button {
align-items: center;
background-color: $background-color--offset;
cursor: pointer;
display: flex;
flex: 1 0;
justify-content: center;
padding: $cap-spacing--half 0;
}
.esri-popup__collapse-icon {
margin-block-start: $cap-spacing--three-quarters;
}
.esri-popup--is-docked.esri-popup--is-docked-bottom-left,
.esri-popup--is-docked.esri-popup--is-docked-bottom-right,
.esri-popup--is-docked.esri-popup--is-docked-bottom-center,
.esri-popup--aligned-top-left,
.esri-popup--aligned-top-right,
.esri-popup--aligned-top-center {
.esri-popup__collapse-icon {
transform: rotate(180deg);
}
}
///////////////
// POINTER
$half_pointer_width: ($popup-pointer__width * 0.5) + px;
$half_pointer_height: ($popup-pointer__height * 0.5) + px;
$neg_half_pointer_width: (-($popup-pointer__width * 0.5)) + px;
$neg_half_pointer_height: (-($popup-pointer__height * 0.5)) + px;
.esri-popup__pointer {
position: absolute;
width: 0;
height: 0;
}
.esri-popup__pointer-direction {
background-color: $background-color;
@include pointerStyle($popup-pointer__width, $popup-pointer__height);
}
.esri-popup--aligned-top-center .esri-popup__pointer {
top: 100%;
left: 50%;
margin: 0 0 0 $neg_half_pointer_width;
}
.esri-popup--aligned-bottom-center .esri-popup__pointer {
bottom: 100%;
left: 50%;
margin: 0 0 0 $neg_half_pointer_width;
}
.esri-popup--aligned-top-left .esri-popup__pointer {
bottom: $half_pointer_height;
right: $half_pointer_width;
transform: rotate(-45deg);
}
.esri-popup--aligned-bottom-left .esri-popup__pointer {
top: $half_pointer_height;
right: $half_pointer_width;
transform: rotate(45deg);
}
.esri-popup--aligned-top-right .esri-popup__pointer {
bottom: $half_pointer_height;
left: $half_pointer_width;
transform: rotate(45deg);
}
.esri-popup--aligned-bottom-right .esri-popup__pointer {
top: $half_pointer_height;
left: $half_pointer_width;
transform: rotate(-45deg);
}
.esri-popup--aligned-top-center .esri-popup__pointer-direction,
.esri-popup--aligned-bottom-center .esri-popup__pointer-direction {
transform: scale($popup-pointer__scale-x, $popup-pointer__scale-y) rotate(45deg);
}
.esri-popup--aligned-top-left .esri-popup__pointer-direction,
.esri-popup--aligned-bottom-left .esri-popup__pointer-direction,
.esri-popup--aligned-top-right .esri-popup__pointer-direction,
.esri-popup--aligned-bottom-right .esri-popup__pointer-direction {
top: $neg_half_pointer_height;
left: $neg_half_pointer_width;
transform: scale($popup-pointer__scale-x--corner, $popup-pointer__scale-y--corner) rotate(45deg);
}
.esri-popup--aligned-top-center .esri-popup__pointer-direction {
top: $neg_half_pointer_height;
left: 0;
}
.esri-popup--aligned-bottom-center .esri-popup__pointer-direction {
bottom: $neg_half_pointer_height;
left: 0;
} ///////////////////
// SCREEN SIZES
// WIDTHS
.esri-view-width-xlarge {
.esri-popup__main-container {
width: $main-container__width--xlarge;
}
}
.esri-view-width-large {
.esri-popup__main-container {
width: $main-container__width--large;
}
}
.esri-view-width-less-than-large .esri-popup__action-text {
display: none;
}
.esri-view-width-medium {
.esri-popup__main-container {
width: $main-container__width--medium;
}
}
.esri-view-width-less-than-medium {
.esri-popup__main-container {
width: $main-container__width--less-than-medium;
}
}
.esri-view-width-xsmall .esri-popup__button[class*="esri-popup__navigation-"],
.esri-view-width-xsmall .esri-popup__pagination-page-text {
display: none;
}
.esri-view-width-xsmall .esri-popup--is-docked-bottom-center {
margin-bottom: $docked-margin + 1;
}
.esri-view-width-xsmall .esri-popup--is-docked-top-center,
.esri-view-width-xsmall .esri-popup--is-docked-bottom-center {
width: auto;
margin: 0;
}
.esri-view-width-xsmall .esri-popup--is-docked-top-center,
.esri-view-width-xsmall .esri-popup--is-docked-bottom-center {
.esri-popup__main-container {
width: 100%;
max-height: 75%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
&.esri-popup--feature-menu-open {
.esri-popup__main-container:before {
visibility: hidden;
}
}
}
.esri-view-width-xsmall .esri-popup--is-docked-bottom-center {
.esri-popup__feature-menu,
.esri-popup__actions {
bottom: $button-height + $cap-spacing--third;
}
} // HEIGHTS
.esri-view-height-xlarge {
@include popupHeight_BasedOnViewSize($main-container__height--xlarge);
}
.esri-view-height-large {
@include popupHeight_BasedOnViewSize($main-container__height--large);
}
.esri-view-height-less-than-medium {
@include popupHeight_BasedOnViewSize($main-container__height--less-than-medium);
} // SCREEN SIZES
///////////////////
///////////////////
// DOCKED
.esri-popup--is-docked {
left: 0;
bottom: 0;
right: 0;
top: 0;
margin: $docked-margin $docked-margin $docked-margin--double $docked-margin;
animation: esri-docking-animation 250ms ease-out;
}
.esri-ui .esri-popup--is-docked {
flex-flow: row nowrap;
}
.esri-popup--is-docked-top-left,
.esri-popup--is-docked-top-center,
.esri-popup--is-docked-top-right {
align-items: flex-start;
.esri-popup__header {
padding-top: 2px;
}
}
.esri-popup--is-docked-bottom-left,
.esri-popup--is-docked-bottom-center,
.esri-popup--is-docked-bottom-right {
align-items: flex-end;
}
.esri-popup--is-docked-top-left,
.esri-popup--is-docked-bottom-left {
justify-content: flex-start;
}
.esri-popup--is-docked-top-center,
.esri-popup--is-docked-bottom-center {
justify-content: center;
}
.esri-popup--is-docked-top-right,
.esri-popup--is-docked-bottom-right {
justify-content: flex-end;
}
.esri-popup--is-docked-top-left .esri-popup__main-container,
.esri-popup--is-docked-top-right .esri-popup__main-container,
.esri-popup--is-docked-bottom-left .esri-popup__main-container,
.esri-popup--is-docked-bottom-right .esri-popup__main-container {
max-height: 80%;
}
.esri-popup--is-docked-top-center .esri-popup__main-container,
.esri-popup--is-docked-bottom-center .esri-popup__main-container {
max-height: 40%;
}
// DOCKED
////////////////////
////////////////////
// RTL
[dir="rtl"] {
.esri-widget .esri-popup__header-title,
.esri-popup__header-title {
margin: $cap-spacing--half $side-spacing--half $cap-spacing--half auto;
}
.esri-popup__header-buttons {
margin: 0 auto 0 0;
}
.esri-popup__feature-menu-title {
border-left: none;
border-right: solid 1px rgba(0, 0, 0, 0.25);
}
.esri-popup__pagination-icon {
transform: rotate(180deg);
}
.esri-popup__actions {
right: auto;
left: 0;
}
.esri-popup--is-docked .esri-popup__loading-container {
order: 0;
}
.esri-popup--is-docked-top-left,
.esri-popup--is-docked-bottom-left {
justify-content: flex-end;
}
.esri-popup--is-docked-top-right,
.esri-popup--is-docked-bottom-right {
justify-content: flex-start;
}
} // RTL
////////////////////
}
@keyframes esri-docking-animation {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes popup-intro-animation-down {
0% {
transform: translate(0, -5px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes popup-intro-animation-up {
0% {
transform: translate(0, 5px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@if $include_Popup==true {
@include popup();
}

269
public/assets/esri/themes/base/widgets/_Print.scss Normal file
View file

@ -0,0 +1,269 @@
@mixin print() {
.esri-print {
position: relative;
padding: $cap-spacing $side-spacing;
overflow-y: auto;
section[aria-hidden="true"] {
display: none;
}
}
.esri-print__form-section-container {
margin: 0 0 $cap-spacing 0;
}
.esri-print__header-title {
font-size: $font-size__header-text;
font-weight: $font-weight--bold;
padding: 0 0 $cap-spacing;
margin: 0 auto 0 0;
}
.esri-print__template-list {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.33);
border-radius: $border-radius;
display: flex;
flex-direction: column;
padding: 0;
width: 280px;
.esri-widget__heading,
&-footer {
margin: 0;
padding: $cap-spacing $side-spacing;
flex: 1 0 auto;
}
&-scroller {
max-height: 175px;
overflow-y: auto;
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
}
.esri-menu__list-item {
font-size: $font-size__body;
}
}
.esri-print__layout-section,
.esri-print__map-only-section {
padding: $cap-spacing 0 0;
margin-bottom: $cap-spacing;
border-top: 1px solid $border-color;
}
.esri-print__layout-tab-list {
position: relative;
bottom: -1px;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
.esri-print__layout-tab {
display: inline-block;
text-align: center;
margin: 0;
padding: 5px 5px;
width: 100%;
cursor: pointer;
color: $interactive-font-color;
border: 1px solid rgba(0, 0, 0, 0);
}
.esri-print__layout-tab:hover,
.esri-print__layout-tab:focus {
color: $font-color;
background-color: $background-color--hover;
border-bottom: 1px solid $border-color;
}
.esri-print__layout-tab[aria-selected="true"],
.esri-print__layout-tab[aria-selected="true"]:hover {
background-color: $background-color;
color: $font-color;
border-color: $border-color;
border-bottom-color: $background-color;
}
.esri-print__panel--error {
color: $font-color--error;
}
.esri-print__panel-container {
flex: 1 0;
}
.esri-print__input-text {
width: 100%;
margin: 0;
}
.esri-print__scale-input-container {
display: flex;
align-items: center;
}
.esri-print__advanced-options-section {
background-color: $background-color--offset;
color: $interactive-font-color;
}
.esri-print__advanced-options-button-container {
color: $interactive-font-color;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: transparent;
width: 100%;
overflow: visible;
}
.esri-print__advanced-options-button {
border: none;
cursor: pointer;
font-family: inherit;
padding: $cap-spacing--half $side-spacing--half;
width: 100%;
background-color: transparent;
}
.esri-print__advanced-options-button[aria-expanded="true"] .esri-print__advanced-options-button-icon--closed,
.esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--opened,
.esri-print__advanced-options-button .esri-print__advanced-options-button-icon--closed-rtl {
display: none;
}
.esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed,
.esri-print__advanced-options-button[aria-expanded="true"] .esri-print__advanced-options-button-icon--opened {
display: block;
}
.esri-print__advanced-options-button-title {
font-size: $font-size--small;
margin: 0 $side-spacing--quarter;
}
.esri-print__advanced-options-container {
font-size: $font-size--small;
padding: $cap-spacing--half $side-spacing--half;
.esri-print__form-section-container {
margin-bottom: $cap-spacing--half;
}
}
.esri-print__size-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.esri-print__advanced-options-section {
@include icomoonIconSelector() {
background: transparent;
}
}
.esri-print__size-container {
@include icomoonIconSelector() {
background: transparent;
}
}
.esri-print__size-container {
@include icomoonIconSelector() {
align-self: flex-end;
}
}
.esri-print__size-container button {
color: $interactive-font-color;
}
.esri-print__width-container,
.esri-print__height-container {
flex: 0 0 43%;
}
.esri-print__swap-button {
flex: 0 0 5%;
border: none;
}
.esri-print__refresh-button {
border: 1px solid $border-color;
border-left-width: 0;
}
.esri-print__export-button,
.esri-print__template-button {
margin: $cap-spacing--half 0;
}
.esri-print__export-panel-container {
font-size: $font-size--small;
border-top: 1px solid #ddd;
padding: $cap-spacing 0;
}
.esri-print__export-panel-container {
@include icomoonIconSelector() {
margin-right: 0.5em;
margin-top: 0.15em;
}
}
.esri-print__exported-file-link-title {
@include wordbreak();
}
.esri-print__exported-file-link {
color: $interactive-font-color;
display: flex;
align-items: flex-start;
margin-bottom: $cap-spacing--half;
text-decoration: none;
&:hover {
color: $interactive-font-color--hover;
}
}
.esri-print__exported-file--error {
color: $font-color--error;
cursor: pointer;
}
.esri-print .esri-print__exported-file--error:hover {
color: $font-color--error;
}
.esri-print__loader {
height: 40px;
width: 32px;
background: url(../base/images/loading-throb.gif) no-repeat center;
margin: 0 auto;
}
[dir="rtl"] {
.esri-print__refresh-button {
border-left-width: 1px;
border-right-width: 0;
}
.esri-print__export-panel-container {
@include icomoonIconSelector() {
margin-right: 0;
margin-left: 0.5em;
}
}
.esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed {
display: none;
}
.esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed-rtl {
display: block;
}
}
}
@if $include_Print == true {
@include print();
}

40
public/assets/esri/themes/base/widgets/_SaveLayer.scss Normal file
View file

@ -0,0 +1,40 @@
@mixin saveLayer() {
.esri-save-layer {
width: 300px;
height: 250px;
&__error {
align-items: center;
display: flex;
flex-direction: column;
}
&__error-icon {
color: var(--calcite-ui-danger);
margin-bottom: 0.3rem;
margin-top: 3rem;
}
&__process-loader {
padding-bottom: 2rem;
padding-top: 3rem;
}
&__process-label,
&__error-label {
margin-inline: 0.5rem;
}
&__layer-name-label {
margin: 0.5rem 0.5rem 0rem 0.5rem;
}
&__portal-folder-label {
margin: 0.5rem 0.5rem 0.25rem 0.5rem;
}
}
}
@if $include_SaveLayer==true {
@include saveLayer();
}

160
public/assets/esri/themes/base/widgets/_ScaleBar.scss Normal file
View file

@ -0,0 +1,160 @@
@mixin scaleBar() {
$dark_color: $font-color;
$light_color: $background-color;
$block_width: 25%;
$block_height: 50%;
$line_thickness: 2px;
$tic_height: 1.5em;
$offset_for_unit_label: 2ch;
$border_style: $line_thickness solid $dark_color;
.esri-scale-bar.esri-widget {
background: transparent;
box-shadow: none;
}
.esri-scale-bar__bar-container {
position: relative;
display: flex;
align-items: flex-end;
transition: width 250ms ease-in-out;
font-size: $font-size--small;
}
.esri-scale-bar__bar-container--ruler {
flex-direction: column;
}
.esri-scale-bar__bar-container--line:last-child {
align-items: flex-start;
}
.esri-scale-bar__ruler {
display: flex;
flex-wrap: wrap;
height: 6px;
background-color: $light_color;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.33), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.esri-scale-bar__ruler-block {
height: $block_height;
width: $block_width;
background-color: $dark_color;
}
// top row
.esri-scale-bar__ruler-block:nth-child(-n + 2) {
margin-right: 25%;
}
// bottom row
.esri-scale-bar__ruler-block:nth-child(n + 3) {
margin-left: 25%;
}
.esri-scale-bar__line {
position: relative;
height: $tic_height;
background-color: rgba($background-color, 0.33);
left: 0;
z-index: 1;
}
.esri-scale-bar__line--top {
bottom: -1px;
border-bottom: $border_style;
}
.esri-scale-bar__line--bottom {
top: floor($line_thickness * 0.5) * -1;
border-top: $border_style;
}
// tics
.esri-scale-bar__line--top:before,
.esri-scale-bar__line--top:after,
.esri-scale-bar__line--bottom:before,
.esri-scale-bar__line--bottom:after {
content: "";
display: block;
width: $line_thickness;
height: $tic_height;
background-color: $dark_color;
position: absolute;
border-right: $border_style;
}
.esri-scale-bar__line--top:before {
bottom: -$line_thickness;
left: 0;
}
.esri-scale-bar__line--top:after {
bottom: -$line_thickness;
right: 0;
}
.esri-scale-bar__line--bottom:before {
top: -$line_thickness;
left: 0;
}
.esri-scale-bar__line--bottom:after {
height: $tic_height;
top: -$line_thickness;
right: 0;
}
.esri-scale-bar__label-container--line {
position: absolute;
left: 0;
z-index: 1;
}
.esri-scale-bar__label-container--ruler {
display: flex;
width: 100%;
justify-content: space-between;
position: relative;
.esri-scale-bar__label {
padding: $cap-spacing--half 0 0;
text-shadow: 0 0 1px $light_color, 0 0 1px $light_color, 0 0 1px $light_color;
}
}
.esri-scale-bar__label-container--top {
bottom: 0;
}
.esri-scale-bar__label-container--bottom {
top: floor($line_thickness * 0.5);
}
.esri-scale-bar__label {
font-size: inherit;
color: $dark_color;
white-space: nowrap;
padding: 0 $side-spacing--half;
font-weight: $font-weight--bold;
}
[dir="rtl"] {
.esri-scale-bar__ruler {
margin: 0 ($offset_for_unit_label * 0.25) 0 $offset_for_unit_label;
}
.esri-scale-bar__label-container--line {
left: auto;
right: 0;
}
}
}
@if $include_ScaleBar == true {
@include scaleBar();
}

216
public/assets/esri/themes/base/widgets/_ScaleRangeSlider.scss Normal file
View file

@ -0,0 +1,216 @@
@mixin scaleRangeSlider() {
$slider-track-thickness: 2px;
$slider-bounds-offset: 9px;
$scale-indicator-half-size: 4px;
$slider-dash-size: 5px;
$slider-dash-color: rgba(255, 255, 255, 0.75);
.esri-scale-range-slider {
background-color: transparent;
min-width: 310px;
position: relative;
display: flex;
flex-direction: column;
.esri-slider {
background-color: transparent;
// account for thumbs in wrapper
padding: $slider-bounds-offset ($slider-bounds-offset + 2) $slider-bounds-offset $slider-bounds-offset;
&__segment-1 {
// active scale range segment
background-color: $button-color;
height: 4px;
}
// out-of-bounds range segments
.esri-slider__effective-min-segment,
.esri-slider__effective-max-segment {
height: 100%;
display: block;
content: " ";
background: repeating-linear-gradient(
to right,
$slider-dash-color 0,
$slider-dash-color $slider-dash-size,
transparent $slider-dash-size,
transparent ($slider-dash-size * 2)
);
}
}
&.esri-widget {
box-shadow: none;
}
&.esri-disabled {
opacity: $opacity--disabled;
pointer-events: none;
user-select: none;
}
}
.esri-scale-range-slider__scale-indicator-container {
position: absolute;
left: $slider-bounds-offset;
right: $slider-bounds-offset + 2;
}
.esri-scale-range-slider__scale-indicator {
top: $slider-track-thickness + $slider-bounds-offset;
margin-left: -$scale-indicator-half-size;
width: 1px;
position: relative;
transition-property: left;
transition-duration: 0.2s;
}
.esri-scale-range-slider__scale-indicator-icon {
fill: #323232;
}
.esri-scale-range-slider__scale-menu-container {
margin-top: $cap-spacing;
display: flex;
width: 100%;
justify-content: space-between;
}
.esri-scale-range-slider__scale-menu-toggle {
color: $button-color;
cursor: pointer;
background-color: transparent;
border: none;
font-size: $font-size;
white-space: nowrap;
max-width: 48%;
display: flex;
&[data-type="min"] {
margin-inline-end: auto;
}
&[data-type="max"] {
margin-inline-start: auto;
}
}
.esri-scale-range-slider__scale-menu-toggle--active {
font-weight: $font-weight--bold;
}
.esri-scale-range-slider__scale-menu-toggle-text {
text-overflow: ellipsis;
overflow-x: hidden;
}
.esri-scale-range-slider__scale-menu-toggle-icon {
font-size: $font-size--small;
margin: 0 $side-spacing--half;
}
.esri-scale-range-slider__scale-preview {
display: inline-flex;
flex-direction: column;
background-color: $background-color;
padding: $cap-spacing--half $side-spacing--half;
@include defaultBoxShadow();
}
.esri-scale-range-slider__scale-preview-thumbnail {
display: block;
box-sizing: border-box;
/*
workaround to prevent webkit from adding a border
padding: 64px;
instead of
height: 128px;
width: 128px;
see: http://stackoverflow.com/questions/4743127/chrome-safari-display-border-around-image
*/
padding: 64px;
}
.esri-scale-range-slider__scale-menu {
@include defaultBoxShadow();
font-family: $font-family;
font-size: $font-size;
border-radius: $border-radius;
background-color: $background-color;
color: $font-color;
}
.esri-scale-range-slider__scale-menu-list {
min-width: 200px;
padding: $cap-spacing--half 0;
margin: 0;
display: flex;
flex-direction: column;
list-style-type: none;
}
.esri-scale-range-slider__scale-menu-item {
align-items: center;
display: flex;
padding: $cap-spacing--half $side-spacing--half;
margin: 0;
cursor: pointer;
}
.esri-scale-range-slider__scale-menu-item-content {
display: flex;
justify-content: flex-start;
flex-direction: column;
flex: 0 1 auto;
}
.esri-scale-range-slider__scale-menu-item:hover,
.esri-scale-range-slider__scale-menu-item:focus {
background-color: $background-color--hover;
}
.esri-scale-range-slider__scale-menu-scroller {
max-height: 450px;
overflow-y: auto;
overflow-x: hidden;
}
.esri-scale-range-slider__scale-item-label {
margin: 0;
padding-bottom: $cap-spacing--third;
padding-inline-end: $side-spacing;
word-break: break-all;
cursor: inherit;
}
.esri-scale-range-slider__scale-menu-item-icon {
color: transparent;
}
.esri-scale-range-slider__scale-menu-item--active {
.esri-scale-range-slider__scale-menu-item-icon {
color: $button-color;
}
}
.esri-scale-range-slider__scale-menu-item:hover {
.esri-scale-range-slider__scale-menu-item-icon {
color: $interactive-font-color--disabled;
}
}
.esri-scale-range-slider__scale-item-value {
color: $interactive-font-color;
font-size: $font-size--small;
margin-block-start: $cap-spacing--eighth;
word-break: break-all;
}
}
@if $include_ScaleRangeSlider == true {
@include scaleRangeSlider();
}

193
public/assets/esri/themes/base/widgets/_Search.scss Normal file
View file

@ -0,0 +1,193 @@
$search_width: 240px !default;
@mixin clearBorders($exception-side: "", $exception-value: "") {
$border-sides: top, right, bottom, left;
@each $border-side in $border-sides {
@if $border-side == $exception-side {
border-#{$exception-side}: $exception-value;
} @else {
border-#{$border-side}: none;
}
}
}
@mixin search() {
.esri-search {
width: $search_width;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
overflow: visible;
.esri-widget--button {
box-shadow: none;
}
.esri-icon-notice-triangle {
font-size: 16px;
line-height: 16px;
margin-inline-end: 5px;
vertical-align: text-bottom;
}
.esri-widget__loader {
align-items: center;
display: flex;
justify-content: center;
min-height: $button-height;
}
.esri-widget__loader-text {
margin: 0 $side-spacing--third;
}
}
.esri-search__container,
.esri-search__input-container,
.esri-search__form {
display: flex;
flex-flow: row nowrap;
}
.esri-search__container {
position: relative;
align-items: stretch;
flex: 1 0 100%;
.esri-search__input,
.esri-widget--button {
z-index: 0;
}
.esri-search__input:focus,
.esri-widget--button:focus {
z-index: 1;
}
}
@include loopingProgressBar(".esri-search--searching");
.esri-search__input-container {
align-items: stretch;
flex: 2 0;
}
.esri-search__form {
padding: 0;
margin: 0;
align-items: stretch;
flex: 1 0;
}
.esri-search__input {
display: block;
width: 100%;
margin: 0;
border: none;
box-shadow: none;
}
.esri-search__input::-ms-clear {
display: none;
}
.esri-search__input::-moz-placeholder {
color: $font-color--placeholder;
opacity: 1;
}
.esri-search__input:-ms-input-placeholder {
color: $font-color--placeholder;
}
.esri-search__input::-webkit-input-placeholder {
color: $font-color--placeholder;
}
.esri-search__submit-button,
.esri-search__sources-button {
cursor: pointer;
align-self: flex-end;
}
.esri-search__submit-button {
@include clearBorders(left, solid 1px $border-color);
}
.esri-search__sources-button {
@include clearBorders(right, solid 1px $border-color);
}
.esri-search__sources-button--up {
display: none;
}
.esri-search__clear-button {
@include clearBorders();
align-self: flex-end;
display: flex;
}
.esri-search__source-name {
clip: rect(0 0 0 0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
.esri-search__suggestions-menu {
@include icomoonIconSelector() {
vertical-align: middle;
}
}
.esri-search__suggestions-menu .esri-menu__header:first-child,
.esri-search__suggestions-menu ul:first-child {
border: none;
}
.esri-search--show-suggestions .esri-search__suggestions-menu,
.esri-search--sources .esri-search__sources-menu {
overflow: auto;
visibility: visible;
max-height: 300px;
animation: esri-fade-in 250ms ease-out;
}
.esri-search__source--active {
background-color: $background-color--active;
}
.esri-search--warning .esri-search__warning-menu {
transition: opacity 125ms ease-in-out;
visibility: visible;
opacity: 1;
max-height: inherit;
}
.esri-search__sources-button {
display: flex;
}
.esri-search--multiple-sources .esri-search__input {
border-left: 0;
}
.esri-search__warning-menu {
z-index: 1;
font-size: 14px;
opacity: 0;
}
.esri-search__warning-body {
padding: 0.8em 1em;
}
.esri-search__warning-header {
font-weight: $font-weight--bold;
margin-bottom: 5px;
}
.esri-ui-bottom-left,
.esri-ui-bottom-right {
.esri-search__sources-button--up {
display: flex;
}
.esri-search__sources-button--down {
display: none;
}
}
.esri-view-width-less-than-small .esri-search__input {
font-size: 16px;
}
[dir="rtl"] {
.esri-search__submit-button {
border-left: none;
border-right: solid 1px $border-color;
}
.esri-search__sources-button {
border-right: none;
border-left: solid 1px $border-color;
}
.esri-search__container:after {
animation: looping-progresss-bar-ani $looping-progress-bar-params reverse;
}
}
}
@if $include_Search == true {
@include search();
}

34
public/assets/esri/themes/base/widgets/_SearchResultRenderer.scss Normal file
View file

@ -0,0 +1,34 @@
@mixin searchResultRenderer() {
.esri-search-result-renderer {
.esri-search-result-renderer__more-results-header {
font-weight: $font-weight--bold;
margin-bottom: 2px;
}
.esri-search-result-renderer__more-results-item {
margin-bottom: 10px;
}
.esri-search-result-renderer__more-results-list {
display: none;
ul {
list-style: none;
margin: 0 0 10px 0;
padding: 0;
}
li {
padding: 2px 0;
}
}
.esri-search-result-renderer__more-results--show-more-results {
.esri-search-result-renderer__more-results-list {
display: block;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #ccc;
}
}
}
}
@if $include_Search==true {
@include searchResultRenderer();
}

18
public/assets/esri/themes/base/widgets/_SelectionToolbar.scss Normal file
View file

@ -0,0 +1,18 @@
@mixin selectionToolbar() {
$border: 1px solid $border-color;
.esri-selection-toolbar {
display: flex;
flex: 1 1 0;
height: 100%;
width: 100%;
}
.esri-selection-toolbar__container {
display: flex;
}
}
@if $include_SelectionToolbar == true {
@include selectionToolbar();
}

166
public/assets/esri/themes/base/widgets/_ShadowCast.scss Normal file
View file

@ -0,0 +1,166 @@
@mixin shadowCast() {
$width: 200;
$slider-thumb-size: 8px;
$tooltip-arrow-size: 8px;
.esri-shadow-cast {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
width: $width;
padding: $cap-spacing $side-spacing;
gap: $cap-spacing;
&__time-range {
display: flex;
flex-direction: column;
font-size: $font-size--tiny-time-slider;
@include timeSlider();
.esri-slider__segment-1 {
background: $border-color--active;
}
.esri-slider.esri-slider--horizontal {
padding-top: $slider-thumb-size;
padding-bottom: 42px;
}
&__indicator {
display: flex;
justify-content: center;
align-items: center;
gap: $side-spacing--eighth;
margin-bottom: $cap-spacing--half;
}
}
&__date-picker-container:not(:first-of-type) {
margin-top: $cap-spacing;
}
&__date-picker-container .esri-date-picker {
display: block;
flex-grow: 1;
}
&__visualization {
display: flex;
flex-direction: column;
margin-top: $cap-spacing;
&__select {
margin-bottom: $cap-spacing;
}
&__config--hidden {
display: none;
}
}
&__threshold-config,
&__duration-config,
&__discrete-config {
display: flex;
flex-direction: column;
gap: $cap-spacing;
calcite-label {
// Don't make the labels full width so that one can't click in white space to focus elements.
width: max-content;
max-width: 100%;
display: block;
// Labels shouldn't really be focusable, but we had to make the color
// picker label focusable with tabindex=-1 (not tabbable). Without it,
// Safari does not include the label in FocusEvent.relatedTarget which
// we use to determine whether the color picker popover should be closed
// right away or not.
&:focus,
&:focus-visible {
outline: none;
}
}
}
&__threshold-config {
.esri-slider {
// Fit slider content since default API slider doesn't do it for us.
padding-top: $slider-thumb-size;
padding-inline: $slider-thumb-size;
padding-bottom: 25px;
.esri-slider__label,
.esri-slider__tick-label {
font-size: $font-size--tiny;
}
// Move labels and ticks up to make slider more compact.
.esri-slider__tick-label {
margin-top: 12px;
}
.esri-slider__tick {
top: -4px;
}
// Mark slider area above the threshold
.esri-slider__segment-1 {
background: $border-color--active;
}
}
}
&__duration-config {
&__radio-group {
display: flex;
flex-direction: row;
align-items: center;
calcite-button {
height: 35px; // Match height of `<calcite-select>`
}
}
}
&__tooltip {
font-size: $font-size--small;
color: $font-color;
&__content {
position: absolute;
width: max-content;
padding: $cap-spacing--half $side-spacing--half;
background: $background-color;
// center horizontally and place it above the mouse pointer
transform: translate(-50%, -100%);
margin-top: -$tooltip-arrow-size - $cap-spacing--third;
// Tooltip arrow
&:after {
position: absolute;
content: "";
display: block;
width: 0;
height: 0;
border-top: $tooltip-arrow-size solid $background-color;
border-bottom: $tooltip-arrow-size solid transparent;
border-right: $tooltip-arrow-size solid transparent;
border-left: $tooltip-arrow-size solid transparent;
// Place arrow below the tooltip
bottom: 1px; // make the arrow overlap so the "seam" isn't noticeable
left: 50%;
transform: translate(-50%, 100%);
}
}
}
}
}
@if $include_ShadowCast==true {
@include shadowCast();
}

7
public/assets/esri/themes/base/widgets/_SizeSlider.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin sizeSlider() {
@include smartMappingSlider(esri-size-slider);
}
@if $include_SizeSlider == true {
@include sizeSlider();
}

154
public/assets/esri/themes/base/widgets/_Sketch.scss Normal file
View file

@ -0,0 +1,154 @@
@mixin sketch() {
$border: 1px solid $border-color;
.esri-sketch {
display: flex;
flex-flow: column wrap;
.esri-snapping-controls__panel {
display: flex;
width: auto;
}
}
.esri-expand__content {
.esri-sketch {
width: max-content;
}
}
.esri-sketch__menu-header {
margin: $cap-spacing--half;
border-bottom: $border;
display: flex;
align-items: center;
}
.esri-sketch__menu-title {
flex: 1 1 auto;
overflow: hidden;
}
.esri-sketch__panel {
align-items: center;
display: flex;
flex-flow: row wrap;
padding: 0;
}
.esri-sketch__info-panel {
background-color: $background-color--offset;
opacity: 1;
transition: opacity 250ms ease-in-out;
&:empty {
opacity: 0;
padding: 0;
visibility: hidden;
}
}
.esri-sketch__menu-container {
background-color: $background-color;
display: flex;
flex-flow: column;
flex: 1 1 auto;
flex-direction: column;
margin: $cap-spacing--half;
}
.esri-sketch__section {
align-items: center;
display: flex;
flex-flow: row wrap;
padding: 0 $side-spacing--half;
margin: $cap-spacing--half 0;
}
.esri-sketch__tool-section {
border-right: $border;
&:last-child {
border-right: none;
}
}
.esri-sketch__action-toggle--on .esri-sketch__item-action-icon {
// Toggle on
background-color: $button-color;
box-shadow: 0 0 0 1px $button-color;
&:before {
background-color: $interactive-font-color--inverse;
left: $toggle-handle-size;
}
}
.esri-sketch__feature-count-badge {
align-items: center;
background: $background-color;
border-bottom: $border;
border-radius: $border-radius;
display: flex;
font-size: $font-size--small;
justify-content: center;
margin: 0;
padding: 0.25em 0.75em;
}
[dir="rtl"] {
.esri-sketch__tool-section {
border-left: $border;
border-right: none;
&:last-child {
border: none;
}
}
.esri-expand__content {
.esri-sketch--vertical {
.esri-sketch__tool-section {
border-left: none;
border-right: none;
}
}
}
}
.esri-sketch--vertical {
flex-flow: row-reverse;
.esri-sketch__panel {
flex-flow: column;
}
.esri-sketch__section {
flex-flow: column;
padding-left: 0;
padding-right: 0;
margin-left: $side-spacing--half;
margin-right: $side-spacing--half;
}
.esri-sketch__tool-section {
border-right: none;
border-bottom: $border;
&:last-child {
border-bottom: none;
}
}
.esri-sketch__info-panel {
&:empty {
padding: 0;
}
}
.esri-sketch__info-section {
margin-top: $cap-spacing--quarter;
width: $button-width;
}
.esri-selection-toolbar__container {
flex-direction: column;
}
}
}
@if $include_Sketch == true {
@include sketch();
}

10
public/assets/esri/themes/base/widgets/_SketchTooltipControls.scss Normal file
View file

@ -0,0 +1,10 @@
@mixin sketchTooltipControls() {
.esri-sketch-tooltip-controls {
display: flex;
flex-flow: column wrap;
}
}
@if $include_SketchTooltipControls == true {
@include sketchTooltipControls();
}

80
public/assets/esri/themes/base/widgets/_Slice.scss Normal file
View file

@ -0,0 +1,80 @@
@mixin slice() {
.esri-slice {
flex-shrink: 0;
&__container {
position: relative;
padding: $cap-spacing 0;
overflow-y: auto;
a {
text-decoration: none;
}
}
&__hint {
padding: 0 $side-spacing;
animation: esri-fade-in 250ms ease-in-out;
}
&__hint-text {
margin: $cap-spacing 0;
padding: 0;
}
&__exclude-button {
margin-bottom: $cap-spacing;
}
&__settings {
ul {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
}
li {
list-style: none;
}
padding: $cap-spacing--half $side-spacing $cap-spacing $side-spacing;
animation: esri-fade-in 250ms ease-in-out;
}
&__layer-item {
display: flex;
align-items: center;
white-space: nowrap;
gap: $side-spacing--half;
&__title {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&__cross {
color: inherit;
position: relative;
}
&__panel--error {
color: $font-color--error;
padding: 0 $side-spacing;
animation: esri-fade-in 250ms ease-in-out;
}
&__actions {
display: flex;
flex-flow: column;
justify-content: center;
padding: 0 $side-spacing;
}
}
}
@if $include_Slice == true {
@include slice();
}

367
public/assets/esri/themes/base/widgets/_Slider.scss Normal file
View file

@ -0,0 +1,367 @@
@mixin slider() {
$slider-track-thickness: 2px !default;
$slider-anchor-thickness: 1px !default;
$slider-tick-thickness: 1px !default;
$slider-tick-length: 5px !default;
$slider-ticks-z-index: 0;
$slider-thumb-size: 16px !default;
$slider-thumb-offset: ($slider-thumb-size * 0.5) - 1 !default;
$slider-thumb-hover-scale: 1.2 !default;
$slider-thumb-size--hover: $slider-thumb-size * $slider-thumb-hover-scale !default;
$slider-thumb-offset--hover: ($slider-thumb-size--hover * 0.5) - 1 !default;
.esri-slider {
direction: ltr;
display: flex;
height: 100%;
width: 100%;
-webkit-user-select: none;
user-select: none;
}
.esri-disabled {
.esri-slider__content,
.esri-slider__min,
.esri-slider__max {
opacity: 0.4;
}
.esri-slider__thumb {
&:hover {
transform: none;
border-color: $button-color;
cursor: default;
}
}
.esri-slider__label {
&:hover {
cursor: default;
}
}
.esri-slider__segment {
&:hover {
cursor: default;
}
}
.esri-slider {
&--horizontal,
&--vertical {
.esri-slider__segment--interactive {
&:hover {
cursor: default;
}
}
}
}
}
.esri-slider--reversed.esri-slider--horizontal {
flex-direction: row-reverse;
}
.esri-slider--reversed.esri-slider--vertical {
flex-direction: column;
}
.esri-slider--horizontal {
flex-direction: row;
.esri-slider__content {
height: auto;
}
.esri-slider__track {
height: $slider-track-thickness;
width: 100%;
}
.esri-slider__segment--interactive {
&:hover {
cursor: ew-resize;
}
}
.esri-slider__anchor {
height: 100%;
width: $slider-anchor-thickness;
}
.esri-slider__label {
left: -50px;
margin: 0 $side-spacing--three-quarters;
top: -30px;
text-align: center;
}
.esri-slider__label-input {
text-align: center;
}
.esri-slider__max,
.esri-slider__min {
flex: 0 0 auto;
margin: auto;
height: auto;
width: 50px;
}
.esri-slider__ticks {
left: 0;
margin: $cap-spacing--three-quarters 0 0 0;
top: 100%;
width: 100%;
}
.esri-slider__tick {
height: $slider-tick-length;
width: $slider-tick-thickness;
}
.esri-slider__tick-label {
margin-top: $cap-spacing--plus-half;
}
}
.esri-slider--vertical {
flex-direction: column-reverse;
.esri-slider__content {
flex-direction: column;
width: auto;
}
.esri-slider__track {
flex: 1 0 0px;
flex-direction: column;
height: 100%;
width: $slider-track-thickness;
}
.esri-slider__segment--interactive {
&:hover {
cursor: ns-resize;
}
}
.esri-slider__anchor {
height: $slider-anchor-thickness;
width: 100%;
}
.esri-slider__label {
left: 20px;
text-align: left;
top: -10px;
}
.esri-slider__max,
.esri-slider__min {
margin: auto;
width: 100%;
}
.esri-slider__max {
flex: 0 0 22px;
}
.esri-slider__min {
flex: 0 0 22px;
}
.esri-slider__ticks {
left: 100%;
margin: 0 0 0 $side-spacing--three-quarters;
top: 0;
}
.esri-slider__tick {
height: $slider-tick-thickness;
width: $slider-tick-length;
}
.esri-slider__tick-label {
margin-left: 30px;
}
}
.esri-slider__content {
display: flex;
flex: 1 0 auto;
line-height: 0;
margin: auto;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
}
.esri-slider__track {
background-color: $border-color--contrast;
display: inline-block;
touch-action: none;
position: relative;
}
.esri-slider__segment {
height: 100%;
left: 0;
position: absolute;
top: 0;
touch-action: none;
transform-origin: 0 0;
width: 100%;
will-change: transform;
&:hover {
cursor: pointer;
}
}
.esri-slider__anchor {
background-color: $background-color--inverse;
position: absolute;
touch-action: none;
-webkit-user-select: none;
user-select: none;
&:focus {
.esri-slider__thumb,
.esri-slider__label {
outline: inherit;
}
}
}
.esri-slider__anchor--moving {
.esri-slider__label {
&:hover {
cursor: grabbing;
}
}
.esri-slider__label--interactive {
&:hover {
cursor: grabbing;
}
}
&:focus {
.esri-slider__thumb {
border: 3px solid $button-color--hover;
cursor: grabbing;
}
}
}
.esri-slider__thumb {
background-color: $background-color;
border: 2px solid $button-color;
border-radius: $slider-thumb-size;
height: $slider-thumb-size;
left: -$slider-thumb-offset;
position: absolute;
top: -$slider-thumb-offset;
touch-action: none;
width: $slider-thumb-size;
transition: all 125ms ease-in-out;
z-index: $slider-ticks-z-index + 1; // Make sure the thumb goes on top of the ticks
&:hover {
border-color: $button-color--hover;
border-width: 3px;
height: $slider-thumb-size--hover;
left: -$slider-thumb-offset--hover;
top: -$slider-thumb-offset--hover;
width: $slider-thumb-size--hover;
cursor: pointer; // Fallback for IE11
cursor: grab;
}
}
.esri-slider__label {
line-height: 22px;
min-width: 80px;
position: absolute;
&:hover {
cursor: pointer; // Fallback for IE11
cursor: grab;
}
}
.esri-slider__label--interactive,
.esri-slider__max--interactive,
.esri-slider__min--interactive {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
.esri-slider__label-input {
position: relative;
width: 100%;
z-index: $slider-ticks-z-index + 1;
}
.esri-slider__extra-content {
display: inline-block;
}
.esri-slider__max,
.esri-slider__min {
height: 22px;
line-height: 22px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.esri-slider__max--interactive,
.esri-slider__min--interactive {
&:hover {
background-color: $background-color--offset;
}
}
.esri-slider__range-input {
padding: 1px 0;
text-align: center;
width: 100%;
}
.esri-slider__ticks {
display: inline-block;
height: 100%;
position: absolute;
z-index: $slider-ticks-z-index;
}
.esri-slider__tick {
background: $border-color--contrast;
position: absolute;
}
.esri-slider__tick-label {
position: absolute;
width: max-content;
}
[dir="rtl"] {
.esri-slider__label,
.esri-slider__max,
.esri-slider__min,
.esri-slider__tick-label {
direction: rtl;
unicode-bidi: plaintext;
}
.esri-slider__range-input,
.esri-slider__label-input {
unicode-bidi: plaintext;
}
}
}
/*
#22969 - Focus outline does not appear as expected in Edge
Slider includes thumb/label elements in anchor focus outline when 'handle' is focused
Default browser style for focus outline is not included on parent element in Edge
This means using 'outline: inherit' on thumb/label elements does nothing
... unless we define an outline on the parent
*/
@supports (-ms-ime-align: auto) {
.esri-slider {
&__anchor {
&:focus {
outline: 1px dotted black;
}
}
}
}
@if $include_Slider == true {
@include slider();
}

146
public/assets/esri/themes/base/widgets/_SnappingControls.scss Normal file
View file

@ -0,0 +1,146 @@
@mixin snappingControls() {
$border: 1px solid $border-color;
.esri-snapping-controls__toggle-block {
margin-top: 0;
}
.esri-snapping-controls__layer-list-block {
border-bottom: none;
}
.esri-snapping-controls__layer-list {
overflow: auto;
max-height: 220px;
&__filter {
margin-bottom: 10px;
}
&__button {
margin-bottom: 6px;
}
&__item {
calcite-accordion-item,
calcite-action {
calcite-icon {
margin-inline-start: 0;
}
}
calcite-icon {
color: var(--calcite-ui-brand);
margin-inline-start: var(--calcite-list-item-spacing-indent);
}
}
}
.esri-snapping-controls {
display: flex;
flex-flow: column wrap;
}
.esri-snapping-controls__container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.esri-snapping-controls__panel {
width: 320px;
}
.esri-snapping-controls__item {
@include cardBoxShadow();
padding: 3px;
background-color: $background-color;
cursor: pointer;
margin: 3px 0;
border: $border;
border-color: transparent;
border-radius: 2px;
display: flex;
justify-content: space-between;
transition: border-color 125ms ease-in-out;
}
.esri-snapping-controls__item-action-icon {
flex: 0 0 $icon-size;
font-size: $icon-size;
display: inline-block;
width: $icon-size;
height: $icon-size;
margin-top: 0.1em;
}
.esri-snapping-controls__action-toggle {
align-items: flex-start;
border: 1px solid transparent;
cursor: pointer;
display: flex;
flex-flow: row-reverse;
font-size: $font-size--small;
justify-content: space-between;
margin: 0;
opacity: 1;
padding: $cap-spacing--half $side-spacing;
transition: opacity 250ms ease-in-out 250ms, background-color 250ms ease-in-out;
width: 100%;
.esri-snapping-controls__item-action-title {
margin-left: 0;
}
.esri-snapping-controls__item-action-icon {
background-color: $background-color--hover;
border-radius: $toggle-height;
box-shadow: 0 0 0 1px $interactive-font-color;
flex: 0 0 $toggle-width;
height: $toggle-height;
overflow: hidden;
padding: 0;
position: relative;
transition: background-color 125ms ease-in-out;
width: $icon-size;
&:before {
// Toggle handle. Overrides any icon class
background-color: $interactive-font-color;
box-shadow: 0 0 0 1px $interactive-font-color--inverse;
border-radius: 100%;
content: "";
display: block;
height: $toggle-handle-size;
left: 0;
margin: 2px;
position: absolute;
top: 0;
transition: background-color 125ms ease-in-out, left 125ms ease-in-out;
width: $toggle-handle-size;
}
}
&.esri-disabled-element {
pointer-events: none;
opacity: $opacity--disabled;
}
}
.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon {
// Toggle on
background-color: $button-color;
box-shadow: 0 0 0 1px $button-color;
&:before {
background-color: $interactive-font-color--inverse;
left: $toggle-handle-size;
}
}
.esri-snapping-controls__nested-container {
padding: 0;
padding-inline-start: 1em;
}
}
@if $include_SnappingControls == true {
@include snappingControls();
}

76
public/assets/esri/themes/base/widgets/_Spinner.scss Normal file
View file

@ -0,0 +1,76 @@
$spinner_size: 24px;
@mixin spinner() {
.esri-ui {
.esri-spinner {
background-color: transparent;
box-shadow: none;
padding: 0;
overflow: visible;
width: $spinner_size;
height: $spinner_size;
position: absolute;
left: -999em;
top: -999em;
z-index: 2;
pointer-events: none;
display: none;
opacity: 0;
transform-origin: 0 0;
}
.esri-spinner::before {
position: absolute;
margin: -50% 0 0 -50%;
width: 100%;
height: 100%;
background: url("../base/images/Loading_Indicator_double_32.svg") no-repeat center;
display: block;
content: "";
animation: esri-spinner--rotate-animation 750ms linear infinite;
}
.esri-spinner--start {
display: block;
animation: esri-spinner--start-animation 250ms cubic-bezier(0.17, 0.67, 0.36, 0.99) forwards;
}
.esri-spinner--finish {
display: block;
opacity: 1;
animation: esri-spinner--finish-animation 125ms ease-in forwards;
animation-delay: 75ms;
}
}
}
@keyframes esri-spinner--start-animation {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes esri-spinner--finish-animation {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
@keyframes esri-spinner--rotate-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@if $include_Spinner==true {
@include spinner();
}

116
public/assets/esri/themes/base/widgets/_Swipe.scss Normal file
View file

@ -0,0 +1,116 @@
@mixin swipe() {
$divider-color: $background-color !default;
$divider-size: 4px !default;
.esri-swipe {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
margin: 0;
padding: 0;
background: transparent;
user-select: none;
}
.esri-swipe,
.esri-ui .esri-swipe {
pointer-events: none;
}
.esri-swipe__container {
position: absolute;
margin: 0;
padding: 0;
border: 0;
z-index: 1;
touch-action: none; // needed for touch actions to work correctly
pointer-events: auto;
overflow: hidden; // needed to hide tracers in iOS
outline: 0;
}
.esri-swipe--horizontal .esri-swipe__container {
margin-left: -$button-width--half;
height: 100%;
cursor: col-resize;
}
.esri-swipe--vertical .esri-swipe__container {
margin-top: -$button-height--half;
width: 100%;
cursor: row-resize;
}
.esri-swipe--disabled .esri-swipe__container {
pointer-events: none;
cursor: default;
}
.esri-swipe__divider {
position: absolute;
background-color: $divider-color;
}
.esri-swipe--horizontal .esri-swipe__divider {
border-left: 1px solid rgba($interactive-font-color, 0.5);
border-right: 1px solid rgba($interactive-font-color, 0.5);
width: $divider-size;
height: 100%;
margin-left: -#{$divider-size * 0.5};
top: 0;
left: $button-width--half;
}
.esri-swipe--vertical .esri-swipe__divider {
border-top: 1px solid rgba($interactive-font-color, 0.5);
border-bottom: 1px solid rgba($interactive-font-color, 0.5);
width: 100%;
height: $divider-size;
margin-top: -#{$divider-size * 0.5};
left: 0;
top: $button-height--half;
}
.esri-swipe__handle {
width: $button-width;
height: $button-height;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 1px solid rgba($interactive-font-color, 0.5);
border-radius: $border-radius;
background-color: $divider-color;
&--hidden {
visibility: hidden;
}
}
.esri-swipe__handle-icon {
position: relative;
z-index: 2;
}
.esri-swipe--horizontal .esri-swipe__handle {
top: calc(50% - #{$button-height--half});
}
.esri-swipe--vertical .esri-swipe__handle {
left: calc(50% - #{$button-height--half});
}
.esri-swipe__container:focus .esri-swipe__handle,
.esri-swipe__container:focus .esri-swipe__divider {
outline: inset 2px Highlight;
outline: inset 2px -webkit-focus-ring-color;
}
.esri-swipe__container:focus .esri-swipe__handle {
outline-offset: -3px;
}
}
@if $include_Swipe == true {
@include swipe();
}

325
public/assets/esri/themes/base/widgets/_TableList.scss Normal file
View file

@ -0,0 +1,325 @@
@mixin tableList() {
$indicator-size: 6px;
$message-warning-border-color: $Calcite_Yellow_a150;
.esri-table-list {
color: $font-color;
background-color: $background-color--offset;
padding: calc(var(--esri-widget-padding-y) * 0.5) calc(var(--esri-widget-padding-x) * 0.5);
overflow-y: auto;
display: flex;
flex-flow: column;
}
.esri-table-list__list {
list-style: none;
margin: 0 0 0 $side-spacing;
padding: 0;
}
.esri-table-list__list[hidden] {
display: none;
}
.esri-table-list__list--root {
margin: 0;
}
.esri-table-list__item--selectable .esri-table-list__item-container {
cursor: pointer;
&:hover {
border-left-color: $border-color;
}
}
.esri-table-list__item[aria-selected="true"] > .esri-table-list__item-container {
border-left-color: $border-color--active;
&:hover {
border-left-color: $border-color--active;
}
}
.esri-table-list__item-container ~ .esri-table-list__list .esri-table-list__item {
border-bottom-width: 0;
}
.esri-table-list__item {
background-color: $background-color;
border-bottom: 1px solid $border-color;
position: relative;
overflow: hidden;
list-style: none;
margin: $cap-spacing--quarter 0;
padding: 0;
@include sortableChosen("esri-table-list__item--chosen");
}
.esri-table-list__item-container {
border-left: $border-size--active solid transparent;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: $cap-spacing $side-spacing--half $cap-spacing ($side-spacing + 5);
transition: border-color 250ms ease-in-out;
align-items: center;
}
.esri-table-list__item-title {
flex: 1;
padding-left: $side-spacing--third;
padding-right: $side-spacing--third;
line-height: $line-height;
word-break: break-word;
overflow-wrap: break-word;
transition: color 125ms ease-in-out;
}
.esri-table-list__publishing {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-block: 0;
margin-inline: $cap-spacing; // vertically aligns with updating indicator
height: $indicator-size;
width: $indicator-size;
border: 1px solid $interactive-font-color;
animation: publishing 2s normal infinite;
}
.esri-table-list__item-message {
display: flex;
align-items: center;
visibility: hidden;
height: 0;
margin-top: -1px;
padding: $cap-spacing--half $side-spacing--half;
overflow: hidden;
font-size: $font-size--small;
transition: transform 250ms ease-in-out;
transform: scale(1, 0);
animation: esri-fade-in-down 250ms ease-in-out;
transform-origin: center top;
background-color: $background-color--offset-subtle;
margin-inline-start: 3rem;
border-inline-start: $border-size--active solid $message-warning-border-color;
margin-block-end: 0.25rem;
margin-inline-end: 0.25rem;
}
.esri-table-list__item-message {
@include icomoonIconSelector() {
margin-right: 0.3rem;
}
}
.esri-table-list__item--has-message {
.esri-table-list__item-message {
visibility: visible;
height: auto;
transform: scale(1, 1);
}
}
.esri-table-list__item-toggle {
padding: 0 $side-spacing--quarter;
cursor: pointer;
color: $interactive-font-color;
}
.esri-table-list__item-actions-menu {
align-self: center;
display: flex;
}
.esri-table-list__item-actions-menu-item {
display: flex;
flex: 1 0 floor($font-size * 1.5);
justify-content: center;
align-items: center;
color: $interactive-font-color;
cursor: pointer;
padding: 0 $side-spacing--quarter;
transition: border-color 250ms ease-in-out;
}
.esri-table-list__item-actions-menu-item:first-of-type {
margin: 0 2px;
}
.esri-table-list__item-actions-menu-item:hover {
background-color: $background-color--hover;
}
.esri-table-list__item-actions-menu-item--active,
.esri-table-list__item-actions-menu-item--active:hover {
background-color: $background-color--active;
}
.esri-table-list__item-actions {
position: relative;
background-color: $background-color--offset;
color: $interactive-font-color;
margin: -1px $side-spacing--half $cap-spacing--half;
height: auto;
}
.esri-table-list__item-actions[aria-expanded="true"] {
animation: esri-fade-in 250ms ease-in-out;
}
.esri-table-list__item-actions-section {
animation: esri-fade-in 375ms ease-in-out;
}
.esri-table-list__item-actions[hidden] {
display: none;
}
.esri-table-list__item-actions-close {
color: $interactive-font-color;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
padding: 5px;
z-index: 1;
}
.esri-table-list__item-actions-list {
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
padding: $cap-spacing--half 0;
list-style: none;
border-top: 2px solid $background-color;
}
.esri-table-list__item-actions-list:first-of-type {
border-top: 0;
}
.esri-table-list__item-action,
.esri-table-list__action-toggle {
border: 1px solid transparent;
display: flex;
justify-content: flex-start;
align-items: flex-start;
cursor: pointer;
font-size: $font-size--small;
width: 100%;
margin: 0;
padding: $cap-spacing--half $side-spacing;
opacity: 1;
transition: opacity 250ms ease-in-out 250ms, background-color 250ms ease-in-out;
}
.esri-table-list__item-action {
justify-content: flex-start;
flex-flow: row;
}
.esri-table-list__action-toggle {
flex-flow: row-reverse;
justify-content: space-between;
.esri-table-list__item-action-title {
margin-left: 0;
}
.esri-table-list__item-action-icon {
background-color: $background-color--inverse;
border-radius: $toggle-height;
box-shadow: 0 0 0 1px $interactive-font-color--inverse;
flex: 0 0 $toggle-width;
height: $toggle-height;
overflow: hidden;
padding: 0;
position: relative;
transition: background-color 125ms ease-in-out;
width: $icon-size;
&:before {
// Toggle handle. Overrides any icon class
background-color: $interactive-font-color--inverse;
border-radius: 100%;
content: "";
display: block;
height: $toggle-handle-size;
left: 0;
margin: 2px;
position: absolute;
top: 0;
transition: background-color 125ms ease-in-out, left 125ms ease-in-out;
width: $toggle-handle-size;
}
}
}
.esri-table-list__action-toggle--on .esri-table-list__item-action-icon {
// Toggle on
background-color: $interactive-font-color--inverse;
&:before {
background-color: $background-color--inverse;
box-shadow: 0 0 0 1px $background-color--inverse;
left: $toggle-handle-size;
}
}
.esri-table-list__item-action:hover,
.esri-table-list__action-toggle:hover {
background-color: $background-color--hover;
}
.esri-table-list__item-actions[hidden] .esri-table-list__item-action {
opacity: 0;
}
.esri-table-list__item-action-icon {
flex: 0 0 $icon-size;
font-size: $icon-size;
display: inline-block;
width: $icon-size;
height: $icon-size;
margin-top: 0.1em;
}
.esri-table-list__item-action-image {
flex: 0 0 $icon-size;
width: $icon-size;
height: $icon-size;
font-size: $font-size;
text-align: center;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.esri-table-list__item-action-title {
margin-left: 5px;
}
.esri-table-list-panel {
margin: $cap-spacing $side-spacing;
}
// Legend as content
.esri-table-list-panel__content--legend .esri-legend__service {
padding: 0 0 $cap-spacing 0;
}
[dir="rtl"] .esri-table-list {
.esri-table-list__list {
margin: 0 $side-spacing 0 0;
}
.esri-table-list__list--root {
margin: 0;
}
.esri-table-list__item-action-title {
margin-left: 0;
margin-right: 5px;
}
.esri-table-list__action-toggle .esri-table-list__action-toggle {
margin-right: 0;
}
.esri-table-list__item:after {
animation: looping-progresss-bar-ani $looping-progress-bar-params reverse;
}
.esri-table-list__item-message {
@include icomoonIconSelector() {
margin-right: 0;
margin-left: 0.3rem;
}
}
.esri-table-list__item--selectable .esri-table-list__item-container {
border-left: none;
border-right: $border-size--active solid transparent;
&:hover {
border-right-color: $border-color;
}
}
.esri-table-list__item[aria-selected="true"] > .esri-table-list__item-container {
border-right-color: $border-color--active;
&:hover {
border-right-color: $border-color--active;
}
}
}
@keyframes publishing {
0%,
20% {
transform: rotate(45deg);
}
80%,
100% {
transform: rotate(135deg);
}
}
}
@if $include_TableList==true {
@include tableList();
}

15
public/assets/esri/themes/base/widgets/_TimePicker.scss Normal file
View file

@ -0,0 +1,15 @@
@mixin timePicker() {
.esri-time-picker {
display: inline-block;
border: 1px solid $border-color;
padding: 0 0.5em;
}
.esri-time-picker__input {
border: none;
}
}
@if $include_TimePicker == true {
@include timePicker();
}

404
public/assets/esri/themes/base/widgets/_TimeSlider.scss Normal file
View file

@ -0,0 +1,404 @@
@mixin timeSlider() {
$widget-min-width: 375px;
$primary-color: $border-color--contrast;
$highlight-color: $button-color;
$invalid-color: #d83020;
.esri-time-slider {
cursor: default;
min-width: $widget-min-width;
@include defaultBoxShadow();
&__layout {
&--wide {
.esri-time-slider {
&__row {
height: 88px;
overflow: hidden;
}
&__playback-controls {
direction: ltr;
display: flex;
flex: auto;
}
&__animation {
width: 64px;
}
&__time-extent {
align-items: center;
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 110px;
}
&__time-extent,
&__min,
&__previous,
&__actions {
border: {
left: 1px solid $border-color;
}
}
&__min,
&__max {
align-items: center;
width: 110px;
}
&__slider {
flex: auto;
}
&__previous,
&__next {
width: 42px;
}
&__warning {
font-size: $font-size__h1;
margin-bottom: 4px;
&-text {
margin-inline: 3px;
text-align: center;
}
}
&__actions {
&-button {
height: 88px;
}
}
}
}
&--compact {
&.esri-time-slider {
&--has-actions {
.esri-time-slider {
&__time-extent {
padding-inline-start: 48px;
}
}
}
}
.esri-time-slider {
&__row {
&:nth-child(1),
&:nth-child(3) {
height: 36px;
}
&:nth-child(2) {
height: 88px;
overflow: hidden;
}
}
&__animation {
width: 35px;
}
&__time-extent {
align-items: center;
display: flex;
flex: auto;
flex-flow: row nowrap;
justify-content: center;
&-separator {
margin-inline: 7px;
}
}
&__slider {
flex: auto;
}
&__min,
&__max {
flex: auto;
}
&__min {
align-items: flex-start;
margin-inline-start: 35px;
}
&__max {
align-items: flex-end;
margin-inline-end: 35px;
}
&__previous,
&__next {
width: 35px;
}
&__warning {
line-height: $font-size__body;
margin-inline-end: 4px;
}
&__actions {
align-items: flex-end;
&-button {
height: 36px;
}
}
}
}
}
&__row {
display: flex;
}
&__mode {
&--instant {
.esri-slider {
&__segment-0,
&__segment-1 {
background-color: $primary-color;
}
}
}
&--time-window {
.esri-slider {
&__segment-1 {
background-color: $highlight-color;
height: 6px;
margin-top: -1px;
}
&__segment-0,
&__segment-2 {
background-color: $primary-color;
}
}
&.esri-time-slider {
&--out-of-bounds {
.esri-slider {
&__segment-1 {
background-color: $invalid-color;
}
}
}
}
}
&--cumulative-from-start {
.esri-slider {
&__segment-0 {
background-color: $highlight-color;
height: 6px;
margin-top: -1px;
}
&__segment-1 {
background-color: $primary-color;
}
}
&.esri-time-slider {
&--out-of-bounds {
.esri-slider {
&__segment-0 {
background-color: $invalid-color;
}
}
}
}
}
&--cumulative-from-end {
.esri-slider {
&__segment-0 {
background-color: $primary-color;
}
&__segment-1 {
background-color: $highlight-color;
height: 6px;
margin-top: -1px;
}
}
&.esri-time-slider {
&--out-of-bounds {
.esri-slider {
&__segment-1 {
background-color: $invalid-color;
}
}
}
}
}
}
&__time-extent {
font-size: $font-size__body;
line-height: $font-size__body;
color: $highlight-color;
&-group {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
&-date,
&-separator {
font-weight: $font-weight--bold;
}
}
&__min,
&__max {
display: flex;
flex-flow: column nowrap;
font-size: $font-size__body;
justify-content: center;
line-height: $font-size__body;
&-date {
font-weight: $font-weight--bold;
}
}
&__slider {
background-color: $background-color--offset;
padding: 0 40px 0 40px;
.esri-slider {
margin-top: -19px;
background-color: $background-color--offset;
// This is a fix specifically for IE11. Without it ticks and tick labels are severely displaced.
&__content {
height: 2px;
}
&__thumb {
border-width: 3px;
top: -6px;
}
&__tick-label {
font-size: $font-size__body;
margin-top: 23px;
white-space: nowrap;
}
&__tick {
background: $primary-color;
width: 1px;
&.minorTick {
height: 4px;
}
&.majorTick {
height: 8px;
}
}
&__ticks {
margin-top: 16px;
}
&__track {
height: 4px;
}
}
}
&__animation,
&__previous,
&__next {
&-button {
border: none;
height: 100%;
width: 100%;
}
}
.esri-icon-play,
.esri-icon-pause,
.esri-icon-reverse,
.esri-icon-forward {
font-size: 24px;
}
&--out-of-bounds {
.esri-slider {
&__thumb {
border-color: $invalid-color;
}
}
.esri-time-slider {
&__time-extent {
color: $invalid-color;
}
}
}
}
[dir="rtl"] .esri-time-slider {
&__layout {
&--compact {
.esri-time-slider {
&__row {
&:nth-child(3) {
direction: ltr;
}
}
&__min,
&__max {
&-date,
&-time {
direction: rtl;
}
}
}
}
&--wide {
.esri-time-slider {
&__playback-controls {
direction: ltr;
}
&__min,
&__max,
&__time-extent {
&-date,
&-time {
direction: rtl;
}
}
}
&.esri-time-slider {
&--has-actions {
.esri-time-slider {
&__actions {
border: {
left: none;
}
}
&__animation {
border: {
left: 1px solid $border-color;
}
}
}
}
}
}
}
}
}
@if $include_TimeSlider == true {
@include timeSlider();
}

20
public/assets/esri/themes/base/widgets/_TimezonePicker.scss Normal file
View file

@ -0,0 +1,20 @@
@mixin timezonePicker() {
.esri-timezone-picker {
position: relative;
display: flex;
align-items: center;
&__item-title {
font-size: $font-size--small;
font-weight: $font-weight--bold;
}
&__item-description {
font-size: $font-size--tiny;
}
}
}
@if $include_TimezonePicker==true {
@include timezonePicker();
}

89
public/assets/esri/themes/base/widgets/_Tooltip.scss Normal file
View file

@ -0,0 +1,89 @@
@use "sass:color";
@mixin tooltip() {
$item-cap-padding: $cap-spacing--eighth;
.esri-tooltip {
position: absolute;
overflow: visible;
width: fit-content;
top: 0;
left: 0;
z-index: 1;
&-content {
position: relative;
padding: $cap-spacing--half $side-spacing--half;
background: color.change($background-color, $alpha: 0.8);
backdrop-filter: blur(3px);
box-shadow: 0 1px 2px rgb(0, 0, 0, 0.1);
font-family: $font-family;
font-size: $font-size--small;
line-height: 1.1em;
color: $font-color;
// Hide the content altogether when there is nothing inside. Otherwise we'd
// see a small empty square due to the tooltip padding.
&:empty {
opacity: 0;
}
}
&-table {
display: table;
width: 100%;
}
&-field {
display: table-row;
&__title,
&__value {
display: table-cell;
padding: $item-cap-padding 0;
white-space: nowrap;
}
&__title {
padding-inline-end: $side-spacing;
}
&__value {
// Make numbers look nice as they change. See https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
font-variant-numeric: tabular-nums;
}
}
&-value-by-value {
// Add some space between the left/right (e.g. width/height) values.
span:nth-child(2) {
margin-inline: $side-spacing--half;
}
}
&-help-message {
$help-message-border-spacing: $cap-spacing--half;
width: min-content;
min-width: 200px;
margin-top: $help-message-border-spacing;
padding-top: $help-message-border-spacing + $item-cap-padding;
padding-bottom: $item-cap-padding;
border-top: solid 1px $border-color;
font-family: $font-family;
font-size: $font-size--small;
text-align: center;
white-space: break-spaces;
&:only-child {
margin-top: 0;
padding-top: $item-cap-padding;
border-top: none;
}
}
}
}
@if $include_Tooltip==true {
@include tooltip();
}

46
public/assets/esri/themes/base/widgets/_UtilityNetworkAssociations.scss Normal file
View file

@ -0,0 +1,46 @@
@mixin utilityNetworkAssociations() {
.esri-un-associations__controls-label {
height: 1rem;
}
.esri-un-associations__controls-label-and-slider {
display: flex;
flex-direction: column;
}
.esri-un-associations__controls-label-and-toggle {
display: flex;
flex-direction: row;
justify-content: space-between;
width: inherit;
}
.esri-un-associations__controls-slider {
padding: 0rem 0.5rem;
}
.esri-un-associations__widget-block-actions {
align-self: center;
}
.esri-un-associations__widget-block-actions-switch {
align-self: center;
padding: 0.5rem;
}
.esri-un-associations__widget-block-content {
width: 330px;
border-bottom: none;
margin: 0px;
}
.esri-un-associations__widget-settings-container {
display: grid;
padding-top: 0.5rem;
gap: 0.5rem;
}
}
@if $include_UtilityNetworkAssociations == true {
@include utilityNetworkAssociations();
}

60
public/assets/esri/themes/base/widgets/_UtilityNetworkTrace.scss Normal file
View file

@ -0,0 +1,60 @@
@mixin UtilityNetworkTrace {
.esri-utility-trace-network {
display: flex;
flex: 1 1 auto;
flex-direction: row;
&.esri-component.esri-widget--panel {
min-height: $panel-min-height--medium;
}
calcite-icon {
box-sizing: initial;
}
calcite-tab {
background-color: $background-color--offset;
padding-bottom: 0;
padding-top: 0;
&:not([selected]) {
flex: 0;
}
}
calcite-block {
margin-bottom: 0rem;
}
&__add-button-container {
display: flex;
justify-content: center;
margin: $cap-spacing--plus-half 0 $cap-spacing;
}
&__notice-container {
padding: $cap-spacing--half;
}
&__list-container {
background-color: $background-color;
padding: $cap-spacing--quarter $side-spacing--quarter;
}
&__flow {
height: 100%;
}
&__results-container {
height: 100%;
}
&__number-input {
width: 150px;
}
}
}
@if $include_UtilityNetworkTrace ==true {
@include UtilityNetworkTrace();
}

40
public/assets/esri/themes/base/widgets/_UtilityNetworkValidateTopology.scss Normal file
View file

@ -0,0 +1,40 @@
@mixin utilityNetworkValidateTopology() {
.esri-un-validate-topology {
&__container {
width: 330px;
}
&__content {
border-bottom: none;
margin: 0px;
}
&__controls-container {
display: grid;
gap: 0.5rem;
}
&__status-icon {
&-container {
width: 48px;
height: 48px;
}
&-error {
padding-left: 16px;
padding-top: 16px;
--calcite-ui-icon-color: #edd317;
}
&-success {
padding-left: 16px;
padding-top: 16px;
--calcite-ui-icon-color: #35ac46;
}
}
}
}
@if $include_UtilityNetworkValidateTopology == true {
@include utilityNetworkValidateTopology();
}

275
public/assets/esri/themes/base/widgets/_ValuePicker.scss Normal file
View file

@ -0,0 +1,275 @@
@mixin valuePicker() {
$widget-size: $panel-width--plus-half;
$minor-tick-size: 3px;
$major-tick-size: 6px;
.esri-value-picker {
@include defaultBoxShadow();
.esri-slider {
background: transparent;
flex: auto;
&__tick-label {
font-size: var(--calcite-font-size--3);
white-space: nowrap;
}
&__ticks {
margin: 0;
}
&__tick,
&__track {
background: var(--calcite-ui-border-input);
}
&__tick {
&.esri-value-picker__slider__tick-steps {
height: 3px;
width: 3px;
}
}
&__anchor:focus-visible {
outline: none;
}
}
&__action-bar {
background-color: var(--calcite-ui-foreground-1);
}
&__caption,
&__label {
&-border {
display: flex;
align-items: center;
border: solid 1px var(--calcite-ui-border-3);
}
&-text {
font-family: var(--calcite-sans-family);
font-weight: var(--calcite-font-weight-medium);
overflow: hidden;
white-space: nowrap;
}
}
&__label-text {
color: var(--calcite-ui-text-1);
}
&__slider {
display: flex;
flex: auto;
}
&__layout {
&--horizontal {
&.esri-value-picker__type {
&--collection,
&--undefined {
width: fit-content;
.esri-value-picker {
&__action-bar {
width: 100%;
}
&__caption {
padding-inline-end: 0.5rem;
}
}
}
&--combobox,
&--label,
&--slider {
min-width: $widget-size;
.esri-value-picker__action-bar {
width: 100%;
}
}
}
.esri-value-picker {
&__caption {
display: flex;
padding-bottom: 0.5rem;
padding-inline-start: 0.5rem;
padding-top: 0.5rem;
&-border {
padding-inline: 0.5rem;
}
&-text {
font-size: var(--calcite-font-size--1);
max-width: 100px;
text-overflow: ellipsis;
}
}
&__combobox {
align-items: center;
display: flex;
flex: auto;
padding-inline: 10px;
--calcite-ui-border-input: var(--calcite-ui-border-3);
calcite-combobox {
flex: auto;
width: 0;
}
}
&__label {
display: flex;
flex: auto;
padding: 0.5rem;
&-border {
flex: auto;
padding-inline: 0.5rem;
}
&-text {
flex: auto;
font-size: var(--calcite-font-size--1);
font-weight: var(--calcite-font-weight-normal);
text-overflow: ellipsis;
width: 0;
}
}
&__separator {
border-right: solid 1px var(--calcite-ui-border-3);
margin-inline-start: 0.25rem;
width: 1px;
}
&__slider {
padding-inline: 30px;
&__tick {
&-minor {
height: $minor-tick-size;
}
&-major {
height: $major-tick-size;
}
&-steps {
margin-left: -1px;
margin-top: -6px;
}
}
}
}
.esri-slider {
margin-top: -10px;
&__track {
height: 1px;
}
}
}
&--vertical {
&.esri-value-picker__type {
&--collection,
&--undefined {
height: fit-content;
.esri-value-picker__action-bar {
height: 100%;
}
}
&--slider {
min-height: $widget-size;
.esri-value-picker__action-bar {
height: 100%;
min-height: $widget-size;
}
}
}
.esri-value-picker {
&__caption {
padding: 0.25rem;
width: 48px;
&-border {
justify-content: center;
}
&-text {
font-size: var(--calcite-font-size--2);
padding-block: 0.25rem;
text-overflow: clip;
}
}
&__separator {
border-bottom: solid 1px var(--calcite-ui-border-3);
height: 1px;
margin-top: 0.25rem;
}
&__slider {
flex-direction: column;
padding: 15px 0;
&__tick {
&-minor {
width: $minor-tick-size;
}
&-major {
width: $major-tick-size;
}
&-steps {
margin-left: -6px;
margin-top: -1px;
}
}
}
}
.esri-slider {
margin-left: -13px;
&__tick-label {
margin-left: 20px;
}
&__track {
width: 1px;
}
}
}
}
}
[dir="rtl"] .esri-value-picker {
direction: ltr;
.esri-value-picker {
&__combobox,
&__slider__tooltip {
direction: rtl;
}
}
}
}
@if $include_ValuePicker==true {
@include valuePicker();
}

59
public/assets/esri/themes/base/widgets/_Weather.scss Normal file
View file

@ -0,0 +1,59 @@
@mixin weather() {
.esri-weather {
position: relative;
padding: var(--esri-widget-padding);
width: fit-content;
&__content {
display: flex;
flex-direction: column;
gap: $cap-spacing;
width: min-content;
// When there is an error we take up horizontal space, but not any vertical
// space. This way the widget maintains a constant width without us having
// to specify a fixed value.
&--has-error {
pointer-events: none;
visibility: hidden;
overflow: hidden;
height: 0;
}
}
&__selector {
display: flex;
align-items: center;
flex-direction: row;
gap: $side-spacing--half;
}
&__options {
display: flex;
flex-direction: column;
gap: $cap-spacing;
}
&__warning {
display: flex;
flex-direction: row;
align-items: center;
gap: $side-spacing--half;
font-size: $font-size--small;
calcite-icon {
color: var(--calcite-ui-warning);
}
}
// Align calcite slider to the buttons, header, etc
&__labeled-slider calcite-slider {
margin: 0 -7px;
margin-bottom: -14px;
}
}
}
@if $include_Weather==true {
@include weather();
}

688
public/assets/esri/themes/base/widgets/_Widget.scss Normal file
View file

@ -0,0 +1,688 @@
/* ==========================================================================
box-sizing
========================================================================== */
@mixin widget {
.esri-widget {
box-sizing: border-box;
color: $font-color;
font-size: $font-size;
font-family: $font-family;
line-height: $line-height;
background-color: $background-color;
*,
*:before,
*:after {
box-sizing: inherit;
}
&#{&}--disabled {
& > * {
pointer-events: none;
opacity: $opacity--disabled;
}
}
/*
* Padding/spacing - should be respected by each widget
*/
--esri-widget-padding-x: #{$side-spacing};
--esri-widget-padding-y: #{$cap-spacing};
--esri-widget-padding: var(--esri-widget-padding-y) var(--esri-widget-padding-x);
&.esri-widget--compact {
--esri-widget-padding-y: 0;
--esri-widget-padding-x: 0;
}
}
.esri-widget__anchor {
color: $button-color;
&:hover {
color: $button-color--hover;
}
&--disabled {
pointer-events: none;
opacity: $opacity--disabled;
}
&:hover,
&:focus {
text-decoration: underline;
}
}
.esri-widget__header {
align-items: center;
background-color: $background-color;
display: flex;
flex: 1 0 100%;
padding: $cap-spacing 0 $cap-spacing $side-spacing;
justify-content: space-between;
min-height: $header-height--min;
width: 100%;
.esri-widget__heading {
align-items: center;
color: $interactive-font-color;
display: flex;
margin: 0;
padding: 0;
text-align: initial;
width: calc(100% - #{$header-button-width});
}
&-button {
-webkit-appearance: none;
align-items: center;
align-self: stretch;
background-color: transparent;
border: none;
color: $interactive-font-color;
cursor: pointer;
display: flex;
flex: 0 0 $header-button-width;
justify-content: center;
padding: 0;
width: $header-button-width;
}
}
.esri-widget__heading {
color: $heading-color;
font-weight: $font-weight__heading;
margin: 0 0 0.5rem 0;
}
h1.esri-widget__heading {
font-size: $font-size__h1;
}
h2.esri-widget__heading {
font-size: $font-size__h2;
}
h3.esri-widget__heading,
h4.esri-widget__heading,
h5.esri-widget__heading,
h6.esri-widget__heading {
font-size: $font-size__lt-h2;
}
.esri-widget__footer {
align-items: center;
background-color: $background-color;
display: flex;
justify-content: center;
min-height: $footer-height--min;
width: 100%;
}
.esri-widget__footer-pagination {
align-items: center;
color: $interactive-font-color;
display: flex;
justify-content: space-between;
&-previous-button,
&-next-button {
background-color: transparent;
border: 0;
margin: 0 $side-spacing--half;
padding: $cap-spacing $side-spacing;
cursor: pointer;
transition: background-color 125ms ease-in-out;
&:hover,
&:focus {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
}
}
}
.esri-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
background-color: $background-color;
@include defaultBoxShadow();
padding: 0;
margin: $cap-spacing--eighth 0 0 0;
font-size: 14px;
line-height: 16px;
-moz-background-clip: padding;
background-clip: padding-box;
overflow: hidden;
width: 100%;
visibility: hidden;
max-height: 0;
.esri-menu__header {
padding: 6px 12px;
background-color: $background-color--inverse;
color: $interactive-font-color--inverse;
}
&__list {
margin: 0;
padding: 0;
list-style: none;
}
&__list-item {
padding: 0.8em 1em;
cursor: pointer;
border-top: solid 1px $border-color;
border-left: $border-size--active solid transparent;
}
&__list-item:first-child {
border-top: none;
}
&__list-item--focus,
&__list-item:hover,
&__list-item:focus {
background-color: $background-color--hover;
}
&__list-item:active {
background-color: $background-color--active;
}
&__list-item--active,
&__list-item--active:hover,
&__list-item--active:focus {
background-color: $background-color--active;
border-left-color: $border-color--active;
}
&__list-item {
@include icomoonIconSelector() {
padding-right: $font-size * 0.2;
}
}
}
.esri-widget__table {
color: $font-color;
border: none;
border-collapse: collapse;
line-height: 1.3em;
width: 100%;
tr:nth-child(odd) {
background-color: rgba($background-color--inverse, 0.1);
}
tr:nth-child(even) {
background-color: rgba($background-color--inverse, 0.02);
}
tr {
a {
color: $interactive-font-color;
&:hover,
&:focus {
color: $interactive-font-color--hover;
}
}
td,
th {
padding: 0.5em 0.7em;
word-break: break-word;
vertical-align: top;
font-size: $font-size__body;
font-weight: $font-weight;
}
th {
width: 50%;
text-align: left;
border-right: 3px solid rgba(0, 0, 0, 0.05);
}
td {
width: 50%;
}
}
}
.esri-input {
background-color: $background-color;
border: 1px solid $border-color--input;
color: $font-color;
font-family: $font-family;
font-size: $font-size;
&[type="text"],
&[type="password"],
&[type="number"] {
height: $button-height;
padding: 0 0.5em;
}
&::-ms-clear {
display: none;
}
&::-moz-placeholder {
color: $font-color--placeholder;
opacity: 1;
}
&:-ms-input-placeholder {
color: $font-color--placeholder;
}
&::-webkit-input-placeholder {
color: $font-color--placeholder;
}
}
calcite-combobox.esri-input {
border: none;
}
.esri-button {
align-items: center;
background-color: $button-color;
border: 1px solid $button-color;
color: $button-color--inverse;
cursor: pointer;
display: flex;
font-family: inherit;
font-size: $font-size;
min-height: $button-height;
justify-content: center;
word-break: normal;
white-space: normal;
overflow: hidden;
padding: $cap-spacing--half $side-spacing--half;
width: 100%;
transition: background-color 125ms ease-in-out, border 125ms ease-in-out;
&:hover {
background-color: $button-color--hover;
border: 1px solid $button-color--hover;
color: $button-color--inverse;
}
&.esri-button--small {
font-size: $font-size--small;
min-height: $button-height--half;
}
&.esri-button--half {
display: inline-block;
width: 50%;
}
&.esri-button--third {
display: inline-block;
width: 33%;
}
}
.esri-button--secondary {
background-color: transparent;
color: $button-color;
}
.esri-button--tertiary {
background-color: transparent;
border-color: transparent;
color: $button-color;
&:hover {
background-color: $background-color--hover;
border-color: transparent;
color: $button-color--hover;
}
}
.esri-button--disabled {
opacity: $opacity--disabled;
pointer-events: none;
}
.esri-button--drill-in {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $background-color;
cursor: pointer;
border: none;
border-radius: $border-radius;
text-align: unset;
text-decoration: none;
padding: $cap-spacing $side-spacing--half;
margin: $cap-spacing $side-spacing--half;
outline-offset: -4px;
transition: background-color 125ms ease-in-out;
@include borderBoxShadow();
&:hover,
&:focus {
background-color: $background-color--hover;
}
&__title {
font-size: $font-size;
font-family: $font-family;
}
@include icomoonIconSelector() {
padding: 0 $side-spacing--half;
}
}
@include icomoonIconSelector() {
font-size: $icon-size;
display: inline-block;
}
.esri-widget__content--empty {
align-items: center;
color: $interactive-font-color;
display: flex;
flex-flow: column wrap;
padding: $cap-spacing--plus-half $side-spacing--plus-half;
text-align: center;
h1.esri-widget__heading,
h2.esri-widget__heading,
h3.esri-widget__heading,
h4.esri-widget__heading,
h5.esri-widget__heading {
font-weight: $font-weight;
}
}
.esri-widget__content-illustration--empty {
padding: 1rem 0;
width: 128px;
}
.esri-widget__content-icon--empty {
padding: 0.5rem 0;
width: 32px;
}
// Select
// From https://esri.github.io/calcite-ui-icons/#chevron-down
$select_caret: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23" +
str-slice(#{$interactive-font-color}, 2) + "' fillrule='nonzero'/%3E%3C/svg%3E";
.esri-select {
cursor: pointer;
display: block;
font-family: inherit;
font-size: 0.85em;
width: 100%;
height: $button-height;
color: $font-color;
border: 1px solid $border-color--input;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
padding: 0 0.5em;
background: url($select_caret) no-repeat right center $background-color;
&[disabled] {
cursor: auto;
}
}
.esri-select::-ms-expand {
display: none;
}
// Disabled
.esri-disabled a,
.esri-disabled [role="menu"],
.esri-disabled [role="checkbox"] {
color: $interactive-font-color--disabled;
}
.esri-disabled {
@include icomoonIconSelector() {
color: $interactive-font-color--disabled;
}
}
.keynav-mode {
.esri-widget {
// Saving this for when we can toggle a key-nav class
&:focus {
@include outlineStyle();
}
* {
&:focus {
@include outlineStyle();
}
}
}
}
/* ==========================================================================
Loader
========================================================================== */
.esri-widget__loader-animation {
animation: esri-rotate 1250ms infinite linear;
transform: translateZ(0);
border: 0.15em solid transparent;
border-color: rgba($font-color, 0.8) $border-color $border-color $border-color;
border-radius: 100%;
display: block;
font-size: $spinning-loader-size;
height: 1em;
width: 1em;
}
/* ==========================================================================
Widget Button
========================================================================== */
.esri-widget--button {
font-size: $font-size;
background-color: $background-color;
color: $interactive-font-color;
width: $button-width;
height: $button-height;
padding: 0;
margin: 0;
overflow: hidden;
cursor: pointer;
text-align: center;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
transition: background-color 125ms ease-in-out;
&:hover {
background-color: $background-color--hover;
color: $interactive-font-color--hover;
}
&:active {
background-color: $background-color--active;
}
}
/* ==========================================================================
Components (top Widget node in esri-ui-corner)
========================================================================== */
.esri-ui-corner {
.esri-component {
@include defaultBoxShadow();
}
.esri-expand .esri-widget--panel,
.esri-expand .esri-widget--panel-height-only,
.esri-component.esri-widget--panel,
.esri-component.esri-widget--panel-height-only {
min-height: $panel-min-height--xsmall;
transition: max-height 250ms ease-in-out;
overflow-y: auto;
}
.esri-expand .esri-widget--panel,
.esri-expand .esri-widget--panel-height-only,
.esri-component > .esri-widget--panel,
.esri-component.esri-widget--panel {
width: $panel-width;
.esri-widget--panel {
// widget--panel inside another widget--panel
width: auto;
}
}
}
// Max heights
.esri-view-height-greater-than-medium {
.esri-expand .esri-widget--panel,
.esri-expand .esri-widget--panel-height-only,
.esri-ui-corner .esri-component.esri-widget--panel,
.esri-ui-corner .esri-component.esri-widget--panel-height-only {
max-height: $view-height--gt-medium__component-max-height;
}
}
.esri-view-height-medium {
.esri-expand .esri-widget--panel,
.esri-expand .esri-widget--panel-height-only,
.esri-ui-corner .esri-component.esri-widget--panel,
.esri-ui-corner .esri-component.esri-widget--panel-height-only {
max-height: $view-height--medium__component-max-height;
}
}
.esri-view-height-small {
.esri-expand .esri-widget--panel,
.esri-expand .esri-widget--panel-height-only,
.esri-ui-corner .esri-component.esri-widget--panel,
.esri-ui-corner .esri-component.esri-widget--panel-height-only {
max-height: $view-height--small__component-max-height;
}
}
.esri-view-height-xsmall {
.esri-expand .esri-widget--panel,
.esri-expand .esri-widget--panel-height-only,
.esri-ui-corner .esri-component.esri-widget--panel,
.esri-ui-corner .esri-component.esri-widget--panel-height-only {
max-height: $view-height--xsmall__component-max-height;
}
}
.esri-ui-bottom-right,
.esri-ui-bottom-left {
.esri-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: $cap-spacing--eighth;
}
}
/* ==========================================================================
RTL
========================================================================== */
[dir="rtl"] {
.esri-widget__table {
th {
text-align: right;
border-right: none;
border-left: 3px solid rgba(0, 0, 0, 0.05);
}
}
.esri-select {
background-position: left 50%;
}
.esri-menu__list-item {
@include icomoonIconSelector() {
padding-right: 0;
padding-left: floor($font-size * 0.2);
}
}
.esri-menu__list-item {
border-left: none;
border-right: $border-size--active solid transparent;
}
.esri-menu__list-item--active {
border-right-color: $border-color--active;
}
}
/* ==========================================================================
accessibility
========================================================================== */
.esri-icon-font-fallback-text {
clip: rect(0 0 0 0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
@include icomoonIconSelector() {
// fixes IE11 bug where animation will continue after animation class is removed
// https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/4784
animation: none;
}
@keyframes esri-fade-in {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.esri-rotating {
animation: esri-rotate 1250ms infinite linear;
transform: translateZ(0);
}
/* ==========================================================================
clearfixing
========================================================================== */
/**
* taken from http://nicolasgallagher.com/micro-clearfix-hack/
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.esri-clearfix {
&:before,
&:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
&:after {
clear: both;
}
}
/* ==========================================================================
interaction
========================================================================== */
.esri-interactive {
cursor: pointer;
}
/* ==========================================================================
visibility
========================================================================== */
.esri-hidden {
display: none !important;
}
.esri-invisible {
visibility: hidden !important;
}
.esri-offscreen {
position: absolute;
top: -999em;
left: -999em;
}
/* ==========================================================================
component shims
========================================================================== */
.esri-match-height {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: hidden;
}
}
@if $include_Widget == true {
@include widget();
}

45
public/assets/esri/themes/base/widgets/_Zoom.scss Normal file
View file

@ -0,0 +1,45 @@
@mixin zoom() {
.esri-zoom {
display: flex;
flex-flow: column nowrap;
&.esri-zoom--horizontal {
flex-flow: row-reverse nowrap;
.esri-widget--button {
&:last-child {
border-top: none;
}
&:first-child {
border-left: solid 1px $border-color;
}
}
}
.esri-widget--button {
box-shadow: none;
&:first-child {
margin-bottom: 0;
}
&:last-child {
border-top: solid 1px $border-color;
}
}
}
[dir="rtl"] {
.esri-zoom {
&.esri-zoom--horizontal {
.esri-widget--button {
&:first-child {
border-top: none;
}
&:last-child {
border-left: solid 1px $border-color;
}
}
}
}
}
}
@if $include_Zoom == true {
@include zoom();
}