@meeovi/layer-social 1.0.3

package/app/assets/commerce/sass/ui-assets/components/_cards-item.scss

@@ -0,0 +1,113 @@
+/* IF CARD IS LINKED */
+a[class*='card']{
+    color:initial;
+    &:hover{
+        .title{ color:$primary; }
+    }
+}
+
+
+/* BASE STYLE FOR PRODUCT ITEM */
+[class*='card-product']{
+
+    a.title{color:$dark; display: block;
+        &:hover{ color:$primary; }
+    }
+
+    .img-wrap .badge{  top: 10px; left: 10px; position: absolute;  }
+
+    p{margin-bottom: 0;}
+    .img-wrap{
+        overflow:hidden; position:relative;
+        img{ height:100%; max-width:100%; width:auto; display:inline-block; object-fit:cover;}
+    }
+}
+
+/* GRID STYLE PRODUCT ITEM */
+.card-product-grid{ margin-bottom:20px;
+    .img-wrap{  height:250px; }
+
+    .info-wrap{ overflow:hidden;  padding:16px; }
+    .bottom-wrap{padding:16px; border-top:1px solid $border-color;}
+
+    .topbar{
+        position:absolute; top:0; width: 100%; z-index: 10; left: 0; text-align:initial;
+        padding:10px 15px;
+        a{ color:#ccc; 
+            &:hover{ color: $primary }
+        }
+    }
+    .fix-height{ height:80px; overflow:hidden; }
+    .btn-overlay { 
+        transition:.5s;  opacity:0;
+        left: 0;  bottom: 0;
+        color: #fff;   width: 100%;   padding: 5px 0; text-align: center;
+        position: absolute; 
+        background: rgba(0,0,0,0.5);
+    }
+    &:hover .btn-overlay{ opacity:1;}
+    &:hover{box-shadow:0 4px 15px rgba(#999, .3); transition:.3s}
+}
+
+.item-slide .card-product-grid{ margin-bottom:0; }
+
+/* LARGE LIST STYLE PRODUCT ITEM */
+.card-product-list{ margin-bottom:20px; 
+    .img-wrap{ height:220px; border-radius:$border-radius 0 0 $border-radius; }
+    .info-main{ padding:1.5rem 1rem}
+    .info-aside{ padding:1.5rem 1rem; border-left:1px solid $border-color; height: 100%  }
+    &:hover{box-shadow:0 4px 15px rgba(#999, .3); transition:.3s}
+}
+
+
+.card-sm{
+    .img-wrap{ height: 180px; }
+}
+
+.card-lg{
+    .img-wrap{ height:280px; }
+}
+
+
+
+.card-category{ display:block; margin-bottom:20px; overflow: hidden; min-height: 410px;
+    .card-title{ font-weight: 600; font-size:18px; }
+    .img-wrap{
+        overflow: hidden; display:inline-block;
+        height:170px; background:#fff0c5;
+        img{ height:100%; width:60%; object-fit:cover; mix-blend-mode:multiply; }
+    
+    }
+    .list-menu a:hover{ margin-left:3px; transition:.2s; }
+    &:hover{ border-color:$primary; }
+}
+
+
+
+.card-banner{display:flex; position:relative; overflow:hidden;  
+    background-color:#fff; background-size: cover; background-position:center center;  
+    .card-body{background-size: cover; position:relative; z-index:10}
+    
+    .caption{ background-color:rgba(#000, .65); z-index:10;  padding:1.25rem; color:#fff;    }
+    .caption.bottom{ bottom:0; left:0;  position:absolute;  width:100%; }
+    .caption.top{ top:0; left:0; position:absolute;  width:100%; }
+   
+    .caption.left{ top:0; left:0; bottom:0; position:absolute;}
+
+    .text-bottom{ position:absolute; left:0; bottom:0; left:0; z-index:10; width:100%; 
+        padding:7px 20px; padding-top:30px;  border-radius:0 0 $border-radius $border-radius;
+        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
+        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
+        color: #fff;
+    }
+
+    .img-bg{
+        position: absolute; right:0; bottom:0;
+        mix-blend-mode: multiply; max-width:100%;
+    }
+}
+
+
+.card-post{
+    .card-img-top{ height:200px; object-fit:cover; }
+}

package/app/assets/commerce/sass/ui-assets/components/_elements.scss

@@ -0,0 +1,72 @@
+.card{ 
+    .img-wrap{overflow:hidden; }
+}
+
+.icontext{
+    display: inline-flex; align-items: center;  vertical-align: middle;
+    p{ margin-bottom:0; }
+    .text{ width: 100%; line-height:$line-height-sm; color:$dark; }
+    .icon{position:relative;   margin-right:10px; flex-shrink:0; flex-grow:0;}
+    .title{ display:block; margin-bottom:0;} 
+}
+
+.tag{
+  display: inline-block; padding:3px 7px; background:#f2f2f2; border:1px solid #eee; border-radius:3px; margin-top:4px; margin-right: 2px; font-size:85%;
+}
+
+.item-logo{ margin-bottom:20px; text-align:center;
+  img{max-height:65px;}
+}
+
+
+.timer{
+  > div{ display:inline-block; text-align: center; margin-right:5px;  }
+  .num{ padding:7px 3px;  display:block; background-color: $dark; min-width: 44px; color:#fff; font-size:22px; border-radius:6px; line-height:1.2; }
+}
+
+.notify{
+  position: absolute;
+  top: -4px;  right: -10px;
+  display: inline-block;
+  padding: .25em .6em;
+  font-size: 12px;  line-height: 1;  text-align: center;
+  font-weight:300;
+  border-radius: 3rem;  color: #fff;  background-color:$red;
+}
+
+.price{ font-weight: 600; color:$dark; }
+.price-old{color:$text-muted; margin-left:3px; font-size:85%; }
+
+.icon-control{margin-top:5px; float:right; font-size:80%}
+
+.card-header{
+    .title{ margin-bottom:0; line-height:1.5}
+}
+
+.filter-group{ border-bottom:1px solid $border-color; margin-top:10px; padding-bottom:10px; 
+  .title{ margin-bottom:0;}
+  &:last-child{border-bottom:0}
+  .inner{ padding-top:16px; padding-bottom:7px;   }
+}
+
+/* ====================== block ==================== */
+.box{
+  padding:20px; background:#fff; border:1px solid $border-color;
+  img{ max-width: 100%;  }
+}
+
+
+/* ================= RATINGS ============== */
+.label-rating{margin-left:7px; display:inline-block; vertical-align:middle}
+
+
+/* rating-list */
+.rating-stars{display:inline-block; vertical-align:middle; list-style:none; margin:0; padding:0; position:relative; 
+    white-space: nowrap; clear:both;
+    i{ font-size:14px; color:#ccc; display:inline;}
+    li{display:block;  text-overflow:clip;  white-space:nowrap; z-index:1; }
+  
+    li.stars-active{z-index:2; position:absolute; top:0; left:0; overflow: hidden;
+        i{color:orange;}
+    }
+}

package/app/assets/commerce/sass/ui-assets/components/_forms.scss

@@ -0,0 +1,19 @@
+.form-inline input[type='number'] {
+    max-width: 100px;
+}
+
+.input-spinner{ width: 120px;  flex-wrap: nowrap; display:inline-flex;
+  input.form-control{ text-align: center; max-width: 46px;  flex-basis:46px;  border-color:$border-color; flex-grow: 0; }
+  .btn{ width: 36px; text-align: center; }
+}
+
+.checkbox-btn{ position:relative;
+	input {
+	    position: absolute;
+	    z-index: -1;
+	    opacity: 0;
+	}
+	input:checked ~ .btn{
+		 border-color:$primary; background-color:$primary; color:#fff; 
+	}
+}

package/app/assets/commerce/sass/ui-assets/components/_items.scss

@@ -0,0 +1,25 @@
+
+
+
+.itemside{ position:relative;  display:flex; width:100%;
+	
+	.aside{position:relative; flex-shrink: 0;}
+	.info{padding-left:15px;  padding-right:7px;  }
+	
+	p{margin-bottom:0;}
+	.title{  display: block; margin-bottom:5px; color:$dark; }
+	a.title:hover{ color: $primary }
+}
+
+a.itemside{color: initial; }
+
+.items-bordered-wrap{
+	.itemside:not(:last-child){
+		border-bottom:1px solid $border-color; padding-bottom:10px; margin-bottom:10px;
+	}
+}
+
+.itemlist {
+    padding: 20px;
+    border-bottom: 1px solid #eee;
+}

package/app/assets/commerce/sass/ui-assets/components/_lists.scss

@@ -0,0 +1,90 @@
+.list-inline{margin-bottom:0;}
+.list-inline-item{vertical-align:middle}
+
+/* --------- description list --------*/
+
+dl[class="row"]{ margin-bottom:0;
+  dt{  }
+}
+
+[class*="dlist-"]{
+  margin-bottom:5px;
+  dd{ margin-bottom:0}
+}
+
+.dlist-inline{  
+  dt, dd{ display:inline-block; }
+}
+
+.dlist-align{   display:flex;
+  dt{  width: 120px; word-wrap: break-word; font-weight: normal }
+  dd{ flex-grow: 1; }
+}
+/* -------------------- list.row--------------------- */
+ul.row, ul.row-sm{ list-style:none; padding:0; }
+
+/* ================= lists ================= */
+[class*="list-"] li:after {
+  visibility: hidden;
+  display: block;
+  content: "";
+  overflow: hidden; 
+  height: 0; clear: both;
+}
+
+.list-icon { list-style:none; padding-left: 0;
+  li{margin-bottom:7px; position:relative; padding-left:30px; }
+  .icon{width:22px; margin-right:15px; vertical-align:middle;  text-align: center; color:$secondary;
+    position:absolute;  top:3px; left:0;
+  }
+  span{ vertical-align:middle}
+}
+
+.list-bullet{list-style: none; padding-left: 0; }
+.list-bullet li{margin-bottom:5px; position:relative; padding-left:15px;}
+.list-bullet li::before { 
+    content: " ";
+    position:absolute;  top:8px;  left:0;
+    width: 7px; border-radius:100%;
+    height: 7px;
+    background:$gray-400;
+    
+}
+
+.list-check{ padding-left: 0; list-style:none;
+  > li{ position: relative; padding-left:24px; margin-bottom:7px;}
+  > li::before {
+       font-family: 'Font Awesome 5 Free';
+       font-weight: 900; font-size: 13px;
+      color:$success;  position:absolute; top:3px; left:0; 
+      content: "\f00c"; 
+  }
+}
+
+
+.list-normal{ list-style: none; padding-left:0;
+  li{ padding-left:1em; margin-bottom:7px; }
+   li:before{ content: "\2022"; color: $primary;
+      display: inline-block; width: 1em;
+       margin-left: -1em
+    }
+}
+
+.list-menu{ list-style: none; margin:0; padding-left:0;
+  li{ margin-bottom:5px; }
+  a{ color:$body-color;
+    &:hover{ color: $primary }
+  }
+}
+
+.cols-two{
+  column-count:2;
+}
+
+.cols-three{
+  column-count:3;
+}
+
+.cols-four{
+  column-count:4;
+}

package/app/assets/commerce/sass/ui-assets/components/_menu.scss

@@ -0,0 +1,25 @@
+// .menu-category{ margin:0; padding:0;
+// 	li{ position: relative; display: block; border-bottom: 1px solid $border-color;}
+// 	li:last-child{ border-bottom:0; }
+// 	a{ color:$dark;  }
+// 	> li > a {	display: block; padding:10px 0px; 	} 
+
+// 	.submenu{ display:none; margin:0; padding:0; box-shadow:5px 5px 15px rgba(#000, .2);
+// 		z-index:20;  position:absolute; 
+// 		li { list-style:none; }
+// 		left: 100%; top:0; width:250px;  background: #fff; 
+// 		li a{ padding:10px 16px; display: block;}
+// 	}
+
+// 	li:hover{
+// 		background:$gray-100; transition: all 0.3s;
+// 	}
+// 	li:hover .submenu{
+// 		display:block; margin-left:0px; 
+// 	}
+
+// 	.has-submenu{
+// 		> a:after{ content:"\203A"; font-size: 24px; color:#999; line-height: 18px; font-weight: bold; float:right; }
+// 	}
+
+// } //.menu-side

package/app/assets/commerce/sass/ui-assets/components/_plugin-styles.scss

@@ -0,0 +1 @@
+

package/app/assets/commerce/sass/ui-assets/helpers/_bg.scss

@@ -0,0 +1,53 @@
+
+
+
+.bg{background-color:$bg;}
+.bg-white{background-color:#fff}
+.bg-orange {   background-color: $orange;}
+.bg-green {   background-color: $green;}
+.bg-blue {   background-color: $blue;}
+.bg-red {   background-color: $red;}
+
+.bg-light-orange {   background-color: #ffdcb0;}
+.bg-light-green {   background-color: #abeae8;}
+.bg-light-blue {   background-color: #9fe0ff;}
+.bg-light-red {   background-color: #fbd5e7;}
+
+
+.bg-gradient-blue{
+  @include diagonalGradient(rgba($blue, .65), rgba($dark, .4));  transition:.5s;
+}
+.bg-gradient-green{
+  @include diagonalGradient(rgba($green, .65), rgba($dark, .4));  transition:.5s;
+}
+.bg-gradient-orange{
+  @include diagonalGradient(rgba($orange, .65), rgba($dark, .4));  transition:.5s;
+}
+.bg-gradient-red{
+  @include diagonalGradient(rgba($red, .65), rgba($dark, .4));  transition:.5s;
+}
+.bg-gradient-pink{
+  @include diagonalGradient(rgba($pink, .65), rgba($dark, .4));  transition:.5s;
+}
+
+.bg-pattern{
+    background-image: url(../images/banners/bg-pattern.svg), linear-gradient(135deg, $primary, $secondary);
+    background-size: cover, auto;
+    background-repeat: no-repeat, repeat;
+    background-position: 0px 0px, 50% 50%;
+}
+
+.bg-img{ overflow: hidden;
+  background-color:#ddd;
+  background-image: linear-gradient(135deg, rgba($primary, .8), rgba($secondary, .9)), url("../images/banners/bg-cpu.jpg");
+  background-position: 0px 0px, 50% 50%;
+  background-size: auto  cover;
+}
+
+.overlay-gradient {position:relative;
+    &:before{position:absolute; content:""; display:block; top:0; left:0; right:0; bottom:0;
+        opacity:.6; transition:.5s;
+        @include diagonalGradient($primary, $secondary);  
+    }
+    &:hover:before{opacity:.9;}
+}

package/app/assets/commerce/sass/ui-assets/helpers/_helper-classes.scss

@@ -0,0 +1,110 @@
+a{
+    &:hover{ text-decoration: none;}
+}
+
+.img-wrap{text-align: center; display:block;
+    img{ max-width: 100%;}
+}
+
+.icon-wrap{text-align:center; display:inline-block;}
+
+.price-wrap{ letter-spacing: -0.7px  }
+
+.content-body{
+	flex: 1 1 auto; padding:30px; }
+
+/* =================  DEFINED VARIABLES =================== */
+.icon-xs, .icon-sm, .icon-md, .icon-lg{display:inline-block; text-align:center; flex-shrink: 0; flex-grow:0; }
+.icon-xs{ width:32px;  height:32px;  line-height:32px!important; font-size:16px; }
+.icon-sm{ width:48px;  height:48px;  line-height:48px!important; font-size:20px; }
+.icon-md{width:60px;  height:60px;  line-height:60px!important; font-size:28px; }
+.icon-lg{width:96px;  height:96px;  line-height:96px!important; font-size:42px; }
+
+
+.img-xs, .img-sm, .img-md, .img-lg{object-fit:cover; flex-shrink: 0; flex-grow:0;}
+.img-xs{width:40px; height:40px; }
+.img-sm{width:80px; height:80px; }
+.img-md{width:140px; height:140px; }
+.img-lg{width:250px; height:250px; }
+
+.icon-flag-sm{ width:28px; margin-right:10px; }
+
+.center-xy{  top:50%; left:50%; position:absolute; transform:translate(-50%, -50%); }
+.center-y{top: 50%; position: absolute; transform:translateY(-50%)}
+.center-x{left: 50%; position: absolute; transform:translateX(-50%)}
+
+.vh-100{ height:100vh; }
+
+.overflow-h{overflow:hidden}
+.flip-h{ transform: scaleX(-1);}
+
+.opacity{ opacity:.5; }
+
+[class*="hover-"]{transition:.5s;}
+
+.hover-bg:hover{ @include diagonalGradient($primary, $primary);  transition:.5s; }
+.hover-zoom:hover{
+    transition:.5s; 
+    transform: scaleX(1);
+}
+
+.bordered-cols{
+     // border-bottom: 1px solid $border-color;
+     // overflow: hidden;
+}
+.bordered-cols > [class*="col-"] {
+    overflow: hidden;
+    border-color: $border-color;
+    border-width: 1px 0 0 1px;
+    border-style: solid;
+    // outline: 1px solid $border-color;
+    // background-color: #fff;
+}
+
+
+/* ============== spacing ============== */
+.padding-y{padding-top:30px; padding-bottom:30px;}
+.padding-top{padding-top:30px;}
+.padding-bottom{padding-bottom:30px;}
+
+.padding-y-lg{padding-top:48px;  padding-bottom:48px;}
+.padding-top-lg{padding-top:48px;}
+.padding-bottom-lg{padding-bottom:48px;}
+
+.padding-y-sm{padding-top:10px; padding-bottom:10px;}
+.padding-top-sm{padding-top:10px;}
+.padding-bottom-sm{padding-bottom:10px;}
+
+
+
+.relative{position:relative}
+.absolute{position:absolute}
+
+var{font-style:normal;}
+figure{margin-bottom:0}
+
+
+.form-noborder{
+	input, select, .btn {border:0}
+  select.form-control-lg:not([size]):not([multiple]){ height:2.875rem; }
+}
+
+/* all clearfix */
+article:after,
+.form-group:after
+ {
+	display: block;
+  clear: both;
+  content: "";
+}
+
+/* -------------------- small grid gutter --------------------- */
+.row-sm {  
+margin-right: -5px;  margin-left: -5px;
+display: -ms-flexbox;
+display: flex;
+-ms-flex-wrap: wrap;
+flex-wrap: wrap;
+}
+.row-sm > [class^="col"] {  padding-left:5px;  padding-right:5px;}
+

package/app/assets/commerce/sass/ui-assets/helpers/_mixins.scss

@@ -0,0 +1,50 @@
+@charset "UTF-8";
+
+/////////////////// Linear Gradient
+// usage: .grad{ @include linearGradient(#cccccc, #666666); }
+@mixin linearGradient($top, $bottom){
+    background: $top; /* Old browsers */
+    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
+} 
+
+//////////////////// diagonal gradient
+// usage: .grad-diagonal{ @include diagonalGradient(#cccccc, #666666); }
+@mixin diagonalGradient($top, $bottom){
+      background: $bottom; /* For browsers that do not support gradients */
+      background: -webkit-linear-gradient(left top, $top, $bottom); /* For Safari 5.1 to 6.0 */
+      background: -o-linear-gradient(bottom right, $top, $bottom); /* For Opera 11.1 to 12.0 */
+      background: -moz-linear-gradient(bottom right, $top, $bottom); /* For Firefox 3.6 to 15 */
+      background: linear-gradient(to bottom right, $top, $bottom); /* Standard syntax */
+}
+
+/////////////////// Box shadow
+// usage: .classname{ @include shadow; } 
+@mixin shadow{
+  box-shadow:0 4px 15px rgba(#333, .4);
+  -webkit-box-shadow:0 4px 15px rgba(#333, .4);
+  -moz-box-shadow:0 4px 15px rgba(#333, .4);
+}
+
+@mixin shadow-light {
+  box-shadow:0 6px 12px 0 rgba(0, 0, 0, .1);
+  -webkit-box-shadow:0 6px 12px 0 rgba(0, 0, 0, .1);
+  -moz-box-shadow:0 6px 12px 0 rgba(0, 0, 0, .1);
+}
+
+
+/////////////////// Clearfix
+// usage: .myclear{ @include clearfix; } 
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+

package/app/assets/commerce/sass/ui-assets/helpers/_typography.scss

@@ -0,0 +1,44 @@
+/* --------------------- titles ---------------------- */
+.section-heading{ margin-bottom:10px; margin-top:10px;}
+.section-title{  color:$dark; }
+
+.title-text{margin-top:30px; margin-bottom:10px; font-weight:bold;  color:$dark;}
+.title-page{ color:$dark; }
+
+
+
+.b{font-weight:600;}
+
+.white{color:#fff}
+.dark{color:$dark}
+.black{color:$black}
+
+p:last-child{ margin-bottom:0  }
+
+/* ==================  title element ================ */
+.heading-line{position: relative;
+	.title-section{
+		position: relative;
+		display: inline-block;
+		padding-right: 15px;
+		background-color: $bg;
+		z-index: 2;
+	}
+}
+.heading-line::before {
+    top: 35%;
+    border-radius:7px;
+    border-top-style: solid;
+    content: "";
+    position: absolute;
+    left: auto;
+    right: 0;
+    width: 100%;
+    height: 0;
+    border: 3px solid #dcdee3;
+    overflow: hidden;
+}
+
+/* ==================  title helpers ================ */
+.rtl{direction:rtl;}
+.ltr{direction:ltr;}

package/app/assets/commerce/sass/ui-assets/pages/_page-base.scss

@@ -0,0 +1,10 @@
+
+body{
+	background-color:$bg;
+}
+
+/* ================ PAGES HEADER ================== */
+.section-pagetop{ 
+	 padding:45px 0; 
+}
+

package/app/assets/commerce/sass/ui-assets/pages/_page-detail.scss

@@ -0,0 +1,30 @@
+/* ================== PAGE DETAILS ==================  */
+.gallery-wrap{
+	.img-big-wrap{ margin-bottom:10px; border-radius:$border-radius;  overflow:hidden;  background-color:#fff;
+		// height:450px; 
+		a{text-align: center; display:block;}
+		img{height:480px; width:auto; display:inline-block; cursor:zoom-in; }
+	}
+	.thumbs-wrap{ text-align:center; margin-bottom:20px;
+		.item-thumb{
+			width:60px; height:60px; border:1px solid #ddd; border-radius:6px;  margin:3px; display:inline-block; overflow:hidden;
+			&:hover{ border-color:$primary; }
+		}
+			img{
+				max-width:100%; max-height:100%; object-fit:cover; 
+			    cursor:zoom-in;
+			}
+		
+	}
+
+}
+
+
+
+.item-option-select{
+	margin-bottom:1rem; display: inline-block; margin-right:15px;
+	.btn{ min-width: 80px; }
+}
+
+
+.title-description:not(:first-child){ margin-top:30px; }