Merge pull request #6324 from netbox-community/feature-ui

Merge various UI fixes to feature

netbox/project-static/netbox.scss

@@ -46,6 +46,11 @@
   transition: background-color, color 0.15s ease-in-out;
 }
 
+.text-xs {
+  font-size: $font-size-xs;
+  line-height: $line-height-sm;
+}
+
 body {
   background-color: var(--nbx-body-bg);
   color: var(--nbx-body-color);
@@ -92,6 +97,25 @@ body {
       stroke: $gray-200;
     }
   }
+  table {
+    &.table > :not(caption) > * > * {
+      padding-left: $table-cell-padding-x-sm !important;
+      padding-right: $table-cell-padding-x-sm !important;
+    }
+    td,
+    th {
+      font-size: $font-size-xs;
+      line-height: $line-height-sm;
+      vertical-align: middle;
+    }
+    &.attr-table {
+      td,
+      th {
+        font-size: $font-size-sm;
+        line-height: $line-height-sm;
+      }
+    }
+  }
 }
 
 div.title-container {
@@ -499,10 +523,6 @@ table tbody {
     }
   }
 }
-table td,
-table th {
-  font-size: $font-size-sm;
-}
 
 // Cable Tracing
 .cable-trace {

netbox/project-static/select.scss

@@ -109,12 +109,19 @@ div.form-floating div.ss-main div.ss-multi-selected {
         border-bottom-left-radius: $form-select-border-radius;
         border-bottom-right-radius: $form-select-border-radius;
       }
+      .ss-option.ss-disabled {
+        background-color: transparent;
+      }
+      .ss-option.ss-disabled:hover {
+        color: unset;
+      }
     }
     border-bottom-left-radius: $form-select-border-radius;
     border-bottom-right-radius: $form-select-border-radius;
     .ss-search {
       input[type='search'] {
         background-color: $form-select-bg;
+        color: $input-color;
         border: $form-select-border-width solid $form-select-border-color;
         &:focus {
           border-color: $form-select-focus-border-color;

netbox/project-static/src/select/api.ts

@@ -184,7 +184,7 @@ export function initApiSelect() {
     // element's value.
     const event = new Event(`netbox.select.onload.${select.name}`);
     // Query Parameters - will have attributes added below.
-    const query = {} as Record<string, string>;
+    const query = { limit: 0 } as Record<string, string | number>;
 
     if (hasUrl(select)) {
       // Store the original URL, so it can be referred back to as filter-by elements change.

netbox/project-static/theme-base.scss

@@ -119,6 +119,13 @@ $font-weight-lighter: 200;
 $font-weight-medium: 600;
 $font-weight-bolder: 800;
 
+$font-size-xs: 0.8rem;
+
+$line-height-base: 1.5;
+$line-height-xs: 1;
+$line-height-sm: 1.25;
+$line-height-lg: 1.75;
+
 $theme-color-addons: (
   'alt': $alt,
   'gray': $gray-400,

netbox/project-static/theme-dark.scss

@@ -47,11 +47,11 @@ $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
 $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);
 $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
-// $component-active-color:      $white;
-// $component-active-bg:         $primary;
 $text-muted: $gray-500;
 $blockquote-footer-color: $gray-600;
 $mark-bg: #fcf8e3;
+$link-color: $primary;
+$link-hover-color: $blue-200;
 
 // Tables
 $table-color: $gray-100;

netbox/templates/utilities/confirmation_form.html

@@ -15,8 +15,8 @@
                     {% block message %}<p>Are you sure?</p>{% endblock %}
                 </div>
                 <div class="card-footer text-end">
-                    <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
-                    <button type="submit" name="_confirm" class="btn btn-{{ button_class|default:"dark" }}">Confirm</button>
+                    <a href="{{ return_url }}" class="btn btn-outline-gray-900">Cancel</a>
+                    <button type="submit" name="_confirm" class="btn btn-{{ button_class|default:"gray-900" }}">Confirm</button>
                 </div>
             </div>
         </form>