Fractal Starter
Project version : 0.1.2

Card Product: Card Product Modal 

<article class="card-product card-product--smaller card-product--modal">

    <a href="#">
        <div class="card-product__thumb">
            <img src="https://source.unsplash.com/featured/?light" alt="" />
        </div>

        <div class="card-product__content">
            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
            <span class="card-product__content-price theme-color">
            35€
         </span>
        </div>

        <div class="card-product__buttons">
            <span class="button button--gray">Voir</span>
            <object>
            <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
         </object>
        </div>
    </a>
</article>
 
<article class="card-product{{#if smaller}} card-product--smaller{{/if}}{{#if in_modal}} card-product--modal{{/if}}">
   
   <a href="#">
      <div class="card-product__thumb">
         {{{card_product.thumb}}}
      </div>

      <div class="card-product__content">
         <h3 class="h5">{{card_product.title}}</h3>
         <span class="card-product__content-price theme-color">
            {{#if card_product.first_price}}
               <span>{{card_product.first_price}}</span>
            {{/if}}
            {{card_product.price}}
         </span>
      </div>

      {{#if smaller}}
         {{#unless in_modal}}
         <div class="card-product__quantity">
            <label>
               Qté
               <input type="number" min="0" value="2" />
            </label>
         </div>
         {{/unless}}
      {{/if}}

      <div class="card-product__buttons">
         <span class="button button--gray">Voir</span>
         <object>
            <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
         </object>
      </div>
   </a>
</article>
 
{
  "card_product": {
    "title": "Moduled Barre LED RVB Ayrton 250",
    "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
    "price": "35€"
  },
  "smaller": true,
  "in_modal": true
}
  • Content: 
    .card-product {
   position: relative;
   max-width: 500px;

   > a {
      display: block;
      background: $c-white;
      border: 1px solid $c-gray-30;
      text-decoration: none;
      transition: .3s ease;
      width: 100%;
      height: 100%;
   
      .card-product__thumb {
         position: relative;
         height: 0;
         padding-top: 100%;
         overflow: hidden;

         > img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
         }
      }
      
      .card-product__content {
         padding: $margin-m $margin-m $margin-s;
         
         h3 {
            text-transform: uppercase;
            color: $c-font-color;
            margin: 0;
            line-height: $font-lineheight-s;
            font-size: 1.1em;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;  
            overflow: hidden;

            @include mediaWQuery($media-query-m) {
               height: 2.4em;
            }
         }
         
         &-price {
            font-family: $font-primary;
            font-size: rem(21);
            font-weight: 400;
            color: $c-gold-medium;

            &::before {
               content: '';
               display: inline-block;
               width: 27px;
               height: 1px;
               vertical-align: middle;
               margin-top: -4px;
               background: $c-gray-40;
            }
            
            > span {
               text-decoration: line-through;
               color: $c-gray-40;
               margin-right: .5rem;
            }
         }
      }
      
      .card-product__buttons {
         padding: 0 $margin-s $margin-s;
         
         .button {
            padding: $margin-s 3px;
            font-weight: 400;
            font-size: rem(14);
            color: $c-white;

            @include mediaWQuery($media-query-m) {
               font-size: rem(18)
            }
         }

         > .button { 
            flex-grow: 2;
            background-color: $c-gold-medium;
            border-color: $c-gold-medium;

            &:hover, &:focus {
               background-color: $c-gold-dark;
               border-color: $c-gold-dark;
            }
         }
         
         > object {
            display: block;
            margin-top: $margin-s;
            
            .button { 
               background-color: $c-black;
               border-color: $c-black;
               color: $c-white;
               box-sizing: border-box;
               padding-left: 1rem;
               padding-right: 1rem;

               @include mediaWQuery($media-query-xl) {
                  padding-left: 1rem;
                  padding-right: 1rem;
               }
               
               &:hover, &:focus {
                  background-color: lighten($c-black, 10%);
                  border-color: lighten($c-black, 10%);
               }
            }
         }
         
         @include mediaWQuery($media-query-s) {
            transform: scaleY(1);
            transform-origin: top center;
            display: none;
            flex-direction: row;
            @include transition;
            
            > object {
               margin-top: 0;
               margin-left: $margin-s;
               
               > .button {
                  width: 100%;
               }
            }
         }
      }
      
      .card-product__quantity {
         width: 100%;
         align-self: flex-end;
         margin-left: auto;
         margin-top: .5rem;
         padding: 1rem;
         background: $c-gray-30;
         
         > label {
            display: block;
            margin-left: auto;
            font-size: 16px;
            
            @include mediaWQuery($media-query-m) { font-size: 18px }
            
            > input {
               text-align: center;
               margin-top: 4px;
            }
         }
         
         @include mediaWQuery($media-query-m) {
            flex-basis: 87px;
            min-width: 87px;
            min-height: 87px;
            padding: .5rem;
            margin: 0 0 0 .5rem;
         }
      }
      
      &:hover, &:focus {
         
         @include mediaWQuery($media-query-s) {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99999;
            transform: scale(1.1);
            box-shadow: $box-shadow-xs;
            height: auto;

            .card-product__buttons {
               margin-top: 1rem;
               display: flex;
            }
         }
      }
   }
   
   &--smaller {
      max-width: none;
      width: 100%;
      
      &:not(&--modal) {
         max-width: none;
         margin: .5rem 0!important;
         @include mediaWQuery($media-query-l) {
            display: inline-block;
            vertical-align: middle;
            margin: .5rem!important;
         }

         object {
             width: 100%;
             @include mediaWQuery($media-query-m) {
                 width: initial;
             }
         }

         button.js-delete-this {
            background: $c-black;
            padding: .5rem;
            font-family: $font-primary;
            width: 100%;
            transition: .3s ease;
            color: $c-white;
            box-sizing: border-box;

            .icon {
               width: 25px;
               height: 25px;
            }

            @include mediaWQuery($media-query-m) {
                width: initial;
                min-height: 87px;
                padding: .5rem .3rem;
                span {
                    position: absolute;
                    text-indent: 99999;
                    font-size: 0;
                    line-height: 0;
                }
            }

            &:hover, &:focus {
                background: $c-gold-medium;
            }
         }
      }
      
      > a {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         @include mediaWQuery($media-query-m) {
            flex-wrap: initial;
         }

         &:hover, &:focus {
            position: relative;
            transform: none;
            .card-product__buttons { display: none!important }
         }
         
         .card-product__thumb {
            width: 87px;
            height: 87px;
            padding-top: 0;
            flex-basis: 87px;
            min-width: 87px;
         }
         
         .card-product__content {
            padding: 0 .5rem;
            flex-basis: calc(100% - 87px);
            > .h5, &-price { font-size: 18px }
            > .h5 {
               margin-bottom: .5rem;
               height: auto;
            }

            &-price { margin-top: .5rem }
         }
         
         .card-product__buttons { display: none }
      }
      
      & +  .card-product--smaller {
         margin-top: 1rem;
      }
   }
   
   &--modal {
      margin-top: 0;
      > a {
         flex-wrap: wrap;
         padding: 1rem 0;
         
         @include mediaWQuery($media-query-m) {
            padding: 1rem;
         }
         
         &:hover, &:focus {
            background: #F5F4EE;
            box-shadow: none;

            .card-product__buttons {
               display: block!important;
               margin-top: .5rem;
               opacity: 1;

               > .button { transition: none }
            }
         }
         
         .card-product__content { flex-basis: calc(100% - 87px); }
         
         .card-product__buttons {
            flex-basis: 100%;
            display: block!important;
            transform: scale(1);
            padding: 0;
            margin-top: 1rem;
            text-align: right;
            
            @include mediaWQuery($media-query-s) {
               margin-top: .5rem;
               
            }            
            
            > .button {
               width: auto;
               padding: .5rem 1rem;
               @extend .button--black;
               font-size: 1em;
            }

            > object { display: none }
         }
      }
   }
   
   &.card-product--modal + &.card-product--modal {
      margin-top: 0;
   }
}

#modal-block-search{
   .card-product__buttons span {
      width:100%;
   }
}

.ais-Hits-item {
   margin-bottom: 2rem;
}

.empty-thumbnail-state {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 100%;
}

.card-product {
   .empty-thumbnail-state {
      position: absolute;
      top: 0;
      left: 0;
   }
}
  • URL: /components/raw/card-product/card-product.scss
  • Filesystem Path: components/06-components/03-cards/04-card-product/card-product.scss
  • Size: 8.7 KB
  • Content: 
    // Check element absolute
const setHeightFromChild = element => {
   let child = element.querySelector('a');
   element.style.height = '';
   element.style.height = `${getHeightElement(child)}px`;
}

document.addEventListener('DOMContentLoaded', () => {
   [].slice.call(document.querySelectorAll('.card-product:not(.card-product--smaller)')).forEach(cardProduct => {
      setHeightFromChild(cardProduct);
      window.onresize = () => setHeightFromChild(cardProduct);
   })
})
  • URL: /components/raw/card-product/card-product.js
  • Filesystem Path: components/06-components/03-cards/04-card-product/card-product.js
  • Size: 478 Bytes

There are no notes for this item.