@designcrowd/library.brand-page 5.15.21 → 5.15.24-ast-previews-2

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -939,9 +939,6 @@ a.maker-anchor {
 .tw-mt-0 {
   margin-top: 0px;
 }
-.tw-mt-0\.5 {
-  margin-top: 0.125rem;
-}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -4539,7 +4536,7 @@ a.maker-anchor {
   width: 100%;
 }
 
-.done-btn[data-v-4b72bdd6] {
+.done-btn[data-v-cc85f529] {
   box-shadow:
     0 0 0 1px #d4d4d4,
     0 8px 16px #d4d4d4;
@@ -4589,7 +4586,7 @@ a.maker-anchor {
 }
 }
 
-.dropdown-item-hover[data-v-2050c29c]:hover {
+.dropdown-item-hover[data-v-a3bd940b]:hover {
   background-color: #eee;
 }
 
@@ -5556,7 +5553,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
        object-fit: cover
 }
 
-.c-image--height-limited[data-v-4dbc9bf6] {
+.c-image--height-limited[data-v-d8be9346] {
   max-height: 45vh;
 }
 
@@ -6155,10 +6152,10 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
     text-align: center
 }
 
-.c_banner--with-image-overlay[data-v-dcac170d] {
+.c_banner--with-image-overlay[data-v-be5be4ad] {
   min-height: 24rem;
 }
-.c_banner--divided-container[data-v-dcac170d] {
+.c_banner--divided-container[data-v-be5be4ad] {
   min-height: 30rem;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -6166,67 +6163,67 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
           flex-direction: row;
   gap: 1rem;
 }
-.device-wrapper--mobile .c_banner--divided-container[data-v-dcac170d] {
+.device-wrapper--mobile .c_banner--divided-container[data-v-be5be4ad] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
-.c_banner-container[data-v-dcac170d] {
+.c_banner-container[data-v-be5be4ad] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c_banner--with-image-flip[data-v-dcac170d] {
+.c_banner--with-image-flip[data-v-be5be4ad] {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
 }
-.c_banner--divided-container[data-v-dcac170d] .full-square-image {
+.c_banner--divided-container[data-v-be5be4ad] .full-square-image {
   width: 100%;
   aspect-ratio: 1/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @container (min-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-dcac170d] {
+.c_banner-container--left-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c_banner-container--right-aligned-stacking[data-v-dcac170d] {
+.c_banner-container--right-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
 }
-.c_banner-button--stacking[data-v-dcac170d] {
+.c_banner-button--stacking[data-v-be5be4ad] {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
 }
 }
 @container (max-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-dcac170d] {
+.c_banner-container--left-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-container--right-aligned-stacking[data-v-dcac170d] {
+.c_banner-container--right-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-item--stacking[data-v-dcac170d] {
+.c_banner-item--stacking[data-v-be5be4ad] {
     width: 100%;
 }
-.c_banner-button--stacking[data-v-dcac170d] {
+.c_banner-button--stacking[data-v-be5be4ad] {
     width: 100%;
 }
-.c_banner--divided-container[data-v-dcac170d] {
+.c_banner--divided-container[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -7398,14 +7395,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-4eac537a] {
+.brand-page-root[data-v-d4cc0d12] {
   height: 100%;
 }
-.sortable[data-v-4eac537a] {
+.sortable[data-v-d4cc0d12] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-4eac537a] {
+.brand-page[data-v-d4cc0d12] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7417,7 +7414,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-4eac537a] {
+.brand-page__inner--default[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7429,16 +7426,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-4eac537a] {
+.brand-page__inner--desktop[data-v-d4cc0d12] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-4eac537a] {
+.brand-site__header[data-v-d4cc0d12] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-4eac537a] {
+.brand-page__header[data-v-d4cc0d12] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-4eac537a] {
+.brand-page__content--default[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7455,7 +7452,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-4eac537a] {
+.brand-page__content--desktop[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7471,15 +7468,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-4eac537a] {
+.brand-page__content--inner[data-v-d4cc0d12] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-4eac537a] {
+.brand-page__content--inner--brandsite[data-v-d4cc0d12] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-4eac537a] {
+.brand-page__content--outline-selected[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7487,20 +7484,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-4eac537a] {
+.brand-page__content--outline-footer-selected[data-v-d4cc0d12] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-4eac537a] {
+.brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-4eac537a] {
+.brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -8332,7 +8329,7 @@ body {
   background-color: rgba(17, 21, 23, 0.33);
 }
 
-.c-media-btn__img[data-v-01009e7c] {
+.c-media-btn__img[data-v-567b76b5] {
   width: 100%;
   border-radius: 0.375rem;
   -webkit-transition-property: -webkit-box-shadow;
@@ -8350,7 +8347,7 @@ body {
      object-fit: cover;
   max-height: 150px;
 }
-.c-media-btn__overlay[data-v-01009e7c] {
+.c-media-btn__overlay[data-v-567b76b5] {
   position: absolute;
   left: 0px;
   bottom: 0px;
@@ -8366,13 +8363,13 @@ body {
   -webkit-transition-duration: 200ms;
           transition-duration: 200ms;
 }
-.c-media-btn__overlay--category[data-v-01009e7c] {
+.c-media-btn__overlay--category[data-v-567b76b5] {
   background-color: rgba(17, 21, 23, 0.66);
 }
-.c-media-btn__overlay--video[data-v-01009e7c]:hover {
+.c-media-btn__overlay--video[data-v-567b76b5]:hover {
   background-color: rgba(17, 21, 23, 0.33);
 }
-.c-media-btn[data-v-01009e7c] {
+.c-media-btn[data-v-567b76b5] {
   width: 100%;
   aspect-ratio: 1;
   max-height: 150px;
@@ -8958,11 +8955,11 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.template-preview[data-v-c5fa6125] {
+.template-preview[data-v-072c3b9b] {
   position: relative;
   background-attachment: initial !important
 }
-.template-preview__overlay[data-v-c5fa6125] {
+.template-preview__overlay[data-v-072c3b9b] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8973,10 +8970,28 @@ input[type='number'][data-v-28a532b4] {
   cursor: pointer;
   opacity: 0
 }
-.template-preview__page[data-v-c5fa6125] {
+.template-preview__image-container[data-v-072c3b9b] {
+  pointer-events: none;
+  height: 100%;
+  width: 100%
+}
+.template-preview__image[data-v-072c3b9b] {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: fill;
+     object-fit: fill;
+  -webkit-transition: -webkit-filter 0.2s ease;
+  transition: -webkit-filter 0.2s ease;
+  transition: filter 0.2s ease;
+  transition: filter 0.2s ease, -webkit-filter 0.2s ease
+}
+.template-preview__page[data-v-072c3b9b] {
   pointer-events: none
 }
-.template-preview[data-v-c5fa6125] .c-shape-background {
+.template-preview[data-v-072c3b9b] .c-shape-background {
+  position: absolute
+}
+.template-preview__image[data-v-072c3b9b] .c-shape-background {
   position: absolute
 }
 

package/lib/src/css/library.brand-page-designCom.min.css

@@ -535,9 +535,6 @@ a:not(.tw-lowercase) {
 .tw-mt-0 {
     margin-top: 0px
 }
-.tw-mt-0\.5 {
-    margin-top: 0.125rem
-}
 .tw-mt-1 {
     margin-top: 0.25rem
 }
@@ -4229,7 +4226,7 @@ a:not(.tw-lowercase) {
   width: 100%;
 }
 
-.done-btn[data-v-4b72bdd6] {
+.done-btn[data-v-cc85f529] {
   box-shadow:
     0 0 0 1px #d4d4d4,
     0 8px 16px #d4d4d4;
@@ -4279,7 +4276,7 @@ a:not(.tw-lowercase) {
 }
 }
 
-.dropdown-item-hover[data-v-2050c29c]:hover {
+.dropdown-item-hover[data-v-a3bd940b]:hover {
   background-color: #eee;
 }
 
@@ -5246,7 +5243,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
        object-fit: cover
 }
 
-.c-image--height-limited[data-v-4dbc9bf6] {
+.c-image--height-limited[data-v-d8be9346] {
   max-height: 45vh;
 }
 
@@ -5845,10 +5842,10 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
     text-align: center
 }
 
-.c_banner--with-image-overlay[data-v-dcac170d] {
+.c_banner--with-image-overlay[data-v-be5be4ad] {
   min-height: 24rem;
 }
-.c_banner--divided-container[data-v-dcac170d] {
+.c_banner--divided-container[data-v-be5be4ad] {
   min-height: 30rem;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -5856,67 +5853,67 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
           flex-direction: row;
   gap: 1rem;
 }
-.device-wrapper--mobile .c_banner--divided-container[data-v-dcac170d] {
+.device-wrapper--mobile .c_banner--divided-container[data-v-be5be4ad] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
-.c_banner-container[data-v-dcac170d] {
+.c_banner-container[data-v-be5be4ad] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c_banner--with-image-flip[data-v-dcac170d] {
+.c_banner--with-image-flip[data-v-be5be4ad] {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
 }
-.c_banner--divided-container[data-v-dcac170d] .full-square-image {
+.c_banner--divided-container[data-v-be5be4ad] .full-square-image {
   width: 100%;
   aspect-ratio: 1/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @container (min-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-dcac170d] {
+.c_banner-container--left-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c_banner-container--right-aligned-stacking[data-v-dcac170d] {
+.c_banner-container--right-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
 }
-.c_banner-button--stacking[data-v-dcac170d] {
+.c_banner-button--stacking[data-v-be5be4ad] {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
 }
 }
 @container (max-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-dcac170d] {
+.c_banner-container--left-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-container--right-aligned-stacking[data-v-dcac170d] {
+.c_banner-container--right-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-item--stacking[data-v-dcac170d] {
+.c_banner-item--stacking[data-v-be5be4ad] {
     width: 100%;
 }
-.c_banner-button--stacking[data-v-dcac170d] {
+.c_banner-button--stacking[data-v-be5be4ad] {
     width: 100%;
 }
-.c_banner--divided-container[data-v-dcac170d] {
+.c_banner--divided-container[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -7088,14 +7085,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-4eac537a] {
+.brand-page-root[data-v-d4cc0d12] {
   height: 100%;
 }
-.sortable[data-v-4eac537a] {
+.sortable[data-v-d4cc0d12] {
   outline-color: #b2bdfb;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-4eac537a] {
+.brand-page[data-v-d4cc0d12] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7107,7 +7104,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-4eac537a] {
+.brand-page__inner--default[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7119,16 +7116,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-4eac537a] {
+.brand-page__inner--desktop[data-v-d4cc0d12] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-4eac537a] {
+.brand-site__header[data-v-d4cc0d12] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-4eac537a] {
+.brand-page__header[data-v-d4cc0d12] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-4eac537a] {
+.brand-page__content--default[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7145,7 +7142,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-4eac537a] {
+.brand-page__content--desktop[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7161,15 +7158,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-4eac537a] {
+.brand-page__content--inner[data-v-d4cc0d12] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-4eac537a] {
+.brand-page__content--inner--brandsite[data-v-d4cc0d12] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-4eac537a] {
+.brand-page__content--outline-selected[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   outline-color: #b2bdfb;
@@ -7177,20 +7174,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-4eac537a] {
+.brand-page__content--outline-footer-selected[data-v-d4cc0d12] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-4eac537a] {
+.brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-4eac537a] {
+.brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -8022,7 +8019,7 @@ body {
   background-color: rgba(17, 21, 23, 0.33);
 }
 
-.c-media-btn__img[data-v-01009e7c] {
+.c-media-btn__img[data-v-567b76b5] {
   width: 100%;
   border-radius: 0.375rem;
   -webkit-transition-property: -webkit-box-shadow;
@@ -8040,7 +8037,7 @@ body {
      object-fit: cover;
   max-height: 150px;
 }
-.c-media-btn__overlay[data-v-01009e7c] {
+.c-media-btn__overlay[data-v-567b76b5] {
   position: absolute;
   left: 0px;
   bottom: 0px;
@@ -8056,13 +8053,13 @@ body {
   -webkit-transition-duration: 200ms;
           transition-duration: 200ms;
 }
-.c-media-btn__overlay--category[data-v-01009e7c] {
+.c-media-btn__overlay--category[data-v-567b76b5] {
   background-color: rgba(17, 21, 23, 0.66);
 }
-.c-media-btn__overlay--video[data-v-01009e7c]:hover {
+.c-media-btn__overlay--video[data-v-567b76b5]:hover {
   background-color: rgba(17, 21, 23, 0.33);
 }
-.c-media-btn[data-v-01009e7c] {
+.c-media-btn[data-v-567b76b5] {
   width: 100%;
   aspect-ratio: 1;
   max-height: 150px;
@@ -8648,11 +8645,11 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.template-preview[data-v-c5fa6125] {
+.template-preview[data-v-072c3b9b] {
   position: relative;
   background-attachment: initial !important
 }
-.template-preview__overlay[data-v-c5fa6125] {
+.template-preview__overlay[data-v-072c3b9b] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8663,10 +8660,28 @@ input[type='number'][data-v-28a532b4] {
   cursor: pointer;
   opacity: 0
 }
-.template-preview__page[data-v-c5fa6125] {
+.template-preview__image-container[data-v-072c3b9b] {
+  pointer-events: none;
+  height: 100%;
+  width: 100%
+}
+.template-preview__image[data-v-072c3b9b] {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: fill;
+     object-fit: fill;
+  -webkit-transition: -webkit-filter 0.2s ease;
+  transition: -webkit-filter 0.2s ease;
+  transition: filter 0.2s ease;
+  transition: filter 0.2s ease, -webkit-filter 0.2s ease
+}
+.template-preview__page[data-v-072c3b9b] {
   pointer-events: none
 }
-.template-preview[data-v-c5fa6125] .c-shape-background {
+.template-preview[data-v-072c3b9b] .c-shape-background {
+  position: absolute
+}
+.template-preview__image[data-v-072c3b9b] .c-shape-background {
   position: absolute
 }