├── assets └── esri │ └── themes │ └── base │ └── widgets │ ├── _SizeSlider.scss │ ├── _ColorSlider.scss │ ├── _Measurement.scss │ ├── _HeatmapSlider.scss │ ├── _OpacitySlider.scss │ ├── _ColorSizeSlider.scss │ ├── _AreaMeasurement2D.scss │ ├── _AreaMeasurement3D.scss │ ├── _ClassedSizeSlider.scss │ ├── _ClassedColorSlider.scss │ ├── _DistanceMeasurement2D.scss │ ├── _DirectLineMeasurement3D.scss │ ├── _BinaryColorSizeSlider.scss │ ├── _PanoramicViewer.scss │ ├── _IdentityModal.scss │ ├── _UnitSelect.scss │ ├── _TimePicker.scss │ ├── _SelectionToolbar.scss │ ├── _TimezonePicker.scss │ ├── _Compass.scss │ ├── _NavigationToggle.scss │ ├── _LabeledSwitch.scss │ ├── _SketchTooltipControls.scss │ ├── _SaveLayer.scss │ ├── _UtilityNetworkValidateTopology.scss │ ├── _LineOfSight.scss │ ├── _FeatureTemplates.scss │ ├── _SearchResultRenderer.scss │ ├── _Zoom.scss │ ├── _TimeZoneLabel.scss │ ├── _Slice.scss │ ├── _Histogram.scss │ ├── _BuildingExplorer.scss │ ├── _MeasurementWidgetContent.scss │ ├── _Attribution.scss │ ├── _TableList.scss │ ├── _ItemList.scss │ ├── _Weather.scss │ ├── _ColorPicker.scss │ ├── _Spinner.scss │ ├── _ButtonMenu.scss │ ├── _UtilityNetworkTrace.scss │ ├── _BuildingPhasePicker.scss │ ├── _HistogramRangeSlider.scss │ ├── _DirectionalPad.scss │ ├── _Features.scss │ ├── _Feature.scss │ ├── _LayerList.scss │ ├── _FeatureContent.scss │ ├── _FeatureMedia.scss │ ├── _CatalogLayerList.scss │ ├── _BasemapLayerList.scss │ ├── _UtilityNetworkAssociations.scss │ ├── _Bookmarks.scss │ ├── _Swipe.scss │ ├── _BasemapToggle.scss │ ├── _VideoPlayer.scss │ ├── _Daylight.scss │ ├── _Expand.scss │ ├── _ScaleRangeSlider.scss │ ├── _BuildingDisciplinesTree.scss │ ├── _DatePicker.scss │ ├── _Sketch.scss │ ├── _SnappingControls.scss │ ├── _ScaleBar.scss │ ├── _Grid.scss │ ├── _ShadowCast.scss │ ├── _FeatureTable.scss │ ├── _Search.scss │ ├── _CoordinateConversion.scss │ ├── _ValuePicker.scss │ ├── _BuildingLevelPicker.scss │ ├── _FeatureForm.scss │ ├── _BasemapGallery.scss │ ├── _ElevationProfile.scss │ ├── _Tooltip.scss │ ├── _OrientedImageryViewer.scss │ ├── _Attachments.scss │ ├── _Editor.scss │ └── _Print.scss └── README.md /assets/esri/themes/base/widgets/_SizeSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin sizeSlider() { 2 | @include smartMappingSlider(esri-size-slider); 3 | } 4 | 5 | @if $include_SizeSlider == true { 6 | @include sizeSlider(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ColorSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin colorSlider() { 2 | @include smartMappingSlider(esri-color-slider); 3 | } 4 | 5 | @if $include_ColorSlider == true { 6 | @include colorSlider(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Measurement.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable-next-line block-no-empty */ 2 | @mixin measurement() { 3 | } 4 | 5 | @if $include_Measurement == true { 6 | @include measurement(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_HeatmapSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin heatmapSlider() { 2 | @include smartMappingSlider(esri-heatmap-slider); 3 | } 4 | 5 | @if $include_HeatmapSlider == true { 6 | @include heatmapSlider(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_OpacitySlider.scss: -------------------------------------------------------------------------------- 1 | @mixin opacitySlider() { 2 | @include smartMappingSlider(esri-opacity-slider); 3 | } 4 | 5 | @if $include_OpacitySlider == true { 6 | @include opacitySlider(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ColorSizeSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin colorSizeSlider() { 2 | @include smartMappingSlider(esri-color-size-slider); 3 | } 4 | 5 | @if $include_ColorSizeSlider == true { 6 | @include colorSizeSlider(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_AreaMeasurement2D.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable-next-line block-no-empty */ 2 | @mixin areaMeasurement2D() { 3 | } 4 | 5 | @if $include_AreaMeasurement2D == true { 6 | @include areaMeasurement2D(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_AreaMeasurement3D.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable-next-line block-no-empty */ 2 | @mixin areaMeasurement3D() { 3 | } 4 | 5 | @if $include_AreaMeasurement3D == true { 6 | @include areaMeasurement3D(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ClassedSizeSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin classedSizeSlider() { 2 | @include smartMappingSlider(esri-classed-size-slider); 3 | } 4 | 5 | @if $include_ClassedSizeSlider == true { 6 | @include classedSizeSlider(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ClassedColorSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin classedColorSlider() { 2 | @include smartMappingSlider(esri-classed-color-slider); 3 | } 4 | 5 | @if $include_ClassedColorSlider == true { 6 | @include classedColorSlider(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_DistanceMeasurement2D.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable-next-line block-no-empty */ 2 | @mixin distanceMeasurement2D() { 3 | } 4 | 5 | @if $include_DistanceMeasurement2D == true { 6 | @include distanceMeasurement2D(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_DirectLineMeasurement3D.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable-next-line block-no-empty */ 2 | @mixin directLineMeasurement3D() { 3 | } 4 | 5 | @if $include_DirectLineMeasurement3D == true { 6 | @include directLineMeasurement3D(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_BinaryColorSizeSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin binaryColorSizeSlider() { 2 | @include smartMappingSlider(esri-binary-color-size-slider); 3 | } 4 | 5 | @if $include_BinaryColorSizeSlider == true { 6 | @include binaryColorSizeSlider(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_PanoramicViewer.scss: -------------------------------------------------------------------------------- 1 | @mixin panoramicViewer() { 2 | .esri-panoramic-viewer { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | } 7 | 8 | @if $include_PanoramicViewer == true { 9 | @include panoramicViewer(); 10 | } 11 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_IdentityModal.scss: -------------------------------------------------------------------------------- 1 | @mixin identityModal() { 2 | .esri-identity-modal__info, 3 | .esri-identity-modal__notice { 4 | margin-bottom: $cap-spacing; 5 | } 6 | } 7 | 8 | @if $include_IdentityModal == true { 9 | @include identityModal(); 10 | } 11 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_UnitSelect.scss: -------------------------------------------------------------------------------- 1 | @mixin unitSelect() { 2 | .esri-unit-select { 3 | width: 100%; 4 | 5 | &__label { 6 | --calcite-label-margin-bottom: 0; 7 | 8 | width: 100%; 9 | } 10 | } 11 | } 12 | 13 | @if $include_UnitSelect == true { 14 | @include unitSelect(); 15 | } 16 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_TimePicker.scss: -------------------------------------------------------------------------------- 1 | @mixin timePicker() { 2 | .esri-time-picker { 3 | display: inline-block; 4 | border: 1px solid $border-color; 5 | padding: 0 0.5em; 6 | } 7 | 8 | .esri-time-picker__input { 9 | border: none; 10 | } 11 | } 12 | 13 | @if $include_TimePicker == true { 14 | @include timePicker(); 15 | } 16 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_SelectionToolbar.scss: -------------------------------------------------------------------------------- 1 | @mixin selectionToolbar() { 2 | $border: 1px solid $border-color; 3 | 4 | .esri-selection-toolbar { 5 | display: flex; 6 | flex: 1 1 0; 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | .esri-selection-toolbar__container { 12 | display: flex; 13 | } 14 | } 15 | 16 | @if $include_SelectionToolbar == true { 17 | @include selectionToolbar(); 18 | } 19 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_TimezonePicker.scss: -------------------------------------------------------------------------------- 1 | @mixin timezonePicker() { 2 | .esri-timezone-picker { 3 | display: flex; 4 | position: relative; 5 | align-items: center; 6 | 7 | &__item-title { 8 | font-size: $font-size--small; 9 | font-weight: $font-weight--bold; 10 | } 11 | 12 | &__item-description { 13 | font-size: $font-size--tiny; 14 | } 15 | } 16 | } 17 | 18 | @if $include_TimezonePicker == true { 19 | @include timezonePicker(); 20 | } 21 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Compass.scss: -------------------------------------------------------------------------------- 1 | @mixin compass() { 2 | .esri-compass { 3 | --calcite-color-foreground-3: $background-color; 4 | 5 | border-radius: 50%; 6 | 7 | &__icon-container { 8 | display: flex; 9 | position: absolute; 10 | justify-content: center; 11 | transform: translate(-50%, -50%); 12 | 13 | [dir="rtl"] & { 14 | transform: translate(50%, -50%); 15 | } 16 | } 17 | } 18 | } 19 | 20 | @if $include_Compass == true { 21 | @include compass(); 22 | } 23 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_NavigationToggle.scss: -------------------------------------------------------------------------------- 1 | $earmark_size: 6px !default; 2 | 3 | @mixin navigationToggle() { 4 | .esri-navigation-toggle { 5 | display: flex; 6 | 7 | &:not(.esri-navigation-toggle--horizontal) { 8 | flex-direction: column; 9 | } 10 | 11 | calcite-button[appearance="outline-fill"] { 12 | --calcite-color-foreground-1: var(--calcite-color-foreground-3); 13 | --calcite-ui-icon-color: var(--calcite-color-text-1); 14 | } 15 | } 16 | } 17 | 18 | @if $include_NavigationToggle == true { 19 | @include navigationToggle(); 20 | } 21 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_LabeledSwitch.scss: -------------------------------------------------------------------------------- 1 | @mixin labeledSwitch() { 2 | .esri-labeled-switch { 3 | &__label { 4 | --calcite-label-margin-bottom: 0; 5 | } 6 | 7 | &__label-content { 8 | display: flex; 9 | flex: 1; 10 | gap: $side-spacing--half; 11 | align-items: center; 12 | text-wrap: balance; 13 | 14 | > div { 15 | flex-grow: 1; 16 | } 17 | } 18 | 19 | &__icon { 20 | margin-top: -1px; // Align the icon visually with the switch. 21 | color: var(--calcite-color-status-info); 22 | } 23 | 24 | &__tooltip { 25 | text-wrap: wrap; 26 | } 27 | } 28 | } 29 | 30 | @if $include_LabeledSwitch == true { 31 | @include labeledSwitch(); 32 | } 33 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_SketchTooltipControls.scss: -------------------------------------------------------------------------------- 1 | @mixin sketchTooltipControls() { 2 | .esri-sketch-tooltip-controls { 3 | display: flex; 4 | flex-flow: column wrap; 5 | min-width: 100%; 6 | 7 | &__block { 8 | margin: 0; 9 | } 10 | 11 | &__block-content { 12 | display: flex; 13 | flex-direction: column; 14 | gap: $cap-spacing--half; 15 | } 16 | 17 | &__radio-button-label-wrapper { 18 | display: flex; 19 | gap: $side-spacing--eighth; 20 | align-items: center; 21 | } 22 | 23 | calcite-label:last-child { 24 | --calcite-label-margin-bottom: 0; 25 | } 26 | } 27 | } 28 | 29 | @if $include_SketchTooltipControls == true { 30 | @include sketchTooltipControls(); 31 | } 32 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_SaveLayer.scss: -------------------------------------------------------------------------------- 1 | @mixin saveLayer() { 2 | .esri-save-layer { 3 | width: 300px; 4 | height: 250px; 5 | 6 | &__error { 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | } 11 | 12 | &__error-icon { 13 | margin-top: 3rem; 14 | margin-bottom: 0.3rem; 15 | color: var(--calcite-color-status-danger); 16 | } 17 | 18 | &__process-loader { 19 | padding-top: 3rem; 20 | padding-bottom: 2rem; 21 | } 22 | 23 | &__process-label, 24 | &__error-label { 25 | margin-inline: 0.5rem; 26 | } 27 | 28 | &__layer-name-label { 29 | margin: 0.5rem 0.5rem 0; 30 | } 31 | 32 | &__portal-folder-label { 33 | margin: 0.5rem 0.5rem 0.25rem; 34 | } 35 | } 36 | } 37 | 38 | @if $include_SaveLayer == true { 39 | @include saveLayer(); 40 | } 41 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_UtilityNetworkValidateTopology.scss: -------------------------------------------------------------------------------- 1 | @mixin utilityNetworkValidateTopology() { 2 | .esri-un-validate-topology { 3 | &__container { 4 | width: 330px; 5 | } 6 | 7 | &__content { 8 | margin: 0; 9 | border-bottom: none; 10 | } 11 | 12 | &__controls-container { 13 | display: grid; 14 | gap: 0.5rem; 15 | } 16 | 17 | &__status-icon { 18 | &-container { 19 | width: 48px; 20 | height: 48px; 21 | } 22 | 23 | &-error { 24 | --calcite-color-icon-color: #edd317; 25 | 26 | padding-top: 16px; 27 | padding-left: 16px; 28 | } 29 | 30 | &-success { 31 | --calcite-color-icon-color: #35ac46; 32 | 33 | padding-top: 16px; 34 | padding-left: 16px; 35 | } 36 | } 37 | } 38 | } 39 | 40 | @if $include_UtilityNetworkValidateTopology == true { 41 | @include utilityNetworkValidateTopology(); 42 | } 43 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_LineOfSight.scss: -------------------------------------------------------------------------------- 1 | @mixin lineOfSight() { 2 | .esri-line-of-sight { 3 | &__container { 4 | display: flex; 5 | position: relative; 6 | flex-flow: column; 7 | gap: $cap-spacing; 8 | padding: var(--esri-widget-padding); 9 | overflow-y: auto; 10 | } 11 | 12 | &__error { 13 | color: $font-color--error; 14 | } 15 | 16 | &__hint { 17 | display: flex; 18 | flex-direction: column; 19 | gap: $cap-spacing; 20 | } 21 | 22 | &__error, 23 | &__hint { 24 | overflow: hidden; 25 | animation: esri-fade-in 250ms ease-in-out; 26 | 27 | p { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | } 32 | 33 | &__actions { 34 | display: flex; 35 | flex-flow: column; 36 | gap: $cap-spacing--half; 37 | justify-content: center; 38 | } 39 | } 40 | } 41 | 42 | @if $include_LineOfSight == true { 43 | @include lineOfSight(); 44 | } 45 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_FeatureTemplates.scss: -------------------------------------------------------------------------------- 1 | @mixin featureTemplates() { 2 | $icon_size: 48px; 3 | $border: 1px solid $border-color; 4 | 5 | .esri-feature-templates { 6 | background: var(--calcite-color-background); 7 | } 8 | 9 | .esri-feature-templates__list-item-icon { 10 | display: flex; 11 | flex: 0; 12 | align-items: center; 13 | justify-content: center; 14 | width: $icon_size; 15 | min-width: $icon_size; 16 | } 17 | 18 | .esri-feature-templates__list-item-icon > div { 19 | // TemplateItem thumbnail uses plain div as wrapper 20 | display: flex; 21 | } 22 | 23 | .esri-ui { 24 | .esri-feature-templates { 25 | width: $panel-width; 26 | } 27 | 28 | // If FeatureTemplates is used _inside_ another widget, then .esri-feature-templates should fit inside it 29 | .esri-widget .esri-feature-templates { 30 | width: 100%; 31 | } 32 | } 33 | } 34 | 35 | @if $include_FeatureTemplates == true { 36 | @include featureTemplates(); 37 | } 38 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_SearchResultRenderer.scss: -------------------------------------------------------------------------------- 1 | @mixin searchResultRenderer() { 2 | .esri-search-result-renderer { 3 | .esri-search-result-renderer__more-results-header { 4 | margin-bottom: 2px; 5 | font-weight: $font-weight--bold; 6 | } 7 | 8 | .esri-search-result-renderer__more-results-item { 9 | margin-bottom: 10px; 10 | } 11 | 12 | .esri-search-result-renderer__more-results-list { 13 | display: none; 14 | 15 | ul { 16 | margin: 0 0 10px; 17 | padding: 0; 18 | list-style: none; 19 | } 20 | 21 | li { 22 | padding: 2px 0; 23 | } 24 | } 25 | 26 | .esri-search-result-renderer__more-results--show-more-results { 27 | .esri-search-result-renderer__more-results-list { 28 | display: block; 29 | margin-top: 10px; 30 | border-top: 1px solid #ccc; 31 | padding-top: 10px; 32 | } 33 | } 34 | } 35 | } 36 | 37 | @if $include_Search == true { 38 | @include searchResultRenderer(); 39 | } 40 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Zoom.scss: -------------------------------------------------------------------------------- 1 | @mixin zoom() { 2 | .esri-zoom { 3 | display: flex; 4 | flex-flow: column nowrap; 5 | 6 | .esri-widget--button { 7 | box-shadow: none; 8 | 9 | &:first-child { 10 | margin-bottom: 0; 11 | } 12 | 13 | &:last-child { 14 | border-top: solid 1px $border-color; 15 | } 16 | } 17 | 18 | &.esri-zoom--horizontal { 19 | flex-flow: row-reverse nowrap; 20 | 21 | .esri-widget--button { 22 | &:last-child { 23 | border-top: none; 24 | } 25 | 26 | &:first-child { 27 | border-left: solid 1px $border-color; 28 | } 29 | } 30 | } 31 | } 32 | 33 | [dir="rtl"] { 34 | .esri-zoom { 35 | &.esri-zoom--horizontal { 36 | .esri-widget--button { 37 | &:first-child { 38 | border-top: none; 39 | } 40 | 41 | &:last-child { 42 | border-left: solid 1px $border-color; 43 | } 44 | } 45 | } 46 | } 47 | } 48 | } 49 | 50 | @if $include_Zoom == true { 51 | @include zoom(); 52 | } 53 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_TimeZoneLabel.scss: -------------------------------------------------------------------------------- 1 | @mixin timeZoneLabel() { 2 | .esri-time-zone-label { 3 | @include defaultBoxShadow(); 4 | 5 | display: inline-flex; 6 | background-color: var(--calcite-color-foreground-1); 7 | 8 | &__badge { 9 | display: flex; 10 | padding-block: var(--calcite-spacing-sm); 11 | padding-inline: var(--calcite-spacing-sm); 12 | color: var(--calcite-color-text-1); 13 | 14 | &--disabled { 15 | opacity: var(--calcite-color-opacity-disabled); 16 | } 17 | 18 | &--hidden { 19 | display: none; 20 | } 21 | 22 | &-icon { 23 | align-self: center; 24 | } 25 | } 26 | 27 | &__name { 28 | align-self: center; 29 | padding-inline: var(--calcite-spacing-sm); 30 | color: var(--calcite-color-text-1); 31 | font-size: var(--calcite-font-size--2); 32 | 33 | &--disabled { 34 | opacity: var(--calcite-color-opacity-disabled); 35 | } 36 | 37 | &--hidden { 38 | display: none; 39 | } 40 | } 41 | } 42 | } 43 | 44 | @if $include_TimeZoneLabel == true { 45 | @include timeZoneLabel(); 46 | } 47 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Slice.scss: -------------------------------------------------------------------------------- 1 | @mixin slice() { 2 | .esri-slice { 3 | --layer-item-background: var(--calcite-color-foreground-2); 4 | 5 | &__container { 6 | display: flex; 7 | padding: var(--esri-widget-padding-y) var(--esri-widget-padding-x); 8 | overflow-y: auto; 9 | } 10 | 11 | &__error { 12 | color: $font-color--error; 13 | } 14 | 15 | &__container, 16 | &__hint { 17 | display: flex; 18 | flex-direction: column; 19 | gap: $cap-spacing; 20 | } 21 | 22 | &__error, 23 | &__hint { 24 | overflow: hidden; 25 | animation: esri-fade-in 250ms ease-in-out; 26 | 27 | p { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | } 32 | 33 | &__layer-item { 34 | --calcite-color-foreground-2: var(--layer-item-background); 35 | --calcite-color-foreground-1: var(--layer-item-background); 36 | } 37 | 38 | &__actions { 39 | display: flex; 40 | flex-flow: column; 41 | gap: $cap-spacing--half; 42 | justify-content: center; 43 | } 44 | } 45 | } 46 | 47 | @if $include_Slice == true { 48 | @include slice(); 49 | } 50 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Histogram.scss: -------------------------------------------------------------------------------- 1 | @mixin histogram() { 2 | .esri-histogram { 3 | width: 100%; 4 | height: 100%; 5 | direction: ltr; 6 | } 7 | 8 | .esri-histogram__content { 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | .esri-histogram__svg { 14 | display: inline-block; 15 | width: 100%; 16 | height: 100%; 17 | overflow: hidden; 18 | } 19 | 20 | .esri-histogram__data-line { 21 | stroke: #888; 22 | stroke-width: 1px; 23 | shape-rendering: crispEdges; 24 | } 25 | 26 | .esri-histogram__label { 27 | direction: ltr; 28 | font-size: 12px; 29 | stroke: black; 30 | stroke-width: 0; 31 | unicode-bidi: plaintext; 32 | } 33 | 34 | .esri-histogram__average-data-line { 35 | stroke: #444; 36 | } 37 | 38 | .esri-histogram__average-symbol { 39 | font-family: "Georgia, serif", sans-serif; 40 | font-style: italic; 41 | } 42 | 43 | [dir="rtl"] { 44 | .esri-histogram { 45 | direction: rtl; 46 | 47 | .esri-histogram__average-label { 48 | direction: rtl; 49 | unicode-bidi: plaintext; 50 | } 51 | } 52 | } 53 | } 54 | 55 | @if $include_Histogram == true { 56 | @include histogram(); 57 | } 58 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_BuildingExplorer.scss: -------------------------------------------------------------------------------- 1 | @import "BuildingLevelPicker"; 2 | @import "BuildingPhasePicker"; 3 | @import "BuildingDisciplinesTree"; 4 | 5 | @mixin buildingExplorer() { 6 | $base: "esri-building-explorer"; 7 | $loading-container: "#{$base}__loading-container"; 8 | $section: "#{$base}__section"; 9 | $panel--error: "#{$base}__panel--error"; 10 | 11 | .#{$base} { 12 | position: relative; 13 | padding: $side-spacing; 14 | width: $panel-width; 15 | max-width: 100%; 16 | max-height: calc(100vh - #{$side-spacing--double}); 17 | overflow: hidden auto; 18 | 19 | .esri-widget__heading { 20 | font-weight: $font-weight; 21 | } 22 | } 23 | 24 | .#{$loading-container} { 25 | text-align: center; 26 | 27 | calcite-loader { 28 | box-sizing: content-box; 29 | } 30 | } 31 | 32 | .#{$section}:not(:last-child) { 33 | margin-bottom: $side-spacing--double; 34 | } 35 | 36 | .#{$panel--error} { 37 | margin: 0; 38 | animation: esri-fade-in 250ms ease-in-out; 39 | color: $font-color--error; 40 | } 41 | } 42 | 43 | @if $include_BuildingExplorer == true { 44 | @include buildingLevelPicker(); 45 | @include buildingPhasePicker(); 46 | @include buildingDisciplinesTree(); 47 | @include buildingExplorer(); 48 | } 49 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_MeasurementWidgetContent.scss: -------------------------------------------------------------------------------- 1 | @mixin measurementWidgetContent() { 2 | .esri-measurement-widget-content { 3 | display: flex; 4 | position: relative; 5 | flex-direction: column; 6 | gap: $cap-spacing--double; 7 | padding: var(--esri-widget-padding); 8 | overflow-y: auto; 9 | 10 | &__error { 11 | color: $font-color--error; 12 | } 13 | 14 | &__error, 15 | &__hint { 16 | overflow: hidden; 17 | 18 | p { 19 | margin: 0; 20 | padding: 0; 21 | } 22 | } 23 | 24 | &__hint, 25 | &__error, 26 | &__measurement, 27 | &__measurement-item { 28 | display: flex; 29 | flex-direction: column; 30 | gap: $cap-spacing; 31 | animation: esri-fade-in 250ms ease-in-out; 32 | } 33 | 34 | &__measurement-item { 35 | &--disabled { 36 | color: rgba($font-color, $opacity--disabled); 37 | } 38 | 39 | &__value { 40 | font-weight: $font-weight--bold; 41 | } 42 | } 43 | 44 | &__actions { 45 | display: flex; 46 | flex-direction: column; 47 | gap: $cap-spacing--half; 48 | justify-content: center; 49 | } 50 | } 51 | } 52 | 53 | @if $include_MeasurementWidgetContent == true { 54 | @include measurementWidgetContent(); 55 | } 56 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Attribution.scss: -------------------------------------------------------------------------------- 1 | @mixin attribution() { 2 | .esri-attribution { 3 | display: flex; 4 | flex-flow: row nowrap; 5 | align-items: center; 6 | justify-content: space-between; 7 | background-color: rgba($background-color, 0.8); 8 | line-height: 16px; // TODO: refactor to let Attribution inherit line-height. 9 | font-size: $font-size--small; 10 | } 11 | 12 | .esri-attribution__link { 13 | text-decoration: none; 14 | color: currentColor; 15 | 16 | &:hover, 17 | &:active, 18 | &:visited, 19 | &:focus { 20 | color: currentColor; 21 | } 22 | } 23 | 24 | .esri-attribution__sources { 25 | flex: 1 0; 26 | align-self: flex-start; 27 | padding: 0 5px; 28 | overflow: hidden; 29 | text-overflow: ellipsis; 30 | white-space: nowrap; 31 | font-weight: $font-weight--light; 32 | } 33 | 34 | .esri-attribution__sources[role="button"] { 35 | font-size: 1em; 36 | } 37 | 38 | .esri-attribution__powered-by { 39 | align-self: flex-end; 40 | padding: 0 5px; 41 | text-align: right; 42 | white-space: nowrap; 43 | font-weight: $font-weight; 44 | } 45 | 46 | .esri-attribution--open { 47 | z-index: 2; 48 | } 49 | 50 | .esri-attribution__sources--open { 51 | white-space: normal; 52 | } 53 | } 54 | 55 | @if $include_Attribution == true { 56 | @include attribution(); 57 | } 58 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_TableList.scss: -------------------------------------------------------------------------------- 1 | @mixin tableList() { 2 | .esri-table-list { 3 | display: flex; 4 | } 5 | 6 | .esri-table-list__filter-no-results { 7 | @include layerListFilterNoResults(); 8 | } 9 | 10 | .esri-table-list__status-indicator { 11 | @include layerListStatusIndicator(); 12 | } 13 | 14 | .esri-table-list__item-action-image { 15 | @include layerListActionImage(); 16 | } 17 | 18 | .esri-table-list__action-menu .esri-table-list__action-group { 19 | display: none; 20 | } 21 | 22 | .esri-table-list__action-menu[open] .esri-table-list__action-group { 23 | display: flex; 24 | } 25 | 26 | .esri-table-list__publishing { 27 | @include layerListPublishingIndicator(); 28 | 29 | animation: esri-table-layer-list__publishing-anim 2s normal infinite; 30 | } 31 | 32 | .esri-table-list__item-content { 33 | @include layerListItemContent(); 34 | } 35 | 36 | .esri-table-list__item-content-bottom { 37 | @include layerListContentBottom(); 38 | } 39 | 40 | .esri-table-list__item-content-bottom .esri-legend__service { 41 | @include layerListLegend(); 42 | } 43 | 44 | .esri-table-list__item-message { 45 | @include layerListContentBottom(); 46 | } 47 | 48 | @keyframes esri-table-layer-list__publishing-anim { 49 | @include layerListPublishing(); 50 | } 51 | } 52 | 53 | @if $include_TableList == true { 54 | @include tableList(); 55 | } 56 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ItemList.scss: -------------------------------------------------------------------------------- 1 | @mixin itemList() { 2 | $border: 1px solid $border-color; 3 | 4 | .esri-item-list { 5 | width: 100%; 6 | } 7 | 8 | .esri-item-list__filter-container--sticky { 9 | position: sticky; 10 | top: 0; 11 | z-index: 1; 12 | } 13 | 14 | .esri-item-list__group { 15 | margin-top: $cap-spacing; 16 | } 17 | 18 | .esri-item-list__scroller { 19 | overflow-y: auto; 20 | } 21 | 22 | .esri-ui .esri-item-list__scroller { 23 | position: relative; 24 | z-index: 0; 25 | 26 | &--enabled { 27 | max-height: $panel-max-height--small; 28 | } 29 | } 30 | 31 | .esri-item-list__group__header { 32 | color: var(--calcite-color-text-2); 33 | font-weight: var(--calcite-font-weight-medium); 34 | } 35 | 36 | .esri-item-list__list-item { 37 | @include icomoonIconSelector("&") { 38 | padding-inline-end: $font-size * 0.2; 39 | } 40 | 41 | cursor: pointer; 42 | min-height: $list-item-height; 43 | 44 | &--disabled { 45 | cursor: default; 46 | } 47 | } 48 | 49 | .esri-item-list__list-item-icon { 50 | place-content: center; 51 | margin-inline: 0.75rem; // Matches default spacing used by Calcite 52 | height: $list-item-height; 53 | } 54 | 55 | .esri-item-list__no-matches-message { 56 | display: flex; 57 | align-items: center; 58 | justify-content: center; 59 | height: $panel-min-height--small; 60 | } 61 | } 62 | 63 | @if $include_ItemList == true { 64 | @include itemList(); 65 | } 66 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Weather.scss: -------------------------------------------------------------------------------- 1 | @mixin weather() { 2 | .esri-weather { 3 | position: relative; 4 | padding: var(--esri-widget-padding); 5 | width: fit-content; 6 | 7 | &__content { 8 | display: flex; 9 | flex-direction: column; 10 | gap: $cap-spacing; 11 | width: min-content; 12 | 13 | // When there is an error we take up horizontal space, but not any vertical 14 | // space. This way the widget maintains a constant width without us having 15 | // to specify a fixed value. 16 | &--has-error { 17 | visibility: hidden; 18 | height: 0; 19 | overflow: hidden; 20 | pointer-events: none; 21 | } 22 | } 23 | 24 | &__selector { 25 | display: flex; 26 | flex-direction: row; 27 | gap: $side-spacing--half; 28 | align-items: center; 29 | } 30 | 31 | &__options { 32 | display: flex; 33 | flex-direction: column; 34 | gap: $cap-spacing; 35 | 36 | &--hidden { 37 | display: none; 38 | } 39 | } 40 | 41 | &__warning { 42 | display: flex; 43 | flex-direction: row; 44 | gap: $side-spacing--half; 45 | align-items: center; 46 | font-size: $font-size--small; 47 | 48 | calcite-icon { 49 | color: var(--calcite-color-status-warning); 50 | } 51 | } 52 | 53 | // Align calcite slider to the buttons, header, etc 54 | &__labeled-slider calcite-slider { 55 | margin: 0 -7px; 56 | margin-bottom: -14px; 57 | } 58 | } 59 | } 60 | 61 | @if $include_Weather == true { 62 | @include weather(); 63 | } 64 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ColorPicker.scss: -------------------------------------------------------------------------------- 1 | @mixin colorPicker() { 2 | $checkerboard-dark: $background-color; 3 | $checkerboard-light: $font-color; 4 | 5 | .esri-color-picker { 6 | display: inline-block; 7 | position: relative; 8 | width: max-content; 9 | height: max-content; 10 | 11 | &__toggle-button { 12 | position: relative; 13 | z-index: 1; 14 | border: solid 1px var(--calcite-color-border-1); 15 | background: var(--esri-color-picker-value); 16 | } 17 | 18 | &__bg-pattern { 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | opacity: 0.3; 23 | z-index: 0; 24 | 25 | // Checkerboard pattern (see https://www.magicpattern.design/tools/css-backgrounds) 26 | background-color: $checkerboard-light; 27 | background-image: repeating-linear-gradient( 28 | 45deg, 29 | $checkerboard-dark 25%, 30 | transparent 25%, 31 | transparent 75%, 32 | $checkerboard-dark 75%, 33 | $checkerboard-dark 34 | ), 35 | repeating-linear-gradient( 36 | 45deg, 37 | $checkerboard-dark 25%, 38 | $checkerboard-light 25%, 39 | $checkerboard-light 75%, 40 | $checkerboard-dark 75%, 41 | $checkerboard-dark 42 | ); 43 | background-position: 44 | 0 0, 45 | calc(100% / 2) calc(100% / 2); 46 | background-size: calc(100% / 2) calc(100% / 2); 47 | width: 100%; 48 | height: 100%; 49 | } 50 | 51 | &__popover { 52 | --calcite-color-border-1: none; 53 | } 54 | } 55 | } 56 | 57 | @if $include_ColorPicker == true { 58 | @include colorPicker(); 59 | } 60 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Spinner.scss: -------------------------------------------------------------------------------- 1 | $spinner_size: 24px; 2 | 3 | @mixin spinner() { 4 | .esri-ui { 5 | .esri-spinner { 6 | display: none; 7 | position: absolute; 8 | top: -999em; 9 | left: -999em; 10 | transform-origin: 0 0; 11 | opacity: 0; 12 | z-index: 2; 13 | box-shadow: none; 14 | background-color: transparent; 15 | padding: 0; 16 | width: $spinner_size; 17 | height: $spinner_size; 18 | overflow: visible; 19 | pointer-events: none; 20 | } 21 | 22 | .esri-spinner::before { 23 | display: block; 24 | position: absolute; 25 | margin: -50% 0 0 -50%; 26 | background: url("../base/images/Loading_Indicator_double_32.svg") no-repeat center; 27 | width: 100%; 28 | height: 100%; 29 | animation: esri-spinner--rotate-animation 750ms linear infinite; 30 | content: ""; 31 | } 32 | 33 | .esri-spinner--start { 34 | display: block; 35 | animation: esri-spinner--start-animation 250ms cubic-bezier(0.17, 0.67, 0.36, 0.99) forwards; 36 | } 37 | 38 | .esri-spinner--finish { 39 | display: block; 40 | opacity: 1; 41 | animation: esri-spinner--finish-animation 125ms ease-in forwards; 42 | animation-delay: 75ms; 43 | } 44 | } 45 | } 46 | 47 | @keyframes esri-spinner--start-animation { 48 | 0% { 49 | transform: scale(0); 50 | opacity: 0; 51 | } 52 | 53 | 100% { 54 | transform: scale(1); 55 | opacity: 1; 56 | } 57 | } 58 | 59 | @keyframes esri-spinner--finish-animation { 60 | 0% { 61 | transform: scale(1); 62 | opacity: 1; 63 | } 64 | 65 | 100% { 66 | transform: scale(0); 67 | opacity: 0; 68 | } 69 | } 70 | 71 | @keyframes esri-spinner--rotate-animation { 72 | 0% { 73 | transform: rotate(0deg); 74 | } 75 | 76 | 100% { 77 | transform: rotate(360deg); 78 | } 79 | } 80 | 81 | @if $include_Spinner == true { 82 | @include spinner(); 83 | } 84 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ButtonMenu.scss: -------------------------------------------------------------------------------- 1 | @mixin buttonMenu() { 2 | .esri-button-menu { 3 | width: $button-width; 4 | height: $button-height; 5 | } 6 | 7 | .esri-button-menu__content { 8 | min-width: 200px; 9 | max-height: 250px; 10 | overflow: auto; 11 | 12 | .esri-button-menu__item-wrapper, 13 | .esri-button-menu__embedded-content-wrapper { 14 | margin: 0; 15 | padding: 0; 16 | list-style: none; 17 | } 18 | } 19 | 20 | .esri-button-menu__item { 21 | display: block; 22 | padding: 0; 23 | 24 | .esri-button-menu__item-label { 25 | display: flex; 26 | position: relative; 27 | align-items: center; 28 | justify-content: flex-start; 29 | margin: 0; 30 | cursor: pointer; 31 | padding: $cap-spacing $side-spacing; 32 | text-decoration: none; 33 | color: $font-color; 34 | font-size: $font-size; 35 | font-weight: $font-weight; 36 | 37 | &:hover { 38 | background-color: $background-color--hover; 39 | color: $interactive-font-color--hover; 40 | } 41 | 42 | .esri-button-menu__item-label-content { 43 | padding: 0 $side-spacing--half; 44 | width: auto; 45 | } 46 | } 47 | 48 | .esri-button-menu__icon { 49 | color: $button-color; 50 | } 51 | 52 | .esri-button-menu__checkbox { 53 | position: absolute; 54 | opacity: 0; 55 | 56 | &:checked { 57 | ~ .esri-button-menu__embedded-content-wrapper { 58 | display: block; 59 | } 60 | } 61 | } 62 | 63 | .esri-button-menu__embedded-content-wrapper { 64 | display: none; 65 | 66 | .esri-button-menu__checkbox { 67 | &:checked { 68 | ~ .esri-button-menu__item-label { 69 | .esri-button-menu__icon { 70 | display: block; 71 | } 72 | } 73 | } 74 | } 75 | } 76 | } 77 | 78 | .esri-button-menu__item--selectable { 79 | .esri-button-menu__icon { 80 | display: none; 81 | } 82 | } 83 | } 84 | 85 | @if $include_ButtonMenu == true { 86 | @include buttonMenu(); 87 | } 88 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_UtilityNetworkTrace.scss: -------------------------------------------------------------------------------- 1 | @mixin UtilityNetworkTrace { 2 | .esri-utility-trace-network { 3 | flex: 1 1 auto; 4 | 5 | &.esri-component.esri-widget--panel { 6 | min-height: $panel-min-height--medium; 7 | } 8 | 9 | calcite-icon { 10 | box-sizing: initial; 11 | } 12 | 13 | calcite-tab { 14 | background-color: $background-color--offset; 15 | padding-top: 0; 16 | padding-bottom: 0; 17 | 18 | &:not([selected]) { 19 | flex: 0; 20 | } 21 | } 22 | 23 | calcite-block { 24 | margin-bottom: 0; 25 | } 26 | 27 | &__add-button-container { 28 | display: flex; 29 | justify-content: center; 30 | margin: $cap-spacing--plus-half 0 $cap-spacing; 31 | } 32 | 33 | &__notice-container { 34 | padding: $cap-spacing--half; 35 | } 36 | 37 | &__list-container { 38 | background-color: $background-color; 39 | padding: $cap-spacing--quarter $side-spacing--quarter; 40 | } 41 | 42 | &__flow { 43 | height: 100%; 44 | } 45 | 46 | &__results-container { 47 | height: 100%; 48 | } 49 | 50 | &__number-input { 51 | width: 150px; 52 | } 53 | 54 | &__reset-prompt { 55 | @include defaultBoxShadow(); 56 | 57 | display: flex; 58 | position: absolute; 59 | right: 0; 60 | bottom: 0; 61 | left: 0; 62 | flex-flow: column nowrap; 63 | border-top: solid 3px $border-color--subtle; 64 | background-color: var(--calcite-color-background); 65 | padding: $cap-spacing $side-spacing; 66 | max-height: 85%; 67 | animation: esri-fade-in-up 100ms ease-in-out; 68 | color: $font-color; 69 | } 70 | 71 | &__divider { 72 | flex: 0 0 auto; 73 | margin: 0 0 $cap-spacing 0; 74 | border-bottom: $border; 75 | border-color: $border-color--subtle; 76 | color: inherit; 77 | } 78 | 79 | &__padTop { 80 | padding-top: 5px; 81 | } 82 | } 83 | } 84 | 85 | @media (prefers-reduced-motion) { 86 | .esri-utility-trace-network__reset-prompt { 87 | animation: none; 88 | } 89 | } 90 | 91 | @if $include_UtilityNetworkTrace == true { 92 | @include UtilityNetworkTrace(); 93 | } 94 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_BuildingPhasePicker.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds all the styles for the phase picker used in the building explorer. 3 | */ 4 | @mixin buildingPhasePicker() { 5 | $container: "esri-building-phase-picker"; 6 | $phases-container: "#{$container}__phases-container"; 7 | $phase: "#{$container}__phase"; 8 | $phase-active: "#{$container}__phase--active"; 9 | $phase-current: "#{$container}__phase--current"; 10 | $divider: "#{$container}__divider"; 11 | $divider-active: "#{$container}__divider--active"; 12 | $arrow-left: "#{$container}__arrow-left"; 13 | $arrow-right: "#{$container}__arrow-right"; 14 | 15 | $phase-size: 32px; 16 | $border-width: 1px; 17 | $divider-min-width: $side-spacing; 18 | 19 | .#{$container}, 20 | .#{$phases-container} { 21 | display: flex; 22 | flex-direction: row; 23 | align-items: center; 24 | } 25 | 26 | .#{$phases-container} { 27 | flex-grow: 0; 28 | flex-shrink: 1; 29 | padding: 5px; 30 | overflow: hidden; 31 | } 32 | 33 | .#{$phase} { 34 | appearance: none; 35 | flex-shrink: 0; 36 | transition: all 250ms; 37 | border: solid $border-width $border-color; 38 | border-radius: 100%; 39 | background: $background-color; 40 | cursor: pointer; 41 | width: $phase-size; 42 | height: $phase-size; 43 | color: $font-color; 44 | font-weight: $font-weight; 45 | 46 | &:hover { 47 | transform: scale(1.1); // Make it slightly bigger w/o affecting layout 48 | box-shadow: 0 0 2px 1px $border-color--active; 49 | } 50 | 51 | &.#{$phase-active} { 52 | border-color: $border-color--active; 53 | background-color: $background-color--active; 54 | } 55 | 56 | &.#{$phase-current} { 57 | background-color: $border-color--active; 58 | color: $interactive-font-color--inverse; 59 | } 60 | } 61 | 62 | .#{$divider} { 63 | flex-grow: 0; 64 | background: $border-color; 65 | min-width: $divider-min-width; 66 | height: $border-width; 67 | 68 | &.#{$divider-active} { 69 | background-color: $border-color--active; 70 | } 71 | } 72 | 73 | .#{$arrow-left}, 74 | .#{$arrow-right} { 75 | @include arrowButton(); 76 | } 77 | 78 | .#{$arrow-left} { 79 | @extend .esri-arrow-left; 80 | } 81 | 82 | .#{$arrow-right} { 83 | @extend .esri-arrow-right; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # arcgis-js-api (Deprecated) 2 | 3 | [![deprecated](http://badges.github.io/stability-badges/dist/deprecated.svg)](http://github.com/badges/stability-badges) 4 | 5 | This repository is used as a reference for the [ArcGIS Maps SDK for JavaScript](https://developers.arcgis.com/javascript/) widget styles. 6 | 7 | **Deprecation Notice.** Using SCSS to style the SDK's widgets was deprecated at 4.29 and is no longer supported as of 4.31. Migrate to using Calcite for [styling](https://developers.arcgis.com/javascript/latest/styling/#calcite-styling). 8 | 9 | If you are starting a new project, we recommend using a local build with components or @arcgis/core. See the [Get started with npm](https://developers.arcgis.com/javascript/latest/get-started-npm/) guide topic for more information. 10 | 11 | ## Requirements 12 | 13 | Use of the ArcGIS Maps SDK for JavaScript is subject to the terms described in the product-specific [terms of use.](https://www.esri.com/en-us/legal/terms/product-specific-scope-of-use) Learn more about licensing [here](https://developers.arcgis.com/javascript/latest/licensing/). 14 | 15 | ## Resources 16 | 17 | - [ArcGIS Maps SDK for JavaScript](https://developers.arcgis.com/javascript/) 18 | - [http://blogs.esri.com/esri/arcgis/tag/javascript/](https://blogs.esri.com/esri/arcgis/tag/javascript/) 19 | 20 | ## Issues 21 | 22 | - General questions about using these modules or the ArcGIS Maps SDK for JavaScript? See the [Esri developer community](https://community.esri.com/t5/arcgis-api-for-javascript/ct-p/arcgis-api-for-javascript). 23 | - [Technical support](https://support.esri.com/). 24 | 25 | ## Licensing 26 | 27 | COPYRIGHT © 2024 Esri 28 | 29 | All rights reserved under the copyright laws of the United States 30 | and applicable international laws, treaties, and conventions. 31 | 32 | This material is licensed for use under the [Esri Master License 33 | Agreement (MLA)](https://www.esri.com/content/dam/esrisites/en-us/media/legal/ma-full/ma-full.pdf), and is bound by the terms of that agreement. 34 | You may redistribute and use this code without modification, 35 | provided you adhere to the terms of the MLA and include this 36 | copyright notice. 37 | 38 | For additional information, contact: 39 | Environmental Systems Research Institute, Inc. 40 | Attn: Contracts and Legal Services Department 41 | 380 New York Street 42 | Redlands, California, USA 92373 43 | USA 44 | 45 | email: contracts@esri.com 46 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_HistogramRangeSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin histogramRangeSlider() { 2 | .esri-histogram-range-slider { 3 | display: flex; 4 | position: relative; 5 | flex-direction: column; 6 | width: 100%; 7 | height: 100%; 8 | 9 | .esri-slider .esri-slider__label { 10 | display: none; 11 | top: 24px; 12 | } 13 | 14 | .esri-slider__anchor--moving .esri-slider__label { 15 | display: inline; 16 | } 17 | 18 | .esri-slider { 19 | font-size: 12px; 20 | } 21 | 22 | .esri-slider__content { 23 | display: flex; 24 | flex-direction: column-reverse; 25 | } 26 | 27 | .esri-slider__max { 28 | position: absolute; 29 | right: 0; 30 | bottom: 0; 31 | text-align: right; 32 | 33 | .esri-slider__range-input { 34 | float: right; 35 | text-align: right; 36 | } 37 | } 38 | 39 | .esri-slider__min { 40 | position: absolute; 41 | bottom: 0; 42 | left: 0; 43 | text-align: left; 44 | 45 | .esri-slider__range-input { 46 | text-align: left; 47 | } 48 | } 49 | 50 | .esri-slider--horizontal { 51 | .esri-slider__max, 52 | .esri-slider__min { 53 | display: inline; 54 | min-width: 50%; 55 | } 56 | } 57 | 58 | .esri-histogram { 59 | display: flex; 60 | align-self: flex-end; 61 | } 62 | 63 | .esri-histogram__bar { 64 | touch-action: none; 65 | } 66 | } 67 | 68 | .esri-histogram-range-slider__slider-container { 69 | align-self: flex-end; 70 | margin-bottom: 24px; 71 | width: 100%; 72 | } 73 | 74 | .esri-histogram-range-slider__histogram-container { 75 | display: flex; 76 | flex-grow: 1; 77 | width: 100%; 78 | height: 100%; 79 | min-height: 0; 80 | } 81 | 82 | .esri-histogram-range-slider__range-type--less-than, 83 | .esri-histogram-range-slider__range-type--at-most { 84 | .esri-slider__segment-0 { 85 | background-color: #0079c1; 86 | } 87 | } 88 | 89 | .esri-histogram-range-slider__range-type--greater-than, 90 | .esri-histogram-range-slider__range-type--at-least, 91 | .esri-histogram-range-slider__range-type--between, 92 | .esri-histogram-range-slider__range-type--not-between { 93 | .esri-slider__segment-1 { 94 | background-color: #0079c1; 95 | } 96 | } 97 | } 98 | 99 | @if $include_HistogramRangeSlider == true { 100 | @include histogramRangeSlider(); 101 | } 102 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_DirectionalPad.scss: -------------------------------------------------------------------------------- 1 | @mixin directionalPad() { 2 | .esri-directional-pad { 3 | display: flex; 4 | flex-direction: column; 5 | gap: $side-spacing--half; 6 | outline: none; 7 | 8 | /* Two calcite-pads provide their own background and shadow */ 9 | box-shadow: none !important; 10 | background: transparent; 11 | 12 | /* Prevent selecting the SVGs (ios webkit) */ 13 | user-select: none; 14 | 15 | calcite-action-pad { 16 | display: contents; 17 | } 18 | 19 | calcite-action-group { 20 | /* Prevent browser's zoom/pan gestures (ios/android) */ 21 | touch-action: none; 22 | } 23 | 24 | calcite-action { 25 | /* Fix Calcite's padding inline not matching padding block */ 26 | aspect-ratio: 1; 27 | } 28 | 29 | &__buttons-container { 30 | --calcite-color-background: transparent; 31 | --calcite-action-group-gap: 0; 32 | --calcite-action-group-padding: 0; 33 | 34 | calcite-action { 35 | /* Make focus outline not visible if using mouse */ 36 | --calcite-color-focus-color: var(--calcite-color-foreground-3); 37 | } 38 | 39 | calcite-action:not([active]) { 40 | /* Fix active styles remaining on initial button in Firefox */ 41 | --calcite-color-foreground-3: var(--calcite-color-foreground-1); 42 | } 43 | 44 | calcite-action[active] { 45 | /* Fix button:active not having a background */ 46 | --calcite-color-foreground-1: var(--calcite-color-foreground-3); 47 | } 48 | 49 | calcite-icon { 50 | transform: var(--rotation, unset); 51 | } 52 | 53 | /* Fix sticky hover effect on touchscreen devices */ 54 | @media (hover: none) { 55 | calcite-action { 56 | --calcite-color-foreground-2: var(--calcite-color-foreground-1); 57 | --calcite-color-text-1: var(--calcite-color-text-3); 58 | } 59 | } 60 | } 61 | 62 | &__rotation-container { 63 | display: block; 64 | width: 100%; 65 | 66 | calcite-action { 67 | flex: 0.3; 68 | } 69 | } 70 | 71 | &__rotation-slider-container { 72 | display: flex; 73 | flex: 1; 74 | align-items: center; 75 | 76 | calcite-slider { 77 | flex: 1; 78 | 79 | /* 80 | * Fix the slider label overflowing the slider bounds when slider value 81 | * is at either edge 82 | */ 83 | padding-inline: $side-spacing--third; 84 | } 85 | } 86 | } 87 | } 88 | 89 | @if $include_DirectionalPad == true { 90 | @include directionalPad(); 91 | } 92 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Features.scss: -------------------------------------------------------------------------------- 1 | @mixin features() { 2 | // actions 3 | $action-size: $button-width--half !default; 4 | $action-size--image: $button-width--half !default; 5 | 6 | .esri-features { 7 | --calcite-color-background: $background-color; 8 | 9 | display: flex; 10 | flex-direction: column; 11 | 12 | calcite-flow { 13 | position: relative; 14 | z-index: 1; 15 | } 16 | 17 | img { 18 | image-orientation: from-image; 19 | } 20 | } 21 | 22 | .esri-features__flow-item--collapsed { 23 | --calcite-flow-item-header-border-block-end: none; 24 | } 25 | 26 | .esri-features__container { 27 | background-color: var(--calcite-color-background); 28 | } 29 | 30 | .esri-features__container:not(:empty) { 31 | padding: $cap-spacing; 32 | } 33 | 34 | .esri-features .esri-feature, 35 | .esri-features .esri-feature-relationship { 36 | background-color: transparent; 37 | } 38 | 39 | .esri-features__heading { 40 | word-break: break-word; 41 | word-wrap: break-word; 42 | } 43 | 44 | .esri-features__header, 45 | .esri-features__footer { 46 | display: flex; 47 | justify-content: flex-end; 48 | background-color: var(--calcite-color-foreground-1); 49 | } 50 | 51 | .esri-features__loader { 52 | align-self: center; 53 | padding-inline: 1rem; 54 | } 55 | 56 | .esri-features__pagination-action-bar { 57 | flex: 1; 58 | border-inline-end: 1px solid var(--calcite-color-border-3); 59 | } 60 | 61 | .esri-features__icon { 62 | display: inline-block; 63 | flex: 0 0 $action-size--image; 64 | width: $action-size; 65 | height: $action-size; 66 | } 67 | 68 | .esri-features__action-image { 69 | flex: 0 0 $action-size--image; 70 | background-position: 50% 50%; 71 | background-repeat: no-repeat; 72 | background-size: contain; 73 | width: $action-size--image; 74 | height: $action-size--image; 75 | } 76 | 77 | .esri-features__footer { 78 | flex: 1; 79 | } 80 | 81 | .esri-features__header { 82 | border-block-end: 1px solid var(--calcite-color-border-3); 83 | } 84 | 85 | .esri-features__content-feature { 86 | --calcite-flow-item-footer-padding: 0; 87 | } 88 | 89 | .esri-features__feature-menu-observer { 90 | position: relative; 91 | bottom: 20px; 92 | z-index: 2; 93 | text-align: center; 94 | } 95 | 96 | .esri-features__action--exit { 97 | transform: scaleX(-1); 98 | } 99 | } 100 | 101 | @if $include_Features == true { 102 | @include features(); 103 | } 104 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Feature.scss: -------------------------------------------------------------------------------- 1 | @mixin feature() { 2 | .esri-feature__title { 3 | display: block; 4 | word-break: break-word; 5 | word-wrap: break-word; 6 | font-size: $font-size; 7 | } 8 | 9 | .esri-feature calcite-icon { 10 | box-sizing: content-box; 11 | } 12 | 13 | .esri-feature__attachments { 14 | display: flex; 15 | } 16 | 17 | .esri-feature__loading-container { 18 | display: flex; 19 | justify-content: center; 20 | padding: $cap-spacing 0; 21 | width: 100%; 22 | } 23 | 24 | .esri-feature-relationship { 25 | position: relative; 26 | } 27 | 28 | .esri-feature-relationship__list { 29 | min-height: $list-item-height; 30 | } 31 | 32 | .esri-feature-relationship__list-item--hidden { 33 | display: none; 34 | } 35 | 36 | .esri-feature__feature-observer { 37 | position: relative; 38 | bottom: 20px; 39 | z-index: 2; 40 | text-align: center; 41 | } 42 | 43 | .esri-feature__sticky-loading-container { 44 | display: flex; 45 | position: sticky; 46 | bottom: 10px; 47 | align-items: center; 48 | justify-content: center; 49 | z-index: 2; 50 | margin: 0; 51 | padding: 0; 52 | height: $list-item-height; 53 | pointer-events: none; 54 | } 55 | 56 | .esri-icon-loading-indicator { 57 | display: inline-block; 58 | } 59 | 60 | .esri-feature { 61 | --calcite-color-background: $background-color; 62 | 63 | width: 100%; 64 | } 65 | 66 | .esri-feature__content-element { 67 | margin-bottom: $cap-spacing--double; 68 | padding: 0 $side-spacing--half; 69 | 70 | .esri-widget__heading { 71 | line-height: 1.3; 72 | } 73 | } 74 | 75 | .esri-feature__content-element:only-child, 76 | .esri-feature__content-node--text { 77 | margin-bottom: $cap-spacing--quarter; 78 | } 79 | 80 | .esri-feature__content-node { 81 | display: flex; 82 | flex-direction: column; 83 | } 84 | 85 | .esri-feature__text { 86 | line-height: 1.3; 87 | } 88 | 89 | // ATTACHMENTS 90 | .esri-feature-attachments { 91 | flex-flow: column wrap; 92 | align-items: flex-start; 93 | } 94 | 95 | .esri-feature__last-edited-info { 96 | padding-top: $cap-spacing--half; 97 | font-size: $font-size--small; 98 | } 99 | 100 | // RTL 101 | [dir="rtl"] { 102 | .esri-feature__attachments-title { 103 | margin: 0 0 0 auto; 104 | } 105 | 106 | .esri-feature__attachments--list .esri-feature__attachment-item-mask { 107 | margin-right: 0; 108 | margin-left: $side-spacing--half; 109 | } 110 | } 111 | } 112 | 113 | @if $include_Feature == true { 114 | @include feature(); 115 | } 116 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_LayerList.scss: -------------------------------------------------------------------------------- 1 | @mixin layerList() { 2 | .esri-layer-list { 3 | display: flex; 4 | } 5 | 6 | .esri-layer-list__filter-no-results { 7 | @include layerListFilterNoResults(); 8 | } 9 | 10 | .esri-layer-list__item { 11 | --calcite-list-item-spacing-indent: 2rem; 12 | --calcite-list-item-icon-center: 8.5px; 13 | } 14 | 15 | .esri-layer-list__item-temporary-icon { 16 | margin-inline-start: 0.25rem; 17 | } 18 | 19 | .esri-layer-list__item-table-icon, 20 | .esri-layer-list__item-catalog-icon { 21 | margin-inline-end: 0; 22 | } 23 | 24 | .esri-layer-list__item-action-image { 25 | @include layerListActionImage(); 26 | } 27 | 28 | .esri-layer-list__action-menu .esri-layer-list__action-group { 29 | display: none; 30 | } 31 | 32 | .esri-layer-list__action-menu[open] .esri-layer-list__action-group { 33 | display: flex; 34 | } 35 | 36 | .esri-layer-list__visible-icon { 37 | visibility: hidden; 38 | } 39 | 40 | .esri-layer-list__item--active:hover, 41 | .esri-layer-list__item--active:focus, 42 | .esri-layer-list__item--active:focus-within { 43 | > .esri-layer-list__visible-toggle > .esri-layer-list__visible-icon { 44 | visibility: visible; 45 | } 46 | } 47 | 48 | .esri-layer-list__item--invisible { 49 | color: $interactive-font-color--disabled; 50 | } 51 | 52 | .esri-layer-list__status-indicator { 53 | @include layerListStatusIndicator(); 54 | } 55 | 56 | .esri-layer-list__publishing { 57 | @include layerListPublishingIndicator(); 58 | 59 | transform-origin: var(--calcite-list-item-icon-center) var(--calcite-list-item-icon-center); 60 | animation: esri-layer-list__publishing-anim 2s normal infinite; 61 | } 62 | 63 | .esri-layer-list__updating { 64 | @include layerListUpdatingIndicator(); 65 | 66 | animation: esri-layer-list__updating-anim 2s normal infinite; 67 | } 68 | 69 | .esri-layer-list__connection-status { 70 | @include layerListConnectionStatus(); 71 | } 72 | 73 | .esri-layer-list__connection-status--connected { 74 | color: $connection-connected; 75 | } 76 | 77 | .esri-layer-list__item-content { 78 | @include layerListItemContent(); 79 | } 80 | 81 | .esri-layer-list__item-content-bottom { 82 | @include layerListContentBottom(); 83 | } 84 | 85 | .esri-layer-list__item-content-bottom .esri-legend__service { 86 | @include layerListLegend(); 87 | } 88 | 89 | .esri-layer-list__item-message { 90 | @include layerListContentBottom(); 91 | } 92 | 93 | @keyframes esri-layer-list__updating-anim { 94 | @include layerListUpdating(); 95 | } 96 | 97 | @keyframes esri-layer-list__publishing-anim { 98 | @include layerListPublishing(); 99 | } 100 | } 101 | 102 | @if $include_LayerList == true { 103 | @include layerList(); 104 | } 105 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_FeatureContent.scss: -------------------------------------------------------------------------------- 1 | $content-height--loading: 150px !default; 2 | 3 | @mixin featureContent() { 4 | .esri-feature-content__loader-container { 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | padding: 0; 9 | height: $content-height--loading; 10 | } 11 | 12 | .esri-feature-content__loader { 13 | background: url("../base/images/loading-throb.gif") no-repeat center center; 14 | width: 100%; 15 | height: 64px; 16 | } 17 | 18 | .esri-feature-content { 19 | font-size: $font-size; 20 | } 21 | 22 | .esri-feature-content h1, 23 | .esri-feature-content h2, 24 | .esri-feature-content h3, 25 | .esri-feature-content h4, 26 | .esri-feature-content h5, 27 | .esri-feature-content h6 { 28 | margin: 0.5em 0; 29 | line-height: normal; 30 | letter-spacing: 0; 31 | color: $font-color; 32 | font-weight: $font-weight__heading; 33 | } 34 | 35 | .esri-feature-content h1 { 36 | font-size: 1.75em; 37 | } 38 | 39 | .esri-feature-content h2 { 40 | font-size: 1.5em; 41 | } 42 | 43 | .esri-feature-content h3 { 44 | font-size: 1.25em; 45 | } 46 | 47 | .esri-feature-content h4, 48 | .esri-feature-content h5, 49 | .esri-feature-content h6 { 50 | font-size: 1em; 51 | } 52 | 53 | .esri-widget__heading.esri-feature-element-info__title { 54 | margin-top: 0; 55 | margin-bottom: 0.2em; 56 | color: $font-color; 57 | font-size: $font-size__h1; 58 | font-weight: $font-weight--regular; 59 | } 60 | 61 | .esri-feature-element-info__description { 62 | margin-bottom: $cap-spacing--three-quarters; 63 | font-size: $font-size__body; 64 | font-weight: $font-weight--regular; 65 | } 66 | 67 | .esri-feature-content p { 68 | margin: 0 0 1.2em; 69 | font-size: $font-size; 70 | 71 | &:last-child { 72 | margin-block-end: 0; 73 | } 74 | } 75 | 76 | .esri-feature-content img { 77 | max-width: 100%; 78 | max-height: 100%; 79 | image-orientation: from-image; 80 | } 81 | 82 | .esri-feature-content video { 83 | max-width: 100%; 84 | max-height: 100%; 85 | } 86 | 87 | .esri-feature-content figure { 88 | margin: 0; 89 | padding: 0; 90 | } 91 | 92 | .esri-feature-content figcaption { 93 | display: block; 94 | margin: 0.2em 0 0; 95 | padding: 0; 96 | font-size: $font-size--small; 97 | font-style: italic; 98 | } 99 | 100 | .esri-feature-content ul, 101 | .esri-feature-content ol { 102 | margin-block: 1rem; 103 | 104 | &:first-child { 105 | margin-block-start: 0; 106 | } 107 | } 108 | 109 | .esri-feature-content a { 110 | color: $interactive-font-color; 111 | 112 | &:hover, 113 | &:focus { 114 | color: $interactive-font-color--hover; 115 | } 116 | } 117 | } 118 | 119 | @if $include_FeatureContent == true { 120 | @include featureContent(); 121 | } 122 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_FeatureMedia.scss: -------------------------------------------------------------------------------- 1 | @mixin featureMedia() { 2 | .esri-feature-media__container { 3 | display: flex; 4 | flex-flow: row wrap; 5 | align-items: center; 6 | margin-top: $cap-spacing--half; 7 | width: 100%; 8 | min-height: 150px; 9 | 10 | .esri-feature-media__pagination-button { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | border: none; 15 | background: transparent; 16 | cursor: pointer; 17 | padding-block: $cap-spacing--half; 18 | padding-inline: $side-spacing--half; 19 | color: $interactive-font-color; 20 | 21 | &:hover, 22 | &:focus { 23 | background-color: $background-color--hover; 24 | color: $interactive-font-color--hover; 25 | fill: $interactive-font-color--hover; 26 | } 27 | } 28 | } 29 | 30 | .esri-feature-media__item-title { 31 | margin: 0; 32 | font-size: $font-size__h2; 33 | } 34 | 35 | .esri-feature-media__item-caption { 36 | padding-block-start: $cap-spacing--quarter; 37 | font-size: $font-size__body; 38 | } 39 | 40 | .esri-feature-media__item { 41 | display: flex; 42 | align-items: flex-start; 43 | justify-content: center; 44 | margin-block: $cap-spacing--half; 45 | width: 100%; 46 | height: auto; 47 | } 48 | 49 | .esri-feature-media__item-navigation { 50 | display: flex; 51 | flex: 0 1 100%; 52 | align-items: flex-start; 53 | justify-content: space-between; 54 | margin-block-end: $cap-spacing--half; 55 | } 56 | 57 | .esri-feature-media__item-text { 58 | margin-inline-end: $side-spacing--half; 59 | } 60 | 61 | .esri-feature-media__pagination { 62 | display: flex; 63 | flex: 0 0 auto; 64 | align-items: center; 65 | overflow: hidden; 66 | 67 | &:only-child { 68 | margin-inline-start: auto; 69 | } 70 | } 71 | 72 | .esri-feature-media__pagination-text { 73 | padding-inline: $side-spacing--quarter; 74 | color: $interactive-font-color; 75 | font-size: $font-size--small; 76 | } 77 | 78 | .esri-feature-media__item-container { 79 | flex: 0 1 auto; 80 | width: 100%; 81 | 82 | img { 83 | max-width: 100%; 84 | } 85 | 86 | img[src$=".SVG"], 87 | img[src$=".svg"] { 88 | width: 100%; 89 | } 90 | } 91 | 92 | .esri-feature-media__chart { 93 | background-color: $background-color; 94 | 95 | // Dimensions on containing div are required 96 | // for Chart library to know how big to make the chart. 97 | width: 100%; 98 | height: 155px; 99 | } 100 | 101 | // RTL 102 | [dir="rtl"] { 103 | .esri-feature-media__image-summary { 104 | margin: 0 0.5em 0 0; 105 | } 106 | 107 | .esri-feature-media__pagination-icon { 108 | transform: rotate(180deg); 109 | } 110 | } 111 | } 112 | 113 | @if $include_FeatureMedia == true { 114 | @include featureMedia(); 115 | } 116 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_CatalogLayerList.scss: -------------------------------------------------------------------------------- 1 | @mixin catalogLayerList() { 2 | .esri-catalog-layer-list { 3 | display: flex; 4 | } 5 | 6 | .esri-catalog-layer-list__filter-no-results { 7 | @include layerListFilterNoResults(); 8 | } 9 | 10 | .esri-catalog-layer-list__item { 11 | --calcite-list-item-spacing-indent: 2rem; 12 | --calcite-list-item-icon-center: 8.5px; 13 | } 14 | 15 | .esri-catalog-layer-list__item-temporary-icon { 16 | margin-inline-start: 0.25rem; 17 | } 18 | 19 | .esri-catalog-layer-list__item-table-icon { 20 | margin-inline-end: 0; 21 | } 22 | 23 | .esri-catalog-layer-list__item-action-image { 24 | @include layerListActionImage(); 25 | } 26 | 27 | .esri-catalog-layer-list__action-menu .esri-catalog-layer-list__action-group { 28 | display: none; 29 | } 30 | 31 | .esri-catalog-layer-list__action-menu[open] .esri-catalog-layer-list__action-group { 32 | display: flex; 33 | } 34 | 35 | .esri-catalog-layer-list__visible-icon { 36 | visibility: hidden; 37 | } 38 | 39 | .esri-catalog-layer-list__item--active:hover, 40 | .esri-catalog-layer-list__item--active:focus, 41 | .esri-catalog-layer-list__item--active:focus-within { 42 | > .esri-catalog-layer-list__visible-toggle > .esri-catalog-layer-list__visible-icon { 43 | visibility: visible; 44 | } 45 | } 46 | 47 | .esri-catalog-layer-list__item--invisible { 48 | color: $interactive-font-color--disabled; 49 | } 50 | 51 | .esri-catalog-layer-list__status-indicator { 52 | @include layerListStatusIndicator(); 53 | } 54 | 55 | .esri-catalog-layer-list__publishing { 56 | @include layerListPublishingIndicator(); 57 | 58 | transform-origin: var(--calcite-list-item-icon-center) var(--calcite-list-item-icon-center); 59 | animation: esri-catalog-layer-list__publishing-anim 2s normal infinite; 60 | } 61 | 62 | .esri-catalog-layer-list__updating { 63 | @include layerListUpdatingIndicator(); 64 | 65 | animation: esri-catalog-layer-list__updating-anim 2s normal infinite; 66 | } 67 | 68 | .esri-catalog-layer-list__connection-status { 69 | @include layerListConnectionStatus(); 70 | } 71 | 72 | .esri-catalog-layer-list__connection-status--connected { 73 | color: $connection-connected; 74 | } 75 | 76 | .esri-catalog-layer-list__item-content { 77 | @include layerListItemContent(); 78 | } 79 | 80 | .esri-catalog-layer-list__item-content-bottom { 81 | @include layerListContentBottom(); 82 | } 83 | 84 | .esri-catalog-layer-list__item-content-bottom .esri-legend__service { 85 | @include layerListLegend(); 86 | } 87 | 88 | .esri-catalog-layer-list__item-message { 89 | @include layerListContentBottom(); 90 | } 91 | 92 | @keyframes esri-catalog-layer-list__updating-anim { 93 | @include layerListUpdating(); 94 | } 95 | 96 | @keyframes esri-catalog-layer-list__publishing-anim { 97 | @include layerListPublishing(); 98 | } 99 | } 100 | 101 | @if $include_CatalogLayerList == true { 102 | @include catalogLayerList(); 103 | } 104 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_BasemapLayerList.scss: -------------------------------------------------------------------------------- 1 | @mixin basemapLayerList() { 2 | .esri-basemap-layer-list { 3 | display: flex; 4 | } 5 | 6 | .esri-basemap-layer-list__filter-no-results { 7 | @include layerListFilterNoResults(); 8 | } 9 | 10 | .esri-basemap-layer-list__item { 11 | --calcite-list-item-spacing-indent: 2rem; 12 | } 13 | 14 | .esri-basemap-layer-list__item-temporary-icon { 15 | margin-inline-start: 0.25rem; 16 | } 17 | 18 | .esri-basemap-layer-list__item-catalog-icon { 19 | margin-inline-end: 0; 20 | } 21 | 22 | .esri-basemap-layer-list__item-action-image { 23 | @include layerListActionImage(); 24 | } 25 | 26 | .esri-basemap-layer-list__action-menu .esri-basemap-layer-list__action-group { 27 | display: none; 28 | } 29 | 30 | .esri-basemap-layer-list__action-menu[open] .esri-basemap-layer-list__action-group { 31 | display: flex; 32 | } 33 | 34 | .esri-basemap-layer-list__visible-icon { 35 | visibility: hidden; 36 | } 37 | 38 | .esri-basemap-layer-list__item--active:hover, 39 | .esri-basemap-layer-list__item--active:focus, 40 | .esri-basemap-layer-list__item--active:focus-within { 41 | > .esri-basemap-layer-list__visible-toggle > .esri-basemap-layer-list__visible-icon { 42 | visibility: visible; 43 | } 44 | } 45 | 46 | .esri-basemap-layer-list__item--invisible { 47 | color: $interactive-font-color--disabled; 48 | } 49 | 50 | .esri-basemap-layer-list__status-indicator { 51 | @include layerListStatusIndicator(); 52 | } 53 | 54 | .esri-basemap-layer-list__publishing { 55 | @include layerListPublishingIndicator(); 56 | 57 | animation: esri-basemap-layer-list__publishing-anim 2s normal infinite; 58 | } 59 | 60 | .esri-basemap-layer-list__updating { 61 | @include layerListUpdatingIndicator(); 62 | 63 | animation: esri-basemap-layer-list__updating-anim 2s normal infinite; 64 | } 65 | 66 | .esri-basemap-layer-list__connection-status { 67 | @include layerListConnectionStatus(); 68 | } 69 | 70 | .esri-basemap-layer-list__connection-status--connected { 71 | color: $connection-connected; 72 | } 73 | 74 | .esri-basemap-layer-list__item-content { 75 | @include layerListItemContent(); 76 | } 77 | 78 | .esri-basemap-layer-list__item-content-bottom { 79 | @include layerListContentBottom(); 80 | } 81 | 82 | .esri-basemap-layer-list__item-content-bottom .esri-legend__service { 83 | @include layerListLegend(); 84 | } 85 | 86 | .esri-basemap-layer-list__item-message { 87 | @include layerListContentBottom(); 88 | } 89 | 90 | .esri-basemap-layer-list__editing { 91 | padding-block: var(--calcite-spacing-sm); 92 | padding-inline: var(--calcite-spacing-sm); 93 | } 94 | 95 | @keyframes esri-basemap-layer-list__updating-anim { 96 | @include layerListUpdating(); 97 | } 98 | 99 | @keyframes esri-basemap-layer-list__publishing-anim { 100 | @include layerListPublishing(); 101 | } 102 | } 103 | 104 | @if $include_BasemapLayerList == true { 105 | @include basemapLayerList(); 106 | } 107 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_UtilityNetworkAssociations.scss: -------------------------------------------------------------------------------- 1 | @mixin utilityNetworkAssociations() { 2 | .esri-un-associations { 3 | &__action { 4 | height: 48px; 5 | 6 | &-refresh { 7 | --calcite-color-icon-color: #077ac2; 8 | } 9 | } 10 | 11 | &__block { 12 | &-content { 13 | margin: 0; 14 | border: { 15 | bottom: none; 16 | } 17 | } 18 | 19 | &-section-settings { 20 | padding: 0; 21 | border: { 22 | style: none; 23 | } 24 | } 25 | } 26 | 27 | &__div-controls { 28 | &-main { 29 | display: grid; 30 | gap: 0.5rem; 31 | background: var(--calcite-color-foreground-1) /* color */; 32 | padding: 0.5rem 0; 33 | } 34 | 35 | &-symbol-picker { 36 | margin: { 37 | top: 0.75rem; 38 | } 39 | } 40 | } 41 | 42 | &__dropdown { 43 | border: 1px solid var(--calcite-color-border-input); 44 | 45 | &-item { 46 | &-line-cap { 47 | height: 10px; 48 | background: { 49 | position: center; 50 | repeat: no-repeat; 51 | } 52 | } 53 | 54 | &-line-pattern { 55 | height: 3px; 56 | } 57 | } 58 | 59 | &-selected-item { 60 | &-line-cap { 61 | width: 100%; 62 | height: 10px; 63 | background: { 64 | position: center; 65 | repeat: no-repeat; 66 | size: 275px 10px; 67 | } 68 | } 69 | 70 | &-line-pattern { 71 | width: 100%; 72 | height: 3px; 73 | } 74 | } 75 | 76 | &-trigger { 77 | display: flex; 78 | align-items: center; 79 | margin: 0 6px; 80 | width: 100%; 81 | height: 24px; 82 | } 83 | } 84 | 85 | &__label { 86 | height: 1rem; 87 | 88 | &-and-slider { 89 | display: flex; 90 | flex-direction: column; 91 | } 92 | 93 | &-and-toggle { 94 | display: flex; 95 | flex-direction: row; 96 | justify-content: space-between; 97 | width: inherit; 98 | padding: { 99 | right: 0.25rem; 100 | } 101 | } 102 | } 103 | 104 | &__slider { 105 | padding: 0 0.5rem; 106 | } 107 | 108 | &__status-icon { 109 | &-container { 110 | width: 48px; 111 | height: 48px; 112 | } 113 | 114 | &-warning { 115 | --calcite-color-icon-color: #edd317; 116 | 117 | padding: 16px; 118 | } 119 | } 120 | 121 | &__switch { 122 | align-self: center; 123 | padding: 0.5rem; 124 | 125 | &-container { 126 | display: grid; 127 | width: 48px; 128 | height: 48px; 129 | } 130 | } 131 | 132 | &__widget-container { 133 | margin: 0; 134 | border-bottom: none; 135 | width: 330px; 136 | } 137 | } 138 | } 139 | 140 | @if $include_UtilityNetworkAssociations == true { 141 | @include utilityNetworkAssociations(); 142 | } 143 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Bookmarks.scss: -------------------------------------------------------------------------------- 1 | @mixin bookmarks() { 2 | $bookmarks-height--loading: 150px !default; 3 | $bookmark-thumbnail-size: 64px !default; 4 | $bookmark-thumbnail-min-size: 16px !default; 5 | $bookmark-edit-thumbnail-size: 128px !default; 6 | 7 | .esri-bookmarks { 8 | display: flex; 9 | background-color: transparent; 10 | 11 | .esri-widget__content--empty { 12 | background-color: $background-color--offset; 13 | } 14 | 15 | calcite-flow-item[loading] { 16 | min-height: $bookmarks-height--loading; 17 | } 18 | } 19 | 20 | .esri-bookmarks__loader { 21 | margin-inline-end: 0; 22 | } 23 | 24 | .esri-bookmarks__filter-no-results { 25 | @include layerListFilterNoResults(); 26 | } 27 | 28 | .esri-bookmarks__bookmark-image-container { 29 | display: flex; 30 | position: relative; 31 | margin: $cap-spacing--half 0; 32 | margin-inline-start: $cap-spacing--half; 33 | min-width: $bookmark-thumbnail-min-size; 34 | min-height: $bookmark-thumbnail-min-size; 35 | 36 | .esri-bookmarks__image { 37 | max-width: $bookmark-thumbnail-size; 38 | overflow: hidden; 39 | } 40 | } 41 | 42 | .esri-bookmarks--drag-enabled .esri-bookmarks__bookmark-image-container { 43 | margin-inline-start: 0; 44 | } 45 | 46 | .esri-bookmarks__no-bookmarks-heading { 47 | margin: 0; 48 | margin-block-start: $cap-spacing; 49 | font-size: 16px; 50 | font-weight: 400; 51 | } 52 | 53 | .esri-bookmarks__authoring { 54 | display: flex; 55 | flex-direction: column; 56 | } 57 | 58 | .esri-bookmarks__authoring-image-container { 59 | display: flex; 60 | align-items: middle; 61 | justify-content: center; 62 | margin-block-end: $cap-spacing; 63 | margin-inline-end: $side-spacing; 64 | background-image: url("../base/images/transparent-bg.png"); 65 | width: $bookmark-edit-thumbnail-size; 66 | height: $bookmark-edit-thumbnail-size; 67 | text-align: center; 68 | 69 | .esri-bookmarks__image { 70 | max-width: $bookmark-edit-thumbnail-size; 71 | max-height: $bookmark-edit-thumbnail-size; 72 | } 73 | } 74 | 75 | .esri-bookmarks__form { 76 | display: flex; 77 | height: 100%; 78 | } 79 | 80 | .esri-bookmarks__form-content { 81 | padding-block: $cap-spacing; 82 | padding-inline: $side-spacing; 83 | } 84 | 85 | .esri-bookmarks__authoring-refresh-thumbnail-button { 86 | margin-block-end: $cap-spacing; 87 | } 88 | 89 | .esri-bookmarks__bookmark-content-label { 90 | color: var(--calcite-color-text-1); 91 | font-size: var(--calcite-font-size--2); 92 | } 93 | 94 | .esri-bookmarks__bookmark-content calcite-table { 95 | margin-inline-start: -0.25rem; 96 | } 97 | 98 | .esri-bookmarks__bookmark-content calcite-table, 99 | .esri-bookmarks__bookmark-content calcite-table-row { 100 | --calcite-color-border-3: transparent; 101 | --calcite-color-text-1: var(--calcite-color-text-3); 102 | --calcite-internal-table-row-background: transparent; 103 | 104 | pointer-events: none; 105 | } 106 | } 107 | 108 | @if $include_Bookmarks == true { 109 | @include bookmarks(); 110 | } 111 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Swipe.scss: -------------------------------------------------------------------------------- 1 | @mixin swipe() { 2 | $divider-color: $background-color !default; 3 | $divider-size: 4px !default; 4 | 5 | .esri-swipe { 6 | position: absolute; 7 | margin: 0; 8 | background: transparent; 9 | padding: 0; 10 | width: 100%; 11 | height: 100%; 12 | overflow: hidden; 13 | user-select: none; 14 | } 15 | 16 | .esri-swipe, 17 | .esri-ui .esri-swipe { 18 | pointer-events: none; 19 | } 20 | 21 | .esri-swipe__container { 22 | position: absolute; 23 | z-index: 1; 24 | margin: 0; 25 | outline: 0; 26 | border: 0; 27 | padding: 0; 28 | overflow: hidden; // needed to hide tracers in iOS 29 | pointer-events: auto; 30 | touch-action: none; // needed for touch actions to work correctly 31 | } 32 | 33 | .esri-swipe--horizontal .esri-swipe__container { 34 | margin-left: -$button-width--half; 35 | cursor: col-resize; 36 | height: 100%; 37 | } 38 | 39 | .esri-swipe--vertical .esri-swipe__container { 40 | margin-top: -$button-height--half; 41 | cursor: row-resize; 42 | width: 100%; 43 | } 44 | 45 | .esri-swipe--disabled .esri-swipe__container { 46 | cursor: default; 47 | pointer-events: none; 48 | } 49 | 50 | .esri-swipe__divider { 51 | position: absolute; 52 | background-color: $divider-color; 53 | } 54 | 55 | .esri-swipe--horizontal .esri-swipe__divider { 56 | top: 0; 57 | left: $button-width--half; 58 | margin-left: -#{$divider-size * 0.5}; 59 | border-right: 1px solid rgba($interactive-font-color, 0.5); 60 | border-left: 1px solid rgba($interactive-font-color, 0.5); 61 | width: $divider-size; 62 | height: 100%; 63 | } 64 | 65 | .esri-swipe--vertical .esri-swipe__divider { 66 | top: $button-height--half; 67 | left: 0; 68 | margin-top: -#{$divider-size * 0.5}; 69 | border-top: 1px solid rgba($interactive-font-color, 0.5); 70 | border-bottom: 1px solid rgba($interactive-font-color, 0.5); 71 | width: 100%; 72 | height: $divider-size; 73 | } 74 | 75 | .esri-swipe__handle { 76 | display: flex; 77 | position: relative; 78 | align-items: center; 79 | justify-content: center; 80 | border: 1px solid rgba($interactive-font-color, 0.5); 81 | border-radius: $border-radius; 82 | background-color: $divider-color; 83 | width: $button-width; 84 | height: $button-height; 85 | 86 | &--hidden { 87 | visibility: hidden; 88 | } 89 | } 90 | 91 | .esri-swipe__handle-icon { 92 | position: relative; 93 | z-index: 2; 94 | } 95 | 96 | .esri-swipe--horizontal .esri-swipe__handle { 97 | top: calc(50% - #{$button-height--half}); 98 | } 99 | 100 | .esri-swipe--vertical .esri-swipe__handle { 101 | left: calc(50% - #{$button-height--half}); 102 | } 103 | 104 | .esri-swipe__container:focus .esri-swipe__handle, 105 | .esri-swipe__container:focus .esri-swipe__divider { 106 | outline: inset 2px Highlight; 107 | outline: inset 2px -webkit-focus-ring-color; 108 | } 109 | 110 | .esri-swipe__container:focus .esri-swipe__handle { 111 | outline-offset: -3px; 112 | } 113 | } 114 | 115 | @if $include_Swipe == true { 116 | @include swipe(); 117 | } 118 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_BasemapToggle.scss: -------------------------------------------------------------------------------- 1 | $basemap_toggle_offset: 5px !default; 2 | $basemap_toggle_size: $button-width--double !default; 3 | 4 | @mixin basemapToggle() { 5 | .esri-basemap-toggle { 6 | @include boxShadow("none"); 7 | 8 | calcite-button { 9 | display: flex; 10 | position: relative; 11 | flex-direction: row; 12 | align-items: center; 13 | justify-content: center; 14 | width: $basemap_toggle_size + $basemap_toggle_offset; 15 | height: $basemap_toggle_size + $basemap_toggle_offset; 16 | overflow: visible; 17 | } 18 | } 19 | 20 | .esri-basemap-toggle__container, 21 | .esri-basemap-toggle__image { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: $basemap_toggle_size; 26 | height: $basemap_toggle_size; 27 | overflow: hidden; 28 | } 29 | 30 | .esri-basemap-toggle__container { 31 | @include defaultBoxShadow(); 32 | } 33 | 34 | .esri-basemap-toggle__image { 35 | background-color: $background-color; 36 | background-image: url("../base/images/basemap-toggle-64.svg"); 37 | background-position: 50% 50%; 38 | background-repeat: no-repeat; 39 | background-size: cover; 40 | } 41 | 42 | .esri-basemap-toggle__image--loading { 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | background-image: unset; 47 | } 48 | 49 | .esri-basemap-toggle__image--secondary { 50 | @include defaultBoxShadow(); 51 | 52 | margin-top: $basemap_toggle_offset; 53 | margin-left: $basemap_toggle_offset; 54 | animation: esri-basemap-slide 2000ms ease-in-out; 55 | } 56 | 57 | .esri-basemap-thumbnail__overlay-scrim { 58 | --calcite-scrim-background: rgb(0 0 0 / 50%); 59 | 60 | color: var(--calcite-color-text-inverse); 61 | } 62 | 63 | .esri-basemap-toggle__image-overlay { 64 | display: flex; 65 | position: absolute; 66 | align-items: flex-end; 67 | justify-content: center; 68 | transition: background-color 125ms ease-in-out; 69 | background-color: rgb(255 255 255 / 0%); 70 | width: 100%; 71 | height: 100%; 72 | 73 | .esri-basemap-toggle:hover { 74 | background-color: rgba($interactive-font-color--hover, 0.4); 75 | } 76 | } 77 | 78 | .esri-basemap-toggle__title { 79 | flex: 1 0 100%; 80 | background-color: rgb(255 255 255 / 70%); 81 | padding: 0.5em; 82 | height: auto; 83 | text-align: center; 84 | line-height: $line-height; 85 | font-size: 9px; 86 | font-weight: $font-weight--medium; 87 | } 88 | 89 | .esri-widget.esri-basemap-toggle, 90 | .esri-ui-corner { 91 | .esri-widget.esri-basemap-toggle { 92 | @include boxShadow("none"); 93 | 94 | background-color: transparent; 95 | } 96 | } 97 | } 98 | 99 | //////////////////////////////////////// 100 | // ANIMATIONS 101 | @keyframes esri-basemap-slide { 102 | 0% { 103 | opacity: 0; 104 | margin-top: 0; 105 | margin-left: 0; 106 | } 107 | 108 | 75% { 109 | opacity: 0; 110 | margin-top: 0; 111 | margin-left: 0; 112 | } 113 | 114 | 100% { 115 | opacity: 1; 116 | margin-top: $basemap_toggle_offset; 117 | margin-left: $basemap_toggle_offset; 118 | } 119 | } 120 | 121 | @if $include_BasemapToggle == true { 122 | @include basemapToggle(); 123 | } 124 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_VideoPlayer.scss: -------------------------------------------------------------------------------- 1 | @mixin videoPlayer() { 2 | .esri-video-player { 3 | --esri-video-player-view-height: 300px; 4 | --esri-video-player-view-aspect-ratio: 1.77; 5 | --esri-video-player-color-swatch-size: 20px; 6 | --esri-video-player-color-swatch-gap: 10px; 7 | --esri-video-player-progress-width: 2px; 8 | --esri-video-player-controls-spacing: var(--calcite-size-16, 16px); 9 | 10 | min-width: calc(var(--esri-video-player-view-height) * var(--esri-video-player-view-aspect-ratio)); 11 | 12 | .esri-video-player__video-view { 13 | display: flex; 14 | height: var(--esri-video-player-view-height); 15 | } 16 | 17 | .esri-video-player__slider-progress-container { 18 | position: relative; 19 | z-index: 1; 20 | width: 100%; 21 | } 22 | 23 | .esri-video-player__progress { 24 | appearance: none; 25 | display: block; 26 | position: absolute; 27 | top: calc(50% - var(--esri-video-player-progress-width) / 2); 28 | left: var(--esri-video-player-controls-spacing); 29 | border: none; 30 | background: var(--calcite-color-border-1); 31 | cursor: pointer; 32 | width: calc(100% - var(--esri-video-player-controls-spacing) * 2); 33 | height: var(--esri-video-player-progress-width); 34 | 35 | &::-webkit-progress-bar { 36 | background-color: var(--calcite-color-border-3); 37 | } 38 | 39 | &::-webkit-progress-value { 40 | background-color: var(--calcite-color-border-input); 41 | } 42 | 43 | &::-moz-progress-bar { 44 | background-color: var(--calcite-color-border-3); 45 | } 46 | } 47 | 48 | .esri-video-player__slider { 49 | background-color: var(--calcite-color-foreground-1); 50 | padding: var(--esri-video-player-controls-spacing); 51 | } 52 | 53 | .esri-video-player__slider .esri-slider { 54 | .esri-slider__track { 55 | background-color: transparent; 56 | 57 | .esri-slider__segment-0 { 58 | background-color: var(--calcite-color-brand); 59 | } 60 | 61 | .esri-slider__segment-1 { 62 | background-color: transparent; 63 | } 64 | } 65 | } 66 | 67 | .esri-video-player__color-picker { 68 | display: grid; 69 | grid-template-columns: repeat(5, 1fr); 70 | column-gap: var(--esri-video-player-color-swatch-gap); 71 | 72 | .esri-video-player__color-block { 73 | cursor: pointer; 74 | width: var(--esri-video-player-color-swatch-size); 75 | height: var(--esri-video-player-color-swatch-size); 76 | } 77 | 78 | .esri-video-player__color-block__active { 79 | border-radius: var(--esri-video-player-color-swatch-size); 80 | } 81 | } 82 | } 83 | 84 | .esri-video-player__toolbar { 85 | display: flex; 86 | align-items: center; 87 | background-color: var(--calcite-color-foreground-1); 88 | padding: 0 calc(var(--esri-video-player-controls-spacing) / 2) calc(var(--esri-video-player-controls-spacing) / 2); 89 | font-size: var(--calcite-font-size--2); 90 | } 91 | 92 | .esri-video-player__timecode { 93 | display: flex; 94 | align-items: center; 95 | margin-inline: var(--calcite-size-12, 12px); 96 | color: var(--calcite-color-text-3); 97 | } 98 | 99 | .esri-video-player__controls { 100 | flex: 1 0 auto; 101 | justify-content: flex-end; 102 | } 103 | 104 | .esri-video-player__settings-flow { 105 | min-width: var(--calcite-size-160); 106 | } 107 | 108 | .esri-metadata-table__empty-state { 109 | transition-duration: 0ms; 110 | } 111 | } 112 | 113 | @if $include_VideoPlayer == true { 114 | @include videoPlayer(); 115 | } 116 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Daylight.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | 3 | @mixin daylight() { 4 | @keyframes pulse { 5 | to { 6 | box-shadow: 0 0 0 12px rgb(232 76 61 / 0%); 7 | } 8 | } 9 | 10 | .esri-daylight { 11 | @include timeSlider(); 12 | 13 | display: flex; 14 | flex-basis: auto; 15 | flex-direction: column; 16 | flex-shrink: 0; 17 | gap: $cap-spacing; 18 | justify-content: space-between; 19 | padding: var(--esri-widget-padding); 20 | width: 350px; 21 | 22 | &__anchor { 23 | font-size: $font-size--small; 24 | } 25 | 26 | &__panel--error { 27 | padding: 0 $side-spacing; 28 | animation: esri-fade-in 250ms ease-in-out; 29 | } 30 | 31 | &__container { 32 | display: flex; 33 | flex-direction: row; 34 | gap: $side-spacing; 35 | align-items: center; 36 | justify-content: space-between; 37 | } 38 | 39 | &__date-picker, 40 | &__season-picker { 41 | flex-grow: 1; 42 | } 43 | 44 | &__play-pause-button { 45 | flex: 0; 46 | } 47 | 48 | .esri-slider.esri-slider--horizontal .esri-slider__thumb { 49 | $thumb-size: 27px; 50 | 51 | top: -$thumb-size * 0.5; 52 | left: -$thumb-size * 0.5; 53 | border: 7px solid #0079c14d; 54 | background-clip: padding-box; 55 | background-color: $button-color; 56 | background-position: 0 0 !important; 57 | width: $thumb-size; 58 | height: $thumb-size; 59 | 60 | &:hover, 61 | &:active, 62 | &:focus { 63 | background-color: $button-color--hover; 64 | } 65 | } 66 | 67 | .esri-slider.esri-slider--horizontal { 68 | z-index: 2; // Ensure the timezone popover stays on top of the date picker (which has a z-index=1) - #60677 69 | 70 | .esri-slider-with-dropdown__box { 71 | display: flex; 72 | gap: $cap-spacing--eighth; 73 | align-items: center; 74 | z-index: 1; 75 | margin: 0; 76 | margin-top: -$cap-spacing--three-quarters; 77 | min-width: inherit; 78 | text-align: center; 79 | white-space: nowrap; 80 | font-size: $font-size--tiny-time-slider; 81 | will-change: left; 82 | 83 | .esri-slider__label { 84 | display: inline-block; 85 | position: static; 86 | inset-inline-start: auto; 87 | margin: 0; 88 | outline: none; 89 | min-width: auto; 90 | list-style: none; 91 | line-height: 1em; 92 | font-variant-numeric: tabular-nums; 93 | } 94 | 95 | .esri-slider__label-input { 96 | display: inline-block; 97 | } 98 | } 99 | 100 | .esri-slider-with-dropdown__box--drop-down-on, 101 | .esri-slider-with-dropdown__box--drop-down-off { 102 | width: min-content; 103 | } 104 | } 105 | 106 | .esri-slider--ampm-on .esri-slider.esri-slider--horizontal { 107 | padding: 30px 8px 42px; 108 | 109 | ~ .esri-daylight__play-pause-button { 110 | margin-bottom: 10px; // Align vertically with the slider 111 | } 112 | } 113 | 114 | .esri-slider--shadow-on .esri-slider__thumb { 115 | box-shadow: 2px 2px 5px 0 rgb(148 148 148 / 63%); 116 | } 117 | 118 | .esri-slider.esri-slider--horizontal .esri-widget__anchor.esri-slider-with-dropdown__anchor { 119 | color: $interactive-font-color; 120 | font-size: $font-size--tiny-time-slider; 121 | 122 | &:hover { 123 | color: $interactive-font-color--hover; 124 | } 125 | } 126 | 127 | calcite-label { 128 | --calcite-label-margin-bottom: 0; 129 | } 130 | } 131 | } 132 | 133 | @if $include_Daylight == true { 134 | @include daylight(); 135 | } 136 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Expand.scss: -------------------------------------------------------------------------------- 1 | @mixin expand() { 2 | .esri-expand { 3 | --esri-widget-panel-max-height: 95vh; 4 | --calcite-sheet-max-height: var(--esri-widget-panel-max-height); 5 | --calcite-sheet-height: auto; 6 | 7 | min-width: $button-width; 8 | min-height: $button-height; 9 | } 10 | 11 | .esri-expand__toggle { 12 | position: relative; 13 | } 14 | 15 | .esri-expand__popover-content { 16 | display: flex; 17 | flex-direction: column; 18 | } 19 | 20 | .esri-expand__popover-content .esri-widget--panel { 21 | width: $panel-width; 22 | } 23 | 24 | .esri-expand__panel { 25 | max-height: var(--esri-widget-panel-max-height); 26 | } 27 | 28 | .esri-expand__panel-content .esri-widget { 29 | width: auto; 30 | } 31 | 32 | .esri-expand__panel-content .esri-widget--panel { 33 | flex: 1 1 auto; 34 | } 35 | 36 | .esri-expand__popover-content, 37 | .esri-expand__panel-content { 38 | .esri-widget { 39 | box-sizing: border-box; 40 | box-shadow: none; 41 | } 42 | } 43 | 44 | .esri-expand__panel-content, 45 | .esri-expand__content-container { 46 | display: flex; 47 | flex: 1 1 auto; 48 | flex-direction: column; 49 | justify-content: stretch; 50 | background-color: var(--calcite-color-foreground-1); 51 | } 52 | 53 | .esri-expand__sheet .esri-expand__panel-content, 54 | .esri-expand__sheet .esri-expand__content-container { 55 | overflow: hidden; 56 | } 57 | 58 | .esri-expand__panel-icon-number { 59 | align-self: center; 60 | } 61 | 62 | .esri-collapse__icon { 63 | display: flex; 64 | 65 | calcite-button:not(:hover) &:not(calcite-icon) { 66 | color: var(--calcite-color-text-3); 67 | } 68 | } 69 | 70 | :is(.esri-ui-top-left, .esri-ui-bottom-left) .esri-collapse__icon-flip { 71 | transform: rotate(180deg); 72 | } 73 | 74 | .esri-expand__icon-number { 75 | display: flex; 76 | position: absolute; 77 | top: $button-height--fifth * -1; 78 | align-items: center; 79 | justify-content: center; 80 | transform-origin: 50%; 81 | border-radius: $button-height--half; 82 | background-color: $interactive-font-color; 83 | padding: 0.125em 0.333em; 84 | height: $button-height--half; 85 | line-height: 1em; 86 | color: $background-color; 87 | font-size: $font-size--small; 88 | pointer-events: none; 89 | } 90 | 91 | :is(.esri-ui-top-left, .esri-ui-bottom-left) .esri-expand__icon-number { 92 | right: $button-width--fifth * -1; 93 | } 94 | 95 | :is(.esri-ui-top-right, .esri-ui-bottom-right) .esri-expand__icon-number { 96 | left: $button-width--fifth * -1; 97 | } 98 | 99 | // Max heights 100 | .esri-view-height-greater-than-medium { 101 | .esri-expand__popover-content .esri-widget--panel { 102 | max-height: $view-height--gt-medium__component-max-height; 103 | } 104 | } 105 | 106 | .esri-view-height-medium { 107 | .esri-expand__popover-content .esri-widget--panel { 108 | max-height: $view-height--medium__component-max-height; 109 | } 110 | } 111 | 112 | .esri-view-height-small { 113 | .esri-expand__popover-content .esri-widget--panel { 114 | max-height: $view-height--small__component-max-height; 115 | } 116 | } 117 | 118 | .esri-view-height-xsmall { 119 | .esri-expand__popover-content .esri-widget--panel { 120 | max-height: $view-height--xsmall__component-max-height; 121 | } 122 | } 123 | 124 | [class*="esri-view-height-"] .esri-expand__popover-content .esri-widget--panel .esri-widget--panel { 125 | // When panel widgets are nested inside Expand. 126 | width: unset; 127 | max-height: unset; 128 | } 129 | } 130 | 131 | @if $include_Expand == true { 132 | @include expand(); 133 | } 134 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ScaleRangeSlider.scss: -------------------------------------------------------------------------------- 1 | @mixin scaleRangeSlider() { 2 | $slider-track-thickness: 2px; 3 | $slider-bounds-offset: 9px; 4 | $scale-indicator-half-size: 4px; 5 | $slider-dash-size: 5px; 6 | $slider-dash-color: rgb(255 255 255 / 75%); 7 | 8 | .esri-scale-range-slider { 9 | display: flex; 10 | position: relative; 11 | flex-direction: column; 12 | gap: $cap-spacing; 13 | background-color: transparent; 14 | min-width: 310px; 15 | 16 | &__segment-active { 17 | // active scale range segment 18 | background-color: $button-color; 19 | height: 4px; 20 | } 21 | 22 | .esri-slider { 23 | background-color: transparent; 24 | 25 | // account for thumbs in wrapper 26 | padding: $slider-bounds-offset ($slider-bounds-offset + 2) $slider-bounds-offset $slider-bounds-offset; 27 | 28 | // out-of-bounds range segments 29 | .esri-slider__effective-min-segment, 30 | .esri-slider__effective-max-segment { 31 | display: block; 32 | background: repeating-linear-gradient( 33 | to right, 34 | $slider-dash-color 0, 35 | $slider-dash-color $slider-dash-size, 36 | transparent $slider-dash-size, 37 | transparent ($slider-dash-size * 2) 38 | ); 39 | height: 100%; 40 | content: " "; 41 | } 42 | } 43 | 44 | &.esri-widget { 45 | box-shadow: none; 46 | } 47 | 48 | &.esri-disabled { 49 | opacity: $opacity--disabled; 50 | pointer-events: none; 51 | user-select: none; 52 | } 53 | } 54 | 55 | .esri-scale-range-slider__scale-indicator-wrapper { 56 | display: contents; 57 | } 58 | 59 | .esri-scale-range-slider__scale-indicator-container { 60 | position: absolute; 61 | right: $slider-bounds-offset + 2; 62 | left: $slider-bounds-offset; 63 | } 64 | 65 | .esri-scale-range-slider__scale-indicator { 66 | position: relative; 67 | top: $slider-track-thickness + $slider-bounds-offset; 68 | transition-duration: 0.2s; 69 | transition-property: left; 70 | margin-left: -$scale-indicator-half-size; 71 | width: 1px; 72 | } 73 | 74 | .esri-scale-range-slider__scale-indicator-icon { 75 | transform: scale(0.8, 1.7); 76 | } 77 | 78 | .esri-scale-range-slider__scale-preview { 79 | @include defaultBoxShadow(); 80 | 81 | display: inline-flex; 82 | flex-direction: column; 83 | background-color: $background-color; 84 | padding: $cap-spacing--half $side-spacing--half; 85 | } 86 | 87 | .esri-scale-range-slider__scale-preview-thumbnail { 88 | box-sizing: border-box; 89 | display: block; 90 | 91 | /* 92 | workaround to prevent webkit from adding a border 93 | 94 | padding: 64px; 95 | 96 | instead of 97 | 98 | height: 128px; 99 | width: 128px; 100 | 101 | see: http://stackoverflow.com/questions/4743127/chrome-safari-display-border-around-image 102 | */ 103 | padding: 64px; 104 | } 105 | 106 | .esri-scale-range-slider__scale-menu-container { 107 | display: flex; 108 | gap: 0.5rem; 109 | width: 100%; 110 | 111 | calcite-label span { 112 | color: var(--calcite-color-text-3); 113 | } 114 | } 115 | 116 | [dir="rtl"] .esri-scale-range-slider__scale-menu-container { 117 | flex-direction: row-reverse; 118 | } 119 | 120 | .esri-scale-range-slider__scale-menu-separator { 121 | flex: 1; 122 | margin-left: -0.5rem; 123 | } 124 | 125 | .esri-scale-range-slider__scale-menu-toggle { 126 | max-width: 9rem; 127 | } 128 | 129 | .esri-scale-range-slider__scale-menu-sublabel { 130 | color: var(--calcite-color-text-3); 131 | font-size: var(--calcite-font-size--2); 132 | } 133 | } 134 | 135 | @if $include_ScaleRangeSlider == true { 136 | @include scaleRangeSlider(); 137 | } 138 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_BuildingDisciplinesTree.scss: -------------------------------------------------------------------------------- 1 | @mixin buildingDisciplinesNode() { 2 | $base: "esri-building-disciplines-tree-node"; 3 | $root: "#{$base}--root"; 4 | $leaf: "#{$base}--leaf"; 5 | $label: "#{$base}__label"; 6 | $checkbox: "#{$base}__checkbox"; 7 | $checkbox--checked: "#{$base}__checkbox--checked"; 8 | $checkbox--indeterminate: "#{$base}__checkbox--indeterminate"; 9 | $collapse-toggle: "#{$base}__collapse-toggle"; 10 | $collapse-toggle--collapsed: "#{$base}__collapse-toggle--collapsed"; 11 | $children: "#{$base}__children"; 12 | 13 | $collapse-toggle-size: 18px; 14 | $collapse-toggle-icon-size: 10px; 15 | 16 | $checkbox-size: 14px; 17 | $checkbox-border-size: 1px; 18 | $checkbox-icon-size: 10px; 19 | 20 | $max-levels: 5; 21 | $indent-size: $side-spacing--three-quarters; 22 | 23 | @for $level from 1 through $max-levels { 24 | .#{$base}--level-#{$level} { 25 | $padding: $indent-size * ($level - 1); 26 | 27 | padding-left: $padding; 28 | 29 | &.#{$leaf} { 30 | padding-left: $padding + $collapse-toggle-size; 31 | } 32 | } 33 | } 34 | 35 | .#{$label} { 36 | display: flex; 37 | flex-direction: row; 38 | align-items: center; 39 | cursor: pointer; 40 | padding-top: $side-spacing--quarter; 41 | padding-bottom: $side-spacing--quarter; 42 | font-size: $font-size; 43 | font-weight: $font-weight--light; 44 | 45 | span { 46 | min-width: 0; 47 | word-break: break-word; 48 | text-wrap: pretty; 49 | } 50 | } 51 | 52 | .#{$collapse-toggle} { 53 | appearance: none; 54 | display: inline-block; 55 | flex-shrink: 0; 56 | transition: transform 0.1s ease-in-out; 57 | margin: 0; 58 | border: none; 59 | background: none; 60 | padding: ($collapse-toggle-size - $collapse-toggle-icon-size) * 0.5; 61 | width: $collapse-toggle-size; 62 | height: $collapse-toggle-size; 63 | line-height: $collapse-toggle-icon-size; 64 | font-size: $collapse-toggle-icon-size; 65 | 66 | &:not(.#{$collapse-toggle--collapsed}) { 67 | transform: rotate(90deg); 68 | } 69 | } 70 | 71 | .#{$checkbox} { 72 | appearance: none; 73 | display: inline-block; 74 | flex-shrink: 0; 75 | transition: all 0.1s ease-in-out; 76 | margin: 0; 77 | margin-right: $side-spacing--half; 78 | border: solid 1px $border-color; 79 | background: none; 80 | padding: ($checkbox-size - $checkbox-icon-size - $checkbox-border-size * 2) * 0.5; 81 | width: $checkbox-size; 82 | height: $checkbox-size; 83 | line-height: $checkbox-icon-size; 84 | font-size: $checkbox-icon-size; 85 | 86 | &::before { 87 | color: $interactive-font-color--inverse; 88 | } 89 | } 90 | 91 | .#{$checkbox--indeterminate} { 92 | &::before { 93 | color: $interactive-font-color; 94 | } 95 | } 96 | 97 | .#{$checkbox--checked} { 98 | border-color: $border-color--active; 99 | background: $border-color--active; 100 | 101 | &::before { 102 | color: $interactive-font-color--inverse; 103 | } 104 | } 105 | 106 | [dir="rtl"] { 107 | .#{$checkbox} { 108 | margin-right: 0; 109 | margin-left: $side-spacing--half; 110 | } 111 | 112 | .#{$collapse-toggle} { 113 | transform: rotate(180deg); 114 | 115 | &:not(.#{$collapse-toggle--collapsed}) { 116 | transform: rotate(90deg); 117 | } 118 | } 119 | 120 | @for $level from 1 through $max-levels { 121 | .#{$base}--level-#{$level} { 122 | $padding: $indent-size * ($level - 1); 123 | 124 | padding-right: $padding; 125 | padding-left: 0; 126 | 127 | &.#{$leaf} { 128 | padding-right: $padding + $collapse-toggle-size; 129 | padding-left: 0; 130 | } 131 | } 132 | } 133 | } 134 | } 135 | 136 | /** 137 | * Adds all the styles for the "Categories & Disciplines" tree used in the building explorer. 138 | */ 139 | @mixin buildingDisciplinesTree() { 140 | $base: "esri-building-disciplines-tree"; 141 | 142 | @include buildingDisciplinesNode(); 143 | } 144 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_DatePicker.scss: -------------------------------------------------------------------------------- 1 | @mixin date-picker() { 2 | $section_margin: $cap-spacing--half; 3 | $cell_border: 1px solid $border-color; 4 | 5 | .esri-date-picker { 6 | display: inline-flex; 7 | border: 1px solid $border-color; 8 | background-color: $background-color; 9 | } 10 | 11 | .esri-date-picker__calendar { 12 | @include defaultBoxShadow(); 13 | 14 | padding: $section_margin; 15 | 16 | .esri-widget--button { 17 | // Prevent scroll/zoom which can happen when quickly tapping button. 18 | // https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action 19 | touch-action: none; 20 | } 21 | } 22 | 23 | .esri-date-picker__day-picker, 24 | .esri-date-picker__month-picker, 25 | .esri-date-picker__year-picker { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | .esri-date-picker__day-picker { 32 | flex-flow: column wrap; 33 | } 34 | 35 | .esri-date-picker__day-picker, 36 | .esri-date-picker__month-picker { 37 | margin-bottom: $section_margin; 38 | } 39 | 40 | .esri-date-picker__date { 41 | margin: 0 $cap-spacing--double 0 0; 42 | } 43 | 44 | .esri-date-picker__calendar-toggle { 45 | margin: 0; 46 | border: none; 47 | padding: 0 0.5em; 48 | width: 100%; 49 | height: $button-height; 50 | color: $font-color; 51 | font-size: $font-size; 52 | } 53 | 54 | .esri-date-picker .esri-date-picker__month-dropdown { 55 | border: none; 56 | padding-right: 2.3em; 57 | font-weight: $font-weight__heading; 58 | } 59 | 60 | .esri-date-picker__week-item { 61 | display: flex; 62 | justify-content: center; 63 | } 64 | 65 | .esri-date-picker__day-item--header { 66 | border-top: $cell_border; 67 | background: $background-color--offset; 68 | cursor: auto; 69 | font-weight: $font-weight__heading; 70 | } 71 | 72 | .esri-date-picker__day-item { 73 | display: flex; 74 | align-items: center; 75 | justify-content: center; 76 | border-right: $cell_border; 77 | border-bottom: $cell_border; 78 | cursor: pointer; 79 | width: 30px; 80 | height: 30px; 81 | } 82 | 83 | .esri-date-picker__day-item:first-child { 84 | border-left: $cell_border; 85 | } 86 | 87 | .esri-date-picker__day-item--nearby-month { 88 | color: $interactive-font-color--disabled; 89 | } 90 | 91 | .esri-date-picker__day-item--today { 92 | color: $button-color; 93 | } 94 | 95 | .esri-date-picker__day-item--active { 96 | background: $border-color; 97 | } 98 | 99 | .esri-date-picker__month-picker { 100 | justify-content: space-between; 101 | font-weight: $font-weight__heading; 102 | 103 | .esri-button { 104 | width: auto; 105 | } 106 | } 107 | 108 | .esri-date-picker__year-picker-item { 109 | margin: 0 4px; 110 | cursor: pointer; 111 | padding: $section_margin; 112 | color: $font-color; 113 | } 114 | 115 | .esri-date-picker__day-item--selected, 116 | .esri-date-picker__year-picker-item--selected { 117 | background-color: $button-color; 118 | cursor: auto; 119 | color: $button-color--inverse; 120 | } 121 | 122 | .esri-date-picker__input { 123 | display: flex; 124 | position: relative; 125 | align-items: center; 126 | } 127 | 128 | .esri-date-picker__text-input.esri-input { 129 | margin: 0; 130 | border: none; 131 | padding-left: $side-spacing--double; 132 | } 133 | 134 | .esri-date-picker__icon--leading { 135 | position: absolute; 136 | left: $side-spacing--half; 137 | } 138 | 139 | [dir="rtl"] { 140 | .esri-date-picker__calendar { 141 | right: 0; 142 | } 143 | 144 | .esri-date-picker__date { 145 | margin: 0 0 0 $cap-spacing--double; 146 | } 147 | 148 | .esri-date-picker__day-item:first-child { 149 | border-left: none; 150 | } 151 | 152 | .esri-date-picker__day-item:last-child { 153 | border-left: $cell_border; 154 | } 155 | 156 | .esri-date-picker__text-input.esri-input { 157 | padding-right: $side-spacing--double; 158 | padding-left: unset; 159 | } 160 | 161 | .esri-date-picker__icon--leading { 162 | right: $side-spacing--half; 163 | left: unset; 164 | } 165 | } 166 | } 167 | 168 | @if $include_DatePicker == true { 169 | @include date-picker(); 170 | } 171 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Sketch.scss: -------------------------------------------------------------------------------- 1 | @mixin sketch() { 2 | $border: 1px solid $border-color; 3 | 4 | .esri-sketch { 5 | display: flex; 6 | flex-flow: column wrap; 7 | } 8 | 9 | .esri-expand__content { 10 | .esri-sketch { 11 | width: max-content; 12 | } 13 | } 14 | 15 | .esri-sketch__menu-header { 16 | display: flex; 17 | align-items: center; 18 | margin-block-end: $cap-spacing--half; 19 | } 20 | 21 | .esri-sketch__menu-title { 22 | flex: 1 1 auto; 23 | overflow: hidden; 24 | } 25 | 26 | .esri-sketch__panel { 27 | display: flex; 28 | flex-flow: row wrap; 29 | align-items: center; 30 | justify-content: flex-end; 31 | padding: 0; 32 | } 33 | 34 | .esri-sketch__info-panel { 35 | justify-content: flex-start; 36 | transition: opacity 250ms ease-in-out; 37 | opacity: 1; 38 | background-color: $background-color--offset; 39 | 40 | &:empty { 41 | visibility: hidden; 42 | opacity: 0; 43 | padding: 0; 44 | } 45 | } 46 | 47 | .esri-sketch__menu-container { 48 | display: flex; 49 | flex: 1 1 auto; 50 | flex-flow: column; 51 | padding: $cap-spacing--half; 52 | min-height: calc(100px - $cap-spacing); 53 | max-height: $view-height--medium__component-max-height; 54 | overflow-y: auto; 55 | } 56 | 57 | .esri-view-height-xsmall .esri-sketch__menu-container { 58 | min-height: calc(100% - $cap-spacing); 59 | max-height: $view-height--xsmall__component-max-height; 60 | } 61 | 62 | .esri-view-height-small .esri-sketch__menu-container { 63 | min-height: calc(100% - $cap-spacing); 64 | max-height: $view-height--small__component-max-height; 65 | } 66 | 67 | .esri-sketch__section { 68 | display: flex; 69 | flex-flow: row wrap; 70 | align-items: center; 71 | margin: $cap-spacing--half 0; 72 | padding: 0 $side-spacing--half; 73 | } 74 | 75 | .esri-sketch__tool-section { 76 | border-right: $border; 77 | 78 | &:last-child { 79 | border-right: none; 80 | } 81 | } 82 | 83 | .esri-sketch__action-toggle--on .esri-sketch__item-action-icon { 84 | box-shadow: 0 0 0 1px $button-color; 85 | background-color: $button-color; 86 | 87 | &::before { 88 | left: $toggle-handle-size; 89 | background-color: $interactive-font-color--inverse; 90 | } 91 | } 92 | 93 | .esri-sketch__feature-count-badge { 94 | display: flex; 95 | align-items: center; 96 | justify-content: center; 97 | margin: 0; 98 | border-bottom: $border; 99 | border-radius: $border-radius; 100 | background: $background-color; 101 | padding: 0.25em 0.75em; 102 | font-size: $font-size--small; 103 | } 104 | 105 | [dir="rtl"] { 106 | .esri-sketch__tool-section { 107 | border-right: none; 108 | border-left: $border; 109 | 110 | &:last-child { 111 | border: none; 112 | } 113 | } 114 | 115 | .esri-expand__content { 116 | .esri-sketch--vertical { 117 | .esri-sketch__tool-section { 118 | border-right: none; 119 | border-left: none; 120 | } 121 | } 122 | } 123 | } 124 | 125 | .esri-sketch--horizontal { 126 | .esri-sketch__info-panel { 127 | width: min-content; 128 | min-width: 100%; 129 | } 130 | } 131 | 132 | .esri-sketch--vertical { 133 | flex-flow: row-reverse; 134 | 135 | .esri-sketch__panel { 136 | flex-flow: column; 137 | justify-content: flex-start; 138 | } 139 | 140 | .esri-sketch__section { 141 | flex-flow: column; 142 | margin: 0 $cap-spacing--half; 143 | padding: $side-spacing--half 0; 144 | } 145 | 146 | .esri-sketch__tool-section { 147 | border-right: none; 148 | border-bottom: $border; 149 | border-left: none; 150 | 151 | &:last-child { 152 | border: none; 153 | } 154 | } 155 | 156 | .esri-sketch__info-panel { 157 | width: max-content; 158 | max-width: 350px; 159 | 160 | &:empty { 161 | padding: 0; 162 | } 163 | } 164 | 165 | .esri-sketch__info-section { 166 | margin-top: $cap-spacing--quarter; 167 | width: $button-width; 168 | } 169 | 170 | .esri-selection-toolbar__container { 171 | flex-direction: column; 172 | } 173 | } 174 | } 175 | 176 | @if $include_Sketch == true { 177 | @include sketch(); 178 | } 179 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_SnappingControls.scss: -------------------------------------------------------------------------------- 1 | @mixin snappingControls() { 2 | $border: 1px solid $border-color; 3 | 4 | .esri-snapping-controls__toggle-block { 5 | margin: 0; 6 | min-width: 100%; 7 | } 8 | 9 | .esri-snapping-controls__layer-list-block { 10 | border-bottom: none; 11 | min-width: $panel-width--three-quarters; 12 | } 13 | 14 | .esri-snapping-controls__layer-list { 15 | overflow: auto; 16 | 17 | &__filter { 18 | margin-bottom: 10px; 19 | } 20 | 21 | &__button { 22 | margin-bottom: 6px; 23 | } 24 | 25 | &__item { 26 | calcite-accordion-item, 27 | calcite-action { 28 | calcite-icon { 29 | margin-inline-start: 0; 30 | } 31 | } 32 | 33 | calcite-checkbox { 34 | margin-left: 1rem; 35 | padding-left: 2px; 36 | } 37 | 38 | calcite-icon { 39 | margin-inline-start: var(--calcite-list-item-spacing-indent); 40 | color: var(--calcite-color-brand); 41 | } 42 | } 43 | } 44 | 45 | .esri-snapping-controls { 46 | display: flex; 47 | flex-flow: column wrap; 48 | } 49 | 50 | .esri-snapping-controls__container { 51 | display: flex; 52 | flex: 1 1 auto; 53 | flex-direction: column; 54 | } 55 | 56 | .esri-snapping-controls__panel { 57 | width: 320px; 58 | } 59 | 60 | .esri-snapping-controls__item { 61 | @include cardBoxShadow(); 62 | 63 | display: flex; 64 | justify-content: space-between; 65 | transition: border-color 125ms ease-in-out; 66 | margin: 3px 0; 67 | border: $border; 68 | border-radius: 2px; 69 | border-color: transparent; 70 | background-color: $background-color; 71 | cursor: pointer; 72 | padding: 3px; 73 | } 74 | 75 | .esri-snapping-controls__item-action-icon { 76 | display: inline-block; 77 | flex: 0 0 $icon-size; 78 | margin-top: 0.1em; 79 | width: $icon-size; 80 | height: $icon-size; 81 | font-size: $icon-size; 82 | } 83 | 84 | .esri-snapping-controls__action-toggle { 85 | display: flex; 86 | flex-flow: row-reverse; 87 | align-items: flex-start; 88 | justify-content: space-between; 89 | transition: 90 | opacity 250ms ease-in-out 250ms, 91 | background-color 250ms ease-in-out; 92 | opacity: 1; 93 | margin: 0; 94 | border: 1px solid transparent; 95 | cursor: pointer; 96 | padding: $cap-spacing--half $side-spacing; 97 | width: 100%; 98 | font-size: $font-size--small; 99 | 100 | .esri-snapping-controls__item-action-title { 101 | margin-left: 0; 102 | } 103 | 104 | .esri-snapping-controls__item-action-icon { 105 | position: relative; 106 | flex: 0 0 $toggle-width; 107 | transition: background-color 125ms ease-in-out; 108 | border-radius: $toggle-height; 109 | box-shadow: 0 0 0 1px $interactive-font-color; 110 | background-color: $background-color--hover; 111 | padding: 0; 112 | width: $icon-size; 113 | height: $toggle-height; 114 | overflow: hidden; 115 | 116 | &::before { 117 | display: block; 118 | position: absolute; 119 | top: 0; 120 | left: 0; 121 | transition: 122 | background-color 125ms ease-in-out, 123 | left 125ms ease-in-out; 124 | margin: 2px; 125 | border-radius: 100%; 126 | box-shadow: 0 0 0 1px $interactive-font-color--inverse; 127 | 128 | // Toggle handle. Overrides any icon class 129 | background-color: $interactive-font-color; 130 | width: $toggle-handle-size; 131 | height: $toggle-handle-size; 132 | content: ""; 133 | } 134 | } 135 | } 136 | 137 | .esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon { 138 | box-shadow: 0 0 0 1px $button-color; 139 | 140 | // Toggle on 141 | background-color: $button-color; 142 | 143 | &::before { 144 | left: $toggle-handle-size; 145 | background-color: $interactive-font-color--inverse; 146 | } 147 | } 148 | 149 | .esri-snapping-controls__nested-container { 150 | display: flex; 151 | flex-direction: column; 152 | gap: $cap-spacing--half; 153 | 154 | &:not(:empty) { 155 | padding-top: $cap-spacing--half; 156 | padding-inline-start: 1em; 157 | } 158 | } 159 | } 160 | 161 | @if $include_SnappingControls == true { 162 | @include snappingControls(); 163 | } 164 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ScaleBar.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @mixin scaleBar() { 4 | $dark_color: $font-color; 5 | $light_color: $background-color; 6 | 7 | $block_width: 25%; 8 | $block_height: 50%; 9 | 10 | $line_thickness: 2px; 11 | $tic_height: 1.5em; 12 | 13 | $offset_for_unit_label: 2ch; 14 | 15 | $text-shadow-size: 1px; 16 | 17 | $border_style: $line_thickness solid $dark_color; 18 | 19 | .esri-scale-bar.esri-widget { 20 | box-shadow: none; 21 | background: transparent; 22 | } 23 | 24 | .esri-scale-bar__bar-container { 25 | display: flex; 26 | position: relative; 27 | align-items: flex-end; 28 | transition: width 250ms ease-in-out; 29 | font-size: $font-size--small; 30 | } 31 | 32 | .esri-scale-bar__bar-container--ruler { 33 | flex-direction: column; 34 | } 35 | 36 | .esri-scale-bar__bar-container--line:last-child { 37 | align-items: flex-start; 38 | } 39 | 40 | .esri-scale-bar__ruler { 41 | display: flex; 42 | flex-wrap: wrap; 43 | box-shadow: 44 | 0 0 0 1px rgb(255 255 255 / 33%), 45 | 0 1px 2px rgb(0 0 0 / 30%); 46 | background-color: $light_color; 47 | height: 6px; 48 | } 49 | 50 | .esri-scale-bar__ruler-block { 51 | background-color: $dark_color; 52 | width: $block_width; 53 | height: $block_height; 54 | } 55 | 56 | // top row 57 | .esri-scale-bar__ruler-block:nth-child(-n + 2) { 58 | margin-right: 25%; 59 | } 60 | 61 | // bottom row 62 | .esri-scale-bar__ruler-block:nth-child(n + 3) { 63 | margin-left: 25%; 64 | } 65 | 66 | .esri-scale-bar__line { 67 | position: relative; 68 | left: 0; 69 | z-index: 1; 70 | background-color: rgba($background-color, 0.33); 71 | height: $tic_height; 72 | } 73 | 74 | .esri-scale-bar__line--top { 75 | bottom: -1px; 76 | border-bottom: $border_style; 77 | } 78 | 79 | .esri-scale-bar__line--bottom { 80 | top: math.floor($line_thickness * 0.5) * -1; 81 | border-top: $border_style; 82 | } 83 | 84 | // tics 85 | .esri-scale-bar__line--top::before, 86 | .esri-scale-bar__line--top::after, 87 | .esri-scale-bar__line--bottom::before, 88 | .esri-scale-bar__line--bottom::after { 89 | display: block; 90 | position: absolute; 91 | border-right: $border_style; 92 | background-color: $dark_color; 93 | width: $line_thickness; 94 | height: $tic_height; 95 | content: ""; 96 | } 97 | 98 | .esri-scale-bar__line--top::before { 99 | bottom: -$line_thickness; 100 | left: 0; 101 | } 102 | 103 | .esri-scale-bar__line--top::after { 104 | right: 0; 105 | bottom: -$line_thickness; 106 | } 107 | 108 | .esri-scale-bar__line--bottom::before { 109 | top: -$line_thickness; 110 | left: 0; 111 | } 112 | 113 | .esri-scale-bar__line--bottom::after { 114 | top: -$line_thickness; 115 | right: 0; 116 | height: $tic_height; 117 | } 118 | 119 | .esri-scale-bar__label-container--line { 120 | position: absolute; 121 | left: 0; 122 | z-index: 1; 123 | } 124 | 125 | .esri-scale-bar__label-container--ruler { 126 | display: flex; 127 | position: relative; 128 | justify-content: space-between; 129 | width: 100%; 130 | 131 | .esri-scale-bar__label { 132 | padding: $cap-spacing--half 0 0; 133 | text-shadow: 134 | $text-shadow-size 0 0 $light_color, 135 | 0 $text-shadow-size 0 $light_color, 136 | $text-shadow-size $text-shadow-size 0 $light_color, 137 | ($text-shadow-size * -1) 0 0 $light_color, 138 | 0 ($text-shadow-size * -1) 0 $light_color, 139 | ($text-shadow-size * -1) ($text-shadow-size * -1) 0 $light_color; 140 | } 141 | } 142 | 143 | .esri-scale-bar__label-container--top { 144 | bottom: 0; 145 | } 146 | 147 | .esri-scale-bar__label-container--bottom { 148 | top: math.floor($line_thickness * 0.5); 149 | } 150 | 151 | .esri-scale-bar__label { 152 | padding: 0 $side-spacing--half; 153 | white-space: nowrap; 154 | color: $dark_color; 155 | font-size: inherit; 156 | font-weight: $font-weight--bold; 157 | } 158 | 159 | [dir="rtl"] { 160 | .esri-scale-bar__ruler { 161 | margin: 0 ($offset_for_unit_label * 0.25) 0 $offset_for_unit_label; 162 | } 163 | 164 | .esri-scale-bar__label-container--line { 165 | right: 0; 166 | left: auto; 167 | } 168 | } 169 | } 170 | 171 | @if $include_ScaleBar == true { 172 | @include scaleBar(); 173 | } 174 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Grid.scss: -------------------------------------------------------------------------------- 1 | @mixin grid() { 2 | .esri-grid { 3 | // Uses shade of primary theme color for highlight 4 | $row-selected-color: rgba($button-color, 0.2); 5 | 6 | // Sets 'primary' color that other properties inherit from 7 | --lumo-base-color: #{$background-color}; 8 | --lumo-primary-color: #{$button-color}; 9 | --lumo-primary-text-color: var(--lumo-primary-color); 10 | --lumo-primary-color-10pct: #{$row-selected-color}; 11 | 12 | // grid and checkbox background color(s) default and hover 13 | --lumo-contrast-20pct: #{$interactive-font-color}; 14 | --lumo-contrast-30pct: #{$interactive-font-color--hover}; 15 | 16 | // grid border color(s) 17 | --lumo-contrast-10pct: #{$background-color--hover}; 18 | 19 | // row hover 20 | --lumo-row-background-hover: #{$background-color--hover}; 21 | 22 | width: 100%; 23 | height: 100%; 24 | 25 | .esri-grid__content { 26 | background-color: inherit; 27 | width: 100%; 28 | height: 100%; 29 | } 30 | 31 | .esri-grid__grid { 32 | width: 100%; 33 | height: 100%; 34 | 35 | a { 36 | text-decoration: underline; 37 | color: $interactive-font-color; 38 | 39 | &:hover, 40 | &:focus { 41 | color: $interactive-font-color--hover; 42 | } 43 | } 44 | } 45 | 46 | .esri-column__sorter:hover { 47 | cursor: pointer; 48 | } 49 | 50 | .esri-column__sorter, 51 | .esri-column__header-label { 52 | display: flex; 53 | flex-grow: 1; 54 | align-items: center; 55 | margin: 0 5px; 56 | min-height: 28px; 57 | overflow: hidden; 58 | } 59 | 60 | .esri-column__header-label span { 61 | flex-grow: 1; 62 | overflow: hidden; 63 | text-overflow: ellipsis; 64 | white-space: nowrap; 65 | } 66 | 67 | .esri-column__header-content { 68 | display: flex; 69 | float: inline-start; 70 | align-items: center; 71 | justify-content: center; 72 | width: 100%; 73 | height: 100%; 74 | overflow: hidden; 75 | 76 | calcite-icon { 77 | float: inline-start; 78 | margin-inline-end: 2px; 79 | height: 100%; 80 | } 81 | 82 | calcite-dropdown { 83 | float: inline-end; 84 | max-height: 180px; 85 | 86 | // Avoid issues with menu growing outside of the viewport 87 | calcite-dropdown-group { 88 | max-width: 200px; 89 | overflow-x: auto; 90 | 91 | &:only-of-type { 92 | max-height: 180px; 93 | overflow: visible; 94 | } 95 | } 96 | 97 | &[open] { 98 | calcite-dropdown-item { 99 | display: flex; 100 | } 101 | } 102 | 103 | calcite-action { 104 | --calcite-color-foreground-1: transparent; 105 | } 106 | 107 | // Prevents frozen columns from appearing offset from the table edge on load. 108 | // This is because VaadinGrid's positioning logic accounts for 'hidden' calcite dropdown items, 109 | // since they use 'visibility: hidden' instead of 'display: none'. 110 | calcite-dropdown-item, 111 | calcite-dropdown-item[hidden] { 112 | display: none; 113 | } 114 | } 115 | } 116 | } 117 | 118 | .esri-column__action { 119 | --calcite-color-foreground-1: transparent; 120 | } 121 | 122 | .esri-column__header-menu-icon { 123 | margin-inline-end: $side-spacing; 124 | } 125 | 126 | .esri-column__cell-input { 127 | flex: 1 1 0; 128 | border: none; 129 | width: 100%; 130 | height: 100%; 131 | } 132 | 133 | .esri-column__cell__input-container { 134 | display: flex; 135 | flex-direction: column; 136 | align-items: center; 137 | width: 100%; 138 | 139 | input, 140 | select { 141 | position: absolute; 142 | top: 0; 143 | left: 0; 144 | padding: 0; 145 | } 146 | 147 | div, 148 | input, 149 | select { 150 | display: flex; 151 | width: 100%; 152 | } 153 | 154 | calcite-action-bar { 155 | background-color: transparent; 156 | } 157 | 158 | div:first-child { 159 | flex-direction: column; 160 | } 161 | 162 | calcite-input-time-zone { 163 | --calcite-dropdown-width: 200px; 164 | } 165 | 166 | // Remove top border between stacked components for cleaner look. 167 | // Only remove border on TimePicker when it's not the only visible component (2nd or last). 168 | // Always remove the top border from TimeZone component (always displayed last) 169 | calcite-input-time-picker:last-child, 170 | calcite-input-time-picker:nth-child(2), 171 | calcite-input-time-zone { 172 | margin-top: -1px; 173 | } 174 | } 175 | } 176 | 177 | @if $include_Grid == true { 178 | @include grid(); 179 | } 180 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ShadowCast.scss: -------------------------------------------------------------------------------- 1 | @mixin shadowCast() { 2 | $width: 200; 3 | $slider-thumb-size: 8px; 4 | $tooltip-arrow-size: 8px; 5 | 6 | .esri-shadow-cast { 7 | display: flex; 8 | position: relative; 9 | flex-direction: column; 10 | gap: $cap-spacing; 11 | padding: $cap-spacing $side-spacing; 12 | width: $width; 13 | overflow: hidden; 14 | 15 | &__time-range { 16 | @include timeSlider(); 17 | 18 | display: flex; 19 | flex-direction: column; 20 | font-size: $font-size--tiny-time-slider; 21 | 22 | .esri-slider__segment-1 { 23 | background: $border-color--active; 24 | } 25 | 26 | .esri-slider.esri-slider--horizontal { 27 | padding-top: $slider-thumb-size; 28 | padding-bottom: 42px; 29 | } 30 | 31 | &__indicator { 32 | display: flex; 33 | gap: $side-spacing--eighth; 34 | align-items: center; 35 | justify-content: center; 36 | margin-bottom: $cap-spacing--half; 37 | } 38 | } 39 | 40 | &__date-picker-container:not(:first-of-type) { 41 | margin-top: $cap-spacing; 42 | } 43 | 44 | &__date-picker { 45 | display: block; 46 | flex-grow: 1; 47 | } 48 | 49 | &__visualization { 50 | display: flex; 51 | flex-direction: column; 52 | margin-top: $cap-spacing; 53 | 54 | &__select { 55 | margin-bottom: $cap-spacing; 56 | } 57 | 58 | &__config--hidden { 59 | display: none; 60 | } 61 | } 62 | 63 | &__threshold-config, 64 | &__duration-config, 65 | &__discrete-config { 66 | display: flex; 67 | flex-direction: column; 68 | gap: $cap-spacing; 69 | 70 | calcite-label { 71 | display: block; 72 | 73 | // Don't make the labels full width so that one can't click in white space to focus elements. 74 | width: max-content; 75 | max-width: 100%; 76 | 77 | // Labels shouldn't really be focusable, but we had to make the color 78 | // picker label focusable with tabindex=-1 (not tabbable). Without it, 79 | // Safari does not include the label in FocusEvent.relatedTarget which 80 | // we use to determine whether the color picker popover should be closed 81 | // right away or not. 82 | &:focus, 83 | &:focus-visible { 84 | outline: none; 85 | } 86 | } 87 | } 88 | 89 | &__threshold-config { 90 | .esri-slider { 91 | // Ensure the timezone popover stays on top of the date picker (which has a z-index=1) 92 | // See #60677, #61515 93 | z-index: 2; 94 | 95 | // Fit slider content since default API slider doesn't do it for us. 96 | padding-top: $slider-thumb-size; 97 | padding-bottom: 25px; 98 | padding-inline: $slider-thumb-size; 99 | 100 | .esri-slider__label, 101 | .esri-slider__tick-label { 102 | font-size: $font-size--tiny; 103 | } 104 | 105 | // Move labels and ticks up to make slider more compact. 106 | .esri-slider__tick-label { 107 | margin-top: 12px; 108 | } 109 | 110 | .esri-slider__tick { 111 | top: -4px; 112 | } 113 | 114 | // Mark slider area above the threshold 115 | .esri-slider__segment-1 { 116 | background: $border-color--active; 117 | } 118 | } 119 | } 120 | 121 | &__duration-config { 122 | &__radio-group { 123 | display: flex; 124 | flex-direction: row; 125 | align-items: center; 126 | 127 | calcite-button { 128 | height: 35px; // Match height of `` 129 | } 130 | } 131 | } 132 | 133 | &__tooltip { 134 | color: $font-color; 135 | font-size: $font-size--small; 136 | 137 | &__content { 138 | position: absolute; 139 | 140 | // center horizontally and place it above the mouse pointer 141 | transform: translate(-50%, -100%); 142 | margin-top: -$tooltip-arrow-size - $cap-spacing--third; 143 | background: $background-color; 144 | padding: $cap-spacing--half $side-spacing--half; 145 | width: max-content; 146 | 147 | // Tooltip arrow 148 | &::after { 149 | display: block; 150 | position: absolute; 151 | 152 | // Place arrow below the tooltip 153 | bottom: 1px; // make the arrow overlap so the "seam" isn't noticeable 154 | left: 50%; 155 | transform: translate(-50%, 100%); 156 | border-top: $tooltip-arrow-size solid $background-color; 157 | border-right: $tooltip-arrow-size solid transparent; 158 | border-bottom: $tooltip-arrow-size solid transparent; 159 | border-left: $tooltip-arrow-size solid transparent; 160 | width: 0; 161 | height: 0; 162 | content: ""; 163 | } 164 | } 165 | } 166 | } 167 | } 168 | 169 | @if $include_ShadowCast == true { 170 | @include shadowCast(); 171 | } 172 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_FeatureTable.scss: -------------------------------------------------------------------------------- 1 | @mixin esri-feature-table__prompt($contextColor) { 2 | @include defaultBoxShadow(); 3 | 4 | display: flex; 5 | flex-flow: column nowrap; 6 | border: solid 3px $contextColor; 7 | background-color: var(--calcite-color-background); 8 | padding: $cap-spacing $side-spacing; 9 | max-height: 85%; 10 | animation: esri-fade-in-up 250ms ease-in-out; 11 | color: $font-color; 12 | 13 | .esri-feature-table__prompt__header { 14 | display: flex; 15 | flex: 0 0 auto; 16 | margin-bottom: $cap-spacing; 17 | color: $contextColor; 18 | 19 | &__heading { 20 | margin: 0 $side-spacing--quarter; 21 | color: $heading-color; 22 | } 23 | } 24 | 25 | .esri-feature-table__prompt__message { 26 | flex: 1 1 auto; 27 | padding: 0 0 $cap-spacing 0; 28 | overflow: auto; 29 | overflow-x: hidden; 30 | word-break: break-word; 31 | color: inherit; 32 | font-weight: $font-weight; 33 | } 34 | 35 | .esri-feature-table__prompt__divider { 36 | flex: 0 0 auto; 37 | margin: 0 0 $cap-spacing 0; 38 | border-bottom: $border; 39 | border-color: $border-color--subtle; 40 | color: inherit; 41 | } 42 | 43 | .esri-feature-table__prompt__actions { 44 | display: flex; 45 | flex-direction: row; 46 | } 47 | } 48 | 49 | @mixin featureTable() { 50 | .esri-feature-table { 51 | display: flex; 52 | flex-direction: column; 53 | width: 100%; 54 | height: 100%; 55 | 56 | &__content { 57 | overflow: hidden; 58 | } 59 | 60 | &__collapsed { 61 | min-width: 500px; 62 | 63 | &:not(:last-child) { 64 | border-inline-end: 1px solid var(--calcite-color-text-2); 65 | min-width: 300px; 66 | max-width: 300px; 67 | } 68 | } 69 | 70 | &__expanded { 71 | display: flex; 72 | min-width: 300px; 73 | 74 | &:not(:last-child) { 75 | border-inline-end: 1px solid var(--calcite-color-text-2); 76 | } 77 | } 78 | 79 | &__table-container { 80 | display: flex; 81 | flex: 1 1 0; 82 | margin: 0; 83 | padding: 0; 84 | min-height: 0; 85 | 86 | calcite-panel div { 87 | display: flex; 88 | flex: 1 1 0; 89 | flex-direction: row; 90 | } 91 | } 92 | 93 | &__table-navigation { 94 | --calcite-label-margin-bottom: 0; 95 | 96 | display: flex; 97 | align-items: center; 98 | background-color: var(--calcite-ui-foreground-1); 99 | padding-block-start: 2px; // Height of calcite progress component 100 | width: 100%; 101 | 102 | // Flips the 'move-up' icon; inspired by similar update in Popup 103 | calcite-action:first-child { 104 | transform: scaleX(-1); 105 | } 106 | 107 | calcite-action { 108 | display: flex; 109 | overflow: hidden; 110 | } 111 | 112 | :last-child { 113 | display: flex; 114 | float: inline-end; 115 | margin-inline: auto $side-spacing--half; 116 | } 117 | } 118 | 119 | &__menu-popover { 120 | @include defaultBoxShadow(); 121 | 122 | // Avoid issues with menu growing outside of the viewport 123 | // 256px is roughly the height of a filter and 5 menu items. 124 | max-width: 300px; 125 | max-height: 256px; 126 | overflow-y: auto; 127 | } 128 | 129 | .esri-grid { 130 | background-color: inherit; 131 | 132 | &__grid { 133 | width: 100%; 134 | height: 100%; 135 | } 136 | } 137 | 138 | vaadin-grid { 139 | border-bottom: none; 140 | border-inline: none; 141 | background-color: inherit; 142 | color: inherit; 143 | font-family: inherit; 144 | font-size: $font-size; 145 | } 146 | 147 | vaadin-grid::part(body-cell) { 148 | font-size: $font-size; 149 | 150 | &:hover { 151 | background-color: var(--calcite-color-foreground-2); 152 | } 153 | } 154 | 155 | vaadin-grid::part(header-cell) { 156 | font-weight: $font-weight; 157 | } 158 | 159 | vaadin-grid::part(header-cell invalid) { 160 | background-color: var(--calcite-color-background); 161 | font-weight: var(--calcite-font-weight-bold); 162 | } 163 | 164 | vaadin-grid::part(body-cell invalid) { 165 | color: var(--calcite-color-text-3); 166 | font-style: italic; 167 | } 168 | 169 | vaadin-grid::part(body-cell highlight) { 170 | background-color: var(--calcite-color-foreground-3); 171 | } 172 | } 173 | 174 | .esri-feature-table__prompt--info { 175 | @include esri-feature-table__prompt(var(--calcite-color-status-info)); 176 | } 177 | 178 | .esri-feature-table__prompt--warning { 179 | @include esri-feature-table__prompt(var(--calcite-color-status-warning)); 180 | } 181 | 182 | .esri-feature-table__prompt--danger { 183 | @include esri-feature-table__prompt(var(--calcite-color-status-danger)); 184 | } 185 | 186 | .esri-feature-table__layer-switcher-menu { 187 | display: flex; 188 | align-items: center; 189 | } 190 | 191 | .esri-column__show-related-records-button { 192 | display: flex; 193 | height: 100%; 194 | } 195 | } 196 | 197 | @if $include_FeatureTable == true { 198 | @include featureTable(); 199 | } 200 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Search.scss: -------------------------------------------------------------------------------- 1 | $search_width: 240px !default; 2 | 3 | @mixin clearBorders($exception-side: "", $exception-value: "") { 4 | $border-sides: top, right, bottom, left; 5 | 6 | @each $border-side in $border-sides { 7 | @if $border-side == $exception-side { 8 | border-#{$exception-side}: $exception-value; 9 | } @else { 10 | border-#{$border-side}: none; 11 | } 12 | } 13 | } 14 | 15 | @mixin search() { 16 | @include loopingProgressBar(".esri-search--searching"); 17 | 18 | .esri-search { 19 | display: flex; 20 | flex-flow: row nowrap; 21 | align-items: center; 22 | justify-content: center; 23 | width: $search_width; 24 | overflow: visible; 25 | 26 | .esri-widget--button { 27 | box-shadow: none; 28 | } 29 | 30 | .esri-icon-notice-triangle { 31 | margin-inline-end: 5px; 32 | vertical-align: text-bottom; 33 | line-height: 16px; 34 | font-size: 16px; 35 | } 36 | 37 | .esri-widget__loader { 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; 41 | min-height: $button-height; 42 | } 43 | 44 | .esri-widget__loader-text { 45 | margin: 0 $side-spacing--third; 46 | } 47 | } 48 | 49 | .esri-search__container, 50 | .esri-search__input-container, 51 | .esri-search__form { 52 | display: flex; 53 | flex-flow: row nowrap; 54 | } 55 | 56 | .esri-search__container { 57 | position: relative; 58 | flex: 1 0 100%; 59 | align-items: stretch; 60 | 61 | .esri-search__input, 62 | .esri-widget--button { 63 | z-index: 0; 64 | } 65 | 66 | .esri-search__input:focus, 67 | .esri-widget--button:focus { 68 | z-index: 1; 69 | } 70 | } 71 | 72 | .esri-search__input-container { 73 | flex: 2 0; 74 | align-items: stretch; 75 | } 76 | 77 | .esri-search__form { 78 | flex: 1 0; 79 | align-items: stretch; 80 | margin: 0; 81 | padding: 0; 82 | } 83 | 84 | .esri-search__input { 85 | display: block; 86 | margin: 0; 87 | border: none; 88 | box-shadow: none; 89 | width: 100%; 90 | } 91 | 92 | .esri-search__input::-ms-clear { 93 | display: none; 94 | } 95 | 96 | .esri-search__input::placeholder { 97 | opacity: 1; 98 | color: $font-color--placeholder; 99 | } 100 | 101 | .esri-search__submit-button, 102 | .esri-search__sources-button { 103 | display: flex; 104 | align-self: flex-end; 105 | cursor: pointer; 106 | } 107 | 108 | .esri-search__submit-button { 109 | @include clearBorders(left, solid 1px $border-color); 110 | } 111 | 112 | .esri-search__sources-button { 113 | @include clearBorders(right, solid 1px $border-color); 114 | } 115 | 116 | .esri-search__sources-button--up { 117 | display: none; 118 | } 119 | 120 | .esri-search__clear-button { 121 | @include clearBorders(); 122 | 123 | display: flex; 124 | align-self: flex-end; 125 | } 126 | 127 | .esri-search__source-name { 128 | position: absolute; 129 | width: 1px; 130 | height: 1px; 131 | overflow: hidden; 132 | clip: rect(0 0 0 0); 133 | } 134 | 135 | .esri-search__suggestions-menu { 136 | @include icomoonIconSelector() { 137 | vertical-align: middle; 138 | } 139 | } 140 | 141 | .esri-search__suggestions-menu .esri-menu__header:first-child, 142 | .esri-search__suggestions-menu ul:first-child { 143 | border: none; 144 | } 145 | 146 | .esri-search--show-suggestions .esri-search__suggestions-menu, 147 | .esri-search--sources .esri-search__sources-menu { 148 | visibility: visible; 149 | max-height: 300px; 150 | overflow: auto; 151 | animation: esri-fade-in 250ms ease-out; 152 | } 153 | 154 | .esri-search__source--active { 155 | background-color: $background-color--active; 156 | } 157 | 158 | .esri-search--warning .esri-search__warning-menu { 159 | transition: opacity 125ms ease-in-out; 160 | visibility: visible; 161 | opacity: 1; 162 | max-height: inherit; 163 | } 164 | 165 | .esri-search--multiple-sources .esri-search__input { 166 | border-left: 0; 167 | } 168 | 169 | .esri-search__warning-menu { 170 | opacity: 0; 171 | z-index: 1; 172 | font-size: 14px; 173 | } 174 | 175 | .esri-search__warning-body { 176 | padding: 0.8em 1em; 177 | } 178 | 179 | .esri-search__warning-header { 180 | margin-bottom: 5px; 181 | font-weight: $font-weight--bold; 182 | } 183 | 184 | .esri-ui-bottom-left, 185 | .esri-ui-bottom-right { 186 | .esri-search__sources-button--up { 187 | display: flex; 188 | } 189 | 190 | .esri-search__sources-button--down { 191 | display: none; 192 | } 193 | } 194 | 195 | .esri-view-width-less-than-small .esri-search__input { 196 | font-size: 16px; 197 | } 198 | 199 | [dir="rtl"] { 200 | .esri-search__submit-button { 201 | border-right: solid 1px $border-color; 202 | border-left: none; 203 | } 204 | 205 | .esri-search__sources-button { 206 | border-right: none; 207 | border-left: solid 1px $border-color; 208 | } 209 | 210 | .esri-search__container::after { 211 | animation: looping-progresss-bar-ani $looping-progress-bar-params reverse; 212 | } 213 | } 214 | } 215 | 216 | @if $include_Search == true { 217 | @include search(); 218 | } 219 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_CoordinateConversion.scss: -------------------------------------------------------------------------------- 1 | @mixin coordinateConversion() { 2 | .esri-coordinate-conversion { 3 | position: relative; 4 | cursor: default; 5 | width: 400px; 6 | font-size: $font-size--small; 7 | 8 | .esri-select option[disabled] { 9 | color: $interactive-font-color--disabled; 10 | } 11 | } 12 | 13 | .esri-coordinate-conversion.esri-disabled { 14 | @include icomoonIconSelector() { 15 | &::before { 16 | color: $interactive-font-color--disabled; 17 | } 18 | } 19 | 20 | color: $interactive-font-color--disabled; 21 | pointer-events: none; 22 | } 23 | 24 | .esri-coordinate-conversion--no-basemap { 25 | padding: 1em; 26 | width: auto; 27 | } 28 | 29 | .esri-coordinate-conversion--capture-mode { 30 | .esri-coordinate-conversion__mode-toggle { 31 | background: $background-color--offset; 32 | color: $interactive-font-color; 33 | } 34 | } 35 | 36 | .esri-coordinate-conversion__conversion-list { 37 | display: flex; 38 | flex-direction: column; 39 | margin: 0; 40 | padding: 0; 41 | list-style: none; 42 | } 43 | 44 | .esri-coordinate-conversion__display { 45 | @include wordbreak(); 46 | 47 | flex: 1 1 auto; 48 | padding: 0.5em; 49 | min-height: 2em; 50 | direction: ltr; 51 | } 52 | 53 | .esri-coordinate-conversion__display:hover, 54 | .esri-coordinate-conversion__select-row:hover { 55 | background-color: $background-color--hover; 56 | } 57 | 58 | .esri-coordinate-conversion__input-group { 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | margin: $cap-spacing auto $cap-spacing auto; 63 | width: 80%; 64 | 65 | label { 66 | display: flex; 67 | align-items: center; 68 | } 69 | } 70 | 71 | .esri-coordinate-conversion .esri-coordinate-conversion__input-coordinate[type="text"] { 72 | flex: 1; 73 | margin: 0; 74 | height: 2em; 75 | font-size: $font-size--small; 76 | } 77 | 78 | .esri-coordinate-conversion__settings { 79 | display: flex; 80 | flex-direction: column; 81 | align-items: center; 82 | 83 | .esri-select { 84 | font-size: inherit; 85 | } 86 | } 87 | 88 | .esri-coordinate-conversion__settings-group { 89 | display: flex; 90 | flex-direction: column; 91 | align-items: center; 92 | margin-top: $cap-spacing; 93 | width: 60%; 94 | } 95 | 96 | .esri-coordinate-conversion__settings-group > * { 97 | margin-bottom: 0.5em; 98 | } 99 | 100 | .esri-coordinate-conversion__settings-group-horizontal { 101 | display: flex; 102 | position: relative; 103 | flex-direction: row; 104 | width: 100%; 105 | } 106 | 107 | .esri-coordinate-conversion__settings-group:last-child { 108 | margin-bottom: $cap-spacing--half; 109 | width: 100%; 110 | text-align: center; 111 | } 112 | 113 | .esri-coordinate-conversion__preview-coordinate { 114 | min-height: 1.25em; 115 | } 116 | 117 | .esri-coordinate-conversion__row { 118 | display: flex; 119 | align-items: center; 120 | justify-content: space-between; 121 | padding: 0 $side-spacing 0 $side-spacing; 122 | height: 3em; 123 | 124 | .esri-coordinate-conversion__row-button { 125 | display: none; 126 | } 127 | } 128 | 129 | .esri-coordinate-conversion__row:hover .esri-coordinate-conversion__row-button { 130 | display: flex; 131 | } 132 | 133 | .esri-coordinate-conversion__row:focus-within .esri-coordinate-conversion__row-button { 134 | display: flex; 135 | } 136 | 137 | .esri-coordinate-conversion__pattern-input { 138 | width: 100%; 139 | } 140 | 141 | .esri-coordinate-conversion__tools { 142 | display: flex; 143 | position: relative; 144 | flex: 0 0 auto; 145 | padding: 0; 146 | } 147 | 148 | .esri-coordinate-conversion__select-row { 149 | text-align-last: center; 150 | } 151 | 152 | .esri-coordinate-conversion__input-select { 153 | text-align-last: center; 154 | } 155 | 156 | .esri-coordinate-conversion__conversions-view { 157 | margin: $cap-spacing--half 0 $cap-spacing--half 0; 158 | } 159 | 160 | .esri-ui-top-right .esri-coordinate-conversion__conversions-view, 161 | .esri-ui-top-left .esri-coordinate-conversion__conversions-view, 162 | .esri-coordinate-conversion div.esri-coordinate-conversion__conversions-view--expand-down { 163 | display: flex; 164 | flex-direction: column; 165 | 166 | .esri-coordinate-conversion__conversion-list { 167 | flex-direction: column; 168 | } 169 | } 170 | 171 | .esri-ui-bottom-right .esri-coordinate-conversion__conversions-view, 172 | .esri-ui-bottom-left .esri-coordinate-conversion__conversions-view, 173 | .esri-coordinate-conversion div.esri-coordinate-conversion__conversions-view--expand-up { 174 | display: flex; 175 | flex-direction: column-reverse; 176 | 177 | .esri-coordinate-conversion__conversion-list { 178 | flex-direction: column-reverse; 179 | } 180 | 181 | .esri-widget--button { 182 | .esri-icon-up, 183 | .esri-icon-down { 184 | transform: rotate(180deg); 185 | } 186 | } 187 | } 188 | 189 | .esri-coordinate-conversion__heading { 190 | display: flex; 191 | align-items: center; 192 | background-color: $background-color--offset; 193 | width: 100%; 194 | height: $button-height; 195 | 196 | .esri-widget__heading { 197 | margin: 0 auto; 198 | } 199 | } 200 | 201 | .esri-coordinate-conversion__popup { 202 | position: absolute; 203 | top: 50%; 204 | left: 50%; 205 | transform: translate(-50%, -50%); 206 | opacity: 0.8; 207 | z-index: 1; 208 | background-color: $background-color--inverse; 209 | padding: 1em; 210 | width: 50%; 211 | animation: esri-fade-in 250ms linear; 212 | text-align: center; 213 | white-space: inherit; 214 | color: $interactive-font-color--inverse; 215 | } 216 | 217 | .esri-coordinate-conversion__clipboard-popup { 218 | top: auto; 219 | left: auto; 220 | transform: none; 221 | width: auto; 222 | font-size: $font-size--tiny; 223 | pointer-events: none; 224 | user-select: none; 225 | } 226 | } 227 | 228 | @if $include_CoordinateConversion == true { 229 | @include coordinateConversion(); 230 | } 231 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ValuePicker.scss: -------------------------------------------------------------------------------- 1 | @mixin valuePicker() { 2 | $widget-size: $panel-width--plus-half; 3 | $minor-tick-size: 3px; 4 | $major-tick-size: 6px; 5 | 6 | .esri-value-picker { 7 | @include defaultBoxShadow(); 8 | 9 | .esri-slider { 10 | flex: auto; 11 | background: transparent; 12 | 13 | &__tick-label { 14 | white-space: nowrap; 15 | font-size: var(--calcite-font-size--3); 16 | } 17 | 18 | &__ticks { 19 | margin: 0; 20 | } 21 | 22 | &__tick, 23 | &__track { 24 | background: var(--calcite-color-border-input); 25 | } 26 | 27 | &__tick { 28 | &.esri-value-picker__slider__tick-steps { 29 | width: 3px; 30 | height: 3px; 31 | } 32 | } 33 | 34 | &__anchor:focus-visible { 35 | outline: none; 36 | } 37 | } 38 | 39 | &__action-bar { 40 | background-color: var(--calcite-color-foreground-1); 41 | } 42 | 43 | &__caption, 44 | &__label { 45 | &-border { 46 | display: flex; 47 | align-items: center; 48 | border: solid 1px var(--calcite-color-border-3); 49 | } 50 | 51 | &-text { 52 | overflow: hidden; 53 | white-space: nowrap; 54 | font-family: inherit; 55 | font-weight: var(--calcite-font-weight-medium); 56 | } 57 | } 58 | 59 | &__label-text { 60 | color: var(--calcite-color-text-1); 61 | } 62 | 63 | &__slider { 64 | display: flex; 65 | flex: auto; 66 | } 67 | 68 | &__layout { 69 | &--horizontal { 70 | &.esri-value-picker__type { 71 | &--collection, 72 | &--undefined { 73 | width: fit-content; 74 | 75 | .esri-value-picker { 76 | &__action-bar { 77 | width: 100%; 78 | } 79 | 80 | &__caption { 81 | padding-inline-end: 0.5rem; 82 | } 83 | } 84 | } 85 | 86 | &--combobox, 87 | &--label, 88 | &--slider { 89 | min-width: $widget-size; 90 | 91 | .esri-value-picker__action-bar { 92 | width: 100%; 93 | } 94 | } 95 | } 96 | 97 | .esri-value-picker { 98 | &__caption { 99 | display: flex; 100 | padding-top: 0.5rem; 101 | padding-bottom: 0.5rem; 102 | padding-inline-start: 0.5rem; 103 | 104 | &-border { 105 | padding-inline: 0.5rem; 106 | } 107 | 108 | &-text { 109 | max-width: 100px; 110 | text-overflow: ellipsis; 111 | font-size: var(--calcite-font-size--1); 112 | } 113 | } 114 | 115 | &__combobox { 116 | --calcite-color-border-input: var(--calcite-color-border-3); 117 | 118 | display: flex; 119 | flex: auto; 120 | align-items: center; 121 | padding-inline: 10px; 122 | 123 | calcite-combobox { 124 | flex: auto; 125 | width: 0; 126 | } 127 | } 128 | 129 | &__label { 130 | display: flex; 131 | flex: auto; 132 | padding: 0.5rem; 133 | 134 | &-border { 135 | flex: auto; 136 | padding-inline: 0.5rem; 137 | } 138 | 139 | &-text { 140 | flex: auto; 141 | width: 0; 142 | text-overflow: ellipsis; 143 | font-size: var(--calcite-font-size--1); 144 | font-weight: var(--calcite-font-weight-normal); 145 | } 146 | } 147 | 148 | &__separator { 149 | margin-inline-start: 0.25rem; 150 | border-right: solid 1px var(--calcite-color-border-3); 151 | width: 1px; 152 | } 153 | 154 | &__slider { 155 | padding-inline: 30px; 156 | 157 | &__tick { 158 | &-minor { 159 | height: $minor-tick-size; 160 | } 161 | 162 | &-major { 163 | height: $major-tick-size; 164 | } 165 | 166 | &-steps { 167 | margin-top: -6px; 168 | margin-left: -1px; 169 | } 170 | } 171 | } 172 | } 173 | 174 | .esri-slider { 175 | margin-top: -10px; 176 | 177 | &__track { 178 | height: 1px; 179 | } 180 | } 181 | } 182 | 183 | &--vertical { 184 | &.esri-value-picker__type { 185 | &--collection, 186 | &--undefined { 187 | height: fit-content; 188 | 189 | .esri-value-picker__action-bar { 190 | height: 100%; 191 | } 192 | } 193 | 194 | &--slider { 195 | min-height: $widget-size; 196 | 197 | .esri-value-picker__action-bar { 198 | height: 100%; 199 | min-height: $widget-size; 200 | } 201 | } 202 | } 203 | 204 | .esri-value-picker { 205 | &__caption { 206 | padding: 0.25rem; 207 | width: 48px; 208 | 209 | &-border { 210 | justify-content: center; 211 | } 212 | 213 | &-text { 214 | padding-block: 0.25rem; 215 | text-overflow: clip; 216 | font-size: var(--calcite-font-size--2); 217 | } 218 | } 219 | 220 | &__separator { 221 | margin-top: 0.25rem; 222 | border-bottom: solid 1px var(--calcite-color-border-3); 223 | height: 1px; 224 | } 225 | 226 | &__slider { 227 | flex-direction: column; 228 | padding: 15px 0; 229 | 230 | &__tick { 231 | &-minor { 232 | width: $minor-tick-size; 233 | } 234 | 235 | &-major { 236 | width: $major-tick-size; 237 | } 238 | 239 | &-steps { 240 | margin-top: -1px; 241 | margin-left: -6px; 242 | } 243 | } 244 | } 245 | } 246 | 247 | .esri-slider { 248 | margin-left: -13px; 249 | 250 | &__tick-label { 251 | margin-left: 20px; 252 | } 253 | 254 | &__track { 255 | width: 1px; 256 | } 257 | } 258 | } 259 | } 260 | } 261 | 262 | [dir="rtl"] .esri-value-picker { 263 | direction: ltr; 264 | 265 | .esri-value-picker { 266 | &__combobox, 267 | &__slider__tooltip { 268 | direction: rtl; 269 | } 270 | } 271 | } 272 | } 273 | 274 | @if $include_ValuePicker == true { 275 | @include valuePicker(); 276 | } 277 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_BuildingLevelPicker.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | 3 | /** 4 | * Adds the styles for the label which displays the currently selected level. 5 | */ 6 | @mixin _buildingLevelPickerLabel($container, $theme) { 7 | $base: "#{$container}-label"; 8 | $active: "#{$base}--active"; 9 | $hover: "#{$base}--hover"; 10 | $empty: "#{$base}--empty"; 11 | $clear-button: "#{$base}__clear-button"; 12 | $clear-button-icon: "#{$base}__clear-button-icon"; 13 | 14 | $width: 90px; 15 | $height: 40px; 16 | $padding: map.get($theme, padding); 17 | 18 | .#{$base} { 19 | text-align: center; 20 | line-height: $height; 21 | color: map.get($theme, label-color); 22 | font-size: $height; 23 | } 24 | 25 | .#{$base}, 26 | .#{$empty} { 27 | position: relative; 28 | transition: opacity 0.3s; 29 | cursor: pointer; 30 | width: $width; 31 | text-align: center; 32 | 33 | &.#{$active} { 34 | color: map.get($theme, label-color--active); 35 | } 36 | } 37 | 38 | .#{$empty} { 39 | cursor: default; 40 | color: map.get($theme, label-color--empty); 41 | font-size: $font-size; 42 | font-weight: $font-weight--light; 43 | } 44 | 45 | .#{$clear-button} { 46 | $size: 20px; 47 | $icon-size: 12px; 48 | 49 | appearance: none; 50 | display: none; 51 | position: absolute; 52 | top: 10px; // Align with the label. 53 | transition: all 0.1s ease-in-out; 54 | margin-left: $side-spacing--quarter; 55 | border: none; 56 | border-radius: 50%; 57 | cursor: pointer; 58 | padding: ($size - $icon-size) * 0.5; 59 | width: $size; 60 | height: $size; 61 | line-height: $icon-size; 62 | color: $interactive-font-color; 63 | font-size: $icon-size; 64 | 65 | &:hover { 66 | background: $background-color--hover; 67 | } 68 | } 69 | 70 | // Show the button when we have an active level. 71 | .#{$active} .#{$clear-button} { 72 | display: inline-block; 73 | } 74 | } 75 | 76 | /** 77 | * Adds the styles for each of the levels in the level picker level stack. 78 | */ 79 | @mixin _buildingLevelPickerLevel($container, $theme) { 80 | $item-container: "#{$container}-item"; 81 | $base: "#{$container}-item__base"; 82 | $hover: "#{$container}-item--hover"; 83 | $active: "#{$container}-item--active"; 84 | $animate-level: "#{$container}--animate-level"; 85 | 86 | $in-duration: 0.1s; 87 | $out-duration: 0.3s; 88 | 89 | $bg-transition: background-color $in-duration ease-in-out; 90 | $border-transition: border-color $in-duration ease-in-out; 91 | 92 | $spring: cubic-bezier(0.63, -0.265, 0.48, 1.64); 93 | $size-transition-out: 94 | height $out-duration $spring, 95 | width $out-duration $spring; 96 | $size-transition-in: 97 | height $in-duration ease-out, 98 | width $in-duration ease-out; 99 | 100 | .#{$base} { 101 | position: absolute; 102 | left: 50%; 103 | transform: translate(-50%, -50%); 104 | pointer-events: none; 105 | will-change: height; 106 | 107 | .rect { 108 | position: absolute; 109 | top: 50%; 110 | left: 50%; 111 | transform: translate(-50%, -50%) rotateX(66deg) rotateZ(45deg); 112 | margin-top: 3px; 113 | outline: solid 1px transparent; // So things don't move when focusing 114 | border: map.get($theme, level-border-width) solid map.get($theme, level-border-color); 115 | background-color: map.get($theme, level-background-color); 116 | pointer-events: none; 117 | will-change: height; 118 | } 119 | } 120 | 121 | .#{$hover} .#{$base} { 122 | .rect { 123 | border-color: map.get($theme, level-border-color--hover); 124 | box-shadow: 0 0 2px 1px map.get($theme, level-border-color--hover); 125 | background-color: map.get($theme, level-background-color--hover); 126 | } 127 | } 128 | 129 | .#{$active} .#{$base} { 130 | .rect { 131 | border-color: map.get($theme, level-border-color--active); 132 | background-color: map.get($theme, level-background-color--active); 133 | } 134 | } 135 | 136 | .#{$item-container} { 137 | border: 1px solid transparent; 138 | will-change: height; 139 | touch-action: none; 140 | 141 | &, 142 | .#{$base}, 143 | .rect { 144 | transition: $size-transition-in, $bg-transition, $border-transition; 145 | } 146 | } 147 | 148 | // Animate everything when the $animate-level class is present in the parent. 149 | .#{$animate-level} .#{$item-container} { 150 | &, 151 | .#{$base}, 152 | .rect { 153 | transition: $size-transition-out, $bg-transition, $border-transition; 154 | } 155 | } 156 | } 157 | 158 | /** 159 | * Adds all the styles for the level picker used in the building explorer. 160 | */ 161 | @mixin buildingLevelPicker() { 162 | $container: "esri-building-level-picker"; 163 | $levels-container: "#{$container}__levels-container"; 164 | $levels-inner-container: "#{$container}__inner-levels-container"; 165 | $label-container: "#{$container}__label-container"; 166 | $no-level: "#{$container}--no-level"; 167 | $arrow-up: "#{$container}__arrow-up"; 168 | $arrow-down: "#{$container}__arrow-down"; 169 | 170 | $padding: 12px; 171 | 172 | $theme: ( 173 | padding: $padding, 174 | label-color: $interactive-font-color, 175 | label-color--empty: $font-color, 176 | label-color--active: $border-color--active, 177 | level-border-width: 2px, 178 | level-border-color: $border-color, 179 | level-border-color--hover: $border-color--active, 180 | level-border-color--active: $border-color--active, 181 | level-background-color: rgba(#fff, 0.7), 182 | level-background-color--hover: rgba(#fff, 0.7), 183 | level-background-color--active: $border-color--active, 184 | ); 185 | 186 | @include _buildingLevelPickerLabel($container, $theme); 187 | @include _buildingLevelPickerLevel($container, $theme); 188 | 189 | .#{$container} { 190 | display: flex; 191 | flex-direction: row; 192 | align-items: center; 193 | 194 | &.#{$no-level} { 195 | display: none; 196 | } 197 | } 198 | 199 | .#{$levels-container} { 200 | display: flex; 201 | flex-direction: column; 202 | align-items: center; 203 | justify-content: flex-start; 204 | transform: rotate(180deg); // So that our levels stack properly. 205 | cursor: pointer; 206 | padding: 20px 0; 207 | width: 50%; 208 | } 209 | 210 | .#{$levels-inner-container} { 211 | transition: margin 0.3s; 212 | } 213 | 214 | .#{$label-container} { 215 | display: flex; 216 | flex-direction: column; 217 | align-items: center; 218 | justify-content: space-between; 219 | margin-right: $padding; 220 | width: 50%; 221 | height: 90px; 222 | } 223 | 224 | .#{$arrow-up}, 225 | .#{$arrow-down} { 226 | @include arrowButton(); 227 | } 228 | 229 | .#{$arrow-up} { 230 | @extend .esri-arrow-up; 231 | } 232 | 233 | .#{$arrow-down} { 234 | @extend .esri-arrow-down; 235 | } 236 | } 237 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_FeatureForm.scss: -------------------------------------------------------------------------------- 1 | @mixin featureForm() { 2 | $group-border-width: 3px; 3 | $panel-background-color: var(--calcite-color-background); 4 | $text-element-line-height: 1.375; 5 | 6 | .esri-feature-form { 7 | background-color: $panel-background-color; 8 | padding: var(--esri-widget-padding); 9 | 10 | &__form { 11 | display: flex; 12 | flex-direction: column; 13 | } 14 | 15 | &__centered-button { 16 | align-self: center; 17 | } 18 | 19 | &__description-text { 20 | color: $interactive-font-color; 21 | font-size: $font-size--small; 22 | } 23 | 24 | &__list-observer { 25 | position: relative; 26 | bottom: 20px; 27 | z-index: 2; 28 | text-align: center; 29 | } 30 | 31 | &__related-records { 32 | &_header { 33 | display: flex; 34 | margin-bottom: $cap-spacing--half; 35 | 36 | span { 37 | flex-grow: 1; 38 | } 39 | } 40 | 41 | &_label { 42 | calcite-notice, 43 | .esri-feature-form__description-text { 44 | margin-bottom: $cap-spacing--half; 45 | } 46 | } 47 | 48 | &_list { 49 | margin-bottom: $cap-spacing--half; 50 | min-height: 40px; 51 | } 52 | } 53 | } 54 | 55 | label.esri-feature-form__label { 56 | gap: 0.5em; 57 | margin-bottom: $cap-spacing; 58 | } 59 | 60 | .esri-feature-form__label { 61 | @include wordbreak(); 62 | 63 | display: flex; 64 | position: relative; 65 | flex-direction: column; 66 | justify-content: space-between; 67 | transition: 68 | opacity 250ms, 69 | margin 250ms; 70 | opacity: 1; 71 | margin-bottom: $cap-spacing--half; 72 | 73 | &:last-child { 74 | margin-bottom: 0; 75 | } 76 | 77 | &-text-content { 78 | display: flex; 79 | align-items: center; 80 | } 81 | } 82 | 83 | .esri-feature-form__form-header { 84 | margin-bottom: $cap-spacing; 85 | 86 | .esri-feature-form__description-text ~ .esri-widget__heading { 87 | margin-bottom: 0; 88 | } 89 | } 90 | 91 | .esri-feature-form__input { 92 | width: 100%; 93 | 94 | &:focus { 95 | outline: 2px solid var(--calcite-color-brand); 96 | outline-offset: -2px; 97 | } 98 | } 99 | 100 | textarea.esri-feature-form__input { 101 | resize: vertical; 102 | } 103 | 104 | .esri-feature-form__input--disabled { 105 | background-color: var(--calcite-color-background); 106 | font-weight: var(--calcite-font-weight-medium); 107 | } 108 | 109 | .esri-feature-form__field-error-message { 110 | padding: $side-spacing--half 0; 111 | font-size: $font-size--small; 112 | } 113 | 114 | .esri-feature-form__date-input-container { 115 | display: flex; 116 | flex-direction: column; 117 | 118 | .esri-feature-form__input { 119 | margin-bottom: $cap-spacing--quarter; 120 | } 121 | 122 | :last-child { 123 | margin-bottom: 0; 124 | } 125 | } 126 | 127 | .esri-feature-form__input--radio-group { 128 | display: flex; 129 | flex-direction: column; 130 | } 131 | 132 | .esri-feature-form__input--radio-label { 133 | display: flex; 134 | align-items: center; 135 | } 136 | 137 | .esri-feature-form__input--switch { 138 | margin: $side-spacing--half 0; 139 | } 140 | 141 | .esri-feature-form__group { 142 | margin: 0 0 $cap-spacing 0; 143 | margin-inline: -10px; // offset to align FeatureForm elements 144 | background-color: inherit; 145 | } 146 | 147 | .esri-feature-form__group--sequential { 148 | border-bottom: none; 149 | border-inline-start: $group-border-width solid $border-color; 150 | } 151 | 152 | .esri-feature-form__group--active { 153 | border-inline-start-color: $border-color--active; 154 | } 155 | 156 | .esri-feature-form__text-element { 157 | line-height: $text-element-line-height; 158 | color: var(--calcite-color-text-3); 159 | font-size: var(--calcite-font-size--1); 160 | font-weight: var(--calcite-font-weight-normal); 161 | 162 | a { 163 | display: inline; 164 | position: relative; 165 | transition: 166 | background-color, 167 | block-size, 168 | border-color, 169 | box-shadow, 170 | color, 171 | inset-block-end, 172 | inset-block-start, 173 | inset-inline-end, 174 | inset-inline-start inset-size, 175 | opacity, 176 | outline-color, 177 | transform var(--calcite-animation-timing) ease-in-out 0s, 178 | outline 0s, 179 | outline-offset 0s; 180 | border-style: none; 181 | background-color: transparent; 182 | background-image: linear-gradient(currentColor, currentColor), 183 | linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline)); 184 | background-position-x: 0%, 100%; 185 | background-position-y: min(1.5em, 100%); 186 | background-repeat: no-repeat, no-repeat; 187 | background-size: 188 | 0% 1px, 189 | 100% 1px; 190 | padding: 0; 191 | text-decoration: none; 192 | color: var(--calcite-color-text-link); 193 | 194 | &:hover, 195 | &:focus { 196 | background-size: 197 | 100% 1px, 198 | 100% 1px; 199 | } 200 | 201 | &:active { 202 | background-size: 203 | 100% 2px, 204 | 100% 2px; 205 | } 206 | 207 | &.calcite--rtl { 208 | background-position: 209 | 100% 100%, 210 | 100% 100%; 211 | } 212 | } 213 | 214 | code { 215 | border: 1px solid var(--calcite-color-border-3); 216 | border-radius: $border-radius; 217 | background-color: var(--calcite-color-foreground-3); 218 | padding: 0.25em; 219 | white-space: normal; 220 | word-break: break-word; 221 | color: var(--calcite-color-text-2); 222 | font-family: var(--calcite-code-family); 223 | font-size: 85%; 224 | } 225 | 226 | h1, 227 | h2, 228 | h3, 229 | h4, 230 | h5 { 231 | margin-bottom: 4px; 232 | line-height: $text-element-line-height; 233 | color: var(--calcite-color-text-1); 234 | font-size: var(--calcite-font-size-0); 235 | font-weight: var(--calcite-font-weight-bold); 236 | } 237 | 238 | h5 { 239 | font-weight: var(--calcite-font-weight-medium); 240 | } 241 | 242 | h6 { 243 | margin-bottom: 4px; 244 | line-height: $text-element-line-height; 245 | color: var(--calcite-color-text-2); 246 | font-size: var(--calcite-font-size--1); 247 | font-weight: var(--calcite-font-weight-medium); 248 | } 249 | 250 | p { 251 | margin-bottom: 16px; 252 | line-height: $text-element-line-height; 253 | color: var(--calcite-color-text-3); 254 | font-size: var(--calcite-font-size--1); 255 | font-weight: var(--calcite-font-weight-normal); 256 | } 257 | 258 | strong { 259 | font-weight: var(--calcite-font-weight-bold); 260 | } 261 | } 262 | 263 | [dir="rtl"] { 264 | .esri-feature-form__date-input-part { 265 | &:first-child .esri-feature-form__input { 266 | border-right: 1px solid $border-color; 267 | border-left: none; 268 | } 269 | } 270 | } 271 | } 272 | 273 | @if $include_FeatureForm == true { 274 | @include featureForm(); 275 | } 276 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_BasemapGallery.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @mixin basemapGallery() { 4 | $transition-duration: 250ms; 5 | $animation-duration: 500ms; 6 | $thumbnail-width: 120px; 7 | $thumbnail-width--narrow: 80px; 8 | $item-border-size: 1px; 9 | $item-content-height: 40px; 10 | 11 | .esri-basemap-gallery { 12 | @include loopingProgressBar(".esri-basemap-gallery__loader"); 13 | 14 | position: relative; 15 | background-color: $background-color; 16 | width: auto; 17 | overflow-y: auto; 18 | color: $font-color; 19 | 20 | &:focus-within { 21 | @include outlineStyle(); 22 | } 23 | 24 | &__item-container { 25 | display: flex; 26 | position: relative; 27 | flex-flow: column nowrap; 28 | gap: $cap-spacing--quarter; 29 | transition: opacity $transition-duration ease-in-out; 30 | margin: 0; 31 | padding-block: $cap-spacing--quarter; 32 | padding-inline: $side-spacing--quarter; 33 | list-style: none; 34 | } 35 | 36 | &--grid &__item-container { 37 | display: grid; 38 | grid-template-columns: repeat(auto-fill, minmax($thumbnail-width, 1fr)); 39 | gap: $cap-spacing $side-spacing; 40 | padding-block: $cap-spacing; 41 | padding-inline: $side-spacing; 42 | } 43 | 44 | &--source-refreshing &__item-container, 45 | &.esri-disabled &__item { 46 | opacity: $opacity--disabled; 47 | animation: none; 48 | pointer-events: none; 49 | } 50 | 51 | &__empty-message { 52 | padding: $cap-spacing $side-spacing; 53 | animation: esri-fade-in $animation-duration ease-in-out; 54 | } 55 | 56 | &__item { 57 | $transition: 58 | background-color $transition-duration ease-in-out, 59 | border-color $transition-duration ease-in-out; 60 | 61 | box-sizing: border-box; 62 | display: flex; 63 | position: relative; 64 | flex-direction: row; 65 | align-items: center; 66 | transition: $transition; 67 | border: $item-border-size solid transparent; 68 | cursor: pointer; 69 | width: 100%; 70 | animation: esri-fade-in $animation-duration ease-in-out; 71 | 72 | &:hover { 73 | border-color: $interactive-font-color; 74 | background-color: $background-color--hover; 75 | 76 | .esri-basemap-gallery__item-title { 77 | color: $font-color; 78 | } 79 | } 80 | 81 | &:focus { 82 | outline: none; 83 | } 84 | 85 | &--error { 86 | opacity: $opacity--disabled; 87 | cursor: auto; 88 | } 89 | 90 | &-thumbnail { 91 | flex-shrink: 0; 92 | transition: $transition; 93 | border-inline-end: $item-border-size solid $border-color--subtle; 94 | width: $thumbnail-width; 95 | min-width: $thumbnail-width; 96 | aspect-ratio: 1.5; 97 | } 98 | 99 | &-title { 100 | display: flex; 101 | align-items: center; 102 | justify-content: flex-start; 103 | transition: 104 | color $transition-duration ease-in-out, 105 | font-weight $transition-duration ease-in-out; 106 | width: 100%; 107 | height: 100%; 108 | color: $interactive-font-color; 109 | font-size: $font-size--small; 110 | 111 | span { 112 | display: -webkit-box; 113 | width: 100%; 114 | 115 | // Used for truncating after two lines 116 | // https://css-tricks.com/line-clampin/#aa-the-standardized-way 117 | // https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp 118 | overflow: hidden; 119 | text-align: start; 120 | text-overflow: ellipsis; 121 | overflow-wrap: break-word; // Force long words to break 122 | -webkit-line-clamp: 2; 123 | -webkit-box-orient: vertical; 124 | } 125 | } 126 | 127 | &--selected, 128 | &.esri-basemap-gallery__item--selected:hover, 129 | &.esri-basemap-gallery__item--selected:focus { 130 | border-color: $border-color--active; 131 | background-color: $background-color--active; 132 | cursor: auto; 133 | 134 | .esri-basemap-gallery__item-title { 135 | color: $font-color; 136 | font-weight: $font-weight--medium; 137 | } 138 | } 139 | 140 | &-content { 141 | display: flex; 142 | flex-direction: column; 143 | gap: $cap-spacing; 144 | padding-block: $cap-spacing--eighth; 145 | padding-inline: $side-spacing--three-quarters; 146 | min-width: 0; 147 | } 148 | 149 | &-tags-container { 150 | display: flex; 151 | flex-direction: row; 152 | gap: $side-spacing--quarter; 153 | 154 | calcite-chip { 155 | --calcite-font-size--2: var(--calcite-font-size--3); 156 | --calcite-chip-spacing-s-internal: 0.15rem; 157 | 158 | cursor: inherit; 159 | max-width: 60px; 160 | height: 16px; 161 | } 162 | } 163 | 164 | @supports (object-fit: cover) { 165 | &-thumbnail { 166 | object-fit: cover; 167 | } 168 | } 169 | } 170 | 171 | // When we don't have a lot of horizontal space, we make the thumbnails square. 172 | // See https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/52202 173 | &--narrow-items &__item { 174 | &-thumbnail { 175 | width: $thumbnail-width--narrow; 176 | min-width: $thumbnail-width--narrow; 177 | aspect-ratio: 1; 178 | } 179 | } 180 | 181 | // When displayed as a grid, the title of each item is placed below the thumbnail. 182 | &--grid &__item { 183 | flex-flow: column wrap; 184 | text-align: center; 185 | 186 | &:not(&--selected, :hover) { 187 | border-color: $border-color--subtle; 188 | } 189 | 190 | &-thumbnail { 191 | border-block-end: $item-border-size solid $border-color--subtle; 192 | 193 | // Thumbnail is above, to move the border to the bottom. 194 | border-inline-end: none; 195 | 196 | // Thumbnail should fill the whole item instead of having a specific width. 197 | width: 100%; 198 | min-width: 0; 199 | height: auto; 200 | } 201 | 202 | &-content { 203 | position: relative; 204 | padding-block: $cap-spacing--third; 205 | padding-inline: $side-spacing--half; 206 | width: 100%; 207 | height: $item-content-height; 208 | } 209 | 210 | &-tags-container { 211 | position: absolute; 212 | inset-block-end: $item-content-height + $side-spacing--third; 213 | inset-inline-end: $side-spacing--third; 214 | 215 | calcite-chip { 216 | max-width: math.floor(($thumbnail-width - 2 * $side-spacing--third - $side-spacing--quarter) * 0.5); 217 | } 218 | } 219 | } 220 | 221 | &__loader { 222 | position: absolute; 223 | top: 0; 224 | right: 0; 225 | left: 0; 226 | width: 100%; 227 | height: 2px; 228 | animation: esri-fade-in $animation-duration ease-in-out; 229 | } 230 | } 231 | 232 | .esri-view .esri-basemap-gallery { 233 | width: $panel-width; 234 | } 235 | 236 | // On large screens, allow the gallery to be larger. 237 | .esri-view-width-greater-than-large .esri-ui-corner .esri-basemap-gallery { 238 | width: $panel-width--plus-half; 239 | } 240 | } 241 | 242 | @if $include_BasemapGallery == true { 243 | @include basemapGallery(); 244 | } 245 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_ElevationProfile.scss: -------------------------------------------------------------------------------- 1 | @mixin elevationProfile() { 2 | // ---------------------------------------------------------------------------- 3 | // Widget 4 | // ---------------------------------------------------------------------------- 5 | 6 | .esri-elevation-profile { 7 | --popover-padding: #{$cap-spacing} #{$side-spacing}; 8 | --width: 550px; 9 | --chart-height: 180px; 10 | --calcite-label-margin-bottom: 0; 11 | --actions-spacing-h: #{$side-spacing--half}; 12 | --actions-spacing-v: #{$cap-spacing--half}; 13 | 14 | position: relative; 15 | isolation: isolate; 16 | padding: var(--esri-widget-padding); 17 | 18 | &.esri-component.esri-widget--panel { 19 | width: var(--width); 20 | max-width: 100%; // Don't overflow parent container, especially on mobile 21 | } 22 | 23 | &__header { 24 | display: flex; 25 | flex-direction: row; 26 | align-items: center; 27 | justify-content: flex-end; 28 | } 29 | 30 | &__footer { 31 | display: flex; 32 | flex-wrap: wrap; 33 | align-items: center; 34 | justify-content: flex-end; 35 | margin-top: $cap-spacing; 36 | 37 | calcite-button { 38 | min-height: 32px; 39 | } 40 | } 41 | 42 | &__action-button { 43 | margin-inline-start: var(--actions-spacing-h); 44 | width: auto; 45 | } 46 | 47 | &__main-container { 48 | display: flex; 49 | position: relative; 50 | flex-flow: column; 51 | width: 100%; 52 | height: var(--chart-height); 53 | } 54 | 55 | &__chart-container { 56 | position: relative; 57 | width: 100%; 58 | height: 100%; 59 | } 60 | 61 | &__prompt-container { 62 | box-sizing: border-box; 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | margin-bottom: 0; 67 | padding: $cap-spacing $side-spacing; 68 | height: 100%; 69 | text-align: center; 70 | 71 | > p { 72 | margin: 0; 73 | width: 100%; 74 | } 75 | } 76 | 77 | &__chart-spinner { 78 | // Position it in the middle of the container 79 | position: absolute; 80 | top: 50%; 81 | left: 50%; 82 | transform: translate(-50%, -50%); 83 | transition: opacity 150ms ease-in-out; 84 | transition-delay: 0; 85 | opacity: 0; 86 | 87 | // We show a spinner with a delay so that it is only visible if a profile takes a longer 88 | // time to refine. 89 | &--visible { 90 | transition-delay: 50ms; 91 | opacity: 1; 92 | } 93 | 94 | &--small { 95 | top: -22px; // Align top of the chart with icon of header buttons; 96 | left: unset; 97 | inset-inline-start: 0; 98 | transform: none; 99 | color: var(--calcite-color-brand); 100 | } 101 | } 102 | 103 | // Portrait mode 104 | // We have vertical space so we'll size the chart and let the widget scale vertically. 105 | 106 | &--portrait, 107 | &--portrait.esri-component.esri-widget--panel { 108 | height: auto; 109 | } 110 | 111 | &--portrait &__footer { 112 | flex-direction: column; 113 | } 114 | 115 | &--portrait &__action-button { 116 | align-self: stretch; 117 | margin-inline-start: 0; 118 | 119 | &:not(:last-of-type) { 120 | margin-bottom: var(--actions-spacing-v); 121 | } 122 | } 123 | } 124 | 125 | // ---------------------------------------------------------------------------- 126 | // Settings 127 | // ---------------------------------------------------------------------------- 128 | 129 | .esri-elevation-profile-settings { 130 | &__popover-content { 131 | display: flex; 132 | flex-direction: column; 133 | gap: $cap-spacing; 134 | padding: var(--popover-padding); 135 | min-width: 180px; // Give some space for our labels to render properly 136 | color: $font-color; 137 | font-size: $font-size__body; 138 | } 139 | } 140 | 141 | // ---------------------------------------------------------------------------- 142 | // Legend 143 | // ---------------------------------------------------------------------------- 144 | 145 | .esri-elevation-profile-legend { 146 | margin-top: $cap-spacing--half; 147 | } 148 | 149 | // ---------------------------------------------------------------------------- 150 | // Legend Item 151 | // ---------------------------------------------------------------------------- 152 | 153 | .esri-elevation-profile-legend-item { 154 | position: relative; 155 | background: $background-color--offset; 156 | 157 | &:not(:last-of-type) { 158 | margin-bottom: $cap-spacing--eighth; 159 | } 160 | 161 | &--disabled { 162 | filter: grayscale(1); 163 | opacity: $opacity--disabled; 164 | } 165 | 166 | &__color-indicator { 167 | position: absolute; 168 | top: 0; 169 | inset-inline-start: 0; 170 | width: 3px; 171 | height: 100%; 172 | } 173 | 174 | &__header { 175 | display: flex; 176 | flex-direction: row; 177 | align-items: center; 178 | justify-content: flex-start; 179 | } 180 | 181 | &__content { 182 | display: block; 183 | padding: $cap-spacing $side-spacing; 184 | padding-top: 0; 185 | } 186 | 187 | &__collapse-toggle { 188 | flex-shrink: 0; 189 | 190 | // Make sure the element has a size, to avoid popping due to Calcite Components loading async 191 | width: 32px; 192 | height: 32px; 193 | } 194 | 195 | &__label { 196 | flex-grow: 1; 197 | flex-shrink: 1; 198 | padding-inline-start: $side-spacing; 199 | min-width: 0; // allow the legend to shrink as much as needed. 200 | } 201 | } 202 | 203 | // ---------------------------------------------------------------------------- 204 | // Statistics 205 | // ---------------------------------------------------------------------------- 206 | 207 | .esri-elevation-profile-statistics { 208 | --max-width: 1px; 209 | 210 | display: grid; 211 | grid-template-columns: repeat(auto-fit, minmax(var(--max-width), 1fr)); 212 | gap: $cap-spacing--eighth $side-spacing--plus-half; 213 | width: 100%; 214 | contain: layout paint style; 215 | 216 | &__statistic { 217 | display: block; 218 | width: max-content; 219 | text-align: start; 220 | white-space: nowrap; 221 | 222 | &__label { 223 | font-size: $font-size--tiny; 224 | font-weight: $font-weight--regular; 225 | } 226 | 227 | &__value { 228 | margin-top: -0.15em; // condense things slightly 229 | font-size: $font-size--tiny; 230 | font-weight: $font-weight--bold; 231 | } 232 | } 233 | 234 | &__slope-value { 235 | display: flex; 236 | align-items: center; 237 | 238 | // Ensure we have a size, because icons don't remember immediately. 239 | calcite-icon { 240 | width: 16px; 241 | height: 16px; 242 | } 243 | } 244 | } 245 | 246 | // Ensure the chart fits when the view is really small. 247 | .esri-view-height-xsmall .esri-elevation-profile { 248 | --chart-height: 68px; 249 | } 250 | 251 | .esri-elevation-profile--portrait { 252 | .esri-elevation-profile-statistics { 253 | gap: ($cap-spacing--eighth * 3) $side-spacing--plus-half; 254 | margin-bottom: $cap-spacing; 255 | } 256 | 257 | .esri-elevation-profile-statistics__statistic__value { 258 | margin-top: 2px; 259 | } 260 | } 261 | } 262 | 263 | @if $include_ElevationProfile == true { 264 | @include elevationProfile(); 265 | } 266 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Tooltip.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | 3 | @mixin tooltip() { 4 | .esri-tooltip { 5 | // Calcite variables 6 | --calcite-input-padding-inline: 0.5rem; 7 | --calcite-input-height: 1.5rem; 8 | 9 | // Tooltip variables 10 | --field-height: 0.875rem; 11 | --field-height--input: var(--calcite-input-height); 12 | --field-row-gap: 1px; 13 | --field-column-gap: var(--calcite-app-spacing-2); 14 | --field-input-width: 6.5rem; 15 | --field-title-extra-margin: var(--calcite-app-spacing-6); 16 | --field-title-color: var(--calcite-color-text-2); 17 | --field-value-color: var(--calcite-color-text-1); 18 | --font-size: var(--calcite-font-size--3); 19 | --font-size--input: var(--calcite-font-size--2); 20 | --content-padding-inline: var(--calcite-app-spacing-2); 21 | --content-padding-block: var(--calcite-app-spacing-2); 22 | --help-message-border-spacing: var(--calcite-app-spacing-2); 23 | --help-message-min-width: 7rem; 24 | --icon-size--feedback: 0.625rem; // Shrink icon to keep tooltip more compact in feedback mode 25 | 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | z-index: 1; 30 | width: fit-content; 31 | overflow: visible; 32 | 33 | &-content { 34 | display: flex; 35 | position: relative; 36 | flex-direction: column; 37 | gap: var(--content-padding-block); 38 | border: solid 1px var(--calcite-color-border-3); 39 | border-radius: 0.25rem; // Same as 40 | box-shadow: 41 | 0 6px 20px -4px rgb(0 0 0 / 10%), 42 | 0 4px 12px -2px rgb(0 0 0 / 8%); // Same as 43 | 44 | backdrop-filter: blur(4px); 45 | background: rgb(255 255 255 / 80%); 46 | padding-block: var(--content-padding-block); 47 | padding-inline: var(--content-padding-inline); 48 | width: min-content; 49 | line-height: 1.1em; 50 | color: $font-color; 51 | font-size: var(--font-size); 52 | view-transition-name: tooltip-content; 53 | 54 | // Hide the content altogether when there is nothing inside. Otherwise we'd 55 | // see a small empty square due to the tooltip padding. 56 | &:empty { 57 | opacity: 0; 58 | } 59 | 60 | &__header { 61 | display: flex; 62 | justify-content: flex-start; 63 | margin-block-start: calc(var(--content-padding-block) * -1); 64 | margin-inline: calc(var(--content-padding-inline) * -1); // Fill the whole width 65 | border-block-end: solid 1px var(--calcite-color-border-3); 66 | padding-block-end: 0; 67 | 68 | &__spacer { 69 | flex-grow: 1; 70 | flex-shrink: 1; 71 | } 72 | 73 | &__actions { 74 | flex-grow: 0; 75 | flex-shrink: 0; 76 | padding-inline-end: var(--content-padding-inline); 77 | } 78 | } 79 | 80 | // In input mode we activate pointer events which are disabled by default on the overlay surface. 81 | &--input { 82 | --field-height: var(--field-height--input); 83 | 84 | background: var(--calcite-color-foreground-1); 85 | pointer-events: all; 86 | backdrop-filter: none; 87 | } 88 | } 89 | 90 | &.calcite-mode-dark &-content { 91 | background: rgb(0 0 0 / 80%); 92 | } 93 | 94 | &-table { 95 | display: grid; 96 | grid-template-columns: max-content 1fr max-content max-content; // 4 columns: label, input/value, unit/suffix, lock icon. 97 | grid-gap: var(--field-row-gap) var(--field-column-gap); 98 | align-items: center; 99 | width: max-content; 100 | } 101 | 102 | // Older fields, which are not editable and just display a title and a value. 103 | &-field { 104 | display: contents; 105 | 106 | &__title, 107 | &__value { 108 | display: flex; 109 | align-items: center; 110 | justify-content: flex-start; 111 | block-size: var(--field-height); 112 | white-space: nowrap; 113 | color: var(--calcite-color-text-3); 114 | } 115 | 116 | &__title { 117 | margin-inline-end: var(--field-title-extra-margin); 118 | color: var(--field-title-color); 119 | } 120 | 121 | &__value { 122 | grid-column: span 3; 123 | color: var(--field-value-color); 124 | } 125 | } 126 | 127 | &-editable-field { 128 | display: contents; 129 | 130 | &__title, 131 | &__value { 132 | align-items: center; 133 | justify-content: flex-start; 134 | block-size: var(--field-height); 135 | white-space: nowrap; 136 | } 137 | 138 | &__title { 139 | display: flex; 140 | } 141 | 142 | &__value { 143 | display: contents; 144 | font-variant-numeric: tabular-nums; // Make numbers look nice as they change 145 | 146 | &__content { 147 | display: flex; 148 | grid-column: span 3; 149 | align-items: center; 150 | min-width: max-content; 151 | 152 | &--read-only { 153 | padding-inline: var(--calcite-input-padding-inline); 154 | block-size: var(--calcite-input-height); 155 | line-height: var(--calcite-input-height); 156 | font-size: var(--calcite-font-size--2); 157 | } 158 | } 159 | } 160 | 161 | &--feedback#{&}--locked &__value__content { 162 | // When en editable field is locked in feedback mode, the value content can only span 2 columns, 163 | // because the lock icon takes up the last column. 164 | grid-column: span 2; 165 | } 166 | 167 | &--feedback &__title { 168 | margin-inline-end: var(--field-title-extra-margin); 169 | color: var(--field-title-color); 170 | } 171 | 172 | &--feedback &__value__content { 173 | color: var(--field-value-color); 174 | } 175 | 176 | &--feedback &__lock-icon { 177 | margin-top: -2px; // Visually align the icon with the text. 178 | width: var(--icon-size--feedback); 179 | min-width: var(--icon-size--feedback); 180 | height: var(--icon-size--feedback); 181 | min-height: var(--icon-size--feedback); 182 | } 183 | 184 | &--input { 185 | padding: 0; 186 | } 187 | 188 | &--input &__title { 189 | font-size: var(--font-size--input); 190 | } 191 | 192 | &__input { 193 | inline-size: var(--field-input-width); 194 | } 195 | 196 | &__button { 197 | width: var(--field-height--input); 198 | } 199 | } 200 | 201 | &-value-by-value { 202 | // Add some space between the left/right (e.g. width/height) values. 203 | span:nth-child(2) { 204 | margin-inline: $side-spacing--half; 205 | } 206 | } 207 | 208 | &-help-message { 209 | display: flex; 210 | gap: var(--calcite-app-spacing-2); 211 | align-items: center; 212 | justify-content: center; 213 | margin-inline: calc(var(--content-padding-inline) * -1); // Fill the whole 214 | border-block-start: solid 1px var(--calcite-color-border-3); 215 | border-block-end: solid 1px transparent; // Compensate for the top border, so everything aligns nicely. 216 | padding-block-start: var(--content-padding-inline); 217 | padding-inline: var(--content-padding-inline); // Add back the content padding, because we apply a negative margin 218 | width: auto; 219 | min-width: var(--help-message-min-width); 220 | text-align: left; 221 | text-wrap: balance; 222 | white-space: break-spaces; 223 | font-size: var(--font-size); 224 | 225 | &:only-child { 226 | border-block-start: none; 227 | border-block-end: none; 228 | padding-block-start: var(--field-row-gap); 229 | } 230 | 231 | &__icon { 232 | color: var(--calcite-color-status-info); 233 | } 234 | 235 | &__text { 236 | padding-block-start: 2px; // Visually align the text with the icon, because the baseline of the text is off. 237 | } 238 | } 239 | } 240 | 241 | ::view-transition-old(tooltip-content), 242 | ::view-transition-new(tooltip-content) { 243 | animation-duration: 0.1s; 244 | } 245 | } 246 | 247 | @if $include_Tooltip == true { 248 | @include tooltip(); 249 | } 250 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_OrientedImageryViewer.scss: -------------------------------------------------------------------------------- 1 | @mixin orientedImageryViewerBase() { 2 | --calcite-font-weight-medium: $font-weight; 3 | --calcite-font-size-0: $font-size; 4 | --calcite-icon-size: 8px; 5 | 6 | box-sizing: border-box; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: flex-start; 10 | z-index: 1; 11 | overflow: hidden; 12 | } 13 | 14 | @mixin wrapper() { 15 | @include defaultBoxShadow(); 16 | 17 | box-sizing: border-box; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | margin: auto 10px; 22 | width: 106px; 23 | height: 78px; 24 | } 25 | 26 | @mixin ToolContainer() { 27 | @include boxShadow("0 0 1px rgba(0, 0, 0, 0.3)"); 28 | 29 | position: absolute; 30 | bottom: 0; 31 | align-items: center; 32 | z-index: 1; 33 | margin: 0 1%; 34 | margin-top: auto; 35 | border: 1px solid var(--calcite-color-border-2); 36 | width: 98%; 37 | height: 140px; 38 | } 39 | 40 | @mixin orientedImageryViewer() { 41 | .esri-imagery-viewer { 42 | width: 100%; 43 | height: 100%; 44 | } 45 | 46 | .esri-oriented-imagery-viewer { 47 | &--floating { 48 | @include orientedImageryViewerBase(); 49 | 50 | min-width: 386px; 51 | max-width: 80vw; 52 | min-height: 400px; 53 | max-height: 78vh; 54 | } 55 | 56 | &--docked { 57 | @include orientedImageryViewerBase(); 58 | 59 | top: 0; 60 | bottom: 0; 61 | width: 100%; 62 | height: 100%; 63 | } 64 | 65 | &__body { 66 | display: flex; 67 | flex: none; 68 | flex-direction: column; 69 | flex-grow: 1; 70 | align-self: stretch; 71 | order: 1; 72 | height: 100%; 73 | 74 | &-current-coverage { 75 | --calcite-ui-icon-color: var(--calcite-color-status-danger); 76 | } 77 | 78 | &-additional { 79 | &-camera-locations { 80 | --calcite-ui-icon-color: var(--calcite-color-brand); 81 | } 82 | 83 | &-coverage { 84 | --calcite-ui-icon-color: var(--calcite-color-status-info); 85 | } 86 | } 87 | 88 | &-footprint { 89 | --calcite-ui-icon-color: var(--calcite-color-status-success); 90 | } 91 | } 92 | 93 | &__carousel { 94 | @include ToolContainer(); 95 | 96 | &-container { 97 | display: inline-block; 98 | height: auto; 99 | overflow: auto hidden; 100 | } 101 | 102 | header { 103 | --calcite-font-weight-medium: $font-weight--light; 104 | --calcite-font-size-0: $font-size--tiny; 105 | } 106 | 107 | &-item { 108 | width: 100px; 109 | height: 70px; 110 | 111 | &-wrapper { 112 | @include wrapper(); 113 | } 114 | 115 | &-wrapper--selected { 116 | @include wrapper(); 117 | 118 | border: 2px solid var(--calcite-color-brand); 119 | } 120 | } 121 | 122 | &-content { 123 | display: flex; 124 | } 125 | } 126 | 127 | &__close { 128 | display: flex; 129 | flex-direction: row; 130 | flex-grow: 0; 131 | align-items: center; 132 | justify-content: center; 133 | order: 7; 134 | background: var(--calcite-color-foreground-1); 135 | width: 48px; 136 | height: 59px; 137 | } 138 | 139 | &__image-enhancement { 140 | &-wrapper { 141 | @include ToolContainer(); 142 | } 143 | 144 | &-tools { 145 | display: flex; 146 | } 147 | 148 | &-tool-container { 149 | margin-block: 2px; 150 | padding-inline: 0.75rem; 151 | width: 50%; 152 | } 153 | } 154 | 155 | &__viewer { 156 | display: flex; 157 | flex-grow: 1; 158 | margin: 0; 159 | 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"); 160 | width: 100%; 161 | 162 | &--hide { 163 | display: none; 164 | } 165 | 166 | &-container { 167 | display: flex; 168 | flex: none; 169 | flex-grow: 1; 170 | align-self: stretch; 171 | order: 1; 172 | border-top: 1px solid var(--calcite-color-border-3); 173 | border-radius: 0 0 3px 3px; 174 | background: var(--calcite-color-foreground-1); 175 | width: 100%; 176 | height: calc(100% - 49px); 177 | } 178 | } 179 | 180 | @keyframes rotateOrientedImageryNavigationTool { 181 | 0% { 182 | transform: rotate(var(--oi-navigation-tool-rotation-from, 0deg)); 183 | } 184 | 185 | 100% { 186 | transform: rotate(var(--oi-navigation-tool-rotation-to, 0deg)); 187 | } 188 | } 189 | 190 | &__message-box { 191 | display: flex; 192 | position: relative; 193 | align-items: center; 194 | justify-content: center; 195 | padding: 0 25%; 196 | width: 100%; 197 | height: 100%; 198 | text-align: center; 199 | word-break: break-word; 200 | font-size: $font-size__body; 201 | } 202 | 203 | &__navigation { 204 | transform: rotate(var(--oi-navigation-tool-rotation-to, 0deg)); 205 | 206 | &-animate { 207 | animation: rotateOrientedImageryNavigationTool 0.7s linear forwards; 208 | } 209 | 210 | &-feature { 211 | fill: var(--calcite-color-brand); 212 | stroke: var(--calcite-color-foreground-1); 213 | stroke-width: 1; 214 | 215 | &.selected { 216 | fill: var(--calcite-color-status-danger); 217 | } 218 | 219 | &-path { 220 | pointer-events: none; 221 | 222 | &-stop { 223 | &-offset-0 { 224 | stop-color: var(--calcite-color-status-danger); 225 | stop-opacity: 0.4; 226 | } 227 | 228 | &-offset-1 { 229 | stop-color: var(--calcite-color-status-danger); 230 | stop-opacity: 0.2; 231 | } 232 | } 233 | } 234 | } 235 | 236 | &-pointer { 237 | fill: var(--calcite-color-foreground-1); 238 | fill-rule: evenodd; 239 | stroke: rgb(0 0 0 / 0%); 240 | stroke-dasharray: none; 241 | stroke-linecap: butt; 242 | stroke-linejoin: miter; 243 | stroke-miterlimit: 4; 244 | stroke-width: 0; 245 | 246 | &-north { 247 | fill: var(--calcite-color-status-danger); 248 | } 249 | } 250 | 251 | &-wrapper { 252 | position: absolute; 253 | right: 0; 254 | bottom: 0; 255 | z-index: 1; 256 | 257 | &--zoomed { 258 | transform: scale(1.5); 259 | transform-origin: bottom right; 260 | } 261 | 262 | &-boundary { 263 | fill: var(--calcite-color-foreground-1); 264 | fill-opacity: 0.25; 265 | stroke: var(--calcite-color-border-2); 266 | } 267 | } 268 | 269 | &-sector { 270 | fill: none; 271 | 272 | &-separator { 273 | stroke: var(--calcite-color-border-2); 274 | stroke-width: 1; 275 | } 276 | 277 | &-cross { 278 | stroke: var(--calcite-color-status-danger); 279 | stroke-width: 1; 280 | } 281 | 282 | &-enabled { 283 | fill: var(--calcite-color-foreground-1); 284 | stroke: var(--calcite-color-border-2); 285 | stroke-width: 1; 286 | } 287 | 288 | &-disabled { 289 | fill: var(--calcite-color-foreground-3); 290 | stroke: var(--calcite-color-border-2); 291 | stroke-width: 1; 292 | } 293 | 294 | &-outer { 295 | fill: var(--calcite-color-foreground-1); 296 | fill-opacity: 0.4; 297 | stroke: none; 298 | } 299 | } 300 | } 301 | 302 | &__pro { 303 | .esri-oriented-imagery-viewer { 304 | position: static; 305 | width: 100%; 306 | max-width: unset; 307 | height: 100%; 308 | max-height: unset; 309 | } 310 | } 311 | } 312 | } 313 | 314 | @if $include_OrientedImageryViewer == true { 315 | @include orientedImageryViewer(); 316 | } 317 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Attachments.scss: -------------------------------------------------------------------------------- 1 | $attachment-icon-size: $button-height !default; 2 | $attachment-icon-container-width: $button-width * 2 !default; 3 | $attachment-icon-container-height: $button-height * 2 !default; 4 | $attachment-image-container-width: 100% !default; 5 | $attachment-image-container-height: auto !default; 6 | $attachment-height--loading: 150px !default; 7 | $border: 1px solid $border-color; 8 | 9 | @mixin attachments() { 10 | @include loopingProgressBar(".esri-attachments__progress-bar"); 11 | 12 | .esri-attachments { 13 | background-color: transparent; 14 | width: 100%; 15 | } 16 | 17 | .esri-attachments__loader-container { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | padding: 0; 22 | height: $attachment-height--loading; 23 | } 24 | 25 | .esri-attachments__loader { 26 | background: url("../base/images/loading-throb.gif") no-repeat center center; 27 | width: 100%; 28 | height: 64px; 29 | } 30 | 31 | .esri-attachments__actions { 32 | display: flex; 33 | flex-flow: row wrap; 34 | padding: $cap-spacing--half $side-spacing--half; 35 | } 36 | 37 | .esri-attachments__item-add-icon { 38 | padding: 0 $side-spacing--half; 39 | } 40 | 41 | .esri-attachments__delete-button { 42 | margin-right: auto; // RTL 43 | width: auto; 44 | color: $font-color--error; 45 | } 46 | 47 | .esri-attachments .esri-attachments__items { 48 | display: flex; 49 | margin: 0; 50 | padding: 0; 51 | width: 100%; 52 | } 53 | 54 | .esri-attachments .esri-attachments__item { 55 | margin: 0; 56 | list-style-type: none; 57 | line-height: 1.2em; 58 | } 59 | 60 | .esri-attachments__item-button { 61 | @include cardBoxShadow(); 62 | 63 | display: flex; 64 | align-items: center; 65 | transition: border-color 125ms ease-in-out; 66 | margin: 0 0 $cap-spacing--half; 67 | outline-offset: -4px; 68 | border: $border; 69 | border-radius: $border-radius; 70 | border-color: transparent; 71 | background-color: $background-color; 72 | cursor: pointer; 73 | padding: $cap-spacing--half $side-spacing--half; 74 | width: 100%; 75 | text-align: unset; 76 | text-decoration: none; 77 | color: $interactive-font-color; 78 | 79 | &:focus, 80 | &:hover { 81 | border-color: $border-color--hover; 82 | } 83 | } 84 | 85 | .esri-attachments__item-link { 86 | display: block; 87 | position: relative; 88 | text-decoration: none; 89 | 90 | &:hover, 91 | &:focus { 92 | .esri-attachments__item-link-overlay { 93 | opacity: 1; 94 | } 95 | } 96 | } 97 | 98 | .esri-attachments__item-add { 99 | background-color: transparent; 100 | padding: $cap-spacing--half 0; 101 | } 102 | 103 | .esri-attachments__add-attachment-button { 104 | justify-content: flex-start; 105 | transition: background-color 250ms ease-in-out; 106 | border-radius: $border-radius; 107 | padding: $cap-spacing $side-spacing--quarter; 108 | font-size: $font-size--small; 109 | 110 | &:hover { 111 | @include defaultBoxShadow(); 112 | 113 | background-color: $background-color; 114 | text-decoration: none; 115 | } 116 | } 117 | 118 | .esri-attachments__item-link-overlay { 119 | display: flex; 120 | position: absolute; 121 | inset: 0; 122 | align-items: center; 123 | justify-content: center; 124 | transition: opacity 250ms ease-in-out; 125 | opacity: 0; 126 | pointer-events: none; 127 | user-select: none; 128 | 129 | &-icon { 130 | display: flex; 131 | align-items: center; 132 | justify-content: center; 133 | border-radius: 100%; 134 | background-color: rgba($background-color--inverse, 0.5); 135 | padding: $cap-spacing--plus-half; 136 | color: $background-color; 137 | 138 | svg { 139 | fill: $interactive-font-color--inverse; 140 | } 141 | } 142 | } 143 | 144 | .esri-attachments__item-mask { 145 | display: flex; 146 | position: relative; 147 | align-items: center; 148 | justify-content: center; 149 | box-shadow: 0 0 0 1px $border-color--subtle; 150 | width: $attachment-icon-container-width; 151 | height: $attachment-icon-container-height; 152 | overflow: hidden; 153 | } 154 | 155 | .esri-attachments__item-mask--icon { 156 | background-color: $background-color--offset; 157 | padding: $cap-spacing--double 0; 158 | } 159 | 160 | .esri-attachments__item-mask--icon .esri-attachments__image { 161 | width: $attachment-icon-size; 162 | height: $attachment-icon-size; 163 | } 164 | 165 | .esri-attachments__metadata { 166 | display: flex; 167 | justify-content: space-between; 168 | margin-top: $cap-spacing--quarter; 169 | 170 | .esri-attachments__metadata-fieldset { 171 | flex: 0 1 calc(50% - 1px); 172 | margin: 0; 173 | border: none; 174 | background-color: $background-color; 175 | padding: $cap-spacing--half $side-spacing--half; 176 | text-align: center; 177 | font-size: $font-size--small; 178 | } 179 | } 180 | 181 | .esri-attachments__file-name { 182 | @include wordbreak(); 183 | 184 | display: inline-block; 185 | margin-bottom: $cap-spacing--quarter; 186 | font-size: $font-size--small; 187 | } 188 | 189 | .esri-attachments__file-fieldset { 190 | margin: 0; 191 | border: none; 192 | padding: $cap-spacing $side-spacing--half; 193 | } 194 | 195 | .esri-attachments__file-input { 196 | position: absolute; 197 | opacity: 0; 198 | z-index: -1; 199 | width: 0.1px; 200 | height: 0.1px; 201 | overflow: hidden; 202 | } 203 | 204 | .esri-attachments__container--list { 205 | // List 206 | .esri-attachments__items { 207 | flex-flow: column nowrap; 208 | } 209 | 210 | .esri-attachments__item-mask { 211 | position: relative; 212 | flex: 0 0 auto; 213 | margin-right: $side-spacing--half; 214 | } 215 | 216 | .esri-attachments__image { 217 | left: 50%; 218 | max-width: unset; 219 | max-height: unset; 220 | } 221 | 222 | .esri-attachments__label { 223 | display: flex; 224 | flex: 1 1 auto; 225 | justify-content: space-between; 226 | } 227 | 228 | .esri-attachments__filename { 229 | @include wordbreak(); 230 | 231 | flex: 1 0 0; 232 | cursor: pointer; 233 | } 234 | 235 | .esri-attachments__item-chevron-icon { 236 | flex: 0 0 auto; 237 | cursor: pointer; 238 | padding: 0 $side-spacing; 239 | } 240 | } 241 | 242 | .esri-attachments__container--preview { 243 | // Preview 244 | .esri-attachments__items { 245 | flex-flow: row wrap; 246 | align-items: center; 247 | } 248 | 249 | .esri-attachments__item { 250 | margin-bottom: $cap-spacing; 251 | width: 100%; 252 | } 253 | 254 | .esri-attachments__item-mask { 255 | width: $attachment-image-container-width; 256 | height: $attachment-image-container-height; 257 | } 258 | 259 | .esri-attachments__item-button { 260 | flex-flow: column nowrap; 261 | box-shadow: none; 262 | } 263 | 264 | .esri-attachments__item-button .esri-attachments__label { 265 | margin: $cap-spacing 0; 266 | } 267 | 268 | .esri-attachments__image { 269 | max-width: $attachment-image-container-width; 270 | } 271 | 272 | .esri-attachments__filename { 273 | @include wordbreak(); 274 | 275 | margin-top: $cap-spacing; 276 | width: calc(#{$attachment-image-container-width} - #{$side-spacing}); 277 | overflow: hidden; 278 | text-align: center; 279 | text-overflow: ellipsis; 280 | } 281 | 282 | .esri-attachments__item-mask--icon { 283 | background-color: transparent; 284 | } 285 | } 286 | 287 | .esri-attachments__form-node { 288 | @include cardBoxShadow(); 289 | 290 | // Form 291 | background-color: $background-color; 292 | padding: $cap-spacing--half $side-spacing--half; 293 | 294 | .esri-attachments__item-mask { 295 | box-shadow: none; 296 | width: unset; 297 | height: unset; 298 | } 299 | 300 | .esri-attachments__image { 301 | max-width: 100%; 302 | } 303 | } 304 | 305 | .esri-attachments__error-message { 306 | @include defaultBoxShadow(); 307 | 308 | margin: $cap-spacing--half $side-spacing--half; 309 | border-top: 3px solid $border-color--error; 310 | background-color: $background-color; 311 | padding: $cap-spacing $side-spacing; 312 | animation: esri-fade-in-down 250ms ease-in-out; 313 | } 314 | 315 | .esri-attachments__progress-bar { 316 | position: absolute; 317 | width: 100%; 318 | } 319 | 320 | [dir="rtl"] { 321 | .esri-attachments__item-mask { 322 | margin-right: 0; 323 | margin-left: $side-spacing--half; 324 | } 325 | } 326 | } 327 | 328 | @if $include_Attachments == true { 329 | @include attachments(); 330 | } 331 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Editor.scss: -------------------------------------------------------------------------------- 1 | @mixin esri-editor__prompt($contextColor) { 2 | @include defaultBoxShadow(); 3 | 4 | display: flex; 5 | position: absolute; 6 | right: 0; 7 | bottom: 0; 8 | left: 0; 9 | flex-flow: column nowrap; 10 | border-top: solid 3px $contextColor; 11 | background-color: var(--calcite-color-background); 12 | padding-block: $cap-spacing; 13 | padding-inline: $side-spacing; 14 | max-height: 85%; 15 | animation: esri-fade-in-up 250ms ease-in-out; 16 | color: $font-color; 17 | 18 | .esri-editor__prompt { 19 | &__header { 20 | display: flex; 21 | flex: 0 0 auto; 22 | gap: $side-spacing--half; 23 | align-items: center; 24 | margin-bottom: $cap-spacing; 25 | color: $contextColor; 26 | 27 | &__heading { 28 | margin: 0 $side-spacing--quarter; 29 | color: $heading-color; 30 | } 31 | } 32 | 33 | &__message { 34 | flex: 1 1 auto; 35 | padding: 0 0 $cap-spacing 0; 36 | overflow: auto; 37 | overflow-x: hidden; 38 | word-break: break-word; 39 | color: inherit; 40 | font-weight: $font-weight; 41 | } 42 | 43 | &__divider { 44 | flex: 0 0 auto; 45 | margin: 0 0 $cap-spacing 0; 46 | border-bottom: $border; 47 | border-color: $border-color--subtle; 48 | color: inherit; 49 | } 50 | 51 | &__actions { 52 | display: flex; 53 | flex-direction: row; 54 | } 55 | } 56 | } 57 | 58 | @mixin editor() { 59 | $border: 1px solid $border-color; 60 | $panel-background-color: var(--calcite-color-background); 61 | 62 | $panel-min-height: 200px; 63 | $panel-padding-inline: $side-spacing; 64 | $panel-padding-block: $cap-spacing--plus-half; 65 | 66 | $loader-size: 2rem; // Same as --calcite-loader-size 67 | 68 | .esri-editor { 69 | $template-item-content-end-margin: 0.75rem; // Matches default spacing used by Calcite 70 | 71 | --calcite-z-index-header: 1; 72 | 73 | display: flex; 74 | position: relative; 75 | flex-direction: column; 76 | background-color: $panel-background-color; 77 | height: 100%; 78 | 79 | &__actions { 80 | display: flex; 81 | row-gap: $cap-spacing--half; 82 | width: 100%; 83 | 84 | calcite-button { 85 | flex-grow: 1; 86 | } 87 | } 88 | 89 | &__update-actions-list { 90 | margin-inline: -$panel-padding-inline; // Make the actions fill the whole panel 91 | } 92 | 93 | &__help-message { 94 | display: flex; 95 | align-items: center; 96 | justify-content: flex-start; 97 | padding-inline: calc(#{$panel-padding-inline} - 0.5rem); // Align with the editor content 98 | width: 100%; 99 | } 100 | 101 | .esri-feature-form { 102 | padding: 0; 103 | width: 100%; 104 | 105 | &__label:last-child { 106 | margin-bottom: $cap-spacing; 107 | } 108 | } 109 | 110 | // --------------------------------------------------------------------------------------------- 111 | // Template list 112 | // --------------------------------------------------------------------------------------------- 113 | 114 | .esri-item-list { 115 | background-color: transparent; 116 | 117 | &__scroller { 118 | margin-inline: -$panel-padding-inline; // Make the list items fill the whole width 119 | } 120 | 121 | &__group { 122 | margin-inline: 0 0; 123 | 124 | &:first-of-type { 125 | margin-top: 0; 126 | } 127 | 128 | &__header { 129 | padding-inline: $panel-padding-inline; // Add back the padding removed in the scroller above 130 | } 131 | } 132 | 133 | &__filter-container, 134 | &__filter-container--sticky { 135 | margin-block: -$cap-spacing $cap-spacing; // Cancel top margin from the filter 136 | margin-inline: -$panel-padding-inline; // Fill the whole width 137 | background-color: var(--calcite-color-background); 138 | padding-block: $cap-spacing; 139 | padding-inline: $panel-padding-inline; // ...but add the padding back in 140 | } 141 | } 142 | 143 | &__template-item-content-end { 144 | display: block; 145 | margin-inline: $template-item-content-end-margin; 146 | } 147 | 148 | // --------------------------------------------------------------------------------------------- 149 | // Panel toolbar / Settings 150 | // --------------------------------------------------------------------------------------------- 151 | 152 | &__panel-toolbar { 153 | --divider-border: 1px solid var(--calcite-color-border-2); 154 | 155 | display: flex; 156 | flex-direction: row; 157 | border-bottom: var(--divider-border); 158 | background-color: var(--calcite-color-foreground-1); 159 | overflow-wrap: anywhere; 160 | } 161 | 162 | &__settings { 163 | border: 0; 164 | width: 100%; 165 | } 166 | 167 | &__feature-templates-container { 168 | .esri-feature-templates { 169 | width: 100%; 170 | } 171 | } 172 | 173 | &__notice { 174 | margin-bottom: $cap-spacing; 175 | } 176 | 177 | .esri-snapping-controls__layer-list { 178 | max-height: 220px; 179 | } 180 | 181 | // --------------------------------------------------------------------------------------------- 182 | // Panel Content 183 | // --------------------------------------------------------------------------------------------- 184 | 185 | &__panel-content { 186 | display: flex; 187 | position: relative; 188 | flex-direction: column; 189 | gap: $cap-spacing--double; 190 | padding-block: $panel-padding-block; 191 | padding-inline: $panel-padding-inline; 192 | height: auto; 193 | min-height: $panel-min-height; 194 | 195 | &__section { 196 | position: relative; 197 | 198 | &__group { 199 | display: flex; 200 | flex: 1 0 100%; 201 | flex-direction: column; 202 | } 203 | } 204 | 205 | &__message { 206 | display: flex; 207 | flex-basis: 100%; 208 | flex-grow: 1; 209 | align-items: center; 210 | justify-content: center; 211 | padding-inline: $panel-padding-inline; 212 | text-align: center; 213 | font-size: var(--calcite-font-size-0); 214 | } 215 | } 216 | 217 | &__panel-content__scrim-container { 218 | overflow: hidden; 219 | } 220 | 221 | // --------------------------------------------------------------------------------------------- 222 | // Upload details 223 | // --------------------------------------------------------------------------------------------- 224 | 225 | &__upload-details { 226 | display: flex; 227 | flex-direction: column; 228 | gap: $cap-spacing--double; 229 | min-width: 0; 230 | text-align: start; 231 | 232 | &__status { 233 | display: flex; 234 | flex-direction: row; 235 | gap: $side-spacing; 236 | align-items: flex-start; 237 | } 238 | 239 | &__title-wrapper { 240 | display: flex; 241 | flex-direction: column; 242 | } 243 | 244 | &__title { 245 | line-height: $loader-size; 246 | font-size: var(--calcite-font-size-0); 247 | font-weight: var(--calcite-font-weight-medium); 248 | } 249 | 250 | &__description { 251 | font-size: var(--calcite-font-size--1); 252 | } 253 | 254 | &__loader { 255 | flex-shrink: 0; 256 | margin-inline: 0; 257 | padding-block: 0; 258 | width: $loader-size; 259 | height: $loader-size; 260 | } 261 | 262 | &__icon { 263 | &--success { 264 | color: var(--calcite-color-status-success); 265 | } 266 | 267 | &--error { 268 | color: var(--calcite-color-status-danger); 269 | } 270 | } 271 | 272 | &__file-list { 273 | display: flex; 274 | flex-direction: column; 275 | gap: $cap-spacing--third; 276 | } 277 | 278 | &__file { 279 | display: flex; 280 | gap: $side-spacing--half; 281 | align-items: center; 282 | width: 100%; 283 | overflow: hidden; 284 | line-height: 1em; 285 | white-space: break-spaces; 286 | word-break: break-all; 287 | } 288 | 289 | &__file-name { 290 | word-break: break-all; 291 | font-size: var(--calcite-font-size--3); 292 | } 293 | } 294 | 295 | // --------------------------------------------------------------------------------------------- 296 | // Prompts 297 | // --------------------------------------------------------------------------------------------- 298 | 299 | &__prompt--info { 300 | @include esri-editor__prompt(var(--calcite-color-status-info)); 301 | } 302 | 303 | &__prompt--warning { 304 | @include esri-editor__prompt(var(--calcite-color-status-warning)); 305 | } 306 | 307 | &__prompt--danger { 308 | @include esri-editor__prompt(var(--calcite-color-status-danger)); 309 | } 310 | } 311 | 312 | .esri-expand__content { 313 | .esri-editor { 314 | .esri-feature-form { 315 | max-height: fit-content; 316 | overflow-y: visible; 317 | } 318 | } 319 | } 320 | } 321 | 322 | @if $include_Editor == true { 323 | @include editor(); 324 | } 325 | -------------------------------------------------------------------------------- /assets/esri/themes/base/widgets/_Print.scss: -------------------------------------------------------------------------------- 1 | @mixin print() { 2 | .esri-print { 3 | display: flex; 4 | position: relative; 5 | flex-grow: 1; 6 | padding: 0; 7 | min-height: $panel-min-height--large !important; 8 | overflow-y: auto; 9 | 10 | section[aria-hidden="true"] { 11 | display: none; 12 | } 13 | } 14 | 15 | .esri-print__panel-items--centered { 16 | display: flex; 17 | align-items: center; 18 | } 19 | 20 | .esri-print__header-title { 21 | margin: 0 auto 0 0; 22 | padding: $cap-spacing $side-spacing; 23 | font-size: $font-size__header-text; 24 | font-weight: $font-weight--bold; 25 | } 26 | 27 | .esri-print__browse-template-button-container { 28 | padding: $cap-spacing $side-spacing; 29 | } 30 | 31 | .esri-print__container { 32 | display: flex; 33 | flex-direction: column; 34 | flex-grow: 1; 35 | } 36 | 37 | .esri-print__content { 38 | display: flex; 39 | flex-flow: column; 40 | flex-grow: 1; 41 | justify-content: space-between; 42 | background-color: $background-color; 43 | } 44 | 45 | .esri-print__layout-section, 46 | .esri-print__map-only-section { 47 | margin-bottom: $cap-spacing--quarter; 48 | padding: $cap-spacing $side-spacing; 49 | } 50 | 51 | .esri-print__layout-tab-list { 52 | display: flex; 53 | position: relative; 54 | bottom: -1px; 55 | justify-content: space-between; 56 | margin: 0; 57 | background-color: $background-color--offset; 58 | padding: 0; 59 | } 60 | 61 | .esri-print__layout-tab { 62 | display: flex; 63 | align-items: center; 64 | justify-content: center; 65 | margin: 0; 66 | border: 1px solid rgb(0 0 0 / 0%); 67 | cursor: pointer; 68 | padding: 5px; 69 | width: 100%; 70 | text-align: center; 71 | color: $interactive-font-color; 72 | } 73 | 74 | .esri-print__layout-tab:hover, 75 | .esri-print__layout-tab:focus { 76 | background-color: $background-color--hover; 77 | color: $font-color; 78 | } 79 | 80 | .esri-print__layout-tab[aria-selected="true"], 81 | .esri-print__layout-tab[aria-selected="true"]:hover { 82 | border-color: $border-color; 83 | border-top-color: $border-color--active; 84 | border-bottom-color: $background-color; 85 | background-color: $background-color; 86 | color: $font-color; 87 | } 88 | 89 | .esri-print__panel--error { 90 | color: $font-color--error; 91 | } 92 | 93 | .esri-print__panel-container { 94 | display: flex; 95 | flex: 1 0; 96 | flex-direction: column; 97 | gap: $cap-spacing--three-quarters; 98 | } 99 | 100 | .esri-print__form-checkbox-label { 101 | display: flex; 102 | column-gap: $side-spacing--half; 103 | align-items: center; 104 | } 105 | 106 | .esri-print__form-checkbox-label [type="checkbox"] { 107 | margin: 0; 108 | } 109 | 110 | .esri-print__scale-info-container .esri-print__form-checkbox-label { 111 | margin-block-end: $cap-spacing--half; 112 | } 113 | 114 | .esri-print__scale-input-container { 115 | display: flex; 116 | align-items: center; 117 | padding-bottom: $cap-spacing; 118 | 119 | .esri-print__scale-input { 120 | flex-grow: 1; 121 | } 122 | } 123 | 124 | .esri-print__template-select-container { 125 | display: flex; 126 | align-items: center; 127 | justify-content: space-between; 128 | border: 1px solid $border-color; 129 | cursor: pointer; 130 | 131 | .esri-print__template-select-block { 132 | flex-shrink: 1; 133 | border: none; 134 | } 135 | 136 | .esri-print__template-select-icon { 137 | @include icomoonIconSelector() { 138 | background: transparent; 139 | } 140 | 141 | padding: $cap-spacing; 142 | } 143 | } 144 | 145 | .esri-print__template-select-flow-item-container { 146 | display: flex; 147 | flex-direction: column; 148 | flex-grow: 1; 149 | justify-content: space-between; 150 | overflow-y: hidden; 151 | 152 | .esri-print__template-select-flow-item-content { 153 | display: flex; 154 | flex-direction: column; 155 | overflow-y: auto; 156 | 157 | .esri-print__template-select-flow-item-list-heading { 158 | display: flex; 159 | gap: $side-spacing--half; 160 | align-items: center; 161 | border-bottom: 1px solid var(--calcite-color-border-3); 162 | background-color: $background-color--offset; 163 | padding: $cap-spacing $side-spacing; 164 | color: $font-color; 165 | font-size: $font-size; 166 | font-weight: $font-weight--medium; 167 | } 168 | } 169 | } 170 | 171 | .esri-print__advanced-options-section { 172 | @include icomoonIconSelector() { 173 | background: transparent; 174 | } 175 | 176 | border: 1px solid $border-color; 177 | background-color: $background-color--offset; 178 | } 179 | 180 | .esri-print__advanced-options-button-container { 181 | display: flex; 182 | align-items: center; 183 | justify-content: space-between; 184 | background-color: transparent; 185 | width: 100%; 186 | overflow: visible; 187 | } 188 | 189 | .esri-print__advanced-options-button { 190 | border: none; 191 | background-color: transparent; 192 | cursor: pointer; 193 | padding: $cap-spacing--half $side-spacing--half; 194 | width: 100%; 195 | font-family: inherit; 196 | } 197 | 198 | .esri-print__advanced-options-button[aria-expanded="true"] .esri-print__advanced-options-button-icon--closed, 199 | .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--opened, 200 | .esri-print__advanced-options-button .esri-print__advanced-options-button-icon--closed-rtl { 201 | display: none; 202 | } 203 | 204 | .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed, 205 | .esri-print__advanced-options-button[aria-expanded="true"] .esri-print__advanced-options-button-icon--opened { 206 | display: block; 207 | } 208 | 209 | .esri-print__advanced-options-button-title { 210 | margin: 0 $side-spacing--quarter; 211 | font-size: $font-size--small; 212 | } 213 | 214 | .esri-print__advanced-options-container { 215 | padding: $cap-spacing--half $side-spacing--half; 216 | font-size: $font-size--small; 217 | 218 | .esri-print__form-section-container { 219 | margin-bottom: $cap-spacing--half; 220 | } 221 | } 222 | 223 | .esri-print__size-container { 224 | @include icomoonIconSelector() { 225 | align-self: flex-end; 226 | margin-bottom: $cap-spacing; 227 | background: transparent; 228 | } 229 | 230 | display: inline-grid; 231 | grid-template-columns: 1fr 1fr $button-width; 232 | column-gap: $side-spacing--half; 233 | width: 100%; 234 | } 235 | 236 | .esri-print__swap-button { 237 | flex: 1 0 auto; 238 | border: none; 239 | color: $interactive-font-color; 240 | } 241 | 242 | .esri-print__export-button { 243 | margin: $cap-spacing--half $side-spacing--half; 244 | width: auto; 245 | min-height: unset; 246 | } 247 | 248 | .esri-print__export-section--centered { 249 | text-align: center; 250 | } 251 | 252 | .esri-print__export-panel-container { 253 | @include icomoonIconSelector() { 254 | margin-top: 0.15em; 255 | margin-right: 0.5em; 256 | } 257 | 258 | padding: $cap-spacing 0; 259 | font-size: $font-size--small; 260 | } 261 | 262 | .esri-print__exported-file-link-title { 263 | @include wordbreak(); 264 | } 265 | 266 | .esri-print__exported-file-link { 267 | display: flex; 268 | align-items: flex-start; 269 | margin-bottom: $cap-spacing--half; 270 | text-decoration: none; 271 | color: $interactive-font-color; 272 | 273 | &:hover { 274 | color: $interactive-font-color--hover; 275 | } 276 | } 277 | 278 | .esri-print__exported-file--loader { 279 | align-self: center; 280 | margin-inline: $cap-spacing; 281 | } 282 | 283 | .esri-print__exported-file--error { 284 | cursor: pointer; 285 | color: $font-color--error; 286 | } 287 | 288 | .esri-print .esri-print__exported-file--error:hover { 289 | color: $font-color--error; 290 | } 291 | 292 | .esri-print__exported-files-empty { 293 | display: flex; 294 | flex-direction: column; 295 | gap: $cap-spacing; 296 | align-items: center; 297 | padding: $cap-spacing $side-spacing; 298 | } 299 | 300 | .esri-print__template-button-container { 301 | padding: $cap-spacing $side-spacing; 302 | } 303 | 304 | .esri-print__template-done-button { 305 | width: 100%; 306 | } 307 | 308 | .esri-print__loader { 309 | margin: 0 auto; 310 | background: url("../base/images/loading-throb.gif") no-repeat center; 311 | width: 32px; 312 | height: 40px; 313 | } 314 | 315 | [dir="rtl"] { 316 | .esri-print__export-panel-container { 317 | @include icomoonIconSelector() { 318 | margin-right: 0; 319 | margin-left: 0.5em; 320 | } 321 | } 322 | 323 | .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed { 324 | display: none; 325 | } 326 | 327 | .esri-print__advanced-options-button[aria-expanded="false"] .esri-print__advanced-options-button-icon--closed-rtl { 328 | display: block; 329 | } 330 | } 331 | } 332 | 333 | @if $include_Print == true { 334 | @include print(); 335 | } 336 | --------------------------------------------------------------------------------