Add Popup Shadow Style

templaza · Aug 12, 2024 · b08bba6 · b08bba6
1 parent 27fa130
commit b08bba6
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 4 deletions.
diff --git a/assets/vendor/astroid/scss/_menu.scss b/assets/vendor/astroid/scss/_menu.scss
@@ -274,7 +274,7 @@ ul {
 	li {
 		display: block;
 		width: 100%;
-		margin: 10px 0;
+		margin: 5px 0;
 		.nav-item-inner {
 			border-radius: var(--bs-border-radius);
 		}

diff --git a/assets/vendor/astroid/scss/_mixins.scss b/assets/vendor/astroid/scss/_mixins.scss
@@ -130,4 +130,22 @@
       top: 50%;
       left: 50%;
    }
+}
+
+@mixin box-hover-shadow-content($color: null) {
+   transform: translate(-0.5em, -0.5em);
+   box-shadow: 0.5em 0.5em 0 $color;
+}
+
+@mixin box-hover-shadow($color: $primary, $object: null) {
+   @if $object {
+      #{$object} {
+         transition: all 400ms;
+         &:hover {
+            @include box-hover-shadow-content($color);
+         }
+      }
+   } @else {
+      @include box-hover-shadow-content($color);
+   }
 }
diff --git a/assets/vendor/astroid/scss/utilities/_box-shadow.scss b/assets/vendor/astroid/scss/utilities/_box-shadow.scss
@@ -10,4 +10,11 @@
       transition: box-shadow 0.1s ease-in-out;
     }
   }
+}
+
+.shadow-hover-popout {
+  transition: all 400ms;
+  &:hover {
+    @include box-hover-shadow();
+  }
 }
diff --git a/assets/vendor/astroid/scss/utilities/_typography.scss b/assets/vendor/astroid/scss/utilities/_typography.scss
@@ -0,0 +1,3 @@
+.text-small {
+  font-size: $font-size-sm;
+}
diff --git a/assets/vendor/astroid/scss/utilities/_utilities.scss b/assets/vendor/astroid/scss/utilities/_utilities.scss
@@ -1,3 +1,4 @@
+@import "typography";
 @import "width";
 @import "gutters";
 @import "columns";

diff --git a/framework/elements/articles/articles.php b/framework/elements/articles/articles.php
@@ -152,6 +152,11 @@
 $card_style         =   $params->get('card_style', '');
 $card_style         =   $card_style ? ' text-bg-' . $card_style : '';
 
+$box_shadow         =   $params->get('card_box_shadow', '');
+$box_shadow         =   $box_shadow ? ' ' . $box_shadow : '';
+$box_shadow_hover   =   $params->get('card_box_shadow_hover', '');
+$box_shadow         .=  $box_shadow_hover ? ' ' . $box_shadow_hover : '';
+
 $card_size          =   $params->get('card_size', '');
 $card_size          =   $card_size ? ' card-size-' . $card_size : '';
 
@@ -232,7 +237,6 @@
 $button_radius      =   $button_radius ? ' ' . $button_radius : '';
 
 $has_gallery        =   false;
