diff --git a/src/addons/card/_separator.less b/src/addons/card/_separator.less new file mode 100644 index 00000000000..8e0be622eba --- /dev/null +++ b/src/addons/card/_separator.less @@ -0,0 +1,39 @@ + +/** + * card-separator + */ + +// generate + +& when not (@generate-card-group = false) { + + // generate-card-horizontal-responsive + + .generate-card-horizontal-responsive(); + .generate-card-horizontal-responsive(@i: length(@generate-card-group)) when (@i > 0) { + .generate-card-horizontal-responsive(@i - 1); + @breakpoint: extract(@generate-card-group, @i); + & when (@breakpoint = none) { + .card-separator { + .card-group { + &.card-item-nested { + .card-separator-vertical() !important; + } + } + } + } + & when not (@breakpoint = none) { + @query-min: 'min-@{breakpoint}'; + @media @@query-min { + .card-separator { + .card-group-@{breakpoint} { + &.card-item-nested { + .card-separator-vertical() !important; + } + } + } + } + } + } + +} diff --git a/src/addons/card/collapse.less b/src/addons/card/collapse.less index 74bed534ae6..8aa7b88ac92 100644 --- a/src/addons/card/collapse.less +++ b/src/addons/card/collapse.less @@ -3,44 +3,42 @@ */ .card-collapse { - .card-contents({ - > .card-item { - padding: 0 !important; - } - }); + .card-item { + padding: 0 !important; + } } // size .card-small { &.card-collapse { - > .card-inner > .card-content { + .card-content { padding: 1.5rem 2rem; } - .card-contents({ + .card-content, .card-item-nested { .list-space(small); - }); + } } } .card-medium { &.card-collapse { - > .card-inner > .card-content { + .card-content { padding: 2rem 2.5rem; } - .card-contents({ + .card-content, .card-item-nested { .list-space(medium); - }); + } } } .card-large { &.card-collapse { - > .card-inner > .card-content { + .card-content { padding: 3rem 3.5rem; } - .card-contents({ + .card-content, .card-item-nested { .list-space(large); - }); + } } } diff --git a/src/addons/card/full.less b/src/addons/card/full.less index 8f252b6c35a..cf1f314b54d 100644 --- a/src/addons/card/full.less +++ b/src/addons/card/full.less @@ -4,12 +4,12 @@ .card { &.card-full { - > .card-inner > .card-content { + .card-content { padding: 0 !important; } // variant .text-default(); - > .card-design { + .card-design { border-color: transparent; background: transparent; } @@ -20,7 +20,7 @@ .card-small { &.card-full { - > .card-design { + .card-design { top: -1.5rem; left: -2rem; bottom: -1.5rem; @@ -31,7 +31,7 @@ .card-medium { &.card-full { - > .card-design { + .card-design { top: -2rem; left: -2.5rem; bottom: -2rem; @@ -42,7 +42,7 @@ .card-large { &.card-full { - > .card-design { + .card-design { top: -3rem; left: -3.5rem; bottom: -3rem; diff --git a/src/addons/card/interactive.less b/src/addons/card/interactive.less index 14855356f3a..77dfcf47eb7 100644 --- a/src/addons/card/interactive.less +++ b/src/addons/card/interactive.less @@ -7,16 +7,16 @@ a.card-default, label.card-default { &:hover, &.hover { color: @text-dark; - > .card-design { + .card-design { border-color: @shade-200; - background: @white; + background: @shade-200; } } &:active, &.active { color: @text-dark; - > .card-design { - border-color: @shade-200; - background: @shade-200; + .card-design { + border-color: @shade-200-dark; + background: @shade-200-dark; } } } @@ -24,14 +24,14 @@ a.card-default, label.card-default { a.card-primary, label.card-primary { &:hover, &.hover { color: @text-inverse-dark; - > .card-design { - border-color: @accent-dark; + .card-design { + border-color: @accent; background: @accent; } } &:active, &.active { color: @text-inverse-dark; - > .card-design { + .card-design { border-color: @accent-dark; background: @accent-dark; } @@ -41,16 +41,16 @@ a.card-primary, label.card-primary { // animation a.card, label.card { - > .card-design { + .card-design { transition: all @time-small @ease-out; } &:hover, &.hover { - > .card-design { + .card-design { transition: all @time-small @ease-in; } } &:active, &.active { - > .card-design { + .card-design { transition: all @time-small @ease-in; } } diff --git a/src/addons/card/separator.less b/src/addons/card/separator.less index 005ebbb939d..8c32167b680 100644 --- a/src/addons/card/separator.less +++ b/src/addons/card/separator.less @@ -1,40 +1,46 @@ +@import 'xtend-library/src/addons/card/_separator.less'; + /** * card-separator */ .card { &.card-separator { - > .card-inner > .card-content { - > .card-item { - & + .card-item { - &:before { - content: ''; - position: absolute; - top: 0; - bottom: auto; - left: 0; - right: 0; - width: auto; - height: 1px; - } - } + .card-item + .card-item, + .card-item + .card-asset, + .card-item + .card-content, + .card-asset + .card-asset, + .card-asset + .card-item, + .card-asset + .card-content, + .card-content + .card-content, + .card-content + .card-item, + .card-content + .card-asset { + &:before { + content: ''; + z-index: @index-active + 1; + position: absolute; + top: 0; + bottom: auto; + left: 0; + right: 0; + width: auto; + height: 1px; } } - > .card-inner > .card-content > .card-item-nested { - > .card-item { - & + .card-item { - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: auto; - width: 1px; - height: auto; - } - } - } + } +} + +.card-separator-vertical { + .card-item + .card-item, + .card-asset + .card-item, + .card-item + .card-asset { + &:before { + top: 0; + left: 0; + bottom: 0; + right: auto; + width: 1px; + height: auto; } } } @@ -43,49 +49,44 @@ .card-default { &.card-separator { - .card-contents({ - > .card-item { - & + .card-item { - &:before { - background: fade(@shade-900, 10%); - } - } + .card-item + .card-item, + .card-item + .card-asset, + .card-item + .card-content, + .card-asset + .card-asset, + .card-asset + .card-item, + .card-asset + .card-content, + .card-content + .card-content, + .card-content + .card-item, + .card-content + .card-asset { + &:before { + background: fade(@shade-900, 10%); } - }); + } } } .card-primary { &.card-separator { - .card-contents({ - > .card-item { - & + .card-item { - &:before { - background: fade(@shade-200, 10%); - } - } + .card-item + .card-item, + .card-item + .card-asset, + .card-item + .card-content, + .card-asset + .card-asset, + .card-asset + .card-item, + .card-asset + .card-content, + .card-content + .card-content, + .card-content + .card-item, + .card-content + .card-asset { + &:before { + background: fade(@shade-200, 10%); } - }); + } } } // special -.card-group, .card-horizontal { +.card-horizontal { &.card-separator { - .card-contents({ - > .card-item { - & + .card-item { - &:before { - top: 0; - left: 0; - bottom: 0; - right: auto; - width: 1px; - height: auto; - } - } - } - }); + .card-separator-vertical(); } } diff --git a/src/core/card/_card.less b/src/core/card/_card.less index 6ade9b8afac..c324d585ca7 100644 --- a/src/core/card/_card.less +++ b/src/core/card/_card.less @@ -21,11 +21,12 @@ a.card, label.card { .card-inner { .full(); - height: initial; + min-height: 100%; // @FIX full height and card-block empty spaces display: flex; flex-direction: column; - > .card-content { + .card-content { + position: relative; display: flex; flex-direction: column; width: 100%; @@ -44,14 +45,11 @@ a.card, label.card { border-bottom-right-radius: inherit; } } - &, & > .card-content { + &, .card-content { border-radius: inherit; } } -.card-block { -} - .card-design { .design-setup(); border-radius: inherit; @@ -62,8 +60,12 @@ a.card, label.card { position: relative; } +.card-block { + display: flex; + flex-direction: column; +} + .card-asset { - .flex-full(); overflow: hidden; position: relative; > * { @@ -72,14 +74,6 @@ a.card, label.card { } } -// selectors - -.card-contents(@rules) { - > .card-inner > .card-content, > .card-inner > .card-content > .card-item-nested { - @rules(); - } -} - // special .card-group { @@ -92,7 +86,7 @@ a.card, label.card { } .card-horizontal { - > .card-inner > .card-content { + .card-content { flex-direction: row; flex-wrap: nowrap; align-items: stretch; @@ -108,6 +102,7 @@ a.card, label.card { } } .card-asset { + .flex-full(); > * { width: 100%; height: 100%; diff --git a/src/core/card/card.less b/src/core/card/card.less index 044a6fe64e6..497fb433175 100644 --- a/src/core/card/card.less +++ b/src/core/card/card.less @@ -15,7 +15,7 @@ .card { border-radius: 6px; - > .card-design { + .card-design { border-width: 1px; border-style: solid; border-color: transparent; @@ -54,12 +54,8 @@ .card-slide { // default options - color: @text; - > .card-design { - border-color: @shade-200; - background: @shade-200; - } - > .card-inner > .card-content { + .card-default(); + .card-content { text-align: center; } } @@ -68,27 +64,35 @@ .card-default { .text-default(); - > .card-design { - border-color: @white; - background: @white; + .card-design { + border-color: @shade-200; + background: @shade-200; } } .card-primary { .text-inverse(); - > .card-design { + .card-design { border-color: @accent; background: @accent; } } +.card-white { + .text-default(); + .card-design { + border-color: @white; + background: @white; + } +} + // size .card-small { .card-block { .font-small(); .line-height-medium(); - padding: 2em 2.5em; + padding: 2em; .card-title { .h4(); .spacing-tiny(); @@ -100,7 +104,7 @@ .card-block { .font-medium(); .line-height-medium(); - padding: 2em 2.5em; + padding: 2.25em; .card-title { .h3(); .spacing-small(); @@ -112,7 +116,7 @@ .card-block { .font-big(); .line-height-medium(); - padding: 2em 2.5em; + padding: 2.5em; .card-title { .h2(); .spacing-medium(); @@ -123,7 +127,7 @@ // special .card-nodesign { - > .card-design { + .card-design { display: none; } } @@ -133,7 +137,7 @@ } .card-noborder { - > .card-design { + .card-design { border: 0; } } diff --git a/src/core/overlay/_overlay.less b/src/core/overlay/_overlay.less index 636154a2c9c..369514eac16 100644 --- a/src/core/overlay/_overlay.less +++ b/src/core/overlay/_overlay.less @@ -58,7 +58,7 @@ flex-direction: column; max-width: none !important; } - .card-overlay > .card-inner { + .card-overlay .card-inner { align-items: center; } } @@ -127,7 +127,7 @@ display: none !important; } } - .overlay-inner, .card-overlay > .card-inner > .card-content { + .overlay-inner, .card-overlay .card-content { max-width: none; } } diff --git a/src/core/overlay/overlay.js b/src/core/overlay/overlay.js index bd0e879c472..148bafb4970 100644 --- a/src/core/overlay/overlay.js +++ b/src/core/overlay/overlay.js @@ -63,7 +63,7 @@ Overlay.optionsDefault = { min: 0, max: 1, class: 'active active-overlay', - eventLimit: '.event-limit, .card-overlay > .card-inner > .card-content', + eventLimit: '.event-limit, .card-overlay .card-content', autoClose: true, appendTo: 'body', backdrop: true, diff --git a/src/core/overlay/overlay.less b/src/core/overlay/overlay.less index 151287a19a8..55b003b921e 100644 --- a/src/core/overlay/overlay.less +++ b/src/core/overlay/overlay.less @@ -115,37 +115,37 @@ // size .overlay-size-tiny { - .overlay-inner, .card-overlay > .card-inner > .card-content { + .overlay-inner, .card-overlay .card-content { max-width: 500px; } } .overlay-size-small { - .overlay-inner, .card-overlay > .card-inner > .card-content { + .overlay-inner, .card-overlay .card-content { max-width: 700px; } } .overlay-size-medium { - .overlay-inner, .card-overlay > .card-inner > .card-content { + .overlay-inner, .card-overlay .card-content { max-width: 900px; } } .overlay-size-large { - .overlay-inner, .card-overlay > .card-inner > .card-content { + .overlay-inner, .card-overlay .card-content { max-width: 1200px; } } .overlay-size-big { - .overlay-inner, .card-overlay > .card-inner > .card-content { + .overlay-inner, .card-overlay .card-content { max-width: 1600px; } } .overlay-size-full { - .overlay-inner, .card-overlay > .card-inner > .card-content { + .overlay-inner, .card-overlay .card-content { max-width: none; } } @@ -217,12 +217,10 @@ .overlay-disable { // disable animation .card-overlay { - > .card-inner { - > .card-block, > .card-content { - opacity: 1 !important; - .transform-none() !important; - .trans-anim-none() !important; - } + .card-block, .card-content { + opacity: 1 !important; + .transform-none() !important; + .trans-anim-none() !important; } } } @@ -237,10 +235,8 @@ > .btn-close { opacity: 0; } - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - } + .card-block, .card-content { + opacity: 0; } } &.in { @@ -255,11 +251,9 @@ .anim-zoom.in(); animation-delay: @time-medium; } - > .card-inner { - > .card-block, > .card-content { - opacity: 1; - transition: opacity @time-medium @ease-in @time-tiny; - } + .card-block, .card-content { + opacity: 1; + transition: opacity @time-medium @ease-in @time-tiny; } } > .backdrop { @@ -278,11 +272,9 @@ .anim-zoom.out(); animation-delay: initial; } - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transition: opacity @time-small @ease-out; - } + .card-block, .card-content { + opacity: 0; + transition: opacity @time-small @ease-out; } } > .backdrop { diff --git a/src/gatsby/assets/styles/_main.less b/src/gatsby/assets/styles/_main.less index de20b7d1c75..f213b974b01 100644 --- a/src/gatsby/assets/styles/_main.less +++ b/src/gatsby/assets/styles/_main.less @@ -193,12 +193,12 @@ // interactive a&, label& { &:hover, &.hover { - > .card-design { + .card-design { box-shadow: @shadow-accent; } } &:active, &.active { - > .card-design { + .card-design { box-shadow: none; } } @@ -206,20 +206,20 @@ // animation a&, label& { transition: all @time-small @ease-out; - > .card-design { + .card-design { transition: all @time-small @ease-out; } &:hover, &.hover { transform: translateY(-.5rem); transition: all @time-small @ease-in; - > .card-design { + .card-design { transition: all @time-small @ease-in; } } &:active, &.active { transform: none; transition: all @time-small @ease-in; - > .card-design { + .card-design { transition: all @time-small @ease-in; } } diff --git a/src/gatsby/code/iframe/themes/card/fashion-listing-v2.js b/src/gatsby/code/iframe/themes/card/fashion-listing-v2.js index da28b305371..6944e6f2b47 100644 --- a/src/gatsby/code/iframe/themes/card/fashion-listing-v2.js +++ b/src/gatsby/code/iframe/themes/card/fashion-listing-v2.js @@ -25,49 +25,59 @@ demo.htmlSource = `
-
-
- ${img({})} -
-
-
- Lorem Ipsum -
-
- Street lorem ipsum 42, 00134 City, Nation -
-
- - Take me here - - +
+
+
+
+
+ ${img({})} +
+
+
+ Lorem Ipsum +
+
+ Street lorem ipsum 42, 00134 City, Nation +
+
+ + Take me here + + +
+
-
+
+
-
-
- Contacts -
-
- Email: info@info.com
- Phone: 333 010101
-
-
- Timetable -
-
- Monday: 15:30–19:30
- Tuesday: 10:00–13:00, 15:30–19:30
- Wednesday: 10:00–13:00, 15:30–19:30
- Thursday: 10:00–13:00, 15:30–19:30
- Friday: 10:00–13:00, 15:30–19:30
- Saturday: 10:00–19:30
- Sunday: 10:00–13:00, 15:30–19:30 +
+
+
+
+ Contacts +
+
+ Email: info@info.com
+ Phone: 333 010101
+
+
+ Timetable +
+
+ Monday: 15:30–19:30
+ Tuesday: 10:00–13:00, 15:30–19:30
+ Wednesday: 10:00–13:00, 15:30–19:30
+ Thursday: 10:00–13:00, 15:30–19:30
+ Friday: 10:00–13:00, 15:30–19:30
+ Saturday: 10:00–19:30
+ Sunday: 10:00–13:00, 15:30–19:30 +
+
@@ -80,49 +90,59 @@ demo.htmlSource = `
-
-
- ${imgAlt({})} -
-
-
- Dolor sit amet -
-
- Street lorem ipsum 42, 00134 City, Nation -
-
- - Take me here - - +
+
+
+
+
+ ${imgAlt({})} +
+
+
+ Dolor sit amet +
+
+ Street lorem ipsum 42, 00134 City, Nation +
+
+ + Take me here + + +
+
-
+
+
-
-
- Contacts -
-
- Email: info@info.com
- Phone: 333 010101
-
-
- Timetable -
-
- Monday: 15:30–19:30
- Tuesday: 10:00–13:00, 15:30–19:30
- Wednesday: 10:00–13:00, 15:30–19:30
- Thursday: 10:00–13:00, 15:30–19:30
- Friday: 10:00–13:00, 15:30–19:30
- Saturday: 10:00–19:30
- Sunday: 10:00–13:00, 15:30–19:30 +
+
+
+
+ Contacts +
+
+ Email: info@info.com
+ Phone: 333 010101
+
+
+ Timetable +
+
+ Monday: 15:30–19:30
+ Tuesday: 10:00–13:00, 15:30–19:30
+ Wednesday: 10:00–13:00, 15:30–19:30
+ Thursday: 10:00–13:00, 15:30–19:30
+ Friday: 10:00–13:00, 15:30–19:30
+ Saturday: 10:00–19:30
+ Sunday: 10:00–13:00, 15:30–19:30 +
+
@@ -135,49 +155,59 @@ demo.htmlSource = `
-
-
- ${img({})} -
-
-
- Consectetur adipiscing elit -
-
- Street lorem ipsum 42, 00134 City, Nation -
-
- - Take me here - - +
+
+
+
+
+ ${img({})} +
+
+
+ Consectetur adipiscing elit. Proin molestie diam nec euismod commodo +
+
+ Street lorem ipsum 42, 00134 City, Nation +
+
+ + Take me here + + +
+
-
+
+
-
-
- Contacts -
-
- Email: info@info.com
- Phone: 333 010101
-
-
- Timetable -
-
- Monday: 15:30–19:30
- Tuesday: 10:00–13:00, 15:30–19:30
- Wednesday: 10:00–13:00, 15:30–19:30
- Thursday: 10:00–13:00, 15:30–19:30
- Friday: 10:00–13:00, 15:30–19:30
- Saturday: 10:00–19:30
- Sunday: 10:00–13:00, 15:30–19:30 +
+
+
+
+ Contacts +
+
+ Email: info@info.com
+ Phone: 333 010101
+
+
+ Timetable +
+
+ Monday: 15:30–19:30
+ Tuesday: 10:00–13:00, 15:30–19:30
+ Wednesday: 10:00–13:00, 15:30–19:30
+ Thursday: 10:00–13:00, 15:30–19:30
+ Friday: 10:00–13:00, 15:30–19:30
+ Saturday: 10:00–19:30
+ Sunday: 10:00–13:00, 15:30–19:30 +
+
diff --git a/src/gatsby/code/iframe/themes/slider/brands-infinite-v1.js b/src/gatsby/code/iframe/themes/slider/brands-infinite-v1.js index 0b2e8f379b9..b5d9b29c185 100644 --- a/src/gatsby/code/iframe/themes/slider/brands-infinite-v1.js +++ b/src/gatsby/code/iframe/themes/slider/brands-infinite-v1.js @@ -153,22 +153,22 @@ demo.htmlSource = `
- ${img({ classes: 'media-cover', ratio: '25%', loading: 'eager' })} + ${img({ classes: 'media-cover', ratio: '37.5%', loading: 'eager' })} - ${img({ classes: 'media-cover', ratio: '25%', loading: 'eager' })} + ${img({ classes: 'media-cover', ratio: '37.5%', loading: 'eager' })} - ${img({ classes: 'media-cover', ratio: '25%', loading: 'eager' })} + ${img({ classes: 'media-cover', ratio: '37.5%', loading: 'eager' })} - ${img({ classes: 'media-cover', ratio: '25%', loading: 'eager' })} + ${img({ classes: 'media-cover', ratio: '37.5%', loading: 'eager' })} - ${img({ classes: 'media-cover', ratio: '25%', loading: 'eager' })} + ${img({ classes: 'media-cover', ratio: '37.5%', loading: 'eager' })} - ${imgAlt({ classes: 'media-cover', ratio: '25%', loading: 'eager' })} + ${imgAlt({ classes: 'media-cover', ratio: '37.5%', loading: 'eager' })}
diff --git a/src/gatsby/code/vanilla/addons/card/collapse-horizontal.js b/src/gatsby/code/vanilla/addons/card/collapse-horizontal.js new file mode 100644 index 00000000000..a1caf277fab --- /dev/null +++ b/src/gatsby/code/vanilla/addons/card/collapse-horizontal.js @@ -0,0 +1,34 @@ +import path from 'path' +const img = require('components/snippets/img').default + +const filename = __filename.replace(/\\/g, '/') +const dirs = path.dirname(filename).split('/') +export const demo = { + name: path.basename(filename, '.js'), + component: dirs.pop(), + type: dirs.pop(), +} + +demo.htmlSource = ` +
+
+
+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
+ ${img({ classes: 'media-cover', ratio: '15%' })} +
+
+
+` diff --git a/src/gatsby/code/vanilla/addons/card/collapse.js b/src/gatsby/code/vanilla/addons/card/collapse.js index d764afb81ef..237e3a952da 100644 --- a/src/gatsby/code/vanilla/addons/card/collapse.js +++ b/src/gatsby/code/vanilla/addons/card/collapse.js @@ -10,88 +10,31 @@ export const demo = { } demo.htmlSource = ` -
- -
-
-
-
-
-
Lorem ipsum
-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
-
+
+
+
+
+
Lorem ipsum
-
- -
-
-
-
-
+
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
- -
-
-
-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
+
+ ${img({ classes: 'media-cover', ratio: '15%' })}
-
` diff --git a/src/gatsby/code/vanilla/addons/card/full-horizontal.js b/src/gatsby/code/vanilla/addons/card/full-horizontal.js new file mode 100644 index 00000000000..476973e5223 --- /dev/null +++ b/src/gatsby/code/vanilla/addons/card/full-horizontal.js @@ -0,0 +1,31 @@ +import path from 'path' +const img = require('components/snippets/img').default + +const filename = __filename.replace(/\\/g, '/') +const dirs = path.dirname(filename).split('/') +export const demo = { + name: path.basename(filename, '.js'), + component: dirs.pop(), + type: dirs.pop(), +} + +demo.htmlSource = ` + +
+
+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
+ +` diff --git a/src/gatsby/code/vanilla/addons/card/full.js b/src/gatsby/code/vanilla/addons/card/full.js index eeec41eeb04..a97f06d94e8 100644 --- a/src/gatsby/code/vanilla/addons/card/full.js +++ b/src/gatsby/code/vanilla/addons/card/full.js @@ -10,88 +10,32 @@ export const demo = { } demo.htmlSource = ` -
- -
- -
-
-
-
-
Lorem ipsum
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
-
+ +
+
+
+
+
Lorem ipsum
- -
- -
- -
-
-
-
-
Lorem ipsum
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
-
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

