pgadmin4/web/pgadmin/static/scss/_bootstrap.overrides.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);
}