chg: [helper:overlay] Better support of themes and added blur
parent
07a4ebfc92
commit
9d551973be
|
@ -21,6 +21,10 @@
|
|||
color:black;
|
||||
}
|
||||
|
||||
.loading-overlay-container {
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#wrapper {
|
||||
padding-left: 0;
|
||||
|
@ -100,9 +104,9 @@ input[type="checkbox"]:disabled.change-cursor {
|
|||
}
|
||||
|
||||
.grow-on-hover:hover {
|
||||
-webkit-transform: translateZ(0) scale(1.03, 1.03);
|
||||
-moz-transform: translateZ(0) scale(1.03, 1.03);
|
||||
transform: translateZ(0) scale(1.03, 1.03);
|
||||
-webkit-transform: translateZ(0) scale(1.02, 1.02);
|
||||
-moz-transform: translateZ(0) scale(1.02, 1.02);
|
||||
transform: translateZ(0) scale(1.02, 1.02);
|
||||
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -289,6 +289,10 @@
|
|||
border: 1px solid #454545;
|
||||
box-shadow: none; }
|
||||
|
||||
.loading-overlay {
|
||||
background-color: #222;
|
||||
opacity: 0.65; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #375a7f; }
|
||||
|
|
|
@ -289,6 +289,10 @@
|
|||
border: none;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
|
||||
|
||||
.loading-overlay {
|
||||
background-color: #f8f9fa;
|
||||
opacity: 0.75; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #212529; }
|
||||
|
|
|
@ -289,6 +289,10 @@
|
|||
border: none;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
|
||||
|
||||
.loading-overlay {
|
||||
background-color: #ecf0f1;
|
||||
opacity: 0.75; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #2c3e50; }
|
||||
|
|
|
@ -289,6 +289,10 @@
|
|||
border: none;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
|
||||
|
||||
.loading-overlay {
|
||||
background-color: #ecf0f1;
|
||||
opacity: 0.65; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #2c3e50; }
|
||||
|
|
|
@ -289,6 +289,10 @@
|
|||
border: none;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
|
||||
|
||||
.loading-overlay {
|
||||
background-color: #e9e9e8;
|
||||
opacity: 0.35; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #e83283; }
|
||||
|
|
|
@ -285,6 +285,10 @@
|
|||
border: 1px solid #454545;
|
||||
box-shadow: none; }
|
||||
|
||||
.loading-overlay {
|
||||
background-color: #272b30;
|
||||
opacity: 0.65; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #3a3f44; }
|
||||
|
|
|
@ -289,6 +289,10 @@
|
|||
border: 1px solid #454545;
|
||||
box-shadow: none; }
|
||||
|
||||
.loading-overlay {
|
||||
background-color: #170229;
|
||||
opacity: 0.65; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #6f42c1; }
|
||||
|
|
|
@ -859,7 +859,7 @@ class OverlayFactory {
|
|||
* @namespace
|
||||
* @property {string} text - A small text indicating the reason of the overlay
|
||||
* @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} variant - The variant of the overlay
|
||||
* @property {number} opacity - The opacity of the overlay
|
||||
* @property {number|string} opacity - The opacity of the overlay
|
||||
* @property {boolean} rounded - If the overlay should be rounded
|
||||
* @property {boolean} auto - Whether overlay and spinner options should be adapted automatically based on the node
|
||||
* @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} spinnerVariant - The variant of the spinner
|
||||
|
@ -868,8 +868,8 @@ class OverlayFactory {
|
|||
*/
|
||||
static defaultOptions = {
|
||||
text: '',
|
||||
variant: 'light',
|
||||
opacity: 0.85,
|
||||
variant: '',
|
||||
opacity: '',
|
||||
blur: '2px',
|
||||
rounded: false,
|
||||
auto: true,
|
||||
|
@ -881,7 +881,7 @@ class OverlayFactory {
|
|||
}
|
||||
|
||||
static overlayWrapper = '<div aria-busy="true" class="position-relative"/>'
|
||||
static overlayContainer = '<div class="position-absolute text-nowrap" style="inset: 0px; z-index: 1100;"/>'
|
||||
static overlayContainer = '<div class="position-absolute text-nowrap loading-overlay-container" style="inset: 0px; z-index: 1100;"/>'
|
||||
static overlayBg = '<div class="position-absolute loading-overlay" style="inset: 0px;"/>'
|
||||
static overlaySpinner = '<div class="position-absolute" style="top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"><span aria-hidden="true" class=""><!----></span></div></div>'
|
||||
static overlayText = '<span class="ml-1 align-text-top"></span>'
|
||||
|
@ -903,7 +903,9 @@ class OverlayFactory {
|
|||
this.$overlayContainer = $(OverlayFactory.overlayContainer)
|
||||
this.$overlayBg = $(OverlayFactory.overlayBg)
|
||||
.addClass([`bg-${this.options.variant}`, (this.options.rounded ? 'rounded' : '')])
|
||||
.css('opacity', this.options.opacity)
|
||||
if (this.options.opacity !== '') {
|
||||
this.$overlayBg.css('opacity', this.options.opacity)
|
||||
}
|
||||
this.$overlaySpinner = $(OverlayFactory.overlaySpinner)
|
||||
this.$overlaySpinner.children().addClass(`spinner-${this.options.spinnerType}`)
|
||||
if (this.options.spinnerSmall) {
|
||||
|
|
|
@ -8,6 +8,9 @@ $panelBgColor: #363636;
|
|||
$panelShadow: none;
|
||||
$panelBorder: 1px solid #454545;
|
||||
|
||||
$loadingOverlayDefaultColor: $gray-900 !default;
|
||||
$loadingOverlayDefaultOpacity: 0.65 !default;
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
// $headerBreadcrumbLinksBoxshadow: 0 1px 0 rgba(255, 255, 255, 0.07),
|
||||
|
|
|
@ -8,6 +8,9 @@ $panelBgColor: $white !default;
|
|||
$panelShadow: 0 0 35px 0 rgba(154, 161, 171, 0.25) !default;
|
||||
$panelBorder: none !default;
|
||||
|
||||
$loadingOverlayDefaultColor: $light !default;
|
||||
$loadingOverlayDefaultOpacity: 0.75 !default;
|
||||
|
||||
$topNavbarColor: $dark !default;
|
||||
$navbarActiveColor: #d6d6d6 !default;
|
||||
$headerBreadcrumbLinksBoxshadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
|
@ -36,6 +39,11 @@ $calloutShadow: $panelShadow !default;
|
|||
box-shadow: $panelShadow;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
background-color: $loadingOverlayDefaultColor;
|
||||
opacity: $loadingOverlayDefaultOpacity;
|
||||
}
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: $topNavbarColor;
|
||||
|
|
|
@ -7,6 +7,8 @@ $theme: "app-flatly";
|
|||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
|
||||
$loadingOverlayDefaultOpacity: 0.65 !default;
|
||||
|
||||
$sidebarBgColor: $light;
|
||||
$sidebarTextColor: $gray-800;
|
||||
$sidebarActiveColor: $success;
|
||||
|
|
|
@ -7,6 +7,9 @@ $theme: "app-slate";
|
|||
$panelBgColor: $card-bg;
|
||||
$panelBorder: none;
|
||||
|
||||
$loadingOverlayDefaultColor: $light !default;
|
||||
$loadingOverlayDefaultOpacity: 0.35 !default;
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
$headerBreadcrumbLinksBGColor: $secondary;
|
||||
|
|
|
@ -11,6 +11,9 @@ $panelBgColor: #363636;
|
|||
$panelShadow: none;
|
||||
$panelBorder: 1px solid #454545;
|
||||
|
||||
$loadingOverlayDefaultColor: $gray-900 !default;
|
||||
$loadingOverlayDefaultOpacity: 0.65 !default;
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
// $headerBreadcrumbLinksBoxshadow: 0 1px 0 rgba(255, 255, 255, 0.07),
|
||||
|
|
|
@ -8,6 +8,9 @@ $panelBgColor: #363636;
|
|||
$panelShadow: none;
|
||||
$panelBorder: 1px solid #454545;
|
||||
|
||||
$loadingOverlayDefaultColor: $dark !default;
|
||||
$loadingOverlayDefaultOpacity: 0.65 !default;
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
|
||||
$sidebarBgColor: $dark;
|
||||
|
|
Loading…
Reference in New Issue