.btn-danger:focus {
@include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
}
+.btn-success {
+ --bs-btn-hover-bg: #198754;
+}
+.btn-danger {
+ --bs-btn-hover-bg: #cb3424;
+ --bs-btn-color: #fff;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-active-bg: #cb3424;
+ --bs-btn-active-color: #fff;
+}
body,
.list-overflow,
.scroll-box,
.CodeMirror-vscrollbar,
.ng-sidebar,
.runninginstances .popover-body,
-.resources-chart-popover .popover-body {
+.resources-chart-popover .popover-body,
+.ng-dropdown-panel .scroll-host {
&::-webkit-scrollbar {
@include wh-value(10px, null);
}
@include background(null, $theme-bg-color !important, null, null, null);
}
a {
+ text-decoration: none;
color: $primary;
&:hover,
&:focus {
}
&:disabled {
cursor: not-allowed;
+ background-color: grey;
}
}
}
);
}
.form-control {
+ color: #4f5467;
+ border-radius: 4px;
+ background-color: $white;
@include roundedCorners(4);
@include font(null, 12px, null);
&::placeholder {
color: $gray-400;
}
+ background-color: $white;
}
.header-style {
@include font(null, 1.2rem, 700);
.cursor-pointer {
cursor: pointer;
}
- .mr-top-5 {
+ .me-top-5 {
@include margin-value-percentage(5px, auto, auto, auto);
}
.padLeft0 {
}
.close {
opacity: 1 !important;
+ background-color: transparent;
+ border: 0;
+ position: absolute;
+ right: 10px;
+ font-size: 1.3125rem;
}
.closeVersion {
text-shadow: none;
}
.roles-section {
.card {
+ .card-body {
+ background-color: #fff;
+ }
.bg-secondary {
+ padding: 11px;
@include background(null, $gray-400 !important, null, null, null);
}
}
}
.juju-section {
+ .col-form-label {
+ position: relative;
+ bottom: 3px;
+ }
.card {
@include roundedCorners(4);
margin-bottom: 0.25rem;
color: $white;
}
}
+ .card-header {
+ padding: 0.75rem 1.25rem;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
.card-body {
+ border-radius: 2px;
.seconds-btn-group .active {
color: $white;
@include background(null, $primary !important, null, null, null);
@include padding-value(5, 5, 5, 5);
border-top: 0;
table {
+ th,
+ td {
+ color: $body-color;
+ }
thead th {
font-size: 12px;
+ color: $body-color;
}
tbody th i.active-icon {
font-size: 10px;
}
}
}
+ background-color: #fff;
}
}
.card {
@include roundedCorners(3);
.custom-card-body {
@include padding-value(15, 15, 15, 15);
+ background-color: #fff;
}
}
table-cell-default-editor select-editor select {
@include roundedCorners(3);
}
/** Model Popup-Design **/
+ .modal-header {
+ .close {
+ top: 10px;
+ }
+ }
+ .modal-content {
+ background-color: #fff;
+ }
.modal-body-custom-height {
+ background-color: #fff !important;
+ color: $body-color;
max-height: 65vh;
overflow-y: auto;
}
}
/** Popover Header **/
.popover-header {
+ margin-top: 7px;
color: $primary;
@include background(null, $theme-bg-color, null, null, null);
}
/** Vim Show running instance Details **/
.runninginstances {
width: 200px;
+ margin-top: 10px;
.popover-body {
max-height: 200px;
overflow-y: scroll;
+ background-color: $white !important;
}
}
.resources-chart-popover {
+ margin-top: 4px;
max-width: 60% !important;
width: 600px !important;
@include font-family("Roboto");
.popover-body {
max-height: 60vh;
overflow-y: scroll;
+ background-color: #fff !important;
}
}
/****************************************************************************/
/************************** Smart table custom design ***********************/
/****************************************************************************/
ng2-smart-table {
+ background-color: #fff;
+ background-color: none;
@include font(null, 15px, null);
color: $gray-700;
.form-control {
}
}
.ng2-smart-filter {
+ background-color: #fff;
@include wh-value(null, calc(2rem + 2px) !important);
@include font(null, 12px, null);
margin-top: 6px;
}
+ input {
+ background-color: #fff !important;
+ }
table.list-data {
tr td,
tr th {
@include padding-value(2, 10, 2, 10);
vertical-align: middle !important;
+ background-color: #fff;
+ color: grey;
+ }
+ input[type="checkbox"] {
+ padding: 6px 6px;
+ border-color: rgba(0, 0, 0, 0.5);
+ &:checked {
+ background-color: $blue !important;
+ border: black;
+ }
}
tbody {
tr.selected {
default-table-filter {
select-filter {
select.form-control {
+ background-color: #fff !important;
@include flexbox(inline-block, null, null, null, null, null);
@include wh-value(null, calc(1.5rem + 2px) !important);
vertical-align: middle;
}
input-filter {
input[type="text"] {
+ background-color: #fff;
@include position_value(relative, null, null, null, null);
}
&:after {
+ color: #afb5c1;
@include position_value(relative, -26px, null, null, 100%);
content: "\f002";
@include font("Font Awesome 5 Free", 10px, null);
}
}
.ng2-smart-page-link {
+ background-color: #fff;
+ box-shadow: none;
@include font(null, 12px !important, null);
&.page-link {
text-align: center;
/*********************** List Action Dropdown section ***********************/
/****************************************************************************/
.list-action-dropdown {
+ background-color: #fff;
@include border(all, 1, solid, $primary);
@include padding-value(0, 0, 0, 0);
+ margin-top: 3px;
button.btn.btn-primary {
@include background(null, transparent, null, null, null);
@include padding-value(8, 8, 8, 8);
@include roundedCorners(0);
+ background-color: #fff;
color: $primary;
&:hover {
@include background(null, $primary, null, null, null);
/*********************** Custom tabel design in topology ********************/
/****************************************************************************/
.custom-table {
+ border: 1px solid rgba(0, 0, 0, 0.1);
td:first-child {
@include font(null, null, bold);
text-align: right;
}
th,
td {
+ border: 1px solid rgba(0, 0, 0, 0.1);
@include padding-value(5, 7, 5, 7);
@include font(null, 10px, null);
@include line-height(15px);
}
}
}
+ .ng-dropdown-panel .scroll-host {
+ overflow-x: auto;
+ }
+ .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+ text-overflow: unset;
+ overflow: unset;
+ }
/****************************************************************************/
/******************** Custom nav section for default status *****************/
/****************************************************************************/
.list-utilites-actions {
+ margin-left: 10px;
@include flexbox(flex, null, row, null, center, null);
nav.custom-items-config {
@include position_value(relative, null, null, null, null);
/****************************************************************************/
/************************* File upload custom design ************************/
/****************************************************************************/
+ .fileupload {
+ border: 1px solid;
+ border: 1px solid;
+ border-color: #054c8c;
+ border-radius: 4px;
+ }
+ input[type="file"] {
+ width: 100%;
+ }
+ input[type="file"]::file-selector-button {
+ border: none;
+ background: #054c8c;
+ padding: 7px 10px;
+ border-radius: 2px;
+ color: #fff;
+ }
.custom-file-label {
color: $primary;
@include roundedCorners(4);
@include flexbox(flex, null, null, null, center, null);
border: none;
.span-overflow-text {
+ color: $black;
@include wh-value(90%, null);
white-space: nowrap;
overflow: hidden;
fieldset {
@include border(all, 1, solid, $primary);
legend {
+ float: none;
@include padding-value(0, 5, 0, 5);
@include font(null, 15px, null);
color: $primary;
@include wh-value(25%, null);
}
}
+ .font-weight-bold {
+ font-weight: 700 !important;
+ }
}
.btn-icon {
@include wh-value(36px, 36px);
}
}
+.custom-select {
+ background-color: #fff !important;
+ padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+ @include background(
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 10 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
+ var(--input-bg-color),
+ null,
+ no-repeat,
+ 0px 10px
+ );
+}
/****************************************************************************/
/************************** HEALING STYLE ***********************************/
/****************************************************************************/
.form-group {
margin-bottom: 1px;
+ .row {
+ margin-bottom: 16px;
+ }
}
.col-sm-1 {
left: 79px;
}
}
+
+.table thead th {
+ vertical-align: bottom;
+ border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+.table th,
+.table td {
+ background-color: #fff;
+ padding: 5px;
+ vertical-align: top;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ border-bottom: transparent;
+}
+.table b {
+ background: none;
+ color: $body-color;
+ padding-right: 0px;
+ padding-left: 0px;
+}