- -
- -
- -
-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
+
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

- +
+ ${img({ classes: 'media-cover', ratio: '15%' })} +
+
- +
` diff --git a/src/gatsby/code/vanilla/addons/card/separator-horizontal.js b/src/gatsby/code/vanilla/addons/card/separator-horizontal.js new file mode 100644 index 00000000000..27e8586eb48 --- /dev/null +++ b/src/gatsby/code/vanilla/addons/card/separator-horizontal.js @@ -0,0 +1,40 @@ +import path from 'path' +const img = require('components/snippets/img').default + +const filename = __filename.replace(/\\/g, '/') +const dirs = path.dirname(filename).split('/') +export const demo = { + name: path.basename(filename, '.js'), + component: dirs.pop(), + type: dirs.pop(), +} + +demo.htmlSource = ` +
+
+
+
+ ${img({ classes: 'media-cover', ratio: '15%' })} +
+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
+
+ ${img({ classes: 'media-cover', ratio: '15%' })} +
+
+
+` diff --git a/src/gatsby/code/vanilla/addons/card/separator.js b/src/gatsby/code/vanilla/addons/card/separator.js index dd82038776d..341a1fdf37c 100644 --- a/src/gatsby/code/vanilla/addons/card/separator.js +++ b/src/gatsby/code/vanilla/addons/card/separator.js @@ -10,88 +10,27 @@ export const demo = { } demo.htmlSource = ` -
- -
-
-
-
-
-
Lorem ipsum
-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
-
+
+
+
+
+ ${img({ classes: 'media-cover', ratio: '15%' })}
-
- -
-
-
-
-
+
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
- -
-
-
-
-
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
+
+ ${img({ classes: 'media-cover', ratio: '15%' })}
-
` diff --git a/src/gatsby/code/vanilla/components/card/asset.js b/src/gatsby/code/vanilla/components/card/asset.js index 640c61916b6..bb832de75c5 100644 --- a/src/gatsby/code/vanilla/components/card/asset.js +++ b/src/gatsby/code/vanilla/components/card/asset.js @@ -13,7 +13,7 @@ demo.htmlSource = `
-
+
@@ -26,7 +26,7 @@ demo.htmlSource = `
-
+
diff --git a/src/gatsby/code/vanilla/components/card/block-intro.js b/src/gatsby/code/vanilla/components/card/block-intro.js index 654068f5621..ef512ed7f15 100644 --- a/src/gatsby/code/vanilla/components/card/block-intro.js +++ b/src/gatsby/code/vanilla/components/card/block-intro.js @@ -11,7 +11,7 @@ export const demo = { demo.htmlSource = `
-
+
@@ -27,7 +27,7 @@ demo.htmlSource = `
-
+
diff --git a/src/gatsby/code/vanilla/components/card/block-side-size.js b/src/gatsby/code/vanilla/components/card/block-side-size.js index cc18ab3759a..94cd8d623a1 100644 --- a/src/gatsby/code/vanilla/components/card/block-side-size.js +++ b/src/gatsby/code/vanilla/components/card/block-side-size.js @@ -13,7 +13,7 @@ demo.htmlSource = `
-
+
@@ -22,7 +22,7 @@ demo.htmlSource = `
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non feugiat lorem, nec volutpat turpis.

@@ -32,7 +32,7 @@ demo.htmlSource = `
-
+
diff --git a/src/gatsby/code/vanilla/components/card/block-side.js b/src/gatsby/code/vanilla/components/card/block-side.js index 94248bce323..46745d03a05 100644 --- a/src/gatsby/code/vanilla/components/card/block-side.js +++ b/src/gatsby/code/vanilla/components/card/block-side.js @@ -13,7 +13,7 @@ demo.htmlSource = `
-
+
@@ -32,7 +32,7 @@ demo.htmlSource = `
-
+
diff --git a/src/gatsby/code/vanilla/components/card/block.js b/src/gatsby/code/vanilla/components/card/block.js index 62b7fe11ec4..fdba77a0fab 100644 --- a/src/gatsby/code/vanilla/components/card/block.js +++ b/src/gatsby/code/vanilla/components/card/block.js @@ -12,7 +12,7 @@ demo.htmlSource = `
-
+
diff --git a/src/gatsby/code/vanilla/components/card/close.js b/src/gatsby/code/vanilla/components/card/close.js index afb8850a283..b01da249393 100644 --- a/src/gatsby/code/vanilla/components/card/close.js +++ b/src/gatsby/code/vanilla/components/card/close.js @@ -18,7 +18,7 @@ demo.htmlSource = `
-
Primary
+
Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

