tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/styles/cards/generalCardsStyles.module.css

@@ -0,0 +1,79 @@
+
+@media (max-width: 576px) {
+    .productcard {
+        max-width: 280px !important;
+        min-width: 280px !important;
+    }
+    .Simpleproductcard {
+        max-width: 250px !important;
+        min-width: 250px !important;
+    }
+    .ClassicCategoryCard{
+        max-width: 330px !important;
+        min-width: 330px !important;
+    }
+    .newproductcard{
+        max-width: 330px !important;
+        min-width: 330px !important;
+    }
+}
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1 !important;
+    }
+}
+
+.imagecontainer {
+    transition: all 0.4s !important;
+    position: relative !important;
+}
+.intialimage {
+    visibility: visible !important;
+    opacity: 1 !important;
+    transition: visibility 0.4s, opacity 0.4s linear !important;
+
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+}
+.secondaryimage {
+    visibility: hidden !important;
+
+    opacity: 0 !important;
+    transition: visibility 0.4s, opacity 0.4s linear !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+}
+
+.imagecontainer:hover .intialimage {
+    visibility: hidden !important;
+
+    opacity: 0 !important;
+    transition: visibility 0.4s, opacity 0.4s linear !important;
+
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+}
+.imagecontainer:hover .secondaryimage {
+    visibility: visible !important;
+
+    opacity: 1 !important;
+    transition: visibility 0.4s, opacity 0.4s linear !important;
+
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+}

package/srcoman/styles/cards/productcard_animatedbuttons.module.css

@@ -0,0 +1,139 @@
+.buttonContainerCenter {
+    position: absolute;
+    left: 0;
+    bottom: 60px;
+    opacity:  0;
+    width: 100%;
+    text-align: center;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+    transition: all, 0.3s;
+}
+.buttonContainerCenter li {
+    list-style: none;
+    display: inline-block;
+    position: relative;
+    -webkit-transition: all 0.4s ease 0.1s;
+    -o-transition: all 0.4s ease 0.1s;
+    transition: all 0.4s ease 0.1s;
+}
+.buttonContainerCenter li span {
+    display: block;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+    transition: all, 0.3s;
+}
+.buttonContainerCenter li span i {
+    position: relative;
+    transform: rotate(0);
+    -webkit-transition: all, 0.2s;
+    -moz-transition: all, 0.2s;
+    -ms-transition: all, 0.2s;
+    -o-transition: all, 0.2s;
+    transition: all, 0.2s;
+}
+.productcard:hover .image_container .buttonContainerCenter {
+    bottom: 40% !important;
+    opacity: 1;
+}
+.buttonContainerCenter li:hover span i {
+    transform: rotate(360deg);
+}
+@media screen and (max-width: 800px) {
+    .productcard .image_container .buttonContainerCenter {
+        bottom: 20px !important;
+        opacity: 1;
+    }
+    .buttonContainerBottom{
+        bottom: 20px !important;
+        opacity: 1;
+    }
+    .buttonContainerCenter{
+        top: 50% !important;
+        opacity: 1;
+    }
+}
+@media screen and (max-width: 500px) {
+    .productcard .image_container .buttonContainerCenter {
+        bottom: 20px !important;
+        opacity: 1;
+    }
+    .buttonContainerBottom{
+        bottom: 20px !important;
+    opacity: 1;
+    }
+    .buttonContainerCenter{
+        top: 50% !important;
+        opacity: 1;
+    }
+}
+
+.buttonContainerBottom {
+    position: absolute;
+    left: 0;
+    bottom: -30px;
+    opacity: 0;
+    width: 100%;
+    text-align: center;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+    transition: all, 0.3s;
+}
+.buttonContainerBottom li {
+    list-style: none;
+    display: inline-block;
+    position: relative;
+    -webkit-transition: all 0.4s ease 0.1s;
+    -o-transition: all 0.4s ease 0.1s;
+    transition: all 0.4s ease 0.1s;
+}
+.buttonContainerBottom li span {
+    display: block;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+    transition: all, 0.3s;
+}
+.buttonContainerBottom li span i {
+    position: relative;
+    transform: rotate(0);
+    -webkit-transition: all, 0.2s;
+    -moz-transition: all, 0.2s;
+    -ms-transition: all, 0.2s;
+    -o-transition: all, 0.2s;
+    transition: all, 0.2s;
+}
+.productcard:hover .image_container .buttonContainerBottom {
+    bottom: 20px !important;
+    opacity: 1;
+}
+
+.image_container .buttonContainerBottom.buttonContainerBottom_show {
+    bottom: 20px !important;
+    opacity: 1;
+}
+.buttonContainerBottom li:hover span i {
+    transform: rotate(360deg);
+}
+@media screen and (max-width: 800px) {
+    .productcard .image_container .buttonContainerBottom {
+        bottom: 20px !important;
+        opacity: 1;
+    }
+}
+
+@media (max-width: 576px) {
+    .cardcont {
+        max-width: 280px !important;
+        min-width: 280px !important;
+        /* min-width: 200px;
+        max-width: 200px; */
+    }
+}

package/srcoman/styles/cards/productcard_with_textonhover.module.css

@@ -0,0 +1,18 @@
+.productcard {
+    position: relative;
+    cursor: pointer !important;
+}
+.productcard .productcard_text_container {
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+@media (max-width: 576px) {
+    .productcard {
+        max-width: 250px !important;
+        min-width: 250px !important;
+    }
+}

package/srcoman/styles/cards/productccard_with_imageontopleft.module.css

@@ -0,0 +1,85 @@
+.productcard {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    background-clip: border-box;
+    transition: all 0.2s;
+}
+.productcard {
+    position: relative !important;
+}
+
+.img_container {
+    /* border-radius: 50%; */
+    /* width: 100px; */
+    /* height: 100px; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    width: 10;
+    height: 10;
+    margin: auto;
+    top: -60px;
+
+}
+@media screen and (max-width: 500px) {
+    .img_container {
+        width: 16vh !important;
+        height: 16vh !important;
+        top: -70px;
+    }
+}
+.img_container img {
+    max-width: 70%;
+    max-height: 70%;
+}
+.productcard .pill {
+    width: 12vh;
+    height: 4vh;
+    background-color: var(--fav) !important;
+    color: white;
+    padding: 0 1%;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.productcard .addbtn {
+    width: 13vh;
+    height: 4vh;
+    background-color: white !important;
+    color: black;
+    padding: 0 1%;
+
+    border-radius: 5px;
+    font-size: 12px;
+    font-weight: 500;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #e6e6e6;
+}
+.productcard .addbtn:hover {
+    opacity: 0.3 !important;
+    transition: 0.3s;
+}
+
+.play-on-hover{
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    cursor: pointer;
+}
+
+.play-on-hover:hover{
+    background-image: url();
+
+}