Start Html Pro theme SCSS bugs
Hello,
we detected over 50 errors in the .scss files of the StartPro theme. These errors are caused by missing variables in the components\_variables.scss file causing mixins functions to return empty values resulting in css like this:
.text-inverse-muted {
color: !important; /* ERROR */
}
.text-hover-inverse-muted:hover {
transition: color 0.2s ease, background-color 0.2s ease;
color: !important; /* ERROR */
}
.text-hover-inverse-muted:hover i {
transition: color 0.2s ease, background-color 0.2s ease;
color: !important; /* ERROR */
}You defined text colors that are not available in other variables:
$theme-text-colors: (
"white": $white,
"primary": $primary,
"secondary": $secondary,
"light": $light,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"dark": $dark,
"muted": $text-muted,
"gray-100": $gray-100,
"gray-200": $gray-200,
"gray-300": $gray-300,
"gray-400": $gray-400,
"gray-500": $gray-500,
"gray-600": $gray-600,
"gray-700": $gray-700,
"gray-800": $gray-800,
"gray-900": $gray-900
) !default; // Custom variable
$theme-inverse-colors: (
"white": $white-inverse,
"primary": $primary-inverse,
"secondary": $secondary-inverse,
"light": $light-inverse,
"success": $success-inverse,
"info": $info-inverse,
"warning": $warning-inverse,
"danger": $danger-inverse,
"dark": $dark-inverse
) !default; // Custom variableAs you can see, since the variables "muted" and "gray-xxx" are not present in the $theme-inverse-colors, $theme-active-colors or $theme-light-colors we get multiple errors when compiling. It's strange you haven't noticed since a compiler will warn about these errors.
We could fix this by hand of course, but it is important that you fix this so that we can update the theme in the future without having to worry about updating _variables.scss everytime.
What do you suggest?
Regards
Replies (8)
Hello,
Still wating for the fixed issues 2 months ago... Are you still updating this theme?
Also there are some major issues with correct support to -sm and -lg options with some components because you didn't cover those options:
In _pagination.scss you have:
.page-link {
display: flex;
justify-content: center;
align-items: center;
border-radius: $btn-border-radius;
height: $pagination-item-height;
min-width: $pagination-item-height;
font-weight: $pagination-font-weight;
font-size: $pagination-font-size;This is forcing the links to have fixed settings instead of adapting according to the bootstrap size options.
Also, you are forcing font-size to be 13px in _base.scss preventing the $font-size-base to work!
body {
height: 100%;
margin: 0px;
padding: 0px;
font-size: $root-font-size !important;You should correct these issues, or at least support the standard BS size options on all the standard BS components.
Regards
Hi,$root-font-size is our custom solution to globally control the font size scaling for desktop, tablet and mobile. Bootstrap's $font-size-base uses the root font size to calculate the related font size and spacings. Bootstrap's default root size uses the Browser's default font-size 16px which is quite large while Metronic's root font size is 13px for the Poppings font family. This is highly customizable and users can easily adjust global font sizing and spacing without breaking Bootsrap's core components sizeing.
We will try to release an update for Start and other themes in a few weeks.
Regards,
Sean
Hello Sean,
yes I can change the definition but why is it placed apart from the _variables.scss file? It's confusing having to deal with multiple places to look for and customize. I removed $root-font-size and all Layout stuff and placed that definition in my _variables.custom.scss and is working fine. Please consider moving it to the _variables.scss file for clearer usage.
Also, I'm having another issue with border-radius. How do you change the border-radius for the 3 sizes and see that applied to elements when the -sm, -lg is used? Tried to change a button to "btn btn-sm" but the border always inherits the $border-radius instead of the $border-radius-sm or $border-radius-lg. Does your mixin takes into account these variations when creating buttons? What's the point of having tons of variables if you only fetch the standard values?!
This theme is ignoring multiple settings from Bootstrap making it not very customizable. KeenThemes should of had specified which variables were not usable because this is limiting.
Regards
Hi,
Noted on the button border size variables and other comments as well. We will fix it in the next update for all products.
We will revise other Bootstrap overrides and fix them if necessary. If you have any other suggestions please let us know.
Regards.
We only have 6 months of support so when is expected for new version to be available?
Hi,
We are working on it.
No worries, you will get all future updates for free and we can continue the theme support here after 6 months.
Regards.
Hi,
Thanks for your feedback on this. We will fix these issues and release a new update for Start Pro in a few days and this will be fixed and added many new features and improvements.
The extended variables are available for texts only as required by the design system if we apply it for all components the CSS size will be increased dramatically.
Regards
ok. We will wait for the fix.
Thank you!
