From 612fa4165605163e00492d9cf888cfbaee431422 Mon Sep 17 00:00:00 2001 From: Jesse Pollak Date: Mon, 30 Jun 2014 21:13:51 -0700 Subject: [PATCH] cleans up CSS and removes duplicate .card-logo code, closes #88 --- lib/css/card.css | 27 --------------------------- src/scss/_mixins.scss | 12 +++++++++++- src/scss/cards/_amex.scss | 6 +++--- src/scss/cards/_discover.scss | 4 ++-- src/scss/cards/_mastercard.scss | 4 ++-- src/scss/cards/_visa.scss | 4 ++-- src/scss/logos/_amex.scss | 2 +- src/scss/logos/_discover.scss | 2 +- src/scss/logos/_logo.scss | 14 ++++++++------ src/scss/logos/_mastercard.scss | 2 +- src/scss/logos/_visa.scss | 2 +- 11 files changed, 32 insertions(+), 47 deletions(-) diff --git a/lib/css/card.css b/lib/css/card.css index 7ec748f7..01d0c1a5 100644 --- 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 index 55252229..5fda41f9 100644 --- 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%) ); } - } \ No newline at end of file diff --git a/src/scss/cards/_amex.scss b/src/scss/cards/_amex.scss index 53b5597b..44bbfbca 100644 --- 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 index 0c42cbe6..122c6e05 100644 --- 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 index a5a123bf..6c2eaaba 100644 --- 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 index a4c97995..5c17be01 100644 --- 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 index fab57c9f..99a3bcc2 100644 --- 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 index 28bf0683..6c1c4a71 100644 --- 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 index bd9ec511..aba315ca 100644 --- 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 index 784fc39d..58f95543 100644 --- 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 index 6823f598..a6a152b3 100644 --- a/src/scss/logos/_visa.scss +++ b/src/scss/logos/_visa.scss @@ -1,4 +1,4 @@ -@import "_logo"; +@import "logo"; .card-logo.visa { &.visa {