MIUN - Design Library

Cart 

<cart cart-url="www.google.com"></cart>
 
<cart cart-url="{{cartUrl}}"></cart>
 
{
  "cartUrl": "www.google.com"
}
  • Content: 
    Vue.component('cartcomponent', {
  props: [
    'cartUrl'
  ],
  template: 
  '<div class="cart">' + 
    '<a :href="cartUrl" v-if="this.$root.shared.cart.length>0" class="cart-size__container"><span class="cart-size"><span class="cart-size__inner">{{ this.$root.shared.cart.length }}</span></span><span class="material-icons">local_mall</span><strong class="d-none d-md-block">My courses</strong></a>' +
  '</div>'

});
  • URL: /components/raw/cart/Cart.js
  • Filesystem Path: src\components\01-global_components\Cart\Cart.js
  • Size: 429 Bytes
  • Content: 
    .cart {
    position: relative;
    .cart-size__container {
        .cart-size {
            display: flex;
            align-items: center;
            background: $orange;
            border-radius: 20px;
            width: 15px;
            height: 15px;
            color: #fff;
            font-size: 10px;
            position: absolute;
            top: -1px;
            left: -1px;
            line-height: 15px;
            .cart-size__inner {
                display: block;
                color: #fff;
                text-align: center;
                width: 100%;
            }
        }
    }
    .cart-items {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        padding: 20px 30px;
        box-shadow: $box-shadow;
        z-index: 999;
        .material-icons {
            color: #333 !important;
        }
    }
    .cartTable {
        .cart_checkout {
            td {    
                padding-top: 10px;        
                a {
                    color: #333333 !important;
                }
            }
        }
    }
}
  • URL: /components/raw/cart/Cart.scss
  • Filesystem Path: src\components\01-global_components\Cart\Cart.scss
  • Size: 1.1 KB

There are no notes for this item.