Bug Fix: Remove junk character in print media

lokesh-coder · Oct 24, 2016 · 42fcb17 · 42fcb17
1 parent 101cbc3
commit 42fcb17
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 35 deletions.
diff --git a/src/pretty.css b/src/pretty.css
@@ -118,6 +118,35 @@
   }
 }
 
+@media print {
+  .pretty:not(.toggle) input:not(:checked) + label i:before,
+  .pretty > input[type='radio']:checked + label > i.default:before,
+  .pretty i:after {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    color: transparent !important;
+  }
+  .pretty input:checked + label i:before {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  .pretty.primary input:checked + label i:before {
+    color: white !important;
+  }
+  .pretty.success input:checked + label i:before {
+    color: white !important;
+  }
+  .pretty.info input:checked + label i:before {
+    color: white !important;
+  }
+  .pretty.warning input:checked + label i:before {
+    color: white !important;
+  }
+  .pretty.danger input:checked + label i:before {
+    color: white !important;
+  }
+}
+
 .pretty {
   position: relative;
   line-height: 1;
@@ -184,7 +213,7 @@
 }
 
 .pretty > input[type='radio']:checked + label > i.default:before {
-  background: #aaa;
+  background-color: #aaa !important;
 }
 
 .pretty > input[type='checkbox'][disabled],
@@ -237,17 +266,17 @@
 }
 
 .pretty.primary input:checked + label i:after {
-  background-color: #428bca;
+  background-color: #428bca !important;
   border-color: #428bca;
 }
 
 .pretty.primary input[type='radio']:checked + label i.default:before {
-  background-color: #428bca;
+  background-color: #428bca !important;
   color: transparent;
 }
 
 .pretty.primary input[type='radio']:checked + label i.default:after {
-  background-color: initial;
+  background-color: initial !important;
   border-color: #428bca;
 }
 
@@ -291,17 +320,17 @@
 }
 
 .pretty.success input:checked + label i:after {
-  background-color: #5cb85c;
+  background-color: #5cb85c !important;
   border-color: #5cb85c;
 }
 
 .pretty.success input[type='radio']:checked + label i.default:before {
-  background-color: #5cb85c;
+  background-color: #5cb85c !important;
   color: transparent;
 }
 
 .pretty.success input[type='radio']:checked + label i.default:after {
-  background-color: initial;
+  background-color: initial !important;
   border-color: #5cb85c;
 }
 
@@ -345,17 +374,17 @@
 }
 
 .pretty.info input:checked + label i:after {
-  background-color: #5bc0de;
+  background-color: #5bc0de !important;
   border-color: #5bc0de;
 }
 
 .pretty.info input[type='radio']:checked + label i.default:before {
-  background-color: #5bc0de;
+  background-color: #5bc0de !important;
   color: transparent;
 }
 
 .pretty.info input[type='radio']:checked + label i.default:after {
-  background-color: initial;
+  background-color: initial !important;
   border-color: #5bc0de;
 }
 
@@ -399,17 +428,17 @@
 }
 
 .pretty.warning input:checked + label i:after {
-  background-color: #f0ad4e;
+  background-color: #f0ad4e !important;
   border-color: #f0ad4e;
 }
 
 .pretty.warning input[type='radio']:checked + label i.default:before {
-  background-color: #f0ad4e;
+  background-color: #f0ad4e !important;
   color: transparent;
 }
 
 .pretty.warning input[type='radio']:checked + label i.default:after {
-  background-color: initial;
+  background-color: initial !important;
   border-color: #f0ad4e;
 }
 
@@ -453,17 +482,17 @@
 }
 
 .pretty.danger input:checked + label i:after {
-  background-color: #d9534f;
+  background-color: #d9534f !important;
   border-color: #d9534f;
 }
 
 .pretty.danger input[type='radio']:checked + label i.default:before {
-  background-color: #d9534f;
+  background-color: #d9534f !important;
   color: transparent;
 }
 
 .pretty.danger input[type='radio']:checked + label i.default:after {
-  background-color: initial;
+  background-color: initial !important;
   border-color: #d9534f;
 }
 

diff --git a/src/pretty.min.css b/src/pretty.min.css
diff --git a/src/scss/decorators/_color.scss b/src/scss/decorators/_color.scss
@@ -1,29 +1,21 @@
-$outline-colors: (
-  primary outline-primary #428bca,
-  success outline-success #5cb85c,
-  info outline-info #5bc0de,
-  warning outline-warning #f0ad4e,
-  danger outline-danger #d9534f
-) !default;
-
 @each $color in $outline-colors{
   .#{$pretty-class-name}.#{nth($color,1)}{
     input:checked+ label i{ 
       &:before{
         color:#fff; 
       }
       &:after{
-        background-color:nth($color,3);
+        background-color:nth($color,3) !important;
         border-color:nth($color,3)
       }
     }
     input[type='radio']:checked+ label i.default{ 
       &:before{
-        background-color:nth($color,3);
+        background-color:nth($color,3) !important;
         color:transparent;
       }
       &:after{
-        background-color: initial;
+        background-color: initial !important;
         border-color:nth($color,3)
       }
     }
@@ -36,7 +28,7 @@ $outline-colors: (
   .#{$pretty-class-name}.#{nth($color,2)}{
     input:checked+label i{
       &:before{
-        color:nth($color,3)
+        color:nth($color,3);
       }
       &:after{
         border-color:nth($color,3); 

diff --git a/src/scss/decorators/_core.scss b/src/scss/decorators/_core.scss
@@ -63,7 +63,7 @@
   }
   &>input[type='radio']:checked+label>i.default{
     &:before{
-      background: #aaa;
+      background-color: #aaa !important; 
     }
     &:after{}
   }

diff --git a/src/scss/support/_index.scss b/src/scss/support/_index.scss
@@ -1,4 +1,4 @@
 @import 'variables';
 @import 'mixins';
 @import 'animations';
-@import 'print';
+@import 'print';   
diff --git a/src/scss/support/_print.scss b/src/scss/support/_print.scss
@@ -1,7 +1,20 @@
-@media print{
-    .pretty i:after{
+@media print {
+    .#{$pretty-class-name}:not(.toggle) input:not(:checked)+label i:before,
+    .#{$pretty-class-name} > input[type='radio']:checked + label > i.default:before,
+    .#{$pretty-class-name} i:after {
         -webkit-print-color-adjust: exact;
         print-color-adjust: exact;
         color: transparent !important;
     }
-} 
+
+    .#{$pretty-class-name} input:checked + label i:before{
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+
+    @each $color in $outline-colors {
+        .#{$pretty-class-name}.#{nth($color, 1)} input:checked + label i:before { 
+            color: white !important;
+        }
+    }
+}
diff --git a/src/scss/support/_variables.scss b/src/scss/support/_variables.scss
@@ -1,3 +1,10 @@
 $pretty-class-name:pretty !default;
 $pretty-font-family:"Material Design Icons" !default;
-$pretty-border-radius:2px !default; 
+$pretty-border-radius:2px !default;
+$outline-colors: (
+  primary outline-primary #428bca,
+  success outline-success #5cb85c,
+  info outline-info #5bc0de,
+  warning outline-warning #f0ad4e,
+  danger outline-danger #d9534f
+) !default;