Skip to content
Snippets Groups Projects
Commit 860c7281 authored by Stew West's avatar Stew West
Browse files

Issue #3416580: Style Teaser displays for Page Content type Menu Children cards and list

parent 6bedf37e
No related branches found
No related tags found
1 merge request!5Issue #3416580: Style Teaser displays for Page Content type Menu Children cards
Showing
with 134 additions and 40 deletions
......@@ -29,6 +29,7 @@
'node__content'
]|merge(content_classes ? content_classes : [])
%}
<article{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{{ title_suffix }}
......@@ -59,6 +60,7 @@
</div>
{% endblock %}
</article>
{% if libraries %}
{% for library in libraries %}
{{ attach_library(library) }}
......
......@@ -20,6 +20,7 @@ export default [
'{screens}:py-{padding}',
'px-{padding}',
'pt-{padding}',
'pb-{padding}',
'{screens}:pt-{padding}',
'bg-{textColor}',
'text-{textColor}',
......@@ -28,6 +29,8 @@ export default [
'subpixel-antialiased',
'border-t',
'border-t-{borderColor}',
'border-b',
'border-b-{borderColor}',
'font-{fontWeight}',
'leading-{lineHeight}',
'list-{listStyleType}',
......
......@@ -20,4 +20,4 @@ props:
slots:
content:
title: Card content
\ No newline at end of file
title: Card content
.\@container\/block-content{height:100%}.card .title *{padding-bottom:0.5rem;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1.25rem;line-height:1.75rem;font-weight:700;letter-spacing:-0.025em}@media (min-width: 768px){.card .title *{font-size:1.5rem;line-height:2rem}}.card--standard{content:none}.card--standard .field--type-image{--field-display: inline-block}.card--standard .field-group-link{display:block;padding:1.25rem}.card--large{content:none}.card--large .title *,.card--large .field--name-body{padding-left:1.25rem;padding-right:1.25rem}.card--large .field--name-body{padding-bottom:1.25rem}.card--large .title *{padding-top:1.25rem}.card--large .field--name-field-teaser-image{position:relative;display:block;aspect-ratio:auto;overflow:hidden;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}@media (min-width: 1024px){.card--large .field--name-field-teaser-image{aspect-ratio:21/10}}.card--large .field--name-field-teaser-image img{position:relative;display:block;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}@media (min-width: 1024px){.card--large .field--name-field-teaser-image img{transform:translateY(-15%)}.card--large:hover .field--name-field-teaser-image img,.card--large:focus .field--name-field-teaser-image img,.card--large:focus-visible .field--name-field-teaser-image img{transform:translateY(-15%)}@media(prefers-reduced-motion: no-preference){.card--large:hover .field--name-field-teaser-image img,.card--large:focus .field--name-field-teaser-image img,.card--large:focus-visible .field--name-field-teaser-image img{scale:1.04}}}
.\@container\/block-content {
@apply h-full
}
.card {
.title * {
@apply text-xl md:text-2xl font-sans font-bold tracking-tight pb-2;
}
}
.card--standard {
content: none;
.field--type-image {
--field-display: inline-block;
}
.field-group-link {
@apply p-5 block;
}
}
.card--large {
content: none;
.title *,
.field--name-body {
@apply px-5;
}
.field--name-body {
@apply pb-5;
}
.title * {
@apply pt-5;
}
.field--name-field-teaser-image {
@apply block relative aspect-auto overflow-hidden lg:aspect-[21/10] rounded-t-lg;
img {
@apply block relative transition-all duration-300;
@screen lg {
transform: translateY(-15%);
}
}
}
&:hover,
&:focus,
&:focus-visible {
.field--name-field-teaser-image {
img {
@screen lg {
transform: translateY(-15%);
@media (prefers-reduced-motion: no-preference) {
scale: 1.04;
}
}
}
}
}
}
{% extends 'sector_theme:node' %}
\ No newline at end of file
{% set tpl = 'sector_theme:' ~ entity|default('node') %}
{% extends tpl %}
......@@ -12,7 +12,7 @@
*/
#}
<div class="@container/card h-full">
{{ include("sector_demo:card-standard", {
{{ include("sector_demo:card", {
entity: 'block-content',
attributes: region_attributes.content,
libraries: ['sector_demo/' ~ node.bundle|clean_class ~ '--' ~ view_mode|clean_class ],
......
......@@ -5,24 +5,26 @@
*/
#}
<div class="@container/card">
{{ include("sector_demo:card-standard", {
{{ include("sector_demo:card", {
entity: 'node',
libraries: ['sector_demo/' ~ node.bundle|clean_class ~ '--' ~ view_mode|clean_class ],
title_classes: [ 'text-xl', 'md:text-2xl', 'font-sans', 'font-black', 'tracking-tight', 'bg-transparent', 'px-4 py-5 sm:px-6' ],
title_link_attributes: title_link_attributes.setAttribute('rel', 'bookmark'),
title_link_classes: ['hover:text-sky-700', 'focus-visible:text-ss-primary'],
libraries: [
'sector_demo/' ~ node.bundle|clean_class ~ '--' ~ view_mode|clean_class
],
utility_classes: [
'block',
'card',
'card--standard',
'overflow-hidden',
'bg-white',
'rounded-lg',
'shadow',
'dark:bg-gray-800',
'dark:text-white'
'dark:text-white',
'group',
'pseudo-link',
'hover:cursor-pointer'
],
content_classes: [
'px-4 pb-5 sm:p-6 sm:pt-0'
]
'p-5 has-[.field-group-link]:p-0'
],
})}}
</div>
{#
/**
* @file
* Template for a Node.
*/
#}
<div class="@container/card">
{{ include("sector_demo:card", {
entity: 'node',
libraries: [
'sector_demo/' ~ node.bundle|clean_class ~ '--' ~ view_mode|clean_class
],
utility_classes: [
'block',
'card',
'card--large',
'bg-white',
'rounded-lg',
'shadow',
'dark:bg-gray-800',
'dark:text-white',
'group',
'pseudo-link',
'hover:cursor-pointer'
],
content_classes: [],
})}}
</div>
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json'
name: Card - Standard
status: stable
libraryDependencies:
- core/once
props:
type: object
properties:
label_display:
type: string
title: Show label
utility_classes:
type: array
title: Utility classes
title_attributes:
type: Drupal\Core\Template\Attribute
attributes:
type: Drupal\Core\Template\Attribute
slots:
content:
title: Card content
\ No newline at end of file
.\@container\/block-content{height:100%}.card--standard{content:none}.card--standard .field--type-image{--field-display: inline-block}
\ No newline at end of file
.\@container\/block-content {
@apply h-full
}
.card--standard {
content: none;
.field--type-image {
--field-display: inline-block;
}
}
{% set tpl = 'sector_theme:' ~ entity|default('node') %}
{% extends tpl %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment