-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/dswp 58 dswp pattern horizontal card image r (#40)
* Added pattern, layout is ready, image needs to flex better * latest * Added dswp-horizontal-card-large-img-left pattern, updated placeholder images. * Added left and right patterns * updated class for flipping * formatted * format 2 * formatting
- Loading branch information
1 parent
d4578ed
commit 743df6b
Showing
14 changed files
with
180 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <?php return array('dependencies' => array(), 'version' => '65f4e6180d31f4d478e3'); | ||
| <?php return array('dependencies' => array(), 'version' => '88c293c1c722021720f4'); |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <?php | ||
| /** | ||
| * Title: DSWP Horizontal Card Large Img - Left | ||
| * Slug: design-system-wordpress-theme/dswp-horizontal-card-large-img-left | ||
| * Categories: text | ||
| * | ||
| * @package Design-System-WordPress-Theme | ||
| */ | ||
| ?> | ||
| <!-- wp:group {"templateLock":false,"lock":{"move":false,"remove":false},"metadata":{"categories":["text"],"patternName":"design-system-wordpress-theme/dswp-horizontal-card","name":"DSWP Horizontal Card Large Img"},"layout":{"type":"constrained"}} --> | ||
| <div class="wp-block-group"><!-- wp:columns {"templateLock":false,"lock":{"move":false,"remove":false},"align":"wide","className":"dswp-horizontal-card-large-img","style":{"border":{"width":"0px","style":"none"}}} --> | ||
| <div class="wp-block-columns alignwide dswp-horizontal-card-large-img" style="border-style:none;border-width:0px"><!-- wp:column {"verticalAlignment":"top","width":"40%","templateLock":false,"lock":{"move":false,"remove":false},"className":"dswp-image-column","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"default"}} --> | ||
| <div class="wp-block-column is-vertically-aligned-top dswp-image-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:40%"><!-- wp:image {"id":15586,"sizeSlug":"full","linkDestination":"none"} --> | ||
| <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-512.png' ); ?>" alt="" /></figure> | ||
| <!-- /wp:image --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
|
|
||
| <!-- wp:column {"verticalAlignment":"stretch","width":"60%","style":{"spacing":{"padding":{"top":"0","bottom":"0","right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"default"}} --> | ||
| <div class="wp-block-column is-vertically-aligned-stretch" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40);flex-basis:60%"><!-- wp:spacer {"height":"1rem"} --> | ||
| <div style="height:1rem" aria-hidden="true" class="wp-block-spacer"></div> | ||
| <!-- /wp:spacer --> | ||
|
|
||
| <!-- wp:heading {"level":5,"className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|typography-primary-color"}}}},"textColor":"typography-primary-color"} --> | ||
| <h5 class="wp-block-heading is-style-default has-typography-primary-color-color has-text-color has-link-color" style="margin-top:0;margin-bottom:0">Neque porro quisquam</h5> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph --> | ||
| <p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:paragraph --> | ||
| <p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:paragraph --> | ||
| <p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:spacer {"height":"20px"} --> | ||
| <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> | ||
| <!-- /wp:spacer --> | ||
|
|
||
| <!-- wp:buttons --> | ||
| <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} --> | ||
| <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Lorem Ipsum</a></div> | ||
| <!-- /wp:button --> | ||
| </div> | ||
| <!-- /wp:buttons --> | ||
|
|
||
| <!-- wp:spacer {"height":"20px"} --> | ||
| <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> | ||
| <!-- /wp:spacer --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
| </div> | ||
| <!-- /wp:columns --> | ||
| </div> | ||
| <!-- /wp:group --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <?php | ||
| /** | ||
| * Title: DSWP Horizontal Card Large Img - Right | ||
| * Slug: design-system-wordpress-theme/dswp-horizontal-card-large-img-right | ||
| * Categories: text | ||
| * | ||
| * @package Design-System-WordPress-Theme | ||
| */ | ||
| ?> | ||
| <!-- wp:group {"templateLock":false,"lock":{"move":false,"remove":false},"metadata":{"categories":["text"],"patternName":"design-system-wordpress-theme/dswp-horizontal-card","name":"DSWP Horizontal Card Large Img"},"layout":{"type":"constrained"}} --> | ||
| <div class="wp-block-group"><!-- wp:columns {"templateLock":false,"lock":{"move":false,"remove":false},"align":"wide","className":"dswp-horizontal-card-large-img dswp-image-stack-reverse","style":{"border":{"width":"0px","style":"none"}}} --> | ||
| <div class="wp-block-columns alignwide dswp-horizontal-card-large-img dswp-image-stack-reverse" style="border-style:none;border-width:0px"><!-- wp:column {"verticalAlignment":"stretch","width":"60%","style":{"spacing":{"padding":{"top":"0","bottom":"0","right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"default"}} --> | ||
| <div class="wp-block-column is-vertically-aligned-stretch" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40);flex-basis:60%"><!-- wp:spacer {"height":"1rem"} --> | ||
| <div style="height:1rem" aria-hidden="true" class="wp-block-spacer"></div> | ||
| <!-- /wp:spacer --> | ||
|
|
||
| <!-- wp:heading {"level":5,"className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|typography-primary-color"}}}},"textColor":"typography-primary-color"} --> | ||
| <h5 class="wp-block-heading is-style-default has-typography-primary-color-color has-text-color has-link-color" style="margin-top:0;margin-bottom:0">Neque porro quisquam</h5> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph --> | ||
| <p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:paragraph --> | ||
| <p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:paragraph --> | ||
| <p>Sed bibendum posuere metus, et tincidunt dui aliquam et. Donec eu dolor elit. Vestibulum sit amet tempor metus, id dignissim turpis. In hac habitasse platea dictumst. Curabitur hendrerit nibh sit amet consectetur tempus. Integer vitae turpis at lorem placerat tempor ac a felis.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:spacer {"height":"20px"} --> | ||
| <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> | ||
| <!-- /wp:spacer --> | ||
|
|
||
| <!-- wp:buttons --> | ||
| <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} --> | ||
| <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Lorem Ipsum</a></div> | ||
| <!-- /wp:button --> | ||
| </div> | ||
| <!-- /wp:buttons --> | ||
|
|
||
| <!-- wp:spacer {"height":"20px"} --> | ||
| <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div> | ||
| <!-- /wp:spacer --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
|
|
||
| <!-- wp:column {"verticalAlignment":"top","width":"40%","templateLock":false,"lock":{"move":false,"remove":false},"className":"dswp-image-column","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"default"}} --> | ||
| <div class="wp-block-column is-vertically-aligned-top dswp-image-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:40%"><!-- wp:image {"id":15586,"sizeSlug":"full","linkDestination":"none"} --> | ||
| <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-512.png' ); ?>" alt="" /></figure> | ||
| <!-- /wp:image --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
| </div> | ||
| <!-- /wp:columns --> | ||
| </div> | ||
| <!-- /wp:group --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| @media (max-width: $break-medium) { | ||
|
|
||
| .dswp-horizontal-card-large-img { | ||
|
|
||
| img { | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| &.dswp-image-stack-reverse { | ||
| flex-wrap: wrap-reverse !important; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .dswp-horizontal-card-large-img { | ||
| transition: box-shadow 0.3s ease-in; | ||
|
|
||
| &:hover { | ||
| transition: box-shadow 0.5s ease-out; | ||
| box-shadow: | ||
| 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.1), | ||
| 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.13); | ||
| } | ||
|
|
||
| gap: 0; | ||
| border-radius: 8px; | ||
| overflow: hidden; | ||
| border: 1px solid var(--dswp-surface-color-border-default) !important; | ||
|
|
||
|
|
||
| .dswp-image-column { | ||
| align-self: inherit; | ||
|
|
||
| figure, | ||
| .components-resizable-box__container { | ||
| display: flex; | ||
| height: 100%; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .components-resizable-box__container { | ||
| flex-shrink: inherit !important; | ||
| display: inherit !important; | ||
| } | ||
|
|
||
| img { | ||
| object-fit: cover; | ||
| } | ||
| } | ||
| } |