Close #2598

- Add $card-radius variable - Default to 0 (no braking change) - Update variables/card.json
jgthms · Sep 19, 2019 · 368f438 · 368f438
1 parent cfcd7d1
commit 368f438
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/docs/_data/variables/components/card.json b/docs/_data/variables/components/card.json
@@ -19,6 +19,11 @@
       "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
       "type": "size"
     },
+    "$card-radius": {
+      "name": "$card-radius",
+      "value": "0",
+      "type": "size"
+    },
     "$card-header-background-color": {
       "name": "$card-header-background-color",
       "value": "transparent",
@@ -98,4 +103,4 @@
     "$card-media-margin"
   ],
   "file_path": "components/card.sass"
-}
+}
diff --git a/sass/components/card.sass b/sass/components/card.sass
@@ -1,6 +1,7 @@
 $card-color: $text !default
 $card-background-color: $white !default
 $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$card-radius: 0 !default
 
 $card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
@@ -23,6 +24,13 @@ $card-media-margin: $block-spacing !default
   color: $card-color
   max-width: 100%
   position: relative
+  border-radius: $card-radius
+  & > :first-child
+    border-top-right-radius: $card-radius
+    border-top-left-radius: $card-radius
+  & > :last-child
+    border-bottom-right-radius: $card-radius
+    border-bottom-left-radius: $card-radius
 
 .card-header
   background-color: $card-header-background-color