Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Convert SCSS code into a mixin #6

Open
wants to merge 2 commits into from

1 participant

Kyle Mathews
Kyle Mathews

So easier to override settings and create multiple progress bars within code.

To use within your sass/compass project:

div.progress-bar-container {
  @include ui-progress-bar($background-color: #FAFAFA, $bar-color: #3394E3, $height: 15px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 20, 2012
  1. Kyle Mathews

    Remove extra whitespace

    KyleAMathews authored
  2. Kyle Mathews

    Convert SCSS code into a mixin so easier to override variables + use …

    KyleAMathews authored
    …in multiple places within code
This page is out of date. Refresh to see the latest.
Showing with 44 additions and 50 deletions.
  1. +44 −50 source/stylesheets/ui-progress-bar.css.scss
94 source/stylesheets/ui-progress-bar.css.scss
View
@@ -22,36 +22,30 @@ THE SOFTWARE.
*/
-$background-color: #abb2bc;
-$bar-color: #74d04c;
-$height: 25px;
-$border-width: 1px;
-$border-color: #4c8932;
-$border-radius: $height;
-
@import "compass/css3";
-/* Webkit animation keyframes */
-@-webkit-keyframes animate-stripes {
- from {
- background-position: 0 0;
- }
- to {
- background-position: 44px 0;
- }
-}
+@mixin ui-progress-bar($background-color: #abb2bc, $bar-color: #74d04c, $height: 25px, $border-width: 1px, $border-color: #4c8932) {
+ $border-radius: $height;
-@-moz-keyframes animate-stripes {
- from {
- background-position: 0 0;
+ /* Webkit animation keyframes */
+ @-webkit-keyframes animate-stripes {
+ from {
+ background-position: 0 0;
+ }
+ to {
+ background-position: 44px 0;
+ }
}
- to {
- background-position: 36px 0;
+
+ @-moz-keyframes animate-stripes {
+ from {
+ background-position: 0 0;
+ }
+ to {
+ background-position: 36px 0;
+ }
}
-}
-/* Bar which is placed behind the progress */
-.ui-progress-bar {
/* Usual setup stuff */
position: relative;
height: $height;
@@ -59,17 +53,17 @@ $border-radius: $height;
padding-right: ($border-width * 2);
/* For browser that don't support gradients, we'll set a blanket background colour */
background-color: $background-color;
-
+
/* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
/* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress */
@include border-radius($border-radius);
-
- /* Background gradient */
+
+ /* Background gradient */
@include background(linear-gradient(darken($background-color, 8%) 0%, $background-color 100%));
-
+
/* Give it the inset look by adding some shadows and highlights */
@include box-shadow(inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white);
-
+
/* Alt colours */
&.blue {
.ui-progress {
@@ -77,30 +71,30 @@ $border-radius: $height;
border: 1px solid darken(#339BB9, 10%);
}
}
-
+
&.error {
.ui-progress {
background-color: #C43C35 !important;
border: 1px solid darken(#C43C35, 10%);
}
}
-
+
&.warning {
.ui-progress {
background-color: #D9B31A!important;
border: 1px solid darken(#D9B31A, 10%);
}
}
-
+
&.success {
.ui-progress {
background-color: #57A957!important;
border: 1px solid darken(#57A957, 10%);
}
}
-
+
&.transition .ui-progress {
- @include transition(background-color 0.5s ease-in,
+ @include transition(background-color 0.5s ease-in,
border-color 1.5s ease-out,
width .6s ease,
box-shadow 1.5s ease-out);
@@ -113,19 +107,19 @@ $border-radius: $height;
overflow: hidden;
/* Height should be 2px less than .ui-progress-bar so as to not cover borders and give it a look of being inset */
height: $height - ($border-width * 2);
-
+
/* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
/* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress-bar */
@include border-radius($border-radius);
-
+
/* Set the background size so the stripes work correctly */
-webkit-background-size: 44px 44px;
-moz-background-size: 36px 36px;
-
+
/* Webkit */
/* For browser that don't support gradients, we'll set a base background colour */
background-color: $bar-color;
-
+
/* Webkit background stripes and gradient */
background: -webkit-gradient(linear, 0 0, 44 44,
color-stop(0.00, rgba(255,255,255,0.17)),
@@ -137,24 +131,24 @@ $border-radius: $height;
color-stop(0.76, rgba(255,255,255,0)),
color-stop(1.00, rgba(255,255,255,0))
), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(white, 0)), color-stop(1, rgba(white, 0.35))), $bar-color;
-
+
/* Mozilla (Firefox etc) background stripes */
/* Note: Mozilla's support for gradients is more true to the original design, allowing gradients at 30 degrees, as apposed to 45 degress in webkit. */
- background: -moz-repeating-linear-gradient(top left -30deg,
- rgba(255,255,255,0.17),
- rgba(255,255,255,0.17) 15px,
- rgba(255,255,255,0) 15px,
+ background: -moz-repeating-linear-gradient(top left -30deg,
+ rgba(255,255,255,0.17),
+ rgba(255,255,255,0.17) 15px,
+ rgba(255,255,255,0) 15px,
rgba(255,255,255,0) 30px
), -moz-linear-gradient(rgba(white, 0.25) 0%, rgba(white, 0) 100%), $bar-color;
-
+
@include box-shadow(inset 0px 1px 0px 0px rgba(white, 0.4), inset 0px -1px 1px rgba(black, 0.2));
-
+
/* Give it a higher contrast outline */
border: 1px solid $border-color;
-
+
/* Animate */
@include experimental(animation, animate-stripes 2s linear infinite);
-
+
/* Style status label */
span.ui-label {
@include experimental(font-smoothing, antialiased);
@@ -165,11 +159,11 @@ $border-radius: $height;
padding-right: 12px;
color: rgba(0, 0, 0, 0.6);
text-shadow: rgba(255, 255, 255, 0.45) 0 1px 0px;
- white-space: nowrap;
-
+ white-space: nowrap;
+
b {
font-weight: bold;
}
- }
+ }
}
}
Something went wrong with that request. Please try again.