Misc cleanup of old styling

netbox/project-static/styles/custom/_misc.scss

@@ -7,3 +7,33 @@ span.color-label {
   border: 1px solid #303030;
   border-radius: $border-radius;
 }
+
+// Rendered Markdown
+.rendered-markdown {
+
+  table {
+    width: 100%;
+
+    // Apply a border
+    th {
+      border-bottom: 2px solid #dddddd;
+      padding: 8px;
+    }
+    td {
+      border-top: 1px solid #dddddd;
+      padding: 8px;
+    }
+
+    // Map "align" attr of column headings
+    th[align="left"] {
+      text-align: left;
+    }
+    th[align="center"] {
+      text-align: center;
+    }
+    th[align="right"] {
+      text-align: right;
+    }
+  }
+
+}

netbox/project-static/styles/netbox.scss

@@ -12,6 +12,7 @@
 @import 'transitional/cards';
 @import 'transitional/layout';
 @import 'transitional/navigation';
+@import 'transitional/progress';
 @import 'transitional/tables';
 @import 'transitional/tabs';
 

netbox/project-static/styles/old/netbox.scss

@@ -5,229 +5,7 @@
 //@import './sidenav';
 @import './overrides';
 @import './utilities';
-@import './variables';
+//@import './variables';
-
-@each $color, $value in $theme-colors {
-  // Override CSS values on each theme color.
-
-  // Use Bootstrap's method of coloring alert links to appropriately color close buttons within
-  // another colored element.
-  // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_alert.scss#L50-L52
-  // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_close.scss#L12
-  $shifted-bg: shift-color($value, $alert-bg-scale);
-  $shifted-color: shift-color($value, $alert-color-scale);
-
-  @if (contrast-ratio($shifted-bg, $shifted-color) < $min-contrast-ratio) {
-    $shifted-color: mix($value, color-contrast($shifted-bg), abs($alert-color-scale));
-  }
-
-  $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$shifted-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
-  .bg-#{$color} button.btn-close {
-    background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat;
-  }
-
-  .btn.btn-ghost-#{$color} {
-    color: $value;
-    &:hover {
-      background-color: rgba($value, 0.12);
-    }
-  }
-
-  // Use Bootstrap's method of coloring the .alert-link class automatically.
-  // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_alert.scss#L50-L52
-
-  .alert.alert-#{$color},
-  .table-#{$color} {
-    // Exclude buttons.
-    a:not(.btn) {
-      font-weight: $font-weight-bold;
-      color: $shifted-color;
-    }
-    // Apply a border to buttons contained within colored elements, if they're not already a
-    // bordered button class.
-    .btn:not([class*='btn-outline']) {
-      border-color: $gray-700;
-    }
-  }
-
-  // Toasts required a slightly different approach because the background color isn't "shifted",
-  // it's the direct theme color.
-  .toast.bg-#{$color} {
-    $shifted-color: shift-color($value, $alert-color-scale);
-
-    @if (contrast-ratio($value, $shifted-color) < $min-contrast-ratio) {
-      $shifted-color: mix($value, color-contrast($value), abs($alert-color-scale));
-    }
-    a:not(.btn) {
-      font-weight: $font-weight-bold;
-      color: $shifted-color;
-    }
-  }
-
-  // Use proper contrasting color foreground color for special components.
-  .badge,
-  .toast,
-  .toast-header,
-  .progress-bar {
-    &.bg-#{$color} {
-      color: color-contrast($value);
-    }
-  }
-}
-
-// Ensure progress bars (utilization graph) in tables aren't too narrow to display the percentage.
-table td > .progress {
-  min-width: 6rem;
-}
-
-// Override Bootstrap form-control font-size when contained by .small element.
-.small .form-control {
-  font-size: $font-size-sm;
-}
-
-// Automatically space out adjacent columns, but not within card bodies.
-:not(.card-body) > .col:not(:last-child):not(:only-child) {
-  margin-bottom: $spacer;
-}
-
-.nav-mobile {
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-
-  @include media-breakpoint-down(lg) {
-    display: flex;
-  }
-
-  .nav-mobile-top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-}
-
-.card > .table.table-flush {
-  margin-bottom: 0;
-  overflow: hidden;
-  border-bottom-right-radius: $card-border-radius;
-  border-bottom-left-radius: $card-border-radius;
-
-  thead th[scope='col'] {
-    padding-top: map.get($spacers, 3);
-    padding-bottom: map.get($spacers, 3);
-    text-transform: uppercase;
-    vertical-align: middle;
-    background-color: $table-flush-header-bg;
-    border-top: 1px solid $card-border-color;
-    border-bottom-color: $card-border-color;
-  }
-
-  th,
-  td {
-    padding-right: map.get($spacers, 4) !important;
-    padding-left: map.get($spacers, 4) !important;
-    border-right: 0;
-    border-left: 0;
-  }
-  tr[class] {
-    border-color: $card-border-color !important;
-    &:last-of-type {
-      border-bottom-color: transparent !important;
-      border-bottom-right-radius: $card-border-radius;
-      border-bottom-left-radius: $card-border-radius;
-    }
-  }
-}
-
-.alert {
-  code {
-    color: $gray-600;
-  }
-}
-
-table {
-  td {
-    a {
-      text-decoration: none;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-    .dropdown {
-      // Presence of 'overflow: scroll' on a table causes dropdowns to be improperly hidden when
-      // opened. See: https://github.com/twbs/bootstrap/issues/24251
-      position: static;
-    }
-  }
-  th {
-    a,
-    a:hover {
-      color: $body-color;
-      text-decoration: none;
-    }
-  }
-
-  td,
-  th {
-    font-size: $font-size-sm;
-    line-height: $line-height-sm;
-    vertical-align: middle;
-    &.min-width {
-      width: 1%;
-    }
-    .form-check-input {
-      // Ensure checkboxes aren't too small inside object tables.
-      margin-top: 0.125em;
-      font-size: $font-size-base;
-    }
-
-    .btn-sm {
-      line-height: $line-height-xs;
-    }
-
-    p {
-      // Remove spacing from paragraph elements within tables.
-      margin-bottom: 0.5em;
-    }
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  th.asc > a::after {
-    content: '\f0140';
-    font-family: 'Material Design Icons';
-  }
-
-  th.desc > a::after {
-    content: '\f0143';
-    font-family: 'Material Design Icons';
-  }
-
-  &.table > :not(caption) > * > * {
-    padding-right: $table-cell-padding-x-sm !important;
-    padding-left: $table-cell-padding-x-sm !important;
-  }
-
-  &.object-list {
-    th {
-      font-size: $font-size-xs;
-      line-height: $line-height-xs;
-      vertical-align: bottom;
-    }
-  }
-
-  &.attr-table {
-    th {
-      font-weight: normal;
-      width: 25%;
-    }
-  }
-}
 
 // Object list control buttons (Add/Clone/Import/Export)
 .controls {
@@ -827,31 +605,6 @@ div.card-overlay {
   max-width: unset;
 }
 
-/* Rendered Markdown */
-.rendered-markdown table {
-  width: 100%;
-}
-.rendered-markdown th {
-  border-bottom: 2px solid #dddddd;
-  padding: 8px;
-}
-.rendered-markdown td {
-  border-top: 1px solid #dddddd;
-  padding: 8px;
-}
-
-th[align="left"] {
-  text-align: left;
-}
-
-th[align="center"] {
-  text-align: center;
-}
-
-th[align="right"] {
-  text-align: right;
-}
-
 /* Markdown widget */
 .markdown-widget {
   .nav-link {

netbox/project-static/styles/transitional/_progress.scss

@@ -0,0 +1,3 @@
+.progress, .progress-bar {
+  height: 20px;
+}

netbox/project-static/styles/transitional/_tables.scss

@@ -6,6 +6,16 @@ table.object-list {
     border-bottom-width: 0;
   }
 
+  // Append up/down arrow to header of column used for sorting
+  th.asc > a::after {
+    content: '\f0140';
+    font-family: 'Material Design Icons';
+  }
+  th.desc > a::after {
+    content: '\f0143';
+    font-family: 'Material Design Icons';
+  }
+
 }
 
 // Object attribute tables
@@ -15,6 +25,7 @@ table.attr-table {
   th {
     color: $gray-700;
     font-weight: normal;
+    width: min-content;
   }
 
   // Restyle row border

netbox/templates/dcim/device.html

@@ -244,13 +244,15 @@
                 <div class="card">
                     <h5 class="card-header">{% trans "Power Utilization" %}</h5>
                     <table class="table table-hover">
-                        <tr>
+                        <thead>
+                          <tr>
                             <th>{% trans "Input" %}</th>
                             <th>{% trans "Outlets" %}</th>
                             <th>{% trans "Allocated" %}</th>
                             <th>{% trans "Available" %}</th>
                             <th>{% trans "Utilization" %}</th>
-                        </tr>
+                          </tr>
+                        </thead>
                         {% for powerport in object.powerports.all %}
                             {% with utilization=powerport.get_power_draw powerfeed=powerport.connected_endpoints.0 %}
                                 <tr>

netbox/templates/dcim/virtualchassis_edit.html

@@ -77,13 +77,13 @@
                             <td>
                                 {{ form.vc_position }}
                                 {% if form.vc_position.errors %}
-                                    <br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
+                                    <small class="text-danger">{{ form.vc_position.errors.0 }}</small>
                                 {% endif %}
                             </td>
                             <td>
                                 {{ form.vc_priority }}
                                 {% if form.vc_priority.errors %}
-                                    <br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
+                                    <small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
                                 {% endif %}
                             </td>
                             <td>

netbox/templates/extras/inc/configcontext_data.html

@@ -1,5 +1,5 @@
 {% load helpers %}
 
-<div class="rendered-context-data">
+<div class="rendered-context-data mt-1">
     <pre class="block">{% if format == 'json' %}{{ data|json }}{% elif format == 'yaml' %}{{ data|yaml }}{% else %}{{ data }}{% endif %}</pre>
 </div>