Merge pull request #13 from LukyVj/master

Fix #12
LukyVj · Jan 3, 2016 · c685d5f · c685d5f
2 parents ba5d2dc + dfabfa3
commit c685d5f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,11 @@
 # colofilter.css
 Colofilter.css - Duotone filters made with CSS ! 
+
 More info at [http://lukyvj.github.io/colofilter.css](http://lukyvj.github.io/colofilter.css)
 
+## Codepen demo 
+You can check this codepen collection using colofilter.css : [http://codepen.io/collection/AGpJpm/](http://codepen.io/collection/AGpJpm/)
+
 --- 
 ![](https://github.com/LukyVj/colofilter.css/raw/master/filters.png)
 
diff --git a/styles/colofilter.css b/styles/colofilter.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 [class^="blend"] img {
   mix-blend-mode: luminosity;
 }
@@ -54,6 +53,8 @@
 }
 [class^="blend"][class*="-red"]:after {
   background: #E50914;
+}
+[class^="blend"][class*="-red"]:after {
   background: #282581;
 }
 [class^="blend"][class*="-orange"] {
@@ -83,6 +84,8 @@
 }
 [class^="blend"][class*="-blue"]:after {
   background: #0066BF;
+}
+[class^="blend"][class*="-blue"]:after {
   background: #93EF90;
 }
 [class^="blend"][class*="-yellow"] {
@@ -108,6 +111,8 @@
 }
 [class^="blend"][class*="-yellow"]:after {
   background: #FEDD31;
+}
+[class^="blend"][class*="-yellow"]:after {
   background: #EF3CB4;
 }
 [class^="blend"][class*="-purple"] {
@@ -134,6 +139,8 @@
 }
 [class^="blend"][class*="-purple"]:after {
   background: #BC6D14;
+}
+[class^="blend"][class*="-purple"]:after {
   background: #ACFCEE;
 }
 [class^="blend"][class*="-green"] {
@@ -149,6 +156,8 @@
 }
 [class^="blend"][class*="-green"]:after {
   background: #11C966;
+}
+[class^="blend"][class*="-green"]:after {
   background: #2D3181;
 }
 [class^="blend"][class*="-pink"] {
@@ -165,10 +174,9 @@
 }
 [class^="blend"][class*="-pink"]:after {
   background: #EA4C89;
-  background: #EA4C89;
 }
-[class^="blend"][class*="-blue-yellow"] {
-  background:  ;
+[class^="blend"][class*="-pink"]:after {
+  background: #EA4C89;
 }
 [class^="blend"][class*="-blue-yellow"]:not([class*="-dark"]):not([class*="-light"]) {
   background: linear-gradient(to top left, #55ACEE, #FEDD31);
@@ -182,12 +190,8 @@
   filter: none;
 }
 [class^="blend"][class*="-blue-yellow"]:after {
-  background:  ;
   background: linear-gradient(to top left, #55ACEE, #FEDD31) !important;
 }
-[class^="blend"][class*="-pink-yellow"] {
-  background:  ;
-}
 [class^="blend"][class*="-pink-yellow"]:not([class*="-dark"]):not([class*="-light"]) {
   background: linear-gradient(to bottom right, #FAA6FB, #FBBC05) !important;
 }
@@ -202,12 +206,8 @@
   filter: none !important;
 }
 [class^="blend"][class*="-pink-yellow"]:after {
-  background:  ;
   background: linear-gradient(to top left, #FAA6FB, #FBBC05) !important;
 }
-[class^="blend"][class*="-red-blue"] {
-  background:  ;
-}
 [class^="blend"][class*="-red-blue"]:not([class*="-dark"]):not([class*="-light"]) {
   background: linear-gradient(to bottom right, #3993E2, #E2544B);
 }
@@ -227,12 +227,5 @@
   filter: saturate(300%) brightness(1.2) !important;
 }
 [class^="blend"][class*="-red-blue"]:after {
-  background:  ;
   background: linear-gradient(to bottom right, #3993E2, #E2544B);
 }
-[class^="blend"][class*="-lime"] {
-  background:  ;
-}
-[class^="blend"][class*="-lime"]:after {
-  background:  ;
-}
diff --git a/styles/colofilter.scss b/styles/colofilter.scss
@@ -1,4 +1,4 @@
-// Colofilter.css v1.0.0
+// Colofilter.css v1.0.1
 $color-map: (
   'red': '#E50914',
   'orange': '#FCA300',
@@ -10,12 +10,9 @@ $color-map: (
   'blue-yellow': ' ',
   'pink-yellow': ' ',
   'red-blue': ' ',
-  'lime': ' '
-);
+  );
 
 [class^="blend"] {
-
-
   img {
     mix-blend-mode: luminosity;
   }
@@ -61,9 +58,19 @@ $color-map: (
   }
 
   @each $color, $value in $color-map {
-    &[class*="-#{$color}"] {
-      background: #{($value)};
 
+    @if $color == 'blue-yellow' or 
+    $color == 'pink-yellow' or 
+    $color == 'red-blue' {
+      &[class*="-#{$color}"] {
+      }
+    }
+    @else {
+      &[class*="-#{$color}"] {
+        background: #{($value)};
+      }
+    }
+    &[class*="-#{$color}"] {
       @if $color == 'blue' {
         &:not([class*="-dark"]):not([class*="-light"]){
           &:after{
@@ -250,10 +257,18 @@ $color-map: (
           }
         }
       }
-
+
+      @if $value == ' ' {
+        &:after {
+        }
+      }
+      @else {
+        &:after {
+          background: #{($value)};
+        }
+      }
+
       &:after {
-        background: #{($value)};
-
         @if $color == 'red' {
           background: #282581;
         }

diff --git a/styles/main.css b/styles/main.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @import url(normalize.css);
 @import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,700,900);
 [class^="blend"] img {
@@ -56,6 +55,8 @@
 }
 [class^="blend"][class*="-red"]:after {
   background: #E50914;
+}
+[class^="blend"][class*="-red"]:after {
   background: #282581;
 }
 [class^="blend"][class*="-orange"] {
@@ -85,6 +86,8 @@
 }
 [class^="blend"][class*="-blue"]:after {
   background: #0066BF;
+}
+[class^="blend"][class*="-blue"]:after {
   background: #93EF90;
 }
 [class^="blend"][class*="-yellow"] {
@@ -110,6 +113,8 @@
 }
 [class^="blend"][class*="-yellow"]:after {
   background: #FEDD31;
+}
+[class^="blend"][class*="-yellow"]:after {
   background: #EF3CB4;
 }
 [class^="blend"][class*="-purple"] {
@@ -129,13 +134,15 @@
   -webkit-filter: saturate(100);
   filter: saturate(100);
 }
-[class^="blend"][class*="-purple"][class*="-ligh"]:after {
+[class^="blend"][class*="-purple"][class*="-light"]:after {
   background: #A37FC7;
   -webkit-filter: saturate(520%) brightness(10.5) contrast(350) !important;
   filter: saturate(520%) brightness(10.5) contrast(350) !important;
 }
 [class^="blend"][class*="-purple"]:after {
   background: #BC6D14;
+}
+[class^="blend"][class*="-purple"]:after {
   background: #ACFCEE;
 }
 [class^="blend"][class*="-green"] {
@@ -151,6 +158,8 @@
 }
 [class^="blend"][class*="-green"]:after {
   background: #11C966;
+}
+[class^="blend"][class*="-green"]:after {
   background: #2D3181;
 }
 [class^="blend"][class*="-pink"] {
@@ -159,37 +168,32 @@
 [class^="blend"][class*="-pink"][class*="-dark"]:after {
   background: #1D0E14;
 }
-[class^="blend"][class*="-pink"][class*="-ligh"]:after {
+[class^="blend"][class*="-pink"][class*="-light"]:after {
   background: #FF468D;
   mix-blend-mode: lighten !important;
   -webkit-filter: contrast(1) saturate(250%) !important;
   filter: contrast(1) saturate(250%) !important;
 }
 [class^="blend"][class*="-pink"]:after {
   background: #EA4C89;
-  background: #EA4C89;
 }
-[class^="blend"][class*="-blue-yellow"] {
-  background:  ;
+[class^="blend"][class*="-pink"]:after {
+  background: #EA4C89;
 }
 [class^="blend"][class*="-blue-yellow"]:not([class*="-dark"]):not([class*="-light"]) {
   background: linear-gradient(to top left, #55ACEE, #FEDD31);
 }
 [class^="blend"][class*="-blue-yellow"][class*="-dark"]:after {
   mix-blend-mode: hard-light !important;
 }
-[class^="blend"][class*="-blue-yellow"][class*="-ligh"]:after {
+[class^="blend"][class*="-blue-yellow"][class*="-light"]:after {
   mix-blend-mode: hard-light !important;
   -webkit-filter: none;
   filter: none;
 }
 [class^="blend"][class*="-blue-yellow"]:after {
-  background:  ;
   background: linear-gradient(to top left, #55ACEE, #FEDD31) !important;
 }
-[class^="blend"][class*="-pink-yellow"] {
-  background:  ;
-}
 [class^="blend"][class*="-pink-yellow"]:not([class*="-dark"]):not([class*="-light"]) {
   background: linear-gradient(to bottom right, #FAA6FB, #FBBC05) !important;
 }
@@ -198,18 +202,14 @@
   -webkit-filter: none !important;
   filter: none !important;
 }
-[class^="blend"][class*="-pink-yellow"][class*="-ligh"]:after {
+[class^="blend"][class*="-pink-yellow"][class*="-light"]:after {
   mix-blend-mode: hard-light !important;
   -webkit-filter: none !important;
   filter: none !important;
 }
 [class^="blend"][class*="-pink-yellow"]:after {
-  background:  ;
   background: linear-gradient(to top left, #FAA6FB, #FBBC05) !important;
 }
-[class^="blend"][class*="-red-blue"] {
-  background:  ;
-}
 [class^="blend"][class*="-red-blue"]:not([class*="-dark"]):not([class*="-light"]) {
   background: linear-gradient(to bottom right, #3993E2, #E2544B);
 }
@@ -223,21 +223,14 @@
   -webkit-filter: none !important;
   filter: none !important;
 }
-[class^="blend"][class*="-red-blue"][class*="-ligh"]:after {
+[class^="blend"][class*="-red-blue"][class*="-light"]:after {
   mix-blend-mode: screen !important;
   -webkit-filter: saturate(300%) brightness(1.2) !important;
   filter: saturate(300%) brightness(1.2) !important;
 }
 [class^="blend"][class*="-red-blue"]:after {
-  background:  ;
   background: linear-gradient(to bottom right, #3993E2, #E2544B);
 }
-[class^="blend"][class*="-lime"] {
-  background:  ;
-}
-[class^="blend"][class*="-lime"]:after {
-  background:  ;
-}
 
 ::root {
   font-size: calc(16px + 0.35vw + 0.35vh);