From 29da39d96fc46fe17cb3c3145aba4ac0057304c2 Mon Sep 17 00:00:00 2001
From: George Katsikas <giorgakis.katsikas@gmail.com>
Date: Fri, 19 Jul 2024 15:45:56 +0300
Subject: [PATCH] add header card (hcard) styling
---
.../static/scipost/assets/css/_common.scss | 35 +++++++++++++++++++
1 file changed, 35 insertions(+)
diff --git a/scipost_django/scipost/static/scipost/assets/css/_common.scss b/scipost_django/scipost/static/scipost/assets/css/_common.scss
index 19095a4ae..93808d792 100644
--- a/scipost_django/scipost/static/scipost/assets/css/_common.scss
+++ b/scipost_django/scipost/static/scipost/assets/css/_common.scss
@@ -1,3 +1,4 @@
+// HTMX component styling
.htmx-crud-button-actions {
display: flex;
flex-direction: column;
@@ -120,4 +121,38 @@
border-radius: 0.25rem;
}
+}
+
+// HTML bootstrap-like components
+.hcard {
+ --sp-hcard-bg-color: transparent;
+ --sp-hcard-outline-color: #{$body-color};
+
+ border: 1px solid var(--sp-hcard-outline-color);
+
+ >*:first-child {
+ padding: 0.25rem;
+ // It would have been background-color: var(--sp-hcard-bg-color),
+ // but I need components to be separated for the opacity to work
+ background-color: rgba(var(--sp-hcard-bg-color-r), var(--sp-hcard-bg-color-g), var(--sp-hcard-bg-color-b), var(--#{$prefix}bg-opacity, 1));
+
+ >* {
+ margin: 0;
+ }
+ }
+
+ >*:not(:first-child) {
+ margin: 0;
+ padding: 0.25rem 0.5rem 0.5rem 0.5rem;
+ }
+}
+
+@each $color, $value in $theme-colors {
+ .hcard-#{$color} {
+ --sp-hcard-bg-color: #{$value};
+ --sp-hcard-bg-color-r: #{red($value)};
+ --sp-hcard-bg-color-g: #{green($value)};
+ --sp-hcard-bg-color-b: #{blue($value)};
+ --sp-hcard-outline-color: #{$value};
+ }
}
\ No newline at end of file
--
GitLab