@@ -33,7 +33,7 @@ demo.htmlSource = `
-
Default
+
Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

diff --git a/src/gatsby/code/vanilla/components/card/disable.js b/src/gatsby/code/vanilla/components/card/disable.js index 57cca052536..dbe0950bbe2 100644 --- a/src/gatsby/code/vanilla/components/card/disable.js +++ b/src/gatsby/code/vanilla/components/card/disable.js @@ -17,7 +17,7 @@ demo.htmlSource = `
-
Primary
+
Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

@@ -31,7 +31,7 @@ demo.htmlSource = `
-
Default
+
Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

diff --git a/src/gatsby/code/vanilla/components/card/group.js b/src/gatsby/code/vanilla/components/card/group.js index e7b05c4a374..9ec867eefa5 100644 --- a/src/gatsby/code/vanilla/components/card/group.js +++ b/src/gatsby/code/vanilla/components/card/group.js @@ -12,7 +12,7 @@ demo.htmlSource = `
-
+
diff --git a/src/gatsby/code/vanilla/components/card/horizontal-asset.js b/src/gatsby/code/vanilla/components/card/horizontal-asset.js index d7ab245d885..bd265e01945 100644 --- a/src/gatsby/code/vanilla/components/card/horizontal-asset.js +++ b/src/gatsby/code/vanilla/components/card/horizontal-asset.js @@ -17,9 +17,6 @@ demo.htmlSource = `
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

@@ -28,27 +25,9 @@ demo.htmlSource = `
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
- -
-
-
-
-
${img({ classes: 'media-cover', ratio: '37.5%' })}
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
@@ -58,9 +37,6 @@ demo.htmlSource = `
-
- ${img({ classes: 'media-cover', ratio: '15%' })} -
Lorem ipsum
@@ -71,27 +47,9 @@ demo.htmlSource = `

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
- -
-
-
-
${img({ classes: 'media-cover', ratio: '15%' })}
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
diff --git a/src/gatsby/code/vanilla/components/card/horizontal-block.js b/src/gatsby/code/vanilla/components/card/horizontal-block.js index 9be1dc8f60e..680e2c3a491 100644 --- a/src/gatsby/code/vanilla/components/card/horizontal-block.js +++ b/src/gatsby/code/vanilla/components/card/horizontal-block.js @@ -32,27 +32,6 @@ demo.htmlSource = `
-
-
-
-
-
-
-
Lorem ipsum
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
-
-
@@ -74,26 +53,5 @@ demo.htmlSource = `
-
-
-
-
-
-
Lorem ipsum
-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
-
-
` diff --git a/src/gatsby/code/vanilla/components/card/horizontal-multiple.js b/src/gatsby/code/vanilla/components/card/horizontal-multiple.js index a85dc14e306..c4d2d43d35a 100644 --- a/src/gatsby/code/vanilla/components/card/horizontal-multiple.js +++ b/src/gatsby/code/vanilla/components/card/horizontal-multiple.js @@ -27,25 +27,6 @@ demo.htmlSource = `
-
- -
-
-
-
-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
-
` diff --git a/src/gatsby/code/vanilla/components/card/horizontal-overflow-y.js b/src/gatsby/code/vanilla/components/card/horizontal-overflow-y.js index 369e68ba880..89bcc9958aa 100644 --- a/src/gatsby/code/vanilla/components/card/horizontal-overflow-y.js +++ b/src/gatsby/code/vanilla/components/card/horizontal-overflow-y.js @@ -17,9 +17,6 @@ demo.htmlSource = `
-
- ${img({ classes: 'media-cover', ratio: '37.5%' })} -
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

