@arcgis/core 4.28.0-next.20230818 → 4.28.0-next.20230821

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

@@ -2,50 +2,103 @@
   .esri-un-associations {
     &__action {
       height: 48px;
-    }
 
-    &__container {
-      width: 330px;
-      border-bottom: none;
-      margin: 0px;
+      &-refresh {
+        --calcite-ui-icon-color: #077ac2;
+      }
     }
 
-    &__content {
-      border-bottom: none;
-      margin: 0px;
-    }
+    &__block {
+      &-content {
+        border: {
+          bottom: none;
+        }
+        margin: 0px;
+      }
 
-    &__controls-container {
-      display: grid;
-      gap: 0.5rem;
+      &-section-settings {
+        border: {
+          style: none;
+        }
+        padding: 0;
+      }
     }
 
-    &__label {
-      height: 1rem;
-    }
+    &__div-controls {
+      &-main {
+        background: var(--calcite-ui-foreground-1) /* color */;
+        display: grid;
+        gap: 0.5rem;
+        padding: 0.5rem 0 0.5rem 0;
+      }
 
-    &__label-and-slider {
-      display: flex;
-      flex-direction: column;
+      &-symbol-picker {
+        margin: {
+          top: 0.75rem;
+        }
+      }
     }
 
-    &__label-and-toggle {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      width: inherit;
-      padding-right: 0.25rem;
-    }
+    &__dropdown {
+      border: 1px solid var(--calcite-ui-border-input);
+
+      &-item {
+        &-line-cap {
+          background: {
+            position: center;
+            repeat: no-repeat;
+          }
+          height: 10px;
+        }
+
+        &-line-pattern {
+          height: 3px;
+        }
+      }
+
+      &-selected-item {
+        &-line-cap {
+          background: {
+            position: center;
+            repeat: no-repeat;
+            size: 275px 10px;
+          }
+          height: 10px;
+          width: 100%;
+        }
 
-    &__refresh-action {
-      --calcite-ui-icon-color: #077ac2;
+        &-line-pattern {
+          height: 3px;
+          width: 100%;
+        }
+      }
+
+      &-trigger {
+        align-items: center;
+        display: flex;
+        height: 24px;
+        margin: 0 6px 0 6px;
+        width: 100%;
+      }
     }
 
-    &__settings {
-      display: grid;
-      padding: 0.5rem 0 0.5rem 0;
-      gap: 0.5rem;
-      background-color: var(--calcite-ui-foreground-1);
+    &__label {
+      height: 1rem;
+
+      &-and-slider {
+        display: flex;
+        flex-direction: column;
+      }
+
+      &-and-toggle {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: inherit;
+        padding: {
+          right: 0.25rem;
+        }
+      }
     }
 
     &__slider {
@@ -54,26 +107,31 @@
 
     &__status-icon {
       &-container {
-        width: 48px;
         height: 48px;
+        width: 48px;
       }
 
       &-warning {
-        padding-left: 16px;
-        padding-top: 16px;
         --calcite-ui-icon-color: #edd317;
+        padding: 16px;
       }
     }
 
     &__switch {
       align-self: center;
       padding: 0.5rem;
+
+      &-container {
+        display: grid;
+        height: 48px;
+        width: 48px;
+      }
     }
 
-    &__switch-container {
-      display: grid;
-      width: 48px;
-      height: 48px;
+    &__widget-container {
+      border-bottom: none;
+      margin: 0px;
+      width: 330px;
     }
   }
 }