@geoscene/core 4.23.9 → 4.23.12

package/assets/geoscene/themes/base/widgets/_Popup.scss

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