cleans up CSS and removes duplicate .card-logo code, closes #88

jessepollak · Jul 1, 2014 · 612fa41 · 612fa41
1 parent 75dd227
commit 612fa41
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 47 deletions.
diff --git a/lib/css/card.css b/lib/css/card.css
@@ -81,15 +81,6 @@
 .card.amex.identified .front:after {
   opacity: 1; }
 
-.card-logo {
-  height: 36px;
-  width: 60px;
-  font-style: italic; }
-  .card-logo, .card-logo:before, .card-logo:after {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-
 .card-logo.discover {
   background: #FF6600;
   color: #111;
@@ -156,15 +147,6 @@
   -webkit-box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
   box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5); }
 
-.card-logo {
-  height: 36px;
-  width: 60px;
-  font-style: italic; }
-  .card-logo, .card-logo:before, .card-logo:after {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-
 .card-logo.visa.visa {
   background: white;
   text-transform: uppercase;
@@ -189,15 +171,6 @@
 .card.visa.identified .card-logo.visa {
   opacity: 1; }
 
-.card-logo {
-  height: 36px;
-  width: 60px;
-  font-style: italic; }
-  .card-logo, .card-logo:before, .card-logo:after {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-
 .card-logo.mastercard {
   color: white;
   font-weight: bold;

diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
@@ -1,3 +1,14 @@
+
+// only import a module once
+// https://github.com/wilsonpage/sass-import-once
+$modules: () !default;
+@mixin exports($name) {
+  @if (index($modules, $name) == false) {
+    $modules: append($modules, $name);
+    @content;
+  }
+}
+
 @mixin shape() {
     content: " ";
     display: block;
@@ -66,5 +77,4 @@
             linear-gradient(-25deg, $b1 50%, opacify($b1, .2) 70%, $b1 90%)
         );
     }
-
 }
diff --git a/src/scss/cards/_amex.scss b/src/scss/cards/_amex.scss
@@ -1,5 +1,5 @@
-@import "../cards/_card";
-@import "../logos/_amex";
+@import "card";
+@import "../logos/amex";
 
 $fill-color: #108168;
 
@@ -8,7 +8,7 @@ $fill-color: #108168;
     &.flipped{
         @include transform(none);
     }
-    
+
     &.identified {
         .front, .back {
             &:before {

diff --git a/src/scss/cards/_discover.scss b/src/scss/cards/_discover.scss
@@ -1,5 +1,5 @@
-@import "../cards/_card";
-@import "../logos/_discover";
+@import "card";
+@import "../logos/discover";
 
 $fill-color: #86B8CF;
 $highlight-color: #FF6600;

diff --git a/src/scss/cards/_mastercard.scss b/src/scss/cards/_mastercard.scss
@@ -1,5 +1,5 @@
-@import "../cards/_card";
-@import "../logos/_mastercard";
+@import "card";
+@import "../logos/mastercard";
 
 $fill-color: #0061A8;
 

diff --git a/src/scss/cards/_visa.scss b/src/scss/cards/_visa.scss
@@ -1,5 +1,5 @@
-@import "../cards/_card";
-@import "../logos/_visa";
+@import "card";
+@import "../logos/visa";
 
 $fill-color: #191278;
 

diff --git a/src/scss/logos/_amex.scss b/src/scss/logos/_amex.scss
@@ -1,4 +1,4 @@
-@import "_logo";
+@import "logo";
 
 .card-logo.amex {
     $box-offset: 8px;

diff --git a/src/scss/logos/_discover.scss b/src/scss/logos/_discover.scss
@@ -1,4 +1,4 @@
-@import "_logo";
+@import "logo";
 
 .card-logo.discover {
     $orange: #FF6600;

diff --git a/src/scss/logos/_logo.scss b/src/scss/logos/_logo.scss
@@ -1,11 +1,13 @@
 $logo-height: 36px;
 $logo-width: 60px;
 
-.card-logo {
-    &, &:before, &:after {
-        box-sizing: border-box;
+@include exports("_logo.scss") {
+    .card-logo {
+        &, &:before, &:after {
+            box-sizing: border-box;
+        }
+        height: $logo-height;
+        width: $logo-width;
+        font-style: italic;
     }
-    height: $logo-height;
-    width: $logo-width;
-    font-style: italic;
 }
diff --git a/src/scss/logos/_mastercard.scss b/src/scss/logos/_mastercard.scss
@@ -1,4 +1,4 @@
-@import "_logo";
+@import "logo";
 
 .card-logo.mastercard {
     // display: none;

diff --git a/src/scss/logos/_visa.scss b/src/scss/logos/_visa.scss
@@ -1,4 +1,4 @@
-@import "_logo";
+@import "logo";
 
 .card-logo.visa {
     &.visa {