Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
*/
/** Styles for the application **/
+@use "sass:math";
+
@import "../../assets/scss/mixins/mixin";
@import "../../assets/scss/variable";
-$customnavbar-padding-x: ($spacer / 0.5) !default;
+$customnavbar-padding-x: math.div($spacer, 0.5) !default;
* {
outline: 0;
}
.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,
.layout-wrapper,
.CodeMirror-vscrollbar,
.ng-sidebar,
-.runninginstances .popover-body {
+.runninginstances .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 {
text-decoration: none;
}
+ &:not([href]),
+ &:not([href]):hover {
+ color: inherit;
+ }
}
.badge {
@include line-height(normal);
}
&: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;
}
- }
- .modal-dialog {
- max-width: 600px;
+ 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 {
padding-right: 0px;
}
.mandatory-label {
- @include font(null, 10px, null);
+ @include font(null, 11px, null);
}
.dropzone {
min-height: 50px;
}
.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;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ .bg-secondary {
+ @include background(null, $primary !important, null, null, null);
+ b,
+ span {
+ 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 border(all, 2, dashed, $primary);
+ @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 {
margin-bottom: 1rem;
}
@include roundedCorners(3);
.custom-card-body {
@include padding-value(15, 15, 15, 15);
+ background-color: #fff;
}
}
table-cell-default-editor select-editor select {
@include wh-value(null, calc(2rem + 8px) !important);
@include padding-value(0, 10, 0, 10);
}
- .CodeMirror {
+ .edit-packages .CodeMirror {
min-height: 400px !important;
}
+ .new-vim .CodeMirror {
+ @include border(all, 1, solid, #eee !important);
+ }
.table-layout-fixed {
table-layout: fixed;
word-wrap: break-word;
@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);
}
}
}
+ /** Switch Design **/
+ .switch {
+ @include position_value(relative, null, null, null, null);
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include wh-value(50px, 15px);
+ @include margin-value(0, 0, 0, 0);
+ input {
+ opacity: 0;
+ @include wh-value(0px, 0px);
+ &:checked + .slider {
+ @include background(null, $gray-400, null, null, null);
+ &:before {
+ @include background(null, $pure-red, null, null, null);
+ left: 5px;
+ animation: pulse 2s infinite;
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+ .on {
+ @include flexbox(block, null, null, null, null, null);
+ }
+ .off {
+ @include flexbox(none, null, null, null, null, null);
+ }
+ }
+ }
+ .slider {
+ @include position_value(absolute, 0, 0, 0, 0);
+ cursor: pointer;
+ @include background(null, $gray-400, null, null, null);
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 0 1px $gray-400;
+ &.round {
+ @include roundedCorners(30);
+ &:before {
+ @include roundedCornersPercentage(50%);
+ }
+ }
+ &:before {
+ @include position_value(absolute, null, null, -2px, 0px);
+ @include wh-value(20px, 20px);
+ @include background(null, $white, null, null, null);
+ content: "";
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+ }
+ .on {
+ @include flexbox(none, null, null, null, null, null);
+ @include position_value(absolute, 50%, null, null, 35% !important);
+ }
+ .on,
+ .off {
+ @include position_value(absolute, 50%, null, null, 65%);
+ color: $primary;
+ transform: translate(-50%, -50%);
+ @include font(null, 11px, bold);
+ }
+ }
+ @-webkit-keyframes pulse {
+ 0% {
+ -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ }
+ 70% {
+ -webkit-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ }
+ }
+ @keyframes pulse {
+ 0% {
+ -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ }
+ 70% {
+ -moz-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ }
+ }
+ }
}
/****************************************************************************/
/************************** MEDIA QUERIES ***********************************/
overflow-x: auto;
white-space: nowrap;
}
-}
\ No newline at end of file
+}
+
+.text-captilize {
+ text-transform: capitalize;
+}
+.text-info {
+ color: $secondary !important;
+}
+.hide {
+ @include flexbox(none, null, null, null, null, null);
+}
+.title-bar {
+ .name-width {
+ @include wh-value(20%, null);
+ }
+ .id-width {
+ @include wh-value(25%, null);
+ }
+}
+.filter-actions {
+ button {
+ @include roundedCorners(10);
+ @include padding-percentage-value(0.2rem, 1rem, 0.2rem, 1rem);
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ border: none;
+ }
+}
+
+.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 ***********************************/
+/****************************************************************************/
+
+app-healing {
+ .card {
+ border-radius: 15px;
+ width: auto;
+ height: auto;
+ margin-bottom: 5px;
+ }
+
+ .card-body {
+ flex: 1 1 auto;
+ min-height: 1px;
+ padding: 5px;
+ }
+
+ .form-group {
+ margin-bottom: 1px;
+ .row {
+ margin-bottom: 16px;
+ }
+ }
+
+ .col-sm-1 {
+ bottom: 20px;
+ }
+
+ .col-5 {
+ 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;
+}