mirror of
https://github.com/netbox-community/netbox.git
synced 2025-07-18 04:56:29 -06:00
Move interface colour logic into SCSS where it belongs
This commit is contained in:
parent
bf362f4679
commit
c93413dc9c
BIN
netbox/project-static/dist/netbox-dark.css
vendored
BIN
netbox/project-static/dist/netbox-dark.css
vendored
Binary file not shown.
BIN
netbox/project-static/dist/netbox-light.css
vendored
BIN
netbox/project-static/dist/netbox-light.css
vendored
Binary file not shown.
BIN
netbox/project-static/dist/netbox-print.css
vendored
BIN
netbox/project-static/dist/netbox-print.css
vendored
Binary file not shown.
@ -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
Block a user