azure-maps-control 2.1.6 → 2.1.10

package/dist/atlas.css

@@ -987,6 +987,81 @@ a.azure-map-copyright[href]:hover {
   overflow: hidden;
   z-index: 100;
 }
+.azure-maps-control-dropdown {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.14);
+  overflow: hidden;
+  padding-block: 8px;
+  background-color: white;
+  transform: scale(0.1, 0.1);
+  transition-timing-function: ease-out;
+  transition-duration: 250ms;
+  position: absolute;
+  z-index: 1001;
+  outline: 0;
+}
+.azure-maps-control-dropdown.top-left {
+  transform-origin: top left;
+  left: 0;
+}
+.azure-maps-control-dropdown.top-right {
+  transform-origin: top right;
+  right: 0;
+}
+.azure-maps-control-dropdown.bottom-left {
+  transform-origin: bottom left;
+  left: 0;
+  bottom: 0;
+}
+.azure-maps-control-dropdown.bottom-right {
+  transform-origin: bottom right;
+  right: 0;
+  bottom: 0;
+}
+.azure-maps-control-container.in-use .azure-maps-control-dropdown {
+  transform: scale(1, 1);
+  transition-timing-function: ease-out;
+  transition-duration: 250ms;
+  opacity: 1;
+  visibility: visible;
+}
+.azure-maps-control-list-button {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.14);
+  border-radius: 0px;
+  border: none;
+  line-height: 32px;
+  padding-inline-end: 16px;
+  white-space: nowrap;
+}
+.azure-maps-control-list-button.curr-style {
+  border-radius: 4px;
+}
+.azure-maps-control-list-button:hover,
+.azure-maps-control-list-button[aria-current="true"] {
+  background-color: #f0f0f0;
+}
+.azure-maps-control-list-button:disabled {
+  pointer-events: none;
+}
+.azure-maps-control-list-button img {
+  margin: 8px;
+  width: 16px;
+  height: 16px;
+  border: 1px solid lightgrey;
+  border-radius: 2px;
+}
+.azure-maps-control-list-button.expanded {
+  padding-inline-end: 64px;
+  box-shadow: none;
+}
+.azure-maps-control-list-button.expanded img {
+  margin-inline-end: 16px;
+}
 .tooltiptext.dark {
   background-color: #555;
   color: #fff;
@@ -1408,14 +1483,65 @@ a.azure-map-copyright[href]:hover {
   color: #000;
 }
 .atlas-map.high-contrast-dark .azure-maps-control-container > .style-options.list button,
+.atlas-map.high-contrast-dark .azure-maps-control-container > .azure-maps-control-dropdown,
 .azure-maps-control-container.dark > .style-options.list button {
   background-color: #011C2C;
   color: #CCC;
 }
 .atlas-map.high-contrast-dark .azure-maps-control-container > .style-options.list button :disabled,
+.atlas-map.high-contrast-dark .azure-maps-control-container > .azure-maps-control-dropdown :disabled,
 .azure-maps-control-container.dark > .style-options.list button :disabled {
   color: rgba(255, 255, 255, 0.3);
 }
+.azure-maps-control-container.dark > .azure-maps-control-dropdown,
+.azure-maps-control-container.dark .azure-maps-control-list-button {
+  background-color: #011c2c;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container > .azure-maps-control-dropdown {
+  border-radius: 0;
+  border: 3px solid #ffffff;
+}
+.atlas-map.high-contrast-light .azure-maps-control-container > .azure-maps-control-dropdown {
+  border-radius: 0;
+  border: 3px solid #000000;
+}
+.azure-maps-control-container.dark .azure-maps-control-list-button {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 4px;
+  color: white;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button {
+  background-color: #011C2C;
+  color: #fff;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button :disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+.atlas-map.high-contrast-light .azure-maps-control-container .azure-maps-control-list-button {
+  background-color: #FFF;
+  color: #000;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button.curr-style {
+  border-radius: 0;
+  border: 3px solid #ffffff;
+}
+.atlas-map.high-contrast-light .azure-maps-control-container .azure-maps-control-list-button.curr-style {
+  border-radius: 0;
+  border: 3px solid #000000;
+}
+.azure-maps-control-container.dark .azure-maps-control-list-button:hover,
+.azure-maps-control-container.dark .azure-maps-control-list-button[aria-current="true"] {
+  background-color: #31acce;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button:hover,
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button[aria-current="true"] {
+  background-color: #FFF;
+  color: #000;
+}
+.atlas-map.high-contrast-light .azure-maps-control-container .azure-maps-control-list-button:hover,
+.atlas-map.high-contrast-light .azure-maps-control-container .azure-maps-control-list-button[aria-current="true"] {
+  background-color: #011C2C;
+  color: #fff;
+}
 .azure-maps-control-container > .style-options.list button:hover,
 .azure-maps-control-container > .style-options.list button:focus {
   color: #31ACCE;