Skip to content

Instantly share code, notes, and snippets.

@mturjak
Created January 29, 2014 02:32
Show Gist options
  • Select an option

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

Select an option

Save mturjak/8680750 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
@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(str-slice($progress,0,-10),unquote(str-slice($progress,-7)));
}
}
// 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