From e7c81cb207be9540e9d2740f5c8fec5004d35fdc Mon Sep 17 00:00:00 2001
From: Tetrakern <26898880+Tetrakern@users.noreply.github.com>
Date: Tue, 5 Mar 2024 01:32:46 +0100
Subject: [PATCH] Add chamfered card frame

---
 css/customize/card-frame-chamfered.css       |  1 +
 includes/functions/_customizer.php           |  4 ++++
 src/scss/customize/card-frame-chamfered.scss | 21 ++++++++++++++++++++
 3 files changed, 26 insertions(+)
 create mode 100644 css/customize/card-frame-chamfered.css
 create mode 100644 src/scss/customize/card-frame-chamfered.scss

diff --git a/css/customize/card-frame-chamfered.css b/css/customize/card-frame-chamfered.css
new file mode 100644
index 00000000..e499ed6d
--- /dev/null
+++ b/css/customize/card-frame-chamfered.css
@@ -0,0 +1 @@
+:root:not(.minimal) .card{box-shadow:none}:root:not(.minimal) .card__body{--m: 8px;border-radius:0 !important;clip-path:polygon(0% var(--m), var(--m) 0%, calc(100% - var(--m)) 0%, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0% calc(100% - var(--m)))}
diff --git a/includes/functions/_customizer.php b/includes/functions/_customizer.php
index 52582014..ac2467a2 100644
--- a/includes/functions/_customizer.php
+++ b/includes/functions/_customizer.php
@@ -996,6 +996,10 @@ function fictioneer_build_customize_css( $context = null ) {
     $css .= ':root:not(.minimal) .card{--card-style-border-width: 3px;box-shadow: 0 0 0 var(--card-frame-border-thickness, 3px) var(--card-frame-border-color);}';
   }
 
+  if ( $card_frame === 'chamfered' ) {
+    $css .= fictioneer_get_customizer_css_snippet( 'card-frame-chamfered' );
+  }
+
   // --- Content list style ----------------------------------------------------
 
   if ( $content_list_style === 'full' ) {
diff --git a/src/scss/customize/card-frame-chamfered.scss b/src/scss/customize/card-frame-chamfered.scss
new file mode 100644
index 00000000..23a91892
--- /dev/null
+++ b/src/scss/customize/card-frame-chamfered.scss
@@ -0,0 +1,21 @@
+@import '../common/_functions';
+@import '../common/_mixins';
+
+:root:not(.minimal) .card {
+  box-shadow: none;
+
+  &__body {
+    --m: 8px;
+    border-radius: 0 !important;
+    clip-path: polygon(
+      0% var(--m),
+      var(--m) 0%,
+      calc(100% - var(--m)) 0%,
+      100% var(--m),
+      100% calc(100% - var(--m)),
+      calc(100% - var(--m)) 100%,
+      var(--m) 100%,
+      0% calc(100% - var(--m))
+    );
+  }
+}