styling improvements
mariusa opened this issue · comments
Hi,
Would it be possible please to prefix scss variables with sidebar-menu-
? eg
$primary-color
-> $sidebar-menu-primary-color
This way they won't conflict with other components.
Would be good to have this separated as well, with the default value $primary-color, but possible to overwrite:
box-shadow: 3px 0px 0px 0px $primary-color inset;
->
box-shadow: 3px 0px 0px 0px $sidebar-menu-shadow-color inset;
Thank you!
What about using the @use
rule over @import
?
Interesting idea. I've tried in my app styles.scss
@import "variables";
@use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";
but that gives
[vite] Internal server error: @use rules must be written before any other rules.
╷
3 │ @use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/assets/scss/style.scss 3:1 root stylesheet
If I move use
at the top, I can't overwrite variables anymore.
Also, I was expecting to overwrite vars like this
vue-sidebar-menu.$primary-color: #ffffff;
but that gives a warning identifier expected
.
Now I overwrite with
$primary-color: #ffffff;
and this works fine. The issue is that $primary-color
is very generic instead of being specific to this library.
@use "./variables.scss" as variables;
@use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss" with (
$primary-color: variables.$sidebar-menu-primary-color
);
Where $sidebar-menu-primary-color
is in variables.scss
Thank you!
Shall I make a PR with
Would be good to have this separated as well, with the default value $primary-color, but possible to overwrite:
box-shadow: 3px 0px 0px 0px $primary-color inset;
// to
box-shadow: 3px 0px 0px 0px $shadow-color inset;
Added $item-active-line-color
in v5.2.0.
Works great, thank you!