Metronic v.8.1.7
Hi,
seems that v8.1.7 has missing styles :-(
<b>style.bundle.css</b>
Cannot resolve "--bs-blockquote-footer-color" custom property
Cannot resolve "--bs-body-text-align" custom property
Cannot resolve "--bs-breadcrumb-divider" custom property
Cannot resolve "--bs-breadcrumb-font-size" custom property
Cannot resolve "--bs-card-border-dashed-color" custom property
Cannot resolve "--bs-dropdown-item-border-radius" custom property
Cannot resolve "--bs-emphasis-bg-rgb" custom property
Cannot resolve "--bs-form-select-box-shadow" custom property
Cannot resolve "--bs-form-select-color" custom property
Cannot resolve "--bs-form-select-disabled-bg" custom property
Cannot resolve "--bs-form-select-disabled-border-color" custom property
Cannot resolve "--bs-form-select-disabled-color" custom property
Cannot resolve "--bs-form-select-focus-border-color" custom property
Cannot resolve "--bs-form-select-focus-box-shadow" custom property
Cannot resolve "--bs-light-active-rgb" custom property
Cannot resolve "--bs-light-light" custom property
Cannot resolve "--bs-link-opacity" custom property
Cannot resolve "--bs-muted" custom property
Cannot resolve "--bs-nav-link-font-size" custom property
Cannot resolve "--bs-primary-active-rgb" custom property
Cannot resolve "--bs-scroll-height" custom property
Cannot resolve "--bs-secondary-active-rgb" custom property
Cannot resolve "--bs-success-active-rgb" custom property
Cannot resolve "--bs-table-loading-message-bg" custom property
Cannot resolve "--bs-table-loading-message-box-shadow" custom property
Cannot resolve "--bs-table-loading-message-color" custom property
Cannot resolve "--bs-text-400" custom property
Cannot resolve "--bs-white-active" custom property
Cannot resolve "--bs-white-active-rgb" custom property
Cannot resolve "--bs-white-bg-rgb" custom property
Cannot resolve "--bs-white-bg-subtle" custom property
Cannot resolve "--bs-white-border-subtle" custom property
Cannot resolve "--bs-white-inverse" custom property
Cannot resolve "--bs-white-light" custom property
Cannot resolve "--bs-white-text" custom property
...<b>plugins.bundle.css</b>
Cannot resolve "--universal-margin" custom property
Cannot resolve "--input-invalid-color" custom property
Cannot resolve "--tagify-dd-item--hidden-duration" custom property
Cannot resolve "--fa-style-family" custom property
Cannot resolve "--fa-style" custom property
Cannot resolve "--fa-display" custom property
Cannot resolve "--bs-input-color" custom property
Cannot resolve "--bs-input-solid-color" custom property
Cannot resolve "--bs-input-solid-placeholder-color" custom property
Cannot resolve "--bs-hover-bg" custom property
...Replies (8)
Hi,
Thank you for the heads-up.
In style.bundle.css we fixed some CSS variables however some errors came from the bootstrap v5.3.0-alpha original CSS source. However these errors are not major bugs and hopefully, they will be fixed in the next update of Bootstrap.
In plugins.bundle.css we fixed some CSS variables except --fa ones as they were set to empty in the original plugin source.
If you need the fixed sass for these issues please let us know and we will send you the update sass files so you can easily update on your end till the same fixes arrive in the next update.
Regards.
Just a couple of things.
[style.bundle.css]
.badge {
--bs-badge-color: var(--bs-badge-color);
display: inline-flex;
align-items: center;
}I think it should be:
color: var(--bs-badge-color);[plugins.bundle.css]
.select2-container--bootstrap5.select2-container--focus:not(.select2-container--disabled) .form-select-solid, .select2-container--bootstrap5.select2-container--open:not(.select2-container--disabled) .form-select-solid {
background-color: var(--bs-input-solid-bg-focus);
}background-color: var(--bs-input-solid-bg-focus); doesn't work, I had to force to var(--bs-gray-100)Also:
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
font-size: 100%;
color: rgba(0, 0, 0, 0.5);
background: transparent;
pointer-events: none;
}font-size: 100%; results awkward (actually also in Metronic 8.1.6). I forced to font-size: 1.1rem;Thank you.
A last thing.
Page loader is black until body gets marked as data-bs-theme='light'.
Hi,
Noted, the above issues were fixed and will be released in the next update.
The page loader gets data-bs-theme='light' attribute assigned to the body tag once the HTML is loaded, without having to wait for other the css files to load.
Have you put the main theme mode init inline JS code as explained here?
Regards.
Yes I did as explained in documentation.
Seems there is a short amount of time where the theme attribute isn't applied and then all the styles are affected (since they are partially 'uninitialized').
1) https://postimg.cc/k68ww01d
2) https://postimg.cc/tYDkrt57
Hi,
We haven't encountered this issue and no such issue reported by other users so far. The main JS init code that runs instant on HTML render should set the theme mode attribute and there should not be any delay. This JS code does not depend on the assets load and its executed once the HTML document is loaded and before the render is started. Could you please share the browser and OS versions? Also, your app's test link would be helpful to investigate the issue.
Regards.
Windows 11 and Firefox 109.
Anyway never mind, I definitely fixed it server side instead of client-side, thanks.
Great! All the best with your projects!
