Hi Lennart,
Have you compiled your css changes with css compiler? Or can you checked the style in your browser by inspecting the element or by searching in the source tab
If your changes are not reflected here, it will not be applied in your button.
Hope this helps!
Hi Lennart,
as far as I’ve understood the assignment in 5.4.2 you should do the following:
I hope this helps
Thanks for answering, but I don't really know what you mean.
I've put the following code below the mixin.
.btn-primary{
font-size: 18px;
font-weight: 700;
border-radius: 0;
text-transform: uppercase;
background-color: #fff;
color: $brand-primary;
&:hover{
background-color: $brand-primary;
color: #fff;
}
}
.btn-info{
font-size: 18px;
font-weight: 700;
border-radius: 0;
text-transform: uppercase;
background-color: #fff;
color: $brand-info;
&:hover{
background-color: $brand-info;
color:#fff;
}
}
What do I have to do with the mixin parameters? Change them? Or do I need to change someting in the @include line?
I was stuck at the same point in this course, but the $btn-primary-color etc. that are displayed in the mixin's below are variables that are stored in the _variables.scss.
// Button style variations
// @mixin button-variant(text color, background color, border color, hover background color) {
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color, $btn-primary-bg-hover);
}
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color, $btn-info-bg-hover);
}
When you edit the 4 variables for each mixin you get the result as mentioned in the example. You can put the properties of the buttons that are shared (f.e. text-transform) in the .btn, mx-button{} class.