mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-01-27 00:36:52 -06:00
ff06a18155
2) Ensure that the primary key should be visible properly in the table dialog. Fixes #6316
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-bg !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);
|
|
}
|