Card-related shortcode style fixes (#1157)

google · Aug 15, 2022 · d4da751 · d4da751
1 parent f8e4409
commit d4da751
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 21 deletions.
diff --git a/assets/scss/shortcodes/cards-pane.scss b/assets/scss/shortcodes/cards-pane.scss
@@ -1,19 +1,25 @@
-.card-deck {
-	@extend .td-max-width-on-larger-screens;
-}
-.card {
-	@extend .td-max-width-on-larger-screens;
-	.highlight {
-		border: none;
-	}
-}
-.card-body.code {
-	background-color: #f8f9fa;
-	padding: 0 0 0 1ex;
-}
-.card-body {
-	pre {
-		margin: 0;
-		padding: 0 1rem 1rem 1rem;
-	}
+.td-card-deck.card-deck {
+  @extend .td-max-width-on-larger-screens;
 }
+
+.td-card {
+  &.card {
+    @extend .td-max-width-on-larger-screens;
+
+    .highlight {
+      border: none;
+    }
+  }
+
+  .card-body {
+    &.code {
+      background-color: #f8f9fa;
+      padding: 0 0 0 1ex;
+    }
+
+    pre {
+      margin: 0;
+      padding: 0 1rem 1rem 1rem;
+    }
+  }
+}
diff --git a/layouts/shortcodes/card-code.html b/layouts/shortcodes/card-code.html
@@ -1,4 +1,4 @@
-<div class="card">
+<div class="td-card card">
   {{ $lang := "" }}
   {{ with $.Get "lang" }}
     {{ $lang = $.Get "lang" }}

diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
@@ -1,4 +1,4 @@
-<div class="card mb-4">
+<div class="td-card card mb-4">
   {{ with $.Get "header" }}
     <div class="card-header">
       {{ if eq $.Page.File.Ext "md" }}

diff --git a/layouts/shortcodes/cardpane.html b/layouts/shortcodes/cardpane.html
@@ -1,3 +1,3 @@
-<div class="card-deck mb-4">
+<div class="td-card-deck card-deck mb-4">
 {{- .Inner -}}
 </div>