mirror of
https://github.com/netbox-community/netbox.git
synced 2025-08-18 05:28:16 -06:00
Remove obsolete styling
This commit is contained in:
Jeremy Stretch
parent
b84d023838
commit
27a3de02be
BIN
netbox/project-static/dist/netbox.css
vendored
BIN
netbox/project-static/dist/netbox.css
vendored
Binary file not shown.
@ -7,428 +7,6 @@
|
|||||||
@import './utilities';
|
@import './utilities';
|
||||||
//@import './variables';
|
//@import './variables';
|
||||||
|
|
||||||
// Global Search
|
|
||||||
nav.search {
|
|
||||||
// Don't overtake dropdowns
|
|
||||||
z-index: 999;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: $navbar-light-color;
|
|
||||||
|
|
||||||
.search-container {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include media-breakpoint-down(lg) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Search Input & Selected Object Value & Object Selector
|
|
||||||
.input-group {
|
|
||||||
// Selected Object
|
|
||||||
.search-obj-selected {
|
|
||||||
border-color: $input-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Object Selector Dropdown Button
|
|
||||||
.dropdown-toggle {
|
|
||||||
// Generate the same styles as a regular Bootstrap button.
|
|
||||||
//@include button-variant($input-group-addon-bg, $input-border-color);
|
|
||||||
margin-left: 0;
|
|
||||||
font-weight: $input-group-addon-font-weight;
|
|
||||||
line-height: $input-line-height;
|
|
||||||
color: $input-group-addon-color;
|
|
||||||
background-color: $input-group-addon-bg;
|
|
||||||
border: $input-border-width solid $input-border-color;
|
|
||||||
@include border-radius($input-border-radius);
|
|
||||||
border-left: 1px solid var(--nbx-search-filter-border-left-color);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: unset !important;
|
|
||||||
}
|
|
||||||
// Don't show the dropdown icon — the filter icon is basically the same thing.
|
|
||||||
&:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Object Selector Dropdown Menu
|
|
||||||
.search-obj-selector {
|
|
||||||
// Limit the height and enable scrolling on mobile devices.
|
|
||||||
max-height: 70vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.dropdown-item,
|
|
||||||
.dropdown-header {
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-header {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Styles for the quicksearch and its clear button;
|
|
||||||
// Overrides input-group styles and adds transition effects
|
|
||||||
.quicksearch {
|
|
||||||
input[type='search'] {
|
|
||||||
border-radius: $border-radius !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin-left: -32px !important;
|
|
||||||
z-index: 100 !important;
|
|
||||||
outline: none !important;
|
|
||||||
border-radius: $border-radius !important;
|
|
||||||
transition: visibility 0s, opacity 0.2s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
button :hover {
|
|
||||||
opacity: 50%;
|
|
||||||
transition: visibility 0s, opacity 0.1s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main.layout {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
height: 100vh;
|
|
||||||
height: -webkit-fill-available;
|
|
||||||
max-height: 100vh;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
|
|
||||||
// Override styles when printing. Fixes issue where only the first page is visible when printing.
|
|
||||||
@media print {
|
|
||||||
position: static !important;
|
|
||||||
display: block !important;
|
|
||||||
height: 100%;
|
|
||||||
overflow-x: visible !important;
|
|
||||||
overflow-y: visible !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main.login-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100vw;
|
|
||||||
height: calc(100vh - 4rem);
|
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
|
|
||||||
+ footer.footer button.color-mode-toggle {
|
|
||||||
color: var(--nbx-color-mode-toggle-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
background-color: $tab-content-bg;
|
|
||||||
padding: 0;
|
|
||||||
.nav-link {
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
|
||||||
// Pad the bottom of the footer on mobile devices to account for mobile browser controls.
|
|
||||||
margin-bottom: 8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer.login-footer {
|
|
||||||
height: 4rem;
|
|
||||||
margin-top: auto;
|
|
||||||
|
|
||||||
.container-fluid {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: $container-padding-x $grid-gutter-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1.accordion-item-title,
|
|
||||||
h2.accordion-item-title,
|
|
||||||
h3.accordion-item-title,
|
|
||||||
h4.accordion-item-title,
|
|
||||||
h5.accordion-item-title,
|
|
||||||
h6.accordion-item-title {
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
font-weight: $font-weight-bold;
|
|
||||||
color: var(--nbx-sidebar-title-color);
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-login {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 330px;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
input:focus {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='text'] {
|
|
||||||
margin-bottom: -1px;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
input[type='password'] {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: auto;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
padding-top: 0.75rem;
|
|
||||||
padding-bottom: 0.75rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.nav.nav-pills {
|
|
||||||
.nav-item.nav-link {
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $accordion-button-active-color;
|
|
||||||
background-color: $accordion-button-active-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ensure the content container is full-height, and that the content block is also full height so
|
|
||||||
// that the footer is always at the bottom.
|
|
||||||
div.content-container {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: calc(100% - #{$sidenav-width-closed});
|
|
||||||
min-height: 100vh;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
// Don't show an outline when the content container is focused.
|
|
||||||
&:focus,
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content {
|
|
||||||
background-color: $tab-content-bg;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-down(lg) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make the content full-width when printing.
|
|
||||||
@media print {
|
|
||||||
width: 100% !important;
|
|
||||||
margin-left: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prevent scrolling of body content when nav menu is open on mobile.
|
|
||||||
.sidebar.collapse.show ~ .content-container > .content {
|
|
||||||
@media (max-width: map.get($grid-breakpoints, 'md')) {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
box-shadow: $box-shadow-sm;
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
padding: $card-cap-padding-x;
|
|
||||||
color: var(--nbx-body-color);
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header + .card-body {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body.small .form-control,
|
|
||||||
.card-body.small .form-select {
|
|
||||||
font-size: $input-font-size-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-divider {
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
margin: $hr-margin-y 0;
|
|
||||||
border-top: 1px solid $card-border-color;
|
|
||||||
opacity: $hr-opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove shadow when printing.
|
|
||||||
@media print {
|
|
||||||
box-shadow: unset !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-floating {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
> .input-group > .form-control,
|
|
||||||
> .input-group > .form-select {
|
|
||||||
height: $form-floating-height;
|
|
||||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .input-group > label {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%; // allow textareas
|
|
||||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
|
||||||
pointer-events: none;
|
|
||||||
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
|
||||||
transform-origin: 0 0;
|
|
||||||
@include transition($form-floating-transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .input-group > .form-control {
|
|
||||||
&::placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:not(:placeholder-shown) {
|
|
||||||
padding-top: $form-floating-input-padding-t;
|
|
||||||
padding-bottom: $form-floating-input-padding-b;
|
|
||||||
}
|
|
||||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
|
||||||
&:-webkit-autofill {
|
|
||||||
padding-top: $form-floating-input-padding-t;
|
|
||||||
padding-bottom: $form-floating-input-padding-b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .input-group > .form-select,
|
|
||||||
> .choices > .choices__inner,
|
|
||||||
> .ss-main span.placeholder, // SlimSelect Single
|
|
||||||
> .ss-main div.ss-values // SlimSelect Multiple
|
|
||||||
{
|
|
||||||
padding-top: $form-floating-input-padding-t;
|
|
||||||
padding-bottom: $form-floating-input-padding-b;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .input-group > .form-control:focus,
|
|
||||||
> .input-group > .form-control:not(:placeholder-shown),
|
|
||||||
> .input-group > .form-select,
|
|
||||||
> .choices,
|
|
||||||
> .ss-main {
|
|
||||||
~ label {
|
|
||||||
opacity: $form-floating-label-opacity;
|
|
||||||
transform: $form-floating-label-transform;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
|
||||||
> .input-group > .form-control:-webkit-autofill {
|
|
||||||
~ label {
|
|
||||||
z-index: 4;
|
|
||||||
opacity: $form-floating-label-opacity;
|
|
||||||
transform: $form-floating-label-transform;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-object-edit {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea.form-control[rows='10'] {
|
|
||||||
height: 18rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea.markdown,
|
|
||||||
textarea.form-control[name='csv'] {
|
|
||||||
font-family: $font-family-monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:not(:only-of-type) {
|
|
||||||
margin-bottom: $spacer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-btn {
|
|
||||||
min-width: $spacer * 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.breadcrumb-container {
|
|
||||||
width: fit-content;
|
|
||||||
padding: $badge-padding-y $badge-padding-x;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
|
|
||||||
ol.breadcrumb {
|
|
||||||
margin-bottom: 0;
|
|
||||||
li.breadcrumb-item > a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
li.breadcrumb-item > a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label.required {
|
|
||||||
font-weight: $font-weight-bold;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 0 0 2px;
|
|
||||||
font-family: 'Material Design Icons';
|
|
||||||
font-size: 8px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: $font-weight-medium;
|
|
||||||
text-decoration: none;
|
|
||||||
content: '\f06C4';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table tbody {
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
tr.#{$color} {
|
|
||||||
background-color: rgba($value, 0.15);
|
|
||||||
border-color: $gray-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style objects with statuses/roles within a table. As of implementation, used for IP addresses
|
// Style objects with statuses/roles within a table. As of implementation, used for IP addresses
|
||||||
// assigned to interfaces.
|
// assigned to interfaces.
|
||||||
table .table-badge-group {
|
table .table-badge-group {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user