Skip to content

Instantly share code, notes, and snippets.

@mturjak
Created January 29, 2014 01:18
Show Gist options
  • Select an option

  • Save mturjak/8679907 to your computer and use it in GitHub Desktop.

Select an option

Save mturjak/8679907 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// ----
@mixin make_progress($val,$col){
progress[value="#{$val}"] {
color: #{$col};
&::-webkit-progress-value { background-color: #{$col}; }
&::-moz-progress-bar { background-color: #{$col}; }
}
}
@mixin progress-value($value-color...) {
@each $progress in $value-color {
@include make_progress(nth($progress,1),nth($progress,2));
}
}
// Calling the mixin
@include progress-value(0.25 #de2b23);
// and with a multideimensional list
@include progress-value(0.5 #FF8330, 0.75 #8A9F4A, 1 #14BB64);
progress[value="0.25"] {
color: #de2b23;
}
progress[value="0.25"]::-webkit-progress-value {
background-color: #de2b23;
}
progress[value="0.25"]::-moz-progress-bar {
background-color: #de2b23;
}
progress[value="0.5"] {
color: #ff8330;
}
progress[value="0.5"]::-webkit-progress-value {
background-color: #ff8330;
}
progress[value="0.5"]::-moz-progress-bar {
background-color: #ff8330;
}
progress[value="0.75"] {
color: #8a9f4a;
}
progress[value="0.75"]::-webkit-progress-value {
background-color: #8a9f4a;
}
progress[value="0.75"]::-moz-progress-bar {
background-color: #8a9f4a;
}
progress[value="1"] {
color: #14bb64;
}
progress[value="1"]::-webkit-progress-value {
background-color: #14bb64;
}
progress[value="1"]::-moz-progress-bar {
background-color: #14bb64;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment