mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -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
381 lines
15 KiB
SCSS
381 lines
15 KiB
SCSS
/** Dividing a pixel var with 1px or rem var with 1rem removes the unit px/rem **/
|
|
$enable-flex: true;
|
|
|
|
$white: #fff;
|
|
$black: #000;
|
|
|
|
$span-text-color: #6B6B6B !default;
|
|
$span-text-color-hover: #6B6B6B !default;
|
|
|
|
$color-bg: $white !default;
|
|
$color-fg: #222222 !default;
|
|
|
|
$color-primary: #326690 !default;
|
|
$color-primary-fg: $white !default;
|
|
$color-primary-light: #d6effc !default;
|
|
$color-primary-light-fg: $color-primary !default;
|
|
|
|
$color-secondary: $white !default;
|
|
|
|
$color-ternary: #5b6d7c !default;
|
|
$color-ternary-fg: $white !default;
|
|
|
|
$color-danger: #CC0000 !default;
|
|
$color-danger-icon-fg: $color-danger !default;
|
|
$color-danger-fg: $white !default;
|
|
$color-danger-light: #F39999 !default;
|
|
$color-danger-lighter: #FAECEC !default;
|
|
|
|
$color-success: #26852B !default;
|
|
$color-success-fg: $black !default;
|
|
$color-success-light: #D9ECDA !default;
|
|
|
|
$color-success-disabled-fg: $color-bg !default;
|
|
$color-success-disabled-bg: $color-success !default;
|
|
$color-success-disabled-border-color: $color-success !default;
|
|
$color-success-hover-fg: $white !default;
|
|
|
|
$color-warning: #eea236 !default;
|
|
$color-warning-fg: $black !default;
|
|
$color-warning-light: #fce5c5 !default;
|
|
|
|
$color-gray-dark: #848ea0 !default;
|
|
$color-gray: #bac1cd !default;
|
|
$color-gray-light: #ebeef3 !default;
|
|
$color-gray-lighter: #f3f5f9 !default;
|
|
|
|
$color-brand: $color-primary !default;
|
|
|
|
|
|
/* Typography */
|
|
$font-family-primary: "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
$font-family-semibold: "Roboto Medium";
|
|
$font-family-editor: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
$font-family-icon: "Font Awesome 5 Free";
|
|
|
|
$border-width: 1px;
|
|
$border-color: #dde0e6 !default;
|
|
$border-color-dark: $color-gray;
|
|
|
|
$shadow-base-color: $color-gray-dark !default;
|
|
|
|
$font-family-monospace: $font-family-editor;
|
|
$font-family-base: $font-family-primary;
|
|
$body-color: $color-fg;
|
|
$font-size-base: 0.875rem;
|
|
$line-height-base: 1.5;
|
|
$text-height-calc: $line-height-base*$font-size-base/1rem;
|
|
$grid-gutter-width: 15px;
|
|
$border-radius: 0.25rem;
|
|
|
|
$text-muted: #646B82 !default;
|
|
$header-bg: $color-bg !default;
|
|
$badge-header-bg: $header-bg !default;
|
|
|
|
$tree-font-size: 0.815rem;
|
|
|
|
$alert-primary-bg: $color-primary-light !default;
|
|
$alert-primary-color: $color-primary !default;
|
|
$alert-danger-bg: $color-danger-lighter !default;
|
|
$alert-danger-color: $color-danger !default;
|
|
$alert-success-bg: $color-success-light !default;
|
|
$alert-success-color: $color-success !default;
|
|
$alert-warning-bg: $color-warning !default;
|
|
$alert-warning-color: $color-bg !default;
|
|
|
|
$navbar-bg: $color-primary !default;
|
|
$navbar-font-size: 0.925rem;
|
|
$navbar-height: 32px;
|
|
$navbar-dropdown-top: 100%;
|
|
$navbar-dark-color: $color-primary-fg !default;
|
|
$navbar-dark-hover-color: $color-primary-fg;
|
|
$navbar-dark-active-color: $color-primary-fg !default;
|
|
$navbar-dark-disabled-color: $color-gray !default;
|
|
|
|
$navbar-toggler-padding-y: 0.25rem; //no-change
|
|
|
|
$form-group-margin-bottom: 0.5rem;
|
|
$btn-active-box-shadow: none;
|
|
|
|
$negative-bg: $color-gray-light !default;
|
|
|
|
$dropdown-bg: $color-bg;
|
|
$dropdown-color: $color-fg;
|
|
$dropdown-link-color: $color-fg;
|
|
$dropdown-link-hover-color: $color-primary-fg;
|
|
$dropdown-link-hover-bg: $color-primary;
|
|
$dropdown-link-remove-color: $color-primary !default;
|
|
$dropdown-border-color: $border-color;
|
|
$dropdown-box-shadow: 0 0.125rem 0.5rem rgba($shadow-base-color, .275);
|
|
$dropdown-divider-bg: $dropdown-border-color;
|
|
$dropdown-padding-y: 0.25rem;
|
|
$dropdown-item-padding-x: 1rem;
|
|
$dropdown-spacer: .125rem; //no-change
|
|
$dropdown-link-disabled-color: $text-muted;
|
|
$nav-divider-margin-y: .25rem;
|
|
|
|
$popover-bg: $color-fg !default;
|
|
$popover-body-color: $color-bg !default;
|
|
$popover-border-color: $dropdown-border-color;
|
|
$popover-box-shadow: $dropdown-box-shadow;
|
|
|
|
$input-btn-focus-width: 0.1rem;
|
|
$btn-disabled-opacity: 0.65;
|
|
$btn-transition: color .05s ease-in-out, background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
|
|
|
|
$card-spacer-y: 0rem;
|
|
$card-spacer-x: 0rem;
|
|
$card-border-radius: $border-radius;
|
|
$card-border-color: $border-color !default;
|
|
$card-cap-bg: $header-bg !default;
|
|
$card-bg: $color-bg !default;
|
|
|
|
$navbar-padding-y: 0rem;
|
|
$navbar-padding-x: 0rem;
|
|
$navbar-brand-padding-y: 0rem;
|
|
$navbar-toggler-padding-y: 0rem;
|
|
$navbar-toggler-padding-x: 0rem;
|
|
$navbar-toggler-font-size: $font-size-base;
|
|
$navbar-dark-toggler-border-color: tranparent;
|
|
|
|
$nav-tabs-border-color: $border-color;
|
|
$nav-tabs-border-width: 1px;
|
|
$nav-tabs-border-radius: 0px;
|
|
$nav-tabs-link-hover-border-color: none;
|
|
$nav-tabs-link-active-color: $color-primary;
|
|
$nav-tabs-link-active-bg: none;
|
|
$nav-tabs-link-active-border-color: none;
|
|
|
|
$table-cell-padding: 0.25rem;
|
|
$table-header-cell-padding: 0.75rem;
|
|
$table-hover-bg: none !default; //we will use our own classes
|
|
$table-hover-color: #000 !default;
|
|
$table-active-bg: $color-primary-light !default;
|
|
$table-border-width: $border-width;
|
|
$table-border-color: $border-color;
|
|
$table-head-bg: $color-primary;
|
|
$table-head-color: $color-primary-fg;
|
|
|
|
$input-bg: $white !default;
|
|
$input-color: $color-fg !default;
|
|
$input-placeholder-color: $text-muted;
|
|
$input-border-color: $border-color !default;
|
|
$input-border-radius: $border-radius;
|
|
$input-disabled-bg: $color-gray-lighter !default;
|
|
$input-btn-border-width: $border-width;
|
|
$input-border-width: $input-btn-border-width;
|
|
$input-btn-padding-y: .25rem;
|
|
$input-btn-padding-x: .75rem;
|
|
|
|
$btn-primary-color: $color-primary-fg;
|
|
$btn-success-color: $color-success-fg;
|
|
$btn-warning-color: $color-warning-fg;
|
|
$btn-danger-color: $color-danger-fg;
|
|
|
|
$component-active-bg: $color-primary;
|
|
$input-btn-focus-width: .2rem;
|
|
$input-btn-focus-color: rgba($component-active-bg, .25);
|
|
$input-btn-focus-shadow-color: $input-btn-focus-color !default;
|
|
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-shadow-color;
|
|
$input-focus-bg: $input-bg;
|
|
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
|
|
$input-focus-color: $input-color;
|
|
$input-focus-width: $input-btn-focus-width;
|
|
$input-focus-box-shadow: $input-btn-focus-box-shadow;
|
|
|
|
$btn-border-radius: $border-radius;
|
|
|
|
$color-editor-fg: $input-color !default;
|
|
$color-editor-bg: $input-bg;
|
|
$color-editor-keyword: #908 !default;
|
|
$color-editor-number: #964 !default;
|
|
$color-editor-string: #a11 !default;
|
|
$color-editor-variable: $color-fg !default;
|
|
$color-editor-variable-2: #05a !default;
|
|
$color-editor-builtin: #30a !default;
|
|
$color-editor-comment: #a50 !default;
|
|
$color-editor-bracket: #737373 !default;
|
|
$color-editor-operator: $color-fg !default;
|
|
$color-editor-foldmarker: #0000FF !default;
|
|
$color-editor-activeline: #50B0F0 !default;
|
|
|
|
$active-color: $color-primary !default;
|
|
$active-border: 3px solid $active-color !default;
|
|
$panel-border-width: $border-width;
|
|
$panel-border-color: $border-color !default;
|
|
$panel-border-radius: $border-radius;
|
|
$panel-border: $panel-border-width solid $panel-border-color !important;
|
|
$panel-border-dark: $panel-border-width solid $border-color-dark !important;
|
|
$panel-color-fg: $color-fg !default;
|
|
$tabs-padding: 5px 10px 2px;
|
|
$title-height: ($line-height-base*16px) + 5px + 2px + $border-width;
|
|
$footer-padding: 0.5rem;
|
|
$footer-min-height: 2rem;
|
|
$footer-height-calc: $footer-min-height+$footer-padding*2;
|
|
|
|
// ($splitter-hover-width - $panel-border-width) should be even number to split evenly.
|
|
$splitter-hover-width: 7px;
|
|
|
|
$dropdown-submenu-top: -$dropdown-spacer;
|
|
|
|
$table-bg: $color-bg !default;
|
|
$table-bg-selected: $color-primary-light;
|
|
$table-hover-border-color: $color-primary;
|
|
$table-hover-border: $panel-border-width solid $color-primary !important;
|
|
$table-hover-bg-color: $color-primary-light !default;
|
|
$datagrid-bg: $color-gray-light !default;
|
|
$datagrid-selected-color: $color-fg !default;
|
|
|
|
$tree-text-fg: $color-fg !default;
|
|
$tree-text-hover-fg: $color-fg !default;
|
|
$tree-fg-hover: $color-fg !default;
|
|
$tree-bg-hover: $color-gray-light !default;
|
|
$tree-fg-selected: $color-fg !default;
|
|
$tree-bg-selected: $color-primary-light !default;
|
|
|
|
$sql-grid-data-cell-fg: $input-color;
|
|
$sql-grid-data-cell-bg: $input-bg;
|
|
$sql-grid-title-cell-fg: $input-color;
|
|
$sql-grid-title-cell-bg: $input-bg;
|
|
|
|
$sql-title-padding: 3px;
|
|
$sql-title-bg: $color-ternary !default;
|
|
$sql-title-fg: $color-ternary-fg !default;
|
|
// Toolbar + editor title heights + title bottom border
|
|
$sql-editor-panel-top: $title-height + $text-height-calc*16px + $sql-title-padding*2 + $panel-border-width - 0.5px;
|
|
$sql-editor-disable-bg: $color-gray-lighter !default;
|
|
$sql-editor-selection-bg: $color-primary-light !default;
|
|
$sql-gutters-bg: $datagrid-bg !default;
|
|
$sql-history-detail-bg: $color-gray-lighter !default;
|
|
$sql-history-success-bg: $color-primary-light;
|
|
$sql-history-success-fg: $active-color !default;
|
|
$sql-history-error-bg: $color-danger-lighter;
|
|
$sql-history-error-fg: $color-danger;
|
|
$sql-hint-bg: $color-bg;
|
|
$sql-hint-active-bg: $color-primary;
|
|
$sql-hint-active-fg: $white !default;
|
|
$sql-bracket-match-fg: #5b6d7c;
|
|
$sql-bracket-match-bg: #f5d2af;
|
|
|
|
/* For explain analysis */
|
|
$explain-sev-2-bg: #FFEE88 !default;
|
|
$explain-sev-3-bg: #EE8800 !default;
|
|
$explain-sev-4-bg: #880000 !default;
|
|
$explain-sev-2-color: #222222 !default;
|
|
$explain-sev-3-color: #FFFFFF !default;
|
|
$explain-sev-4-color: #FFFFFF !default;
|
|
|
|
$dialog-box-shadow: 0 0.5rem 3rem $shadow-base-color;
|
|
|
|
$alert-icon-color: $white;
|
|
$alert-header-bg: $color-primary !default;
|
|
$alert-header-fg: $white !default;
|
|
$alert-action-bg: $color-secondary !default;
|
|
$alert-action-hover-bg: $color-gray-light !default;
|
|
$alertify-borderremove-margin: $panel-border-width;
|
|
$alert-color-fg: $color-fg !default;
|
|
$alert-dialog-body-bg: $color-bg !default;
|
|
|
|
$btn-primary-hover-bg: darken($color-primary, 7.5%) !default;
|
|
$btn-primary-border-hover-bg: darken($color-primary, 7.5%) !default;
|
|
$btn-primary-disabled-bg: $color-primary !default;
|
|
|
|
$btn-secondary-bg: $color-secondary !default;
|
|
$btn-secondary-border-hover-bg: $color-gray !default;
|
|
$btn-secondary-fg: $color-fg !default;
|
|
$btn-secondary-hover-fg: $color-fg !default;
|
|
$btn-secondary-border: $color-gray !default;
|
|
$btn-secondary-hover-bg: $color-gray-light !default;
|
|
$btn-secondary-disabled-border-color: $color-gray !default;
|
|
$btn-secondary-disabled-fg: $color-fg !default;
|
|
|
|
$btn-frame-close-bg:$btn-secondary-hover-bg !default;
|
|
|
|
$btn-ternary-border: $color-ternary !default;
|
|
$btn-ternary-hover-bg: darken($color-ternary, 7.5%) !default;
|
|
|
|
$btn-ternary-disabled-bg: $color-ternary !default;
|
|
$btn-ternary-disabled-fg: $color-bg !default;
|
|
$btn-ternary-disabled-border-color: $btn-ternary-disabled-bg !default;
|
|
|
|
$card-header-padding : 0.25rem 0.5rem;
|
|
$card-header-bg: $color-bg !default;
|
|
$card-header-fg: $color-fg !default;
|
|
$card-header-border-color: $border-color !default;
|
|
$no-border-radius: 0px !important;
|
|
|
|
$btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;
|
|
|
|
$scrollbar-base-color: #bac1cd !default;
|
|
$scrollbar-width: 1rem;
|
|
|
|
$security-text-color: $white;
|
|
$security-btn-color: #038bba;
|
|
|
|
$loading-bg : rgba($black,0.6);
|
|
$loading-fg : $white;
|
|
|
|
$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
|
|
|
|
$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;
|
|
|
|
/***************/
|
|
|
|
$schemadiff-diff-row-color: #fff9c4 !default;
|
|
$schemadiff-source-row-color: #ffebee !default;
|
|
$schemadiff-target-row-color: #fbe3bf !default;
|
|
$schema-diff-color-fg: $input-color !default;
|
|
|
|
/* Custom controls bootstrap changes */
|
|
$custom-forms-transition: none, none, none;
|
|
$custom-control-indicator-focus-border-color: $input-focus-border-color !default;
|
|
$custom-control-indicator-border-color: $input-border-color !default;
|
|
|
|
$select2-container-hover-bg: $tree-bg-hover !default;
|
|
$select2-container-hover-fg: $tree-fg-hover !default;
|
|
$select2-container-bg-selected: $tree-bg-selected !default;
|
|
$select2-container-fg-selected: $tree-fg-selected !default;
|
|
$select2-placeholder: #575757 !default;
|
|
|
|
$btn-primary-icon-bg: $color-bg !default;
|
|
$btn-primary-icon-fg: $color-fg !default;
|
|
$btn-primary-icon-hover-fg: $color-fg !default;
|
|
$btn-primary-icon-hover-bg: $color-gray-light !default;
|
|
$btn-primary-icon-border-color: $color-gray !default;
|
|
$btn-primary-icon-border-disable-bg: $color-gray !default;
|
|
$btn-primary-icon-disable-fg: $color-fg !default;
|
|
$btn-primary-icon-disable-bg: $color-bg !default;
|
|
|
|
$editor-toolbar-bg: $sql-gutters-bg !default;
|
|
$grid-hover-bg-color: $table-hover-bg-color !default;
|
|
$grid-hover-fg-color: $color-fg !default;
|
|
|
|
$btn-copied-color-fg: $active-color !default;
|
|
|
|
$quick-search-a-text-color: $black !default;
|
|
$quick-search-span-text: $span-text-color !default;
|
|
$quick-search-span-text-hover: $span-text-color-hover !default;
|
|
$quick-search-info-icon: #646C82 !default;
|
|
/** ERD **/
|
|
$erd-row-padding: 0.25rem;
|
|
$erd-node-border-color: $border-color !default;
|
|
$erd-canvas-bg: $color-bg !default;
|
|
$erd-canvas-grid: $color-gray !default;
|
|
$erd-link-color: $color-fg !default;
|
|
$erd-link-selected-color: $color-fg !default;
|
|
|
|
|
|
@function url-friendly-colour($colour) {
|
|
@return '%23' + str-slice('#{$colour}', 2, -1)
|
|
}
|
|
$erd-bg-grid: url("data:image/svg+xml, %3Csvg width='100%25' viewBox='0 0 45 45' style='background-color:#{url-friendly-colour($erd-canvas-bg)}' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='smallGrid' width='15' height='15' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 15 0 L 0 0 0 15' fill='none' stroke='#{url-friendly-colour($erd-canvas-grid)}' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='grid' width='45' height='45' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='url(%23smallGrid)'/%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='#{url-friendly-colour($erd-canvas-grid)}' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)' /%3E%3C/svg%3E%0A");
|
|
|
|
$select2-readonly: $color-gray-lighter !default;
|
|
|
|
// psql tool variables
|
|
$psql-background: $color-bg !default;
|
|
$psql-foreground: $color-fg !default;
|
|
$psql-cursor: $color-fg !default;
|
|
$psql-cursorAccent: $color-fg !default;
|
|
$psql-selection: #326690 !default;
|