Closed maninak closed 4 years ago
Hello! Thanks for reporting :)
The issue seems to be your use of !important
on your variables. Are you sure you need to set it to important? They are defined with default
, so just declaring them should be enough.
More specifically, it's due to this line: https://github.com/Maronato/vue-toastification/blob/96c6a5f4e630a5ad1fe9cdbad15aa8ef308a9a00/src/scss/_toastContainer.scss#L54
You can see that by adding !important
to the variable declaration, the syntax may become invalid. You can probably remove it and everything should work fine.
I figured as much, that's why I listed the full file of my overrides.
And yeah, I'm aware of the !default
specifier, but (I guess I was doing something wrong?) I couldn't get the styles to override with my values without using that ugly !important
.
For some reason now that I tried again, style overrides worked smoothly without !important
(perhaps some refactoring I added after opening the bug report?)
FWIW here's my updated overrides file:
@use 'sass:color';
@import '@/styles/constants/_colors';
$vt-toast-min-width: 334px;
$vt-toast-min-height: 48px;
$vt-toast-max-width: 600px;
$vt-toast-max-height: 96px;
$vt-color-default: color.scale($color-va-blau-100, $lightness: 85%);
$vt-text-color-default: color.scale($color-va-blau-100, $lightness: -15%);
$vt-color-info: color.scale($color-jet, $lightness: 85%);
$vt-text-color-info: $color-jet;
$vt-color-success: color.scale($color-va-gruen-100, $lightness: 65%);
$vt-text-color-success: color.scale($color-va-gruen-100, $lightness: -50%);
$vt-color-warning: color.scale($color-va-gelb-100, $lightness: 65%);
$vt-text-color-warning: color.scale($color-va-gelb-100, $lightness: -50%);
$vt-color-error: color.scale($color-red, $lightness: 80%);
$vt-text-color-error: color.scale($color-red, $lightness: -20%);
$vt-font-family: 'voestalpine', Arial, Helvetica, sans-serif;
.Vue-Toastification__toast {
padding: 14px 16px !important;
border-radius: 4px !important;
font-weight: 300;
&:hover .Vue-Toastification__close-button {
color: inherit;
}
}
.Vue-Toastification__toast--default .Vue-Toastification__icon {
display: none;
}
@import 'vue-toastification/src/scss/_variables';
@import 'vue-toastification/src/scss/_toastContainer';
@import 'vue-toastification/src/scss/_toast';
@import 'vue-toastification/src/scss/_closeButton';
@import 'vue-toastification/src/scss/_progressBar';
@import 'vue-toastification/src/scss/_icon';
@import 'vue-toastification/src/scss/animations/_fade';
And of course I am now able to remove the offending
import 'vue-toastification/dist/index.css'
with no regressions, which was my goal.
As far as I'm concerned this is resolved, feel free to close the issue. Thank you for your help!
Great! If you find any other issues along the way, don't hesitate to report back :)
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Versions
Describe the bug
When not using the css import directly, but scss is preferred, i.e.:
The resulting css is not valid which brakes the positioning of the toast if bottom-center placement is chosen.
Expected behavior
Steps to reproduce
Reproduction demo. Steps:
Your Environment
Additional context
NOTES:
Loving this library and how the author goes about it, maintenance, perf, api and stuff. Keep it up! :clap: