Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Convert SCSS code into a mixin #6

Open
wants to merge 2 commits into from

1 participant

@KyleAMathews

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. @KyleAMathews

    Remove extra whitespace

    KyleAMathews authored
  2. @KyleAMathews

    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
View
94 source/stylesheets/ui-progress-bar.css.scss
@@ -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.