From: nael Date: Fri, 31 May 2019 16:19:30 +0000 (+0200) Subject: wip #2811 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e8f559f5bb7de6ddb1d3f55984ae0d9d2661bb56;p=pmi.git wip #2811 @4 --- diff --git a/public/_modules/product-onglet/img/icon-file-2.svg b/public/_modules/product-onglet/img/icon-file-2.svg new file mode 100644 index 0000000..e78821b --- /dev/null +++ b/public/_modules/product-onglet/img/icon-file-2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/_modules/product-onglet/img/icon-file.svg b/public/_modules/product-onglet/img/icon-file.svg new file mode 100644 index 0000000..6309327 --- /dev/null +++ b/public/_modules/product-onglet/img/icon-file.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/_modules/product-onglet/index.html b/public/_modules/product-onglet/index.html new file mode 100644 index 0000000..f429820 --- /dev/null +++ b/public/_modules/product-onglet/index.html @@ -0,0 +1,125 @@ + + + + + + + + + + pmi + + + +
+ +
+ +
+ Titre de la description +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante ipsum, fringilla nec diam ac, + malesuada ullamcorper lectus. Quisque sit amet libero pharetra, pulvinar lectus non, tempor velit. + Integer quis lorem ut metus aliquet luctus ut nec orci. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vehicula, mi eu + semper elementum, erat turpis viverra justo, rhoncus egestas nisi nunc non odio. + Nam pretium consectetur ex, eget ultricies mauris varius vel. Aliquam luctus augue mattis, + efficitur ante quis, sollicitudin elit. Sed vel dui laoreet, sagittis nisl at, ultrices libero. + Duis nec tincidunt ligula. Curabitur elementum augue vel ligula molestie tincidunt. Sed lacus lorem, + convallis facilisis turpis sed, luctus lacinia tellus. Phasellus venenatis auctor enim, non maximus + dui tristique sed. Phasellus ac vulputate dui. Donec consequat, tellus eget viverra facilisis, + leo purus luctus massa, ac sollicitudin mauris magna a erat. +

+
+ + + + + + + + + +
+
+ + + + \ No newline at end of file diff --git a/public/_modules/product-onglet/product.js b/public/_modules/product-onglet/product.js new file mode 100644 index 0000000..06f9d0e --- /dev/null +++ b/public/_modules/product-onglet/product.js @@ -0,0 +1,19 @@ +// jshint ignore: start + +$('.product-nav').each(function () { + + $(this).on('click',function () { + let that = $(this); + // alert(that.data('nav')); + + // TODO nav on click add class and remove class (last item clicked) + $('.content-item').each(function () { + if($(this).data('content') === that.data('nav')){ + + $(this).next().removeClass('active-content'); + $(this).addClass('active-content'); + + } + }) + }) +}); diff --git a/public/_modules/product-onglet/style.styl b/public/_modules/product-onglet/style.styl new file mode 100644 index 0000000..efee1e4 --- /dev/null +++ b/public/_modules/product-onglet/style.styl @@ -0,0 +1,59 @@ +$h3 = 24px +$barlow = 'Barlow', sans-serif +$muli = 'Muli', sans-serif +$dark = #6B7287 +$lightgrey = #F7F8FC +$darkblue = #152F4E + +* + padding: 0 + box-sizing: border-box + margin: 0 + font-family: $muli + +#product-detail + .content + max-width 1536px + padding 55px 0 48px 48px + background $lightgrey + .product-nav + padding : 25px 50px + font-family $barlow + font-size: 18px + color: $darkblue + cursor pointer + .active-nav + background $lightgrey + .description + &-title + font-family: $barlow + font-size: 18px + &-paragraph + max-width 970px + margin-top: 1.45em + .specification + &-info + width: 314px + margin-right: 5.125em + .option + &-item + &::after + content: '' + display block + width: 4px + height: 1px + position relative + background $dark + top: -12px; + left: -7px; + .accessoire + &-item + &::after + content: '' + display block + width: 4px + height: 1px + position relative + background $dark + top: -12px; + left: -7px; \ No newline at end of file