From 6ad05373ef4d3c31b5816089450667cd987d6db2 Mon Sep 17 00:00:00 2001
From: Viviana Menzel <vivianamenzel@dr-menzel-it.de>
Date: Sun, 13 Sep 2020 12:38:00 +0200
Subject: [PATCH] New chrome noCard, shadow for cards, padding for positions

---
 .../html/layouts/chromes/noCard.php           | 45 +++++++++++++++++++
 templates/cassiopeia/scss/blocks/_layout.scss |  1 +
 .../cassiopeia/scss/blocks/_modifiers.scss    | 20 +++++++++
 .../scss/tools/variables/_variables.scss      |  2 +-
 .../scss/vendor/bootstrap/_card.scss          |  6 ++-
 5 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 templates/cassiopeia/html/layouts/chromes/noCard.php

diff --git a/templates/cassiopeia/html/layouts/chromes/noCard.php b/templates/cassiopeia/html/layouts/chromes/noCard.php
new file mode 100644
index 0000000000000..36e427edbd6d4
--- /dev/null
+++ b/templates/cassiopeia/html/layouts/chromes/noCard.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * @package     Joomla.Site
+ * @subpackage  Templates.cassiopeia
+ *
+ * @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\Utilities\ArrayHelper;
+
+$module  = $displayData['module'];
+$params  = $displayData['params'];
+$attribs = $displayData['attribs'];
+
+if ($module->content === null || $module->content === '')
+{
+	return;
+}
+
+$moduleTag              = $params->get('module_tag', 'div');
+$moduleAttribs          = [];
+$moduleAttribs['class'] = $module->position . ' no-card ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8');
+$headerTag              = htmlspecialchars($params->get('header_tag', 'h4'), ENT_QUOTES, 'UTF-8');
+$headerClass            = htmlspecialchars($params->get('header_class', ''), ENT_QUOTES, 'UTF-8');
+$headerAttribs          = [];
+$headerAttribs['class'] = $headerClass;
+
+if ($module->showtitle) :
+	$moduleAttribs['aria-labelledby'] = 'mod-' . $module->id;
+	$headerAttribs['id']             = 'mod-' . $module->id;
+else:
+	$moduleAttribs['aria-label'] = $module->title;
+endif;
+
+$header = '<' . $headerTag . ' ' . ArrayHelper::toString($headerAttribs) . '>' . $module->title . '</' . $headerTag . '>';
+?>
+<<?php echo $moduleTag; ?> <?php echo ArrayHelper::toString($moduleAttribs); ?>>
+	<?php if ($module->showtitle) : ?>
+		<?php echo $header; ?>
+	<?php endif; ?>
+	<?php echo $module->content; ?>
+</<?php echo $moduleTag; ?>>
diff --git a/templates/cassiopeia/scss/blocks/_layout.scss b/templates/cassiopeia/scss/blocks/_layout.scss
index 3cbe35afe6182..19193663df028 100644
--- a/templates/cassiopeia/scss/blocks/_layout.scss
+++ b/templates/cassiopeia/scss/blocks/_layout.scss
@@ -31,6 +31,7 @@
 .container-top-b,
 .container-bottom-a,
 .container-bottom-b {
+  padding: 4rem 0;
   > * {
     flex: 1;
     margin: ($cassiopeia-grid-gutter / 2);
diff --git a/templates/cassiopeia/scss/blocks/_modifiers.scss b/templates/cassiopeia/scss/blocks/_modifiers.scss
index 4e394e7312f32..3be284e7dab77 100644
--- a/templates/cassiopeia/scss/blocks/_modifiers.scss
+++ b/templates/cassiopeia/scss/blocks/_modifiers.scss
@@ -251,3 +251,23 @@
     }
   }
 }
+
+// Modules
+
+.no-card {
+  .newsflash-horiz {
+    li {
+      padding: 0 1rem 1rem;
+      border: 1px solid $gray-300;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      @include border-bottom-left-radius($border-radius);
+      @include border-bottom-right-radius($border-radius);
+      box-shadow: $cassiopeia-box-shadow;
+
+      figure {
+        margin: 0 -1rem 1rem;
+      }
+    }
+  }
+}
diff --git a/templates/cassiopeia/scss/tools/variables/_variables.scss b/templates/cassiopeia/scss/tools/variables/_variables.scss
index 5fccc8200fb51..f72225158478f 100644
--- a/templates/cassiopeia/scss/tools/variables/_variables.scss
+++ b/templates/cassiopeia/scss/tools/variables/_variables.scss
@@ -1,7 +1,7 @@
 // Global
 $cassiopeia-container-main-bg:        hsl(0, 0%, 95%) !default;
 $cassiopeia-border-color:             hsl(210, 14%, 89%) !default;
-$cassiopeia-box-shadow:               0 0 3px hsla(0, 0%, 0%, .04) !default;
+$cassiopeia-box-shadow:               1px 1px 4px hsla(0, 0%, 0%, .1) !default;
 $cassiopeia-block-header-bg:          hsl(0, 0%, 96%) !default;
 $cassiopeia-header-grad:              linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);
 
diff --git a/templates/cassiopeia/scss/vendor/bootstrap/_card.scss b/templates/cassiopeia/scss/vendor/bootstrap/_card.scss
index a5475660beb94..cd4e44140fdee 100644
--- a/templates/cassiopeia/scss/vendor/bootstrap/_card.scss
+++ b/templates/cassiopeia/scss/vendor/bootstrap/_card.scss
@@ -1,4 +1,8 @@
-// Alerts
+// Cards
+
+.card {
+  box-shadow: $cassiopeia-box-shadow;
+}
 
 .card-grey {
   background-color: $gray-100;