@@ -32,31 +29,9 @@ demo.htmlSource = `

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
-
- -
-
-
-
-
${img({ classes: 'media-cover', ratio: '37.5%' })}
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
-
Lorem ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
diff --git a/src/gatsby/code/vanilla/components/card/overflow-y.js b/src/gatsby/code/vanilla/components/card/overflow-y.js index 17d9f38de60..fc1bc904870 100644 --- a/src/gatsby/code/vanilla/components/card/overflow-y.js +++ b/src/gatsby/code/vanilla/components/card/overflow-y.js @@ -13,7 +13,7 @@ demo.htmlSource = `
-
+
@@ -32,7 +32,7 @@ demo.htmlSource = `
-
+
diff --git a/src/gatsby/code/vanilla/components/card/size.js b/src/gatsby/code/vanilla/components/card/size.js index 86ddac38d8b..168fcd4d4f9 100644 --- a/src/gatsby/code/vanilla/components/card/size.js +++ b/src/gatsby/code/vanilla/components/card/size.js @@ -12,7 +12,7 @@ demo.htmlSource = `
-
+
@@ -26,7 +26,7 @@ demo.htmlSource = `
-
+
@@ -40,7 +40,7 @@ demo.htmlSource = `
-
+
@@ -54,7 +54,7 @@ demo.htmlSource = `
-
+
diff --git a/src/gatsby/code/vanilla/components/card/variant.js b/src/gatsby/code/vanilla/components/card/variant.js index dde04ddbc73..8877ca3ea38 100644 --- a/src/gatsby/code/vanilla/components/card/variant.js +++ b/src/gatsby/code/vanilla/components/card/variant.js @@ -39,5 +39,19 @@ demo.htmlSource = `
+
+
+
+
+
+
+
White
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
+
+
+
` diff --git a/src/gatsby/code/vanilla/components/drop/asset.js b/src/gatsby/code/vanilla/components/drop/asset.js index acedafcf5fa..8a6cac0525b 100644 --- a/src/gatsby/code/vanilla/components/drop/asset.js +++ b/src/gatsby/code/vanilla/components/drop/asset.js @@ -40,7 +40,7 @@ demo.htmlSource = `
@@ -55,6 +55,10 @@ demo.htmlSource = `
${img({ classes: 'media-cover', ratio: '37.5%' })}
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
diff --git a/src/gatsby/code/vanilla/components/drop/block-side-size.js b/src/gatsby/code/vanilla/components/drop/block-side-size.js index cc1e1e42df0..400523eb993 100644 --- a/src/gatsby/code/vanilla/components/drop/block-side-size.js +++ b/src/gatsby/code/vanilla/components/drop/block-side-size.js @@ -31,7 +31,7 @@ demo.htmlSource = `
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non feugiat lorem, nec volutpat turpis.

