mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-01-26 08:16:44 -06:00
764677431f
Following changes done for the framework: - Framework for creating React based dynamic form view out of a pre-defined UI schema. Previously, it was based on Backform/Backbone. - The new framework and components will use MaterialUI as the base. Previously, Bootstrap/Backform/jQuery components were used. - The new code uses JSS instead of CSS since material UI and most modern React libraries also use JSS. In the future, this will allow us to change the theme in real-time without refresh. - 90% code covered by 80-85 new jasmine test cases. - Server group node UI Schema migration to new, with schema test cases. - Server node UI Schema migration to new, with schema test cases. - Database node UI Schema migration to new, with schema test cases. - Few other UI changes. Fixes #6130
452 lines
9.1 KiB
SCSS
452 lines
9.1 KiB
SCSS
/* Ensure simple forms don't hit the top of the screen */
|
|
body {
|
|
font-family: $font-family-primary;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.app-icon {
|
|
font-size: 25px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Use the full width of the screen */
|
|
.container {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* iFrames should have no border */
|
|
iframe {
|
|
border-width: 0;
|
|
}
|
|
|
|
legend {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
/* Padding for the treeview */
|
|
.browser-browser-pane {
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Disabled menu items */
|
|
.mnu-disabled {
|
|
color: $color-gray !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
box-shadow: $dropdown-box-shadow;
|
|
}
|
|
|
|
.dropdown-toggle::after {
|
|
font-family: $font-family-icon;
|
|
content: "\f078";
|
|
font-size: 0.6rem;
|
|
vertical-align: 2px;
|
|
margin-left: 0rem;
|
|
border: none;
|
|
width: auto;
|
|
font-weight: 900;
|
|
}
|
|
|
|
/*
|
|
* Bootstrap 3 remove submenus as they don't work overly well on Mobile. The
|
|
* following CSS adds them back in - for our purposes they actually work fine
|
|
* on Mobile and are perfectly responsive
|
|
*/
|
|
.dropdown-submenu {
|
|
position: relative;
|
|
}
|
|
.dropdown-submenu>.dropdown-menu {
|
|
-moz-border-radius: $dropdown-border-radius;
|
|
-webkit-border-radius:$dropdown-border-radius;
|
|
border-radius: $dropdown-border-radius;
|
|
left: 100%;
|
|
margin-left: -1px;
|
|
top: $dropdown-submenu-top;
|
|
}
|
|
.dropdown-submenu .dropdown-menu.show {
|
|
background-color: $dropdown-bg;
|
|
}
|
|
|
|
.dropdown-submenu>a:after {
|
|
font-family: $font-family-icon;
|
|
content: "\f054";
|
|
float: right;
|
|
margin-right: -10px;
|
|
font-size: 0.6rem;
|
|
line-height: 2;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.dropdown-submenu:hover>a:after {
|
|
border-left-color: $dropdown-link-hover-color;
|
|
}
|
|
.dropdown-submenu.pull-left {
|
|
float: none;
|
|
}
|
|
.dropdown-submenu.pull-left>.dropdown-menu {
|
|
-moz-border-radius: $dropdown-border-radius;
|
|
-webkit-border-radius: $dropdown-border-radius;
|
|
border-radius: $dropdown-border-radius;
|
|
left: -100%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.dropdown-submenu-visible>.dropdown-item {
|
|
background-color: $dropdown-link-hover-bg;
|
|
color: $dropdown-link-hover-color;
|
|
}
|
|
|
|
/** Overriding secondary button of bootstrap **/
|
|
/* Used Bootstrap 4 Mixin button-variant
|
|
* Refer file : bootstrap/scss/mixins/_buttons.scss
|
|
*/
|
|
.btn-secondary {
|
|
@include button-variant($btn-secondary-bg, $btn-secondary-border, $btn-secondary-hover-bg, $hover-border: $btn-secondary-border-hover-bg);
|
|
@include hover() {
|
|
color: $btn-secondary-hover-fg !important;
|
|
} &.disabled, &:disabled {
|
|
color: $btn-secondary-disabled-fg !important;
|
|
border-color: $btn-secondary-disabled-border-color !important;
|
|
}
|
|
color: $btn-secondary-fg !important;
|
|
|
|
}
|
|
|
|
/** Overriding ternary button of bootstrap **/
|
|
/* Used Bootstrap 4 Mixin button-variant
|
|
* Refer file : bootstrap/scss/mixins/_buttons.scss
|
|
*/
|
|
.btn-ternary {
|
|
@include button-variant($color-ternary, $color-fg);
|
|
border-color: $color-ternary;
|
|
|
|
|
|
}
|
|
|
|
.btn-ternary[disabled] {
|
|
background-color: $btn-ternary-disabled-bg;
|
|
color: $btn-ternary-disabled-fg !important;
|
|
border-color: $btn-ternary-disabled-border-color;
|
|
|
|
label {
|
|
background-color: $btn-ternary-disabled-bg;
|
|
color: $btn-ternary-disabled-fg !important;
|
|
border-color: $btn-ternary-disabled-border-color;
|
|
}
|
|
|
|
}
|
|
|
|
.btn-primary {
|
|
@include button-variant($color-primary, $color-primary, $hover-background: $btn-primary-hover-bg, $hover-border: $btn-primary-border-hover-bg);
|
|
& .disabled,
|
|
&:disabled {
|
|
background-color: $btn-primary-disabled-bg;
|
|
border-color: $btn-primary-disabled-bg;
|
|
}
|
|
}
|
|
|
|
.btn-primary-icon {
|
|
@include button-variant($btn-primary-icon-bg, $btn-primary-icon-border-color);
|
|
@include hover() {
|
|
background-color: $btn-primary-icon-hover-bg;
|
|
color: $btn-primary-icon-hover-fg;
|
|
} &.disabled, &:disabled {
|
|
color: $btn-primary-icon-disable-fg !important;
|
|
border-color: $btn-primary-icon-border-disable-bg !important;
|
|
background-color: $btn-primary-icon-disable-bg;
|
|
}
|
|
|
|
border-color: $btn-primary-icon-border-color;
|
|
}
|
|
|
|
.btn-success {
|
|
@include button-variant($color-success, $color-fg);
|
|
border-color: $color-success;
|
|
@include hover() {
|
|
color: $color-success-hover-fg !important;
|
|
border-color: $color-success !important;
|
|
}
|
|
}
|
|
|
|
.btn-success[disabled] {
|
|
background-color: $color-success-disabled-bg !important;
|
|
border-color: $color-success-disabled-border-color !important;
|
|
color: $color-success-disabled-fg !important;
|
|
|
|
label {
|
|
background-color: $color-success-disabled-bg !important;
|
|
border-color: $color-success-disabled-border-color !important;
|
|
color: $color-success-disabled-fg !important;
|
|
}
|
|
}
|
|
|
|
.btn-warning {
|
|
@include button-variant($color-warning, $color-warning-fg);
|
|
border-color: $color-warning;
|
|
@include hover() {
|
|
color: $color-warning-fg !important;
|
|
border-color: $color-warning !important;
|
|
}
|
|
}
|
|
|
|
|
|
.form-group fieldset {
|
|
background-color: $color-gray-lighter;
|
|
border-color: $color-gray-lighter;
|
|
border-width: 1px;
|
|
margin-bottom: 2px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
padding: 0px 0px 0px 5px;
|
|
}
|
|
.form-group legend {
|
|
font-size: 105%;
|
|
margin-bottom: 0px;
|
|
margin-left: 0;
|
|
padding: 0.1em 0.5em;
|
|
text-align: left;
|
|
width: 95%;
|
|
}
|
|
.form-group .fieldset-content {
|
|
width: 100%;
|
|
}
|
|
.form-group fieldset .caret {
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-top: 5px solid;
|
|
display: inline-block;
|
|
height: 0;
|
|
margin-left: 2px;
|
|
margin-top: -2px;
|
|
vertical-align: middle;
|
|
width: 0;
|
|
}
|
|
.form-group fieldset .collapsed .caret {
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 5px solid;
|
|
border-top: 5px solid transparent;
|
|
}
|
|
/* 25px is for showing error icon */
|
|
.control-label {
|
|
display: inline-block;
|
|
margin: 0px;
|
|
padding: 5px 25px 5px 5px !important;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.form-check {
|
|
padding-left: 0rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
|
color: $text-muted;
|
|
}
|
|
|
|
.card-header {
|
|
padding: $card-header-padding;
|
|
font-weight: bold;
|
|
background-color: $card-header-bg;
|
|
color: $card-header-fg;
|
|
border-color: $card-header-border-color;
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 0rem;
|
|
user-select: text;
|
|
table-layout: auto;
|
|
max-width: none;
|
|
width: auto;
|
|
min-width: 100%;
|
|
th {
|
|
padding: $table-header-cell-padding $table-cell-padding;
|
|
}
|
|
}
|
|
|
|
.table-bordered {
|
|
border: $panel-border;
|
|
|
|
& thead {
|
|
& th, & td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
& tr {
|
|
font-weight: bold !important;
|
|
// for first row, remove top border
|
|
&:first-of-type{
|
|
& td, & th {
|
|
border-top: none !important;
|
|
}
|
|
}
|
|
|
|
& th {
|
|
&:first-of-type {
|
|
border-left: none;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
& tbody {
|
|
& tr {
|
|
& th, & td {
|
|
border-top: $panel-border;
|
|
border-bottom: none;
|
|
}
|
|
|
|
& td {
|
|
&:first-of-type {
|
|
border-left: none;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table.table-hover {
|
|
& > tbody {
|
|
& > tr:not(.nohover):not(.empty):hover, tr.selected {
|
|
background-color: $table-hover-bg-color;
|
|
color: $grid-hover-fg-color;
|
|
& > td {
|
|
border-top: $table-hover-border;
|
|
border-bottom: $table-hover-border;
|
|
}
|
|
}
|
|
|
|
& > tr.nohover {
|
|
background-color: transparent;
|
|
color: $input-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.switch-cell {
|
|
height: 0px;
|
|
width: 0px;
|
|
}
|
|
|
|
/* Center align the switch in backgrid */
|
|
td.switch-cell > div.toggle {
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
.nav {
|
|
&.nav-tabs {
|
|
height: $title-height;
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
|
|
& .nav-link {
|
|
border: none !important;
|
|
padding: $tabs-padding;
|
|
color: $color-fg;
|
|
&.active {
|
|
border-bottom: $active-border !important;
|
|
color: $active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-nav .nav-item > .dropdown-menu {
|
|
top: $navbar-dropdown-top;
|
|
}
|
|
|
|
.bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th {
|
|
display: table-cell;
|
|
white-space: normal;
|
|
}
|
|
|
|
.navbar-brand {
|
|
margin-right: 0rem;
|
|
padding: 0rem;
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 1rem !important;
|
|
height: $navbar-height;
|
|
display: flex;
|
|
align-items: center !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-sm-sq {
|
|
@extend .btn-sm;
|
|
line-height: 0.7rem;
|
|
}
|
|
|
|
.btn-xs {
|
|
@extend .btn-sm;
|
|
padding: 0.125rem 0.25rem !important;
|
|
}
|
|
|
|
.btn-toolbar {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.bootstrap-datetimepicker-widget thead th {
|
|
background-color: $color-bg;
|
|
}
|
|
|
|
.input-group {
|
|
& .input-group-text {
|
|
background: $input-bg;
|
|
}
|
|
}
|
|
|
|
.btn.disabled, .btn:disabled, .btn[disabled] {
|
|
opacity: $btn-disabled-opacity;
|
|
}
|
|
|
|
.btn-group label.btn.btn-primary.active {
|
|
background-color: $color-primary-light;
|
|
color: $color-primary-light-fg;
|
|
}
|
|
|
|
.btn-group.pgadmin-controls-radio-none.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-group.pgadmin-controls-radio-none > label.btn.btn-primary.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Bootstrap custom controls */
|
|
.custom-control-input {
|
|
&:focus:checked ~ .custom-control-label::before {
|
|
border-color: $custom-control-indicator-focus-border-color;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $custom-control-indicator-focus-border-color;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.navbar-collapse {
|
|
max-height: 99vh;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
td.pga-ex-exclusive-2, td.pga-ex-inclusive-2 {
|
|
color: color-yiq($explain-sev-2-bg);
|
|
}
|
|
|
|
#datagrid .slick-header .slick-header-column.selected {
|
|
color: color-yiq($color-primary)
|
|
}
|
|
|
|
.editor-text {
|
|
color: color-yiq($color-bg);
|
|
}
|