New chrome noCard, shadow for cards, padding for positions

joomla · Sep 13, 2020 · 6ad0537 · 6ad0537
1 parent c657ae3
commit 6ad0537
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 2 deletions.
diff --git a/templates/cassiopeia/html/layouts/chromes/noCard.php 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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,8 @@
-// Alerts
+// Cards
+
+.card {
+  box-shadow: $cassiopeia-box-shadow;
+}
 
 .card-grey {
   background-color: $gray-100;