mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
5799ac14ba
Changed the SCSS/CSS for the below third party libraries to adopt the new look 'n' feel: - wcDocker - Alertify dialogs, and notifications - AciTree - Bootstrap Navbar - Bootstrap Tabs - Bootstrap Drop-Down menu - Backgrid - Select2 Adopated the new the look 'n' feel for the dialogs, wizard, properties, tab panels, tabs, fieldset, subnode control, spinner control, HTML table, and other form controls. - Font is changed to Roboto - Using SCSS variables to define the look 'n' feel - Designer background images for the Login, and Forget password pages in 'web' mode - Improved the look 'n' feel for the key selection in the preferences dialog - Table classes consistency changes across the application - File Open and Save dialog list view changes Author(s): Aditya Toshniwal & Khushboo Vashi
57 lines
1.6 KiB
SCSS
57 lines
1.6 KiB
SCSS
/* The Bootstrap default grid layout is based on @media - window size
|
|
* But in pgadmin4, we need to resize/make responsive elements based on panel size
|
|
* which can be changed by wcDocker. Below code will generate pg-el-* classes
|
|
* using the bootstrap grid classes generator. Based on el attribute of pg-el-container div,
|
|
* the classes will apply.el attribute is set in /pgadmin4/web/pgadmin/browser/static/js/panel.js
|
|
*
|
|
* Code reused and customized from : bootstrap/scss/mixins/_grid-framework.scss
|
|
*/
|
|
|
|
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
|
// Common properties for all breakpoints
|
|
%grid-column {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-right: ($gutter / 2);
|
|
padding-left: ($gutter / 2);
|
|
}
|
|
|
|
@each $breakpoint in map-keys($breakpoints) {
|
|
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
|
|
// Allow columns to stretch full width below their breakpoints
|
|
@for $i from 1 through $columns {
|
|
.pg-el#{$infix}-#{$i} {
|
|
@extend %grid-column;
|
|
}
|
|
}
|
|
|
|
.pg-el-container[el=xs]
|
|
.pg-el#{$infix},
|
|
.pg-el-container[el=xs]
|
|
.pg-el#{$infix}-auto {
|
|
@extend %grid-column;
|
|
}
|
|
|
|
|
|
// Provide basic `.pg-el-{bp}` classes for equal-width flexbox columns
|
|
.pg-el-container[el=xs]
|
|
.pg-el#{$infix} {
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@for $i from 1 through $columns {
|
|
.pg-el-container[el=lg],
|
|
.pg-el-container[el=md],
|
|
.pg-el-container[el=sm]
|
|
.pg-el#{$infix}-#{$i} {
|
|
@include make-col($i, $columns);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include make-grid-columns();
|