-echo '<div class="overflow-hidden">';
 echo '<div class="'.($enable_slider ? 'astroid-slick opacity-0' : $row_column_cls).$gutter_cls.$text_color_mode.'">';
 foreach ($items as $key => $item) {
     $link           =   RouteHelper::getArticleRoute($item->slug, $item->catid, $item->language);
@@ -296,7 +300,7 @@
     if ($item_image_cover && ($item->post_format !== 'video' || $video_type !== 'local')) {
         $media  =   '<a href="'.Route::_($link).'" title="'. $item->title . '"><div class="as-image-cover d-block overflow-hidden'.($layout == 'overlay' ? ' astroid-image-overlay-cover' : '').$img_border_radius.'"><img class="object-fit-cover w-100 h-100" src="'. $item->image_thumbnail .'" alt="'.$item->title.'"></div></a>';
     }
-    echo '<div class="astroid-article-item astroid-grid '.$item->post_format.'"><div class="card overflow-hidden' . $card_style . $bd_radius . ($enable_grid_match ? ' h-100' : '') . '">';
+    echo '<div class="astroid-article-item astroid-grid '.$item->post_format.'"><div class="card overflow-hidden' . $card_style . $box_shadow . $bd_radius . ($enable_grid_match ? ' h-100' : '') . '">';
     if (($media_position == 'left' || $media_position == 'right') && !$item_image_cover && $layout == 'classic') {
         echo '<div class="row g-0">';
         echo '<div class="'.$media_width_cls.'">';
@@ -362,7 +366,6 @@
     echo '</div></div>';
 }
 echo '</div>';
-echo '</div>';
 $mainframe = Factory::getApplication();
 $wa = $mainframe->getDocument()->getWebAssetManager();
 if ($has_gallery) {

diff --git a/framework/elements/articles/articles.xml b/framework/elements/articles/articles.xml
@@ -324,6 +324,21 @@
                     <option value="as-light">ASTROID_WIDGET_LIGHT_COLOR</option>
                     <option value="as-dark">ASTROID_WIDGET_DARK_COLOR</option>
                 </field>
+                <field astroidgroup="card_options" name="card_box_shadow" type="astroidlist" label="ASTROID_WIDGET_BOX_SHADOW_LABEL" default="">
+                    <option value="">TPL_ASTROID_DEFAULT</option>
+                    <option value="shadow-none">ASTROID_WIDGET_SHADOW_NONE</option>
+                    <option value="shadow-sm">ASTROID_WIDGET_SHADOW_SMALL</option>
+                    <option value="shadow">ASTROID_WIDGET_SHADOW_REGULAR</option>
+                    <option value="shadow-lg">ASTROID_WIDGET_SHADOW_LARGE</option>
+                </field>
+                <field astroidgroup="card_options" name="card_box_shadow_hover" type="astroidlist" label="ASTROID_WIDGET_BOX_SHADOW_HOVER_LABEL" default="">
+                    <option value="">TPL_ASTROID_DEFAULT</option>
+                    <option value="shadow-hover-none">ASTROID_WIDGET_SHADOW_NONE</option>
+                    <option value="shadow-hover-sm">ASTROID_WIDGET_SHADOW_SMALL</option>
+                    <option value="shadow-hover">ASTROID_WIDGET_SHADOW_REGULAR</option>
+                    <option value="shadow-hover-lg">ASTROID_WIDGET_SHADOW_LARGE</option>
+                    <option value="shadow-hover-popout">ASTROID_WIDGET_SHADOW_POPUP</option>
+                </field>
                 <field astroidgroup="image_options" name="layout" type="astroidlist" label="ASTROID_WIDGET_CHOOSE_LAYOUT_LABEL" default="classic">
                     <option value="classic">ASTROID_WIDGET_LAYOUT_CLASSIC_LABEL</option>
                     <option value="overlay">ASTROID_WIDGET_LAYOUT_IMG_OVERLAY_LABEL</option>

diff --git a/framework/elements/grid/grid.xml b/framework/elements/grid/grid.xml
@@ -400,6 +400,7 @@
                     <option value="shadow-hover-sm">ASTROID_WIDGET_SHADOW_SMALL</option>
                     <option value="shadow-hover">ASTROID_WIDGET_SHADOW_REGULAR</option>
                     <option value="shadow-hover-lg">ASTROID_WIDGET_SHADOW_LARGE</option>
+                    <option value="shadow-hover-popout">ASTROID_WIDGET_SHADOW_POPUP</option>
                 </field>
                 <field astroidgroup="icon_options" name="icon_size" type="astroidrange" min="1" max="300" step="1" default="60" label="TPL_ASTROID_BASIC_ICON_SIZE_LABEL" postfix="px" />
                 <field astroidgroup="icon_options" name="icon_color" type="astroidcolor" label="TPL_ASTROID_COLOR" />

diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -1222,6 +1222,7 @@ ASTROID_WIDGET_SHADOW_NONE="No Shadow"
 ASTROID_WIDGET_SHADOW_SMALL="Small Shadow"
 ASTROID_WIDGET_SHADOW_REGULAR="Regular Shadow"
 ASTROID_WIDGET_SHADOW_LARGE="Large Shadow"
+ASTROID_WIDGET_SHADOW_POPUP="Popup Shadow"
 ASTROID_WIDGET_HOVER_EFFECT_LABEL="Hover Effect"
 ASTROID_WIDGET_EFFECT_LIGHT_UP="Light Up"
 ASTROID_WIDGET_EFFECT_FLASH="Flash"