source/stylesheets/refills/_textures.scss in refills-0.1.0 vs source/stylesheets/refills/_textures.scss in refills-0.2.0
- old
+ new
@@ -1,6 +1,6 @@
-@mixin texture($gradient-angle, $bg-color-1, $bg-color-2, $texture-number, $inverted) { $texture-list:
+@mixin texture($gradient-angle, $bg-color-1, $bg-color-2, $texture-number, $inverted) { $texture-list:
"paper.png" // Fabric and paper
"rice_paper.png"
"noise_lines.png"
"fabric_plaid.png"
"first_aid_kit.png"
@@ -42,11 +42,11 @@
"farmer.png"
"retina_dust.png" // Lines
"pinstripe.png"
"line_horizontal1.png"
"line_horizontal2.png"
- "linen.png"
+ "linen.png"
"vintage_speckles.png" // Patina and irregular
"subtle_grunge.png"
"old_wall.png"
"brushed.png"
"stucco.png"
@@ -56,11 +56,11 @@
"noisy.png"
"concrete_wall_3.png"
"subtle_surface.png"
"dust.png"
"light_alu.png"
- "corrugation.png"
+ "corrugation.png"
"kindajean.png" // Diagonal
"line_diagonal1.png"
"line_diagonal2.png"
"groovepaper.png"
"brushed_alu.png"
@@ -87,15 +87,19 @@
"shinedotted.png"
"stacked_circles.png"
"noisy_grid_simple.png";
@if ($inverted == 1) {
- @include background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/#{nth($texture-list, $texture-number)}"), linear-gradient($gradient-angle, $bg-color-1, $bg-color-2), center no-repeat $bg-color-1 scroll);
+ background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/#{nth($texture-list, $texture-number)}"),
+ linear-gradient($gradient-angle, $bg-color-1, $bg-color-2),
+ center no-repeat $bg-color-1 scroll;
}
@else {
- @include background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/#{nth($texture-list, $texture-number)}"), linear-gradient($gradient-angle, $bg-color-1, $bg-color-2), center no-repeat $bg-color-1 scroll);
+ background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/#{nth($texture-list, $texture-number)}"),
+ linear-gradient($gradient-angle, $bg-color-1, $bg-color-2),
+ center no-repeat $bg-color-1 scroll;
}
}
// The mixin above should preferably be in a file of its own. Below is the code for the object that has the texture.
@@ -104,19 +108,19 @@
$texture-bottom-background: darken(#ddf0ef, 10%);
height: 5em;
width: 100%;
.texture-normal {
- // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal
- @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 1);
+ // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal
+ @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 1);
float: left;
height: 5em;
width: 50%;
}
.texture-inverted {
- // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal
- @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 0);
+ // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal
+ @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 0);
float: left;
height: 5em;
width: 50%;
}
}