Move interface colour logic into SCSS where it belongs
This commit is contained in:
parent
bf362f4679
commit
c93413dc9c
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -835,15 +835,6 @@ table tbody {
|
|||
}
|
||||
}
|
||||
|
||||
// Expose theme colors as variables. (Useful for dynamic styling of choices etc.)
|
||||
// Both as opaque colour and translucent (alpha 15%)
|
||||
:root {
|
||||
@each $color, $value in $theme-colors {
|
||||
--nbx-color-#{$color}: #{$value};
|
||||
--nbx-color-#{$color}-a15: #{rgba($value, 0.15)};
|
||||
}
|
||||
}
|
||||
|
||||
// Style objects with statuses/roles within a table. As of implementation, used for IP addresses
|
||||
// assigned to interfaces.
|
||||
table .table-badge-group {
|
||||
|
@ -1078,4 +1069,41 @@ html {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Apply row colours to interface lists
|
||||
&[data-netbox-url-name='device_interfaces'] {
|
||||
tr[data-cable-status=connected] {
|
||||
background-color: rgba(map.get($theme-colors, "green"), 0.15);
|
||||
}
|
||||
|
||||
tr[data-cable-status=planned] {
|
||||
background-color: rgba(map.get($theme-colors, "blue"), 0.15);
|
||||
}
|
||||
|
||||
tr[data-cable-status=decommissioning] {
|
||||
background-color: rgba(map.get($theme-colors, "yellow"), 0.15);
|
||||
}
|
||||
|
||||
tr[data-mark-connected=true] {
|
||||
background-color: rgba(map.get($theme-colors, "success"), 0.15);
|
||||
}
|
||||
|
||||
tr[data-virtual=true] {
|
||||
background-color: rgba(map.get($theme-colors, "primary"), 0.15);
|
||||
}
|
||||
|
||||
tr[data-enabled=disabled] {
|
||||
background-color: rgba(map.get($theme-colors, "danger"), 0.15);
|
||||
}
|
||||
|
||||
// Only show the correct button depending on the cable status
|
||||
tr[data-cable-status=connected] button.mark-installed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr:not([data-cable-status=connected]) button.mark-planned {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
|
@ -30,33 +30,3 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
{% endblock bulk_extra_controls %}
|
||||
|
||||
{% block head %}
|
||||
{{ block.super }}
|
||||
<style>
|
||||
tr[data-cable-status=connected] {
|
||||
background-color: var(--nbx-color-green-a15);
|
||||
}
|
||||
tr[data-cable-status=planned] {
|
||||
background-color: var(--nbx-color-blue-a15);
|
||||
}
|
||||
tr[data-cable-status=decommissioning] {
|
||||
background-color: var(--nbx-color-yellow-a15);
|
||||
}
|
||||
tr[data-mark-connected=true] {
|
||||
background-color: var(--nbx-color-success-a15);
|
||||
}
|
||||
tr[data-virtual=true] {
|
||||
background-color: var(--nbx-color-primary-a15);
|
||||
}
|
||||
tr[data-enabled=disabled] {
|
||||
background-color: var(--nbx-color-danger-a15);
|
||||
}
|
||||
tr[data-cable-status=connected] button.mark-installed {
|
||||
display: none;
|
||||
}
|
||||
tr:not([data-cable-status=connected]) button.mark-planned {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in New Issue