_sass: .card -> %card placeholder selector

kevinlin1 · Jun 30, 2020 · d3dae9f · d3dae9f
1 parent c6c01e3
commit d3dae9f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/_sass/custom/announcement.scss b/_sass/custom/announcement.scss
@@ -1,9 +1,9 @@
 .announcement {
-  @extend .card;
+  @extend %card;
 }
 
 .announcement-body {
-  @extend .card-body;
+  @extend %card-body;
 
   h1, h2, h3, h4, h5, h6 {
     display: flex;
@@ -12,5 +12,5 @@
 }
 
 .announcement-meta {
-  @extend .card-meta, .text-grey-dk-100, .bg-grey-lt-200;
+  @extend %card-meta, .text-grey-dk-100, .bg-grey-lt-200;
 }
diff --git a/_sass/custom/card.scss b/_sass/custom/card.scss
@@ -1,4 +1,4 @@
-.card {
+%card {
   @include abstract-card();
   display: flex;
   flex-direction: column;
@@ -11,20 +11,21 @@
   }
 }
 
-.card-header,
-.card-body {
+%card-header {
   padding: $sp-2 $sp-4;
 
   p {
     margin-bottom: $sp-2;
   }
 }
 
-.card-body {
+%card-body {
+  @extend %card-header;
+
   flex: 1 1 auto;
 }
 
-.card-meta {
+%card-meta {
   @extend .label;
   border-radius: $border-radius;
   padding-bottom: 0;

diff --git a/_sass/custom/module.scss b/_sass/custom/module.scss
@@ -1,5 +1,5 @@
 .module {
-  @extend .card;
+  @extend %card;
 
   .module-days {
     display: grid;
@@ -60,7 +60,7 @@
     }
 
     .label {
-      @extend .card-meta;
+      @extend %card-meta;
       margin-left: 0;
 
       &.label-hw-out {
@@ -79,13 +79,13 @@
 }
 
 .module-meta {
-  @extend .card-meta, .text-grey-dk-100, .bg-grey-lt-200;
+  @extend %card-meta, .text-grey-dk-100, .bg-grey-lt-200;
 }
 
 .module-header {
-  @extend .card-header;
+  @extend %card-header;
 }
 
 .module-body {
-  @extend .card-body;
+  @extend %card-body;
 }