@arcgis/core 4.25.0-next.20221107 → 4.25.0

package/assets/esri/themes/base/widgets/_ElevationProfile.scss

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