Light
Dark
System
Ask  Question

Metronic v.8.1.7

Hi,
seems that v8.1.7 has missing styles :-(

style.bundle.css
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
...



plugins.bundle.css
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
...

P
Paolo Perliti 3 months ago
Metronic HTML Bootstrap 5
8 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)

S
Sean Author3 months ago
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.
P
Paolo Perliti 3 months ago
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.
P
Paolo Perliti 3 months ago
A last thing.

Page loader is black until body gets marked as data-bs-theme='light'.
S
Sean Author3 months ago
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.
P
Paolo Perliti 3 months ago
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
S
Sean Author3 months ago
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.
P
Paolo Perliti 3 months ago
Windows 11 and Firefox 109.
Anyway never mind, I definitely fixed it server side instead of client-side, thanks.
S
Sean Author3 months ago
Great! All the best with your projects!
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle