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%; } }