Develop Reference

Unable to reuse SASS #mixin: Previous parameter value being used again

I have 3x circle icons (based on font-awesome icons) and I am trying to add a glow effect using sass #mixin.
_mixins.scss
#mixin textGlow($glowColor: 0){
#keyframes glow{
from {
text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
}
to {
text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
}
}
#-webkit-keyframes glow{
from {
text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
}
to {
text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
}
}
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
app.component.scss
#import '../styles/variables';
#import '../styles/mixins';
i.fa-circle.good{
color: $my-green;
#include textGlow($my-green);
}
i.fa-circle.bad{
color: $my-red;
#include textGlow($my-red);
}
_variables.scss
$my-green: #00BB9C;
$my-red: #FB4D62;
However, as you can see, there's a red glow around the green icons even though I have passed in $my-red for .bad class.
The last color parameter passed in to the #mixin will always cause all the glows to have that same last colour.
I have read a few tutorials on #mixin so far to try and figure out if I have used #mixin incorrectly, but I couldn't figure out my mistake. I have tried re-assigning to a local $local-colour variable in the mixin but to no avail.
Isn't the purpose of mixin to allow a bunch of css properties to be reused? Could someone please point out how am I using #mixin wrongly? Or if I shouldn't even be using #mixin in this situation?
I have recreated a Stackblitz example

The problem is with the keyframe name that you are using. The following change should help you.
mixins.scss
#mixin textGlow($name, $glowColor){
#keyframes #{$name}{
from {
text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
}
to {
text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
}
}
#-webkit-keyframes #{$name}{
from {
text-shadow: 0 0 1px $glowColor, 0 0 2px $glowColor, 0 0 3px $glowColor;
}
to {
text-shadow: 0 0 3px lighten($glowColor, 5%), 0 0 4px lighten($glowColor, 15%), 0 0 5px lighten($glowColor, 30%);
}
}
-webkit-animation: $name 1s ease-in-out infinite alternate;
-moz-animation: $name 1s ease-in-out infinite alternate;
animation: $name 1s ease-in-out infinite alternate;
}
app.component.scss
i.fa-circle.good{
color: $my-green;
#include textGlow('greenglow', $my-green);
}
i.fa-circle.bad{
color: $my-red;
#include textGlow('redglow', $my-red);
}

Javascript + CSS animation not working, what could be causing it?

I am working on a page progress loader, I would like to animate the width throughout progress however I am not having any luck. Please see below, any help would be most appreciated.
https://jsfiddle.net/nbx9dwzL/
HTML
<div id="page-progress-bar-top"></div>
Javascript
var pageProgressBarTop = document.getElementById("page-progress-bar-top")
pageProgressBarTop.classList.add("complete")
CSS
#page-progress-bar-top{
position:absolute;
height:4px;
background:#12ADFD;
z-index:100;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
-webkit-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
-moz-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
}
#page-progress-bar-top.complete{
width:100%;
}

You have no initial width, and the default width for a <div> element is 100% (it's a block element).
To see the transition, you're looking to apply a width, of say 1px to start out with:
document.addEventListener("click", function() {
var pageProgressBarTop = document.getElementById("page-progress-bar-top")
pageProgressBarTop.classList.add("complete")
});
#page-progress-bar-top {
width: 1px;
position: absolute;
height: 4px;
background: #12ADFD;
z-index: 100;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
-webkit-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
-moz-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
}
#page-progress-bar-top.complete {
width: 100%;
}
<div id="page-progress-bar-top"></div>
This can be seen working here.

HTML5 number input field with currency symbol in the end of it

I would like to have a html5 number input field containing the EUR sign, and no matter what editing occurs to the field, for the sign to be persistent. I tried to do that, but the EUR sign won't appear inside the field, I want to move this sign at the end of the input but for some reason, I can't do it. I don't want to remove class form-control. Any help?
My snippet:
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-right: 15px;
}
.input-symbol-euro:after {
position: absolute;
top: 0;
content: "€";
right: 0px;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>

You need to give the <span> some sort of useful display property so that it will wrap the <input>. By default this element has a value of inline. In the example below I've used inline-block, but block would do just fine.
See updated fiddle.
.input-symbol-euro {
position: relative;
display: inline-block;
width: 50%;
}
.input-symbol-euro input {
padding-right: 15px;
width: 100%;
}
.input-symbol-euro:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: auto;
content: "€";
right: 20px;
}
.form-control {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>

Javascript - Change border colour of form textbox when user enters something?

I have no code for this.
I'm just trying new things to my form. The required fields have a red border. I want them to go black when filled out. Would onchange be used?

This can be done entirely using CSS. (The "red" is already CSS most likely). Here's some code I like to use to give a nice "eased" glow to form elements.
input[type=text] {
height: 30px;
}
input[type=text], textarea {
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}

lightbox 2 border around thumbnail

Hey guys Iam trying 2 use light box at the moment and every thing is working fine. However what iam trying 2 figure out is how do i get a border like http://lokeshdhakar.com/projects/lightbox2/ the ones which they got in the examples to change colour. Any help on this would be great.
html:
<div class = "image1">
<img src="images/image1t.jpg" />
</div>

Try the below code
.image1 a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
display: block;
float: left;
line-height: 1em;
margin-right: 40px;
padding: 7px;
transition: all 0.2s ease-out 0s;
}
.image1 a:hover {
background-color: #8AD459;
}

Set a css3 transition property on your anchors, then on :hover property, the effects will "animate".
.image1 a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.image1 a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}