diff --git a/src/gatsby/code/vanilla/components/overlay/block-side-size.js b/src/gatsby/code/vanilla/components/overlay/block-side-size.js index 65ec0220bf5..21247158839 100644 --- a/src/gatsby/code/vanilla/components/overlay/block-side-size.js +++ b/src/gatsby/code/vanilla/components/overlay/block-side-size.js @@ -34,7 +34,7 @@ demo.htmlSource = `

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus, lectus quis ornare volutpat, ligula nulla sollicitudin nunc, ut commodo nulla enim nec nisi.

Morbi sodales, dolor a iaculis ornare, velit justo lacinia erat, pretium sollicitudin dui sem id justo.

-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

Morbi sodales, dolor a iaculis ornare, velit justo lacinia erat, pretium sollicitudin dui sem id justo.

diff --git a/src/gatsby/code/vanilla/components/overlay/position.js b/src/gatsby/code/vanilla/components/overlay/position.js index 9e429b3fff7..bdc7bc846c2 100644 --- a/src/gatsby/code/vanilla/components/overlay/position.js +++ b/src/gatsby/code/vanilla/components/overlay/position.js @@ -76,7 +76,7 @@ demo.htmlSource = ` -
+
diff --git a/src/gatsby/code/vanilla/components/overlay/screen.js b/src/gatsby/code/vanilla/components/overlay/screen.js index 02bb308396f..55f55ea4630 100644 --- a/src/gatsby/code/vanilla/components/overlay/screen.js +++ b/src/gatsby/code/vanilla/components/overlay/screen.js @@ -72,7 +72,7 @@ demo.htmlSource = ` -
+
@@ -84,7 +84,7 @@ demo.htmlSource = `
- ${img({ classes: 'media-cover', ratio: '25%' })} + ${img({ classes: 'media-cover', ratio: '15%' })}
Lorem ipsum
diff --git a/src/gatsby/code/vanilla/components/row/stretch-card-flex.js b/src/gatsby/code/vanilla/components/row/stretch-card-flex.js new file mode 100644 index 00000000000..515ed396d8c --- /dev/null +++ b/src/gatsby/code/vanilla/components/row/stretch-card-flex.js @@ -0,0 +1,58 @@ +import path from 'path' +const img = require('components/snippets/img').default + +const filename = __filename.replace(/\\/g, '/') +const dirs = path.dirname(filename).split('/') +export const demo = { + name: path.basename(filename, '.js'), + component: dirs.pop(), + type: dirs.pop(), +} + +demo.htmlSource = ` +
+ +
+
+
+
+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
+
+
+ +
+
+
+
+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
+
+
+ +
+` diff --git a/src/gatsby/code/vanilla/components/row/stretch-card-inner.js b/src/gatsby/code/vanilla/components/row/stretch-card-inner.js new file mode 100644 index 00000000000..e6872b9c2b0 --- /dev/null +++ b/src/gatsby/code/vanilla/components/row/stretch-card-inner.js @@ -0,0 +1,54 @@ +import path from 'path' +const img = require('components/snippets/img').default + +const filename = __filename.replace(/\\/g, '/') +const dirs = path.dirname(filename).split('/') +export const demo = { + name: path.basename(filename, '.js'), + component: dirs.pop(), + type: dirs.pop(), +} + +demo.htmlSource = ` +
+ +
+
+
+
+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
+
Lorem ipsum
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

+
+
+
+
+
+
+ +
+
+
+
+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })} +
+
+
Lorem ipsum
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+
+
+
+ +
+` diff --git a/src/gatsby/code/vanilla/components/row/stretch-card.js b/src/gatsby/code/vanilla/components/row/stretch-card.js index f862bd4e916..6ca2b0eb253 100644 --- a/src/gatsby/code/vanilla/components/row/stretch-card.js +++ b/src/gatsby/code/vanilla/components/row/stretch-card.js @@ -1,4 +1,5 @@ import path from 'path' +const img = require('components/snippets/img').default const filename = __filename.replace(/\\/g, '/') const dirs = path.dirname(filename).split('/') @@ -11,76 +12,46 @@ export const demo = { demo.htmlSource = `
-
- +
-
-
-
Lorem ipsum
+
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })}
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.

-
-
-
-
- -
- -
- -
-
-
-
-
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
-
- +
-
-
Lorem ipsum
+
+ ${img({ classes: 'media-cover', ratio: '37.5%' })}
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
-
- -
- -
- -
-
-
-
-
+
Lorem ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.

-
diff --git a/src/gatsby/markdown/addons/card/collapse.md b/src/gatsby/markdown/addons/card/collapse.md index dc6764b592b..6b946b2ebfe 100644 --- a/src/gatsby/markdown/addons/card/collapse.md +++ b/src/gatsby/markdown/addons/card/collapse.md @@ -10,3 +10,8 @@ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc temp + + + + + diff --git a/src/gatsby/markdown/addons/card/full.md b/src/gatsby/markdown/addons/card/full.md index aeae53b998b..64371efd1fe 100644 --- a/src/gatsby/markdown/addons/card/full.md +++ b/src/gatsby/markdown/addons/card/full.md @@ -10,3 +10,8 @@ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc temp + + + + + diff --git a/src/gatsby/markdown/addons/card/interactive.md b/src/gatsby/markdown/addons/card/interactive.md index de54e8e5792..19a42eb6acb 100644 --- a/src/gatsby/markdown/addons/card/interactive.md +++ b/src/gatsby/markdown/addons/card/interactive.md @@ -6,7 +6,7 @@ title: "interactive" description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus laoreet leo sit amet iaculis." --- -You can make interactive cards with `a.card`. +You can make interactive cards with `a.card` or `label.card`. diff --git a/src/gatsby/markdown/addons/card/seaparator.md b/src/gatsby/markdown/addons/card/seaparator.md index 48e5da9e37e..5c57db6e721 100644 --- a/src/gatsby/markdown/addons/card/seaparator.md +++ b/src/gatsby/markdown/addons/card/seaparator.md @@ -10,3 +10,8 @@ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc temp + + + + + diff --git a/src/gatsby/markdown/components/card/content.md b/src/gatsby/markdown/components/card/content.md index 2ea77efed1f..9692b0be848 100644 --- a/src/gatsby/markdown/components/card/content.md +++ b/src/gatsby/markdown/components/card/content.md @@ -129,11 +129,14 @@ You can add custom `.card-block` modifiers and style them as you like (e.g.: `.c If you need to put an asset outside `.card-block`, just use `.card-item` and wrap the text inside another `.card-block.card-item`, like in the second example. -The size of **blocks** is automatic, you can specify the **size** with [columns](/components/column), with responsive classes if you need them. - + + +The size of **blocks** is automatic, you can specify the **size** with [columns](/components/column), with responsive classes if you need them. + + diff --git a/src/gatsby/markdown/components/drop/content.md b/src/gatsby/markdown/components/drop/content.md index dd721e9e0ed..cc8c818265e 100644 --- a/src/gatsby/markdown/components/drop/content.md +++ b/src/gatsby/markdown/components/drop/content.md @@ -147,23 +147,17 @@ You can add custom `.card-block` modifiers and style them as you like (e.g.: `.c If you need to put an asset outside `.card-block`, just use `.card-item` and wrap the text inside another `.card-block.card-item`, like in the second example. -The size of **blocks** is automatic, you can specify the **size** with [columns](/components/column), with responsive classes if you need them. - - - +The size of **blocks** is automatic, you can specify the **size** with [columns](/components/column), with responsive classes if you need them. - - - - - - - + + + + ## Overflow diff --git a/src/gatsby/markdown/components/overlay/content.md b/src/gatsby/markdown/components/overlay/content.md index 09f49c6e643..71d0e5d1b5a 100644 --- a/src/gatsby/markdown/components/overlay/content.md +++ b/src/gatsby/markdown/components/overlay/content.md @@ -137,11 +137,14 @@ You can add custom `.card-block` modifiers and style them as you like (e.g.: `.c If you need to put an asset outside `.card-block`, just use `.card-item` and wrap the text inside another `.card-block.card-item`, like in the second example. -The size of **blocks** is automatic, you can specify the **size** with [columns](/components/column), with responsive classes if you need them. - + + +The size of **blocks** is automatic, you can specify the **size** with [columns](/components/column), with responsive classes if you need them. + + diff --git a/src/gatsby/markdown/components/row/other.md b/src/gatsby/markdown/components/row/other.md index 22fcb56b534..a036eaf63b6 100644 --- a/src/gatsby/markdown/components/row/other.md +++ b/src/gatsby/markdown/components/row/other.md @@ -8,13 +8,29 @@ date: "2019-03-15" ## Stretch -Use `.row-stretch` to stretch vertically columns. You can space with `margin-: auto;` on `.card-block`, or use flex utils on `.card-content`. +Use `.row-stretch` to stretch vertically columns. + +You can space with `margin-: auto;` on `.card-block`. +Or use flex utils on `.card-content`. + + + + + + +To stretch inner elements on `.card-block` give it `.flex-full` and You can space with `margin-: auto;` on inner elements. + + + + + + ## Touch overflow Use `.row-touch-overflow` to have browser overflow on touch devices. diff --git a/src/private/demos/addons/card/collapse-horizontal.less b/src/private/demos/addons/card/collapse-horizontal.less new file mode 100644 index 00000000000..05318085539 --- /dev/null +++ b/src/private/demos/addons/card/collapse-horizontal.less @@ -0,0 +1 @@ +@import 'xtend-library/src/addons/card/collapse.less'; diff --git a/src/private/demos/addons/card/full-horizontal.less b/src/private/demos/addons/card/full-horizontal.less new file mode 100644 index 00000000000..9d32cae08bf --- /dev/null +++ b/src/private/demos/addons/card/full-horizontal.less @@ -0,0 +1 @@ +@import 'xtend-library/src/addons/card/full.less'; diff --git a/src/private/demos/addons/card/separator-horizontal.less b/src/private/demos/addons/card/separator-horizontal.less new file mode 100644 index 00000000000..aa0997ee064 --- /dev/null +++ b/src/private/demos/addons/card/separator-horizontal.less @@ -0,0 +1 @@ +@import 'xtend-library/src/addons/card/separator.less'; diff --git a/src/private/demos/themes/animation/collapse-v1.less b/src/private/demos/themes/animation/collapse-v1.less index a45b7a312d2..ebfe377c56b 100644 --- a/src/private/demos/themes/animation/collapse-v1.less +++ b/src/private/demos/themes/animation/collapse-v1.less @@ -1,20 +1,20 @@ #iframe--collapse-v1 { //##START body { // add your own selector instead of body to contain the code - + /** * vars */ - + // ease - + @ease-in: @ease-out-quint; @ease-out: @ease-in-out-quint; - + /** * drop */ - + .drop-default { > .drop-inner { box-shadow: @shadow-light; @@ -23,7 +23,7 @@ } } } - + .drop-primary { > .drop-inner { box-shadow: @shadow-dark; @@ -32,9 +32,9 @@ } } } - + // animation - + .drop-container { > .drop { > .drop-inner { @@ -87,13 +87,13 @@ } } } - + /** * overlay */ - + // animation - + .overlay { .collapse-height(); .overlay-design { @@ -104,11 +104,9 @@ > .btn-close { opacity: 0; } - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transform: translateY(-2.5rem); - } + .card-block, .card-content { + opacity: 0; + transform: translateY(-2.5rem); } } &.in { @@ -125,12 +123,10 @@ .anim-zoom.in(); animation-delay: @time-medium; } - > .card-inner { - > .card-block, > .card-content { - opacity: 1; - transform: none; - transition: transform @time-medium @ease-in, opacity @time-tiny @ease-in; - } + .card-block, .card-content { + opacity: 1; + transform: none; + transition: transform @time-medium @ease-in, opacity @time-tiny @ease-in; } } } @@ -148,21 +144,19 @@ .anim-zoom.out(); animation-delay: initial; } - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transform: translateY(2.5rem); - transition: transform @time-small @ease-out, opacity @time-tiny @ease-out @time-tiny; - } + .card-block, .card-content { + opacity: 0; + transform: translateY(2.5rem); + transition: transform @time-small @ease-out, opacity @time-tiny @ease-out @time-tiny; } } } } - + /** * group */ - + .group { .collapse-width(); &.in { @@ -172,7 +166,7 @@ transition: width @time-medium @ease-out; } } - + } //##END } diff --git a/src/private/demos/themes/animation/xtend-v1.less b/src/private/demos/themes/animation/xtend-v1.less index fffd2895110..421feecff7d 100644 --- a/src/private/demos/themes/animation/xtend-v1.less +++ b/src/private/demos/themes/animation/xtend-v1.less @@ -1,22 +1,22 @@ #iframe--xtend-v1 { //##START body { // add your own selector instead of body to contain the code - + /** * vars */ - + // ease - + @ease-in: @ease-out-quint; @ease-out: @ease-in-out-quint; - + /** * button */ - + // variant - + .btn-default { &:hover, &.hover { transform: translateY(-.25rem); @@ -27,7 +27,7 @@ box-shadow: @shadow-none; } } - + .btn-primary { &:hover, &.hover { transform: translateY(-.25rem); @@ -38,9 +38,9 @@ box-shadow: @shadow-none; } } - + // animation - + .btn { transition: border @time-small @ease-out, background @time-small @ease-out, color @time-small @ease-out, box-shadow @time-small @ease-out, transform @time-tiny @ease-out; &:hover, &.hover { @@ -50,13 +50,13 @@ transition: border @time-small @ease-in, background @time-small @ease-in, color @time-small @ease-in, box-shadow @time-small @ease-in, transform @time-tiny @ease-in; } } - + /** * drop */ - + // animation - + .drop-container { > .drop { > .drop-inner { @@ -105,33 +105,31 @@ } } } - + /** * overlay */ - + // animation - + .overlay { .card-overlay { - > .card-design { + .card-design { opacity: 0; transform: scale(.75); } > .btn-close { opacity: 0; } - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transform: translateY(-1.5rem); - } + .card-block, .card-content { + opacity: 0; + transform: translateY(-1.5rem); } } &.in { animation-duration: @time-medium + @time-tiny; // needed for animation time and backdrop animation time, put max animation time .card-overlay { - > .card-design { + .card-design { opacity: 1; transform: scale(1); transition: transform @time-medium @ease-in, opacity @time-medium @ease-in; @@ -141,19 +139,17 @@ .anim-zoom.in(); animation-delay: @time-medium; } - > .card-inner { - > .card-block, > .card-content { - opacity: 1; - transform: none; - transition: transform @time-medium @ease-in @time-tiny, opacity @time-medium @ease-in @time-tiny; - } + .card-block, .card-content { + opacity: 1; + transform: none; + transition: transform @time-medium @ease-in @time-tiny, opacity @time-medium @ease-in @time-tiny; } } } &.out { animation-duration: @time-small + @time-tiny; // needed for animation time and backdrop animation time, put max animation time .card-overlay { - > .card-design { + .card-design { opacity: 0; transform: scale(.75); transition: transform @time-small @ease-out @time-tiny, opacity @time-small @ease-out @time-tiny; @@ -163,72 +159,70 @@ .anim-zoom.out(); animation-delay: initial; } - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transform: translateY(1.5rem); - transition: transform @time-small @ease-out, opacity @time-small @ease-out; - } + .card-block, .card-content { + opacity: 0; + transform: translateY(1.5rem); + transition: transform @time-small @ease-out, opacity @time-small @ease-out; } } } } - + /** * card interactive */ - + // variant - + a.card-default, label.card-default { &:hover, &.hover { - > .card-design { + .card-design { box-shadow: @shadow-light; } } &:active, &.active { - > .card-design { + .card-design { box-shadow: none; } } } - + a.card-primary, label.card-primary { &:hover, &.hover { - > .card-design { + .card-design { box-shadow: @shadow-accent; } } &:active, &.active { - > .card-design { + .card-design { box-shadow: none; } } } - + // animation - + a.card, label.card { transition: all @time-small @ease-out; - > .card-design { + .card-design { transition: all @time-small @ease-out; } &:hover, &.hover { transform: translateY(-.5rem); transition: all @time-small @ease-in; - > .card-design { + .card-design { transition: all @time-small @ease-in; } } &:active, &.active { transform: none; transition: all @time-small @ease-in; - > .card-design { + .card-design { transition: all @time-small @ease-in; } } } - + } //##END -} \ No newline at end of file +} diff --git a/src/private/demos/themes/card/fashion-listing-v2.less b/src/private/demos/themes/card/fashion-listing-v2.less index e94ceabb9a6..a66444f7a31 100644 --- a/src/private/demos/themes/card/fashion-listing-v2.less +++ b/src/private/demos/themes/card/fashion-listing-v2.less @@ -38,11 +38,7 @@ } } - .block-listing_content { - .padding(all, 3rem); - } - - .block-listing_img { + .card-asset { text-align: center; .media-container { .padding(bottom, 50%); @@ -52,15 +48,6 @@ } } - .block-listing_title { - .spacing-medium(); - .font-sans-semibold(); - font-size: 2.6rem; - line-height: 1.2; - letter-spacing: 0; - text-transform: none; - } - .block-listing_subtitle { .spacing-medium(); .font-sans-semibold(); @@ -90,7 +77,6 @@ .btn { .full(); .align-center(); - .btn-squared(); } } @@ -101,7 +87,19 @@ z-index: 2; -webkit-backface-visibility: hidden; backface-visibility: hidden; - background: @shade-200; + // card + .card-small(); + .text-default(); + .card-design { + border-color: @shade-200; + background: @shade-200; + } + .card-block { + .flex-full(); + } + .block-listing_btns { + margin-top: auto; + } } .block-listing_back { @@ -114,12 +112,19 @@ transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; - background: @shade-200; + // card + .card-small(); + .text-default(); + .card-design { + border-color: @shade-200; + background: @shade-200; + } } .block-listing_item { perspective: 1400px; .block-listing_item_inner { + height: 100%; transform-style: preserve-3d; transition-duration: @time-big; transition-delay: initial; diff --git a/src/private/demos/themes/overlay/position-slide-v1.less b/src/private/demos/themes/overlay/position-slide-v1.less index f6e3f308a94..aceb4859513 100644 --- a/src/private/demos/themes/overlay/position-slide-v1.less +++ b/src/private/demos/themes/overlay/position-slide-v1.less @@ -1,22 +1,22 @@ #iframe--position-slide-v1 { //##START body { // add your own selector instead of body to contain the code - + /** * vars */ - + // ease - + @ease-in: @ease-out-quint; @ease-out: @ease-in-out-quint; - + /** * overlay */ - + // animation - + [class^='overlay-position-'], [class*=' overlay-position-'] { &.overlay-position-left { .overlay-design { @@ -24,11 +24,9 @@ transform: translateX(-100%); } .card-overlay { - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transform: translateX(-125%); - } + .card-block, .card-content { + opacity: 0; + transform: translateX(-125%); } } } @@ -38,11 +36,9 @@ transform: translateX(100%); } .card-overlay { - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transform: translateX(125%); - } + .card-block, .card-content { + opacity: 0; + transform: translateX(125%); } } } @@ -54,12 +50,10 @@ transition: transform @time-medium @ease-in, opacity @time-tiny @ease-in; } .card-overlay { - > .card-inner { - > .card-block, > .card-content { - opacity: 1; - transform: none; - transition: transform @time-medium @ease-in, opacity @time-tiny @ease-in; - } + .card-block, .card-content { + opacity: 1; + transform: none; + transition: transform @time-medium @ease-in, opacity @time-tiny @ease-in; } } } @@ -72,12 +66,10 @@ transition: transform @time-small @ease-out, opacity @time-tiny @ease-out @time-tiny; } .card-overlay { - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transform: translateX(-125%); - transition: transform @time-small @ease-out, opacity @time-tiny @ease-out @time-tiny; - } + .card-block, .card-content { + opacity: 0; + transform: translateX(-125%); + transition: transform @time-small @ease-out, opacity @time-tiny @ease-out @time-tiny; } > .btn-close { .anim-x-inverse.out(); @@ -91,12 +83,10 @@ transition: transform @time-small @ease-out, opacity @time-tiny @ease-out @time-tiny; } .card-overlay { - > .card-inner { - > .card-block, > .card-content { - opacity: 0; - transform: translateX(125%); - transition: transform @time-small @ease-out, opacity @time-tiny @ease-out @time-tiny; - } + .card-block, .card-content { + opacity: 0; + transform: translateX(125%); + transition: transform @time-small @ease-out, opacity @time-tiny @ease-out @time-tiny; } > .btn-close { .anim-x.out(); @@ -105,7 +95,7 @@ } } } - + } //##END } diff --git a/src/xtend-demos.less b/src/xtend-demos.less index 74a5ffc73f9..1313b02f2d3 100644 --- a/src/xtend-demos.less +++ b/src/xtend-demos.less @@ -1,7 +1,10 @@ @import 'xtend-library/src/private/demos/addons/animation/ripple.less'; +@import 'xtend-library/src/private/demos/addons/card/collapse-horizontal.less'; @import 'xtend-library/src/private/demos/addons/card/collapse.less'; +@import 'xtend-library/src/private/demos/addons/card/full-horizontal.less'; @import 'xtend-library/src/private/demos/addons/card/full.less'; @import 'xtend-library/src/private/demos/addons/card/interactive.less'; +@import 'xtend-library/src/private/demos/addons/card/separator-horizontal.less'; @import 'xtend-library/src/private/demos/addons/card/separator.less'; @import 'xtend-library/src/private/demos/addons/form/check-radio-card.less'; @import 'xtend-library/src/private/demos/addons/form/label-addon.less';