Socket
Socket
Sign inDemoInstall

krishan21-react-demo5

Package Overview
Dependencies
8
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0 to 1.0.1

93

dist/index.cjs.js

@@ -11,39 +11,72 @@ 'use strict';

var css = ".category-name {\r\n font-family: sans-serif;\r\n width: -webkit-fill-available;\r\n text-align: center;\r\n font-size: 40px;\r\n}\r\n\r\n.card-category-2 ul,\r\n.card-category-3 ul,\r\n.card-category-4 ul,\r\n.card-category-5 ul .card-category-6 ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-2 ul li,\r\n.card-category-3 ul li,\r\n.card-category-4 ul li,\r\n.card-category-5 ul li,\r\n.card-category-6 ul li {\r\n list-style-type: none;\r\n display: inline-block;\r\n vertical-align: top;\r\n}\r\n\r\n.card-category-2 ul li,\r\n.card-category-3 ul li {\r\n margin: 10px 5px;\r\n}\r\n\r\n.card-category-1,\r\n.card-category-2,\r\n.card-category-3,\r\n.card-category-4,\r\n.card-category-5,\r\n.card-category-6 {\r\n font-family: sans-serif;\r\n margin-bottom: 45px;\r\n text-align: center;\r\n}\r\n\r\n.card-category-1 div,\r\n.card-category-2 div {\r\n display: inline-block;\r\n}\r\n\r\n.card-category-1>div,\r\n.card-category-2>div:not(:last-child) {\r\n margin: 10px 5px;\r\n text-align: left;\r\n}\r\n\r\n/* Basic Card */\r\n.basic-card {\r\n width: 300px;\r\n position: relative;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.basic-card .card-content {\r\n padding: 30px;\r\n}\r\n\r\n.basic-card .card-title {\r\n font-size: 25px;\r\n font-family: 'Open Sans', sans-serif;\r\n}\r\n\r\n.basic-card .card-text {\r\n line-height: 1.6;\r\n}\r\n\r\n.basic-card .card-link {\r\n padding: 25px;\r\n width: -webkit-fill-available;\r\n}\r\n\r\n.basic-card .card-link a {\r\n text-decoration: none;\r\n position: relative;\r\n padding: 10px 0px;\r\n}\r\n\r\n.basic-card .card-link a:after {\r\n top: 30px;\r\n content: \"\";\r\n display: block;\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n width: 0;\r\n\r\n -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -moz-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -o-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n}\r\n\r\n.basic-card .card-link a:hover:after {\r\n width: 100%;\r\n left: 0;\r\n}\r\n\r\n\r\n.basic-card-aqua {\r\n background-image: linear-gradient(to bottom right, #00bfad, #99a3d4);\r\n}\r\n\r\n.basic-card-aqua .card-content,\r\n.basic-card .card-link a {\r\n color: #fff;\r\n}\r\n\r\n.basic-card-aqua .card-link {\r\n border-top: 1px solid #82c1bb;\r\n}\r\n\r\n.basic-card-aqua .card-link a:after {\r\n background: #fff;\r\n}\r\n\r\n.basic-card-lips {\r\n background-image: linear-gradient(to bottom right, #ec407b, #ff7d94);\r\n}\r\n\r\n.basic-card-lips .card-content {\r\n color: #fff;\r\n}\r\n\r\n.basic-card-lips .card-link {\r\n border-top: 1px solid #ff97ba;\r\n}\r\n\r\n.basic-card-lips .card-link a:after {\r\n background: #fff;\r\n}\r\n\r\n.basic-card-light {\r\n border: 1px solid #eee;\r\n}\r\n\r\n.basic-card-light .card-title,\r\n.basic-card-light .card-link a {\r\n color: #636363;\r\n}\r\n\r\n.basic-card-light .card-text {\r\n color: #7b7b7b;\r\n}\r\n\r\n.basic-card-light .card-link {\r\n border-top: 1px solid #eee;\r\n}\r\n\r\n.basic-card-light .card-link a:after {\r\n background: #636363;\r\n}\r\n\r\n.basic-card-dark {\r\n background-image: linear-gradient(to bottom right, #252525, #4a4a4a);\r\n}\r\n\r\n.basic-card-dark .card-title,\r\n.basic-card-dark .card-link a {\r\n color: #eee;\r\n}\r\n\r\n.basic-card-dark .card-text {\r\n color: #dcdcdcdd;\r\n}\r\n\r\n.basic-card-dark .card-link {\r\n border-top: 1px solid #636363;\r\n}\r\n\r\n.basic-card-dark .card-link a:after {\r\n background: #eee;\r\n}\r\n\r\n\r\n/* Image Card */\r\n.img-card {\r\n width: 300px;\r\n position: relative;\r\n border-radius: 5px;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.img-card .card-image {\r\n position: relative;\r\n margin: auto;\r\n overflow: hidden;\r\n border-radius: 5px 5px 0px 0px;\r\n height: 200px;\r\n}\r\n\r\n.img-card .card-image img {\r\n width: 100%;\r\n border-radius: 5px 5px 0px 0px;\r\n\r\n -webkit-transition: all 0.8s;\r\n -moz-transition: all 0.8s;\r\n -o-transition: all 0.8s;\r\n transition: all 0.8s;\r\n}\r\n\r\n.img-card .card-image:hover img {\r\n -webkit-transform: scale(1.1);\r\n -moz-transform: scale(1.1);\r\n -o-transform: scale(1.1);\r\n transform: scale(1.1);\r\n}\r\n\r\n.img-card .card-text {\r\n padding: 0 15px 15px;\r\n line-height: 1.5;\r\n}\r\n\r\n.img-card .card-link {\r\n padding: 20px 15px 30px;\r\n width: -webkit-fill-available;\r\n}\r\n\r\n.img-card .card-link a {\r\n text-decoration: none;\r\n position: relative;\r\n padding: 10px 0;\r\n}\r\n\r\n.img-card .card-link a:after {\r\n top: 30px;\r\n content: \"\";\r\n display: block;\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n width: 0;\r\n\r\n -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -moz-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -o-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n}\r\n\r\n.img-card .card-link a:hover:after {\r\n width: 100%;\r\n left: 0;\r\n}\r\n\r\n.img-card.iCard-style1 .card-title {\r\n position: absolute;\r\n font-family: 'Open Sans', sans-serif;\r\n z-index: 1;\r\n top: 10px;\r\n left: 10px;\r\n font-size: 30px;\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style1 .card-text {\r\n color: #795548;\r\n}\r\n\r\n.img-card.iCard-style1 .card-link a {\r\n color: #FF9800;\r\n}\r\n\r\n.img-card.iCard-style1 .card-link a:after {\r\n background: #FF9800;\r\n}\r\n\r\n.img-card.iCard-style2 .card-title {\r\n padding: 15px;\r\n font-size: 25px;\r\n font-family: 'Roboto', sans-serif;\r\n}\r\n\r\n.img-card.iCard-style2 .card-image {\r\n margin-bottom: 15px;\r\n}\r\n\r\n.img-card.iCard-style2 .card-caption {\r\n text-align: center;\r\n top: 80%;\r\n font-size: 17px;\r\n color: #fff;\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Roboto', sans-serif;\r\n z-index: 1;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a {\r\n border: 1px solid;\r\n padding: 8px;\r\n border-radius: 3px;\r\n color: black;\r\n font-size: 13px;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a:hover {\r\n background: black;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a:hover span {\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style3 {\r\n text-align: center;\r\n}\r\n\r\n.img-card.iCard-style3 .card-title {\r\n top: 80%;\r\n font-size: 30px;\r\n color: #fff;\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Roboto', sans-serif;\r\n z-index: 1;\r\n}\r\n\r\n.img-card.iCard-style3 .card-text {\r\n color: #636060;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link {\r\n border-top: 1px solid #e8e8e8;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link a {\r\n color: #585858;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link a:after {\r\n background: #585858;\r\n}\r\n\r\n.img-card.iCard-style4 {\r\n text-align: right;\r\n}\r\n\r\n.img-card.iCard-style4 .card-caption {\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Open Sans', sans-serif;\r\n z-index: 1;\r\n top: 10px;\r\n right: 10px;\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style4 .card-title {\r\n width: 100%;\r\n padding: 20px 0px 12px 0;\r\n color: #E91E63;\r\n}\r\n\r\n.img-card.iCard-style4 .card-title span {\r\n font-size: 25px;\r\n margin-right: 12px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle {\r\n cursor: pointer;\r\n padding: 8px 0px 13px 0px;\r\n width: 55px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span,\r\n.img-card.iCard-style4 .toggle span:nth-child(2),\r\n.img-card.iCard-style4 .toggle span:nth-child(3) {\r\n position: absolute;\r\n width: 8px;\r\n height: 8px;\r\n background: #E91E63;\r\n cursor: pointer;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(1) {\r\n right: 15px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(2) {\r\n right: 27px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(3) {\r\n right: 39px;\r\n}\r\n\r\n.img-card.iCard-style4 .card-text {\r\n opacity: 0;\r\n line-height: 0;\r\n padding-bottom: 0;\r\n color: #4c4c4c;\r\n\r\n -webkit-transition: ease-in-out 0.5s;\r\n -moz-transition: ease-in-out 0.5s;\r\n -o-transition: ease-in-out 0.5s;\r\n transition: ease-in-out 0.5s;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle.active~.card-text {\r\n opacity: 1;\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link {\r\n border-top: 1px solid #e8e8e8;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link a {\r\n color: #E91E63;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link a:after {\r\n background: #E91E63;\r\n}\r\n\r\n\r\n/* Overlay Image Card */\r\n\r\n.ioverlay-card {\r\n position: relative;\r\n text-align: left;\r\n}\r\n\r\n.ioverlay-card img {\r\n height: auto;\r\n width: 100%;\r\n border-radius: 4px;\r\n}\r\n\r\n.ioverlay-card .card-content {\r\n position: absolute;\r\n top: 25px;\r\n left: 20px;\r\n}\r\n\r\n.ioverlay-card .card-content .card-title {\r\n font-size: 25px;\r\n}\r\n\r\n.io-card-1 {\r\n color: #fff;\r\n}\r\n\r\n.io-card-1 .card-content .card-text {\r\n width: 95%;\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.io-card-1 .card-link {\r\n position: absolute;\r\n top: 140px;\r\n left: 20px;\r\n}\r\n\r\n.io-card-1 .card-link a {\r\n color: #fff;\r\n text-decoration: none;\r\n padding: 10px;\r\n border: 1px solid;\r\n border-radius: 4px;\r\n background: #3F51B5;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.io-card-1 .card-link a:hover {\r\n color: #3F51B5;\r\n background: #fff;\r\n border-color: #fff;\r\n}\r\n\r\n.io-card-2 .card-content {\r\n color: #fff;\r\n}\r\n\r\n.io-card-2 .card-link {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 20px;\r\n}\r\n\r\n.io-card-2 .card-link a {\r\n color: #fff;\r\n text-decoration: none;\r\n padding: 10px;\r\n border: 1px solid #fff;\r\n border-radius: 4px;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.io-card-2 .card-link a:hover {\r\n color: black;\r\n background-color: #fff;\r\n}\r\n\r\n.io-card-2 .card-content .card-text {\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n\r\n/* Product & Shop Cards */\r\n.card-category-4 .sp-card-1 {\r\n background-image: linear-gradient(#f74545, #673AB7);\r\n height: 245px;\r\n width: 535px;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button {\r\n padding-left: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li {\r\n list-style-type: none;\r\n display: inline-block;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) {\r\n padding: 20px 20px;\r\n float: left;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) .off-label {\r\n border: 1px solid #fff;\r\n background: #fff;\r\n font-size: 11px;\r\n padding: 7px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) .return-line {\r\n font-size: 13px;\r\n padding: 20px 0 15px 0;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button a {\r\n text-decoration: none;\r\n color: #fff;\r\n border: 1px solid;\r\n padding: 10px 15px;\r\n background: #1f3c3d;\r\n\r\n -webkit-transition: ease-in-out .2s;\r\n -moz-transition: ease-in-out .2s;\r\n -o-transition: ease-in-out .2s;\r\n transition: ease-in-out .2s;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button a:hover {\r\n background: transparent;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) {\r\n text-align: right;\r\n padding: 0;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) img {\r\n height: 170px;\r\n padding: 15px 0 0;\r\n\r\n -webkit-transition: all .3s ease-in;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n transition: all .3s ease-in;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) img:hover {\r\n -webkit-transform: scale(0.90);\r\n -moz-transform: scale(0.90);\r\n -o-transform: scale(0.90);\r\n transform: scale(0.90);\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) .price-start {\r\n text-align: center;\r\n font-size: 18px;\r\n color: #fff;\r\n padding: 18px 0px 0px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .card-title {\r\n color: #fff;\r\n font-size: 23px;\r\n font-weight: 550;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .sub-line {\r\n padding: 8px 0px 15px 0px;\r\n color: #fff;\r\n font-size: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 {\r\n width: 230px;\r\n border: 1px solid #f9f9f9;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-2 .overlap {\r\n background: #3f51b57a;\r\n width: inherit;\r\n height: 0;\r\n position: absolute;\r\n text-align: center;\r\n opacity: 0;\r\n\r\n -webkit-transition: all .5s ease-in-out;\r\n -moz-transition: all .5s ease-in-out;\r\n -o-transition: all .5s ease-in-out;\r\n transition: all .5s ease-in-out;\r\n}\r\n\r\n.card-category-4 .sp-card-2:hover .overlap {\r\n opacity: 1;\r\n height: 204px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .overlap a {\r\n position: relative;\r\n top: 50%;\r\n text-decoration: none;\r\n color: #673AB7;\r\n padding: 10px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n background: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-image {\r\n text-align: center;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-image img {\r\n height: 200px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .card-title {\r\n font-weight: 600;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .price-start {\r\n font-weight: 600;\r\n color: #673AB7;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .card-caption {\r\n font-size: 14px;\r\n color: #717171;\r\n padding: 15px 0px 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-size,\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors {\r\n padding: 10px 0;\r\n font-size: 13px;\r\n color: #545454;\r\n text-transform: uppercase;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors span:not(:nth-child(1)) {\r\n position: absolute;\r\n width: 15px;\r\n height: 15px;\r\n border-radius: 40px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color1 {\r\n background: red;\r\n border: 1px solid black;\r\n margin-left: 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color2 {\r\n background: blue;\r\n border: 1px solid black;\r\n margin-left: 35px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color3 {\r\n background: Orange;\r\n border: 1px solid black;\r\n margin-left: 60px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color4 {\r\n background: black;\r\n border: 1px solid black;\r\n margin-left: 85px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 {\r\n width: 550px;\r\n height: 345px;\r\n border: 1px solid #efefef;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-3 .card-title {\r\n color: #525252;\r\n font-weight: 600;\r\n font-size: 25px;\r\n padding: 15px 20px;\r\n text-align: right;\r\n width: 40%;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card {\r\n padding: 0;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card p {\r\n font-size: 15px;\r\n color: #505050;\r\n line-height: 1.5;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .buy-btn {\r\n padding: 0px 0px 35px 0;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .buy-btn a {\r\n text-decoration: none;\r\n padding: 12px 65px;\r\n border: 1px solid;\r\n background-color: #ff4f1d;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .cart-btn a {\r\n text-decoration: none;\r\n padding: 12px 53px;\r\n border: 1px solid;\r\n background-color: #ff4f1d;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(1) {\r\n display: inline-block;\r\n padding-top: 30px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(2) {\r\n display: inline-block;\r\n width: 55%;\r\n text-align: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(2) span {\r\n font-weight: 600;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul {\r\n padding: 0px 10px 10px 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul li img {\r\n height: 180px;\r\n\r\n -webkit-transition: all .4s ease-in-out;\r\n -moz-transition: all .4s ease-in-out;\r\n -o-transition: all .4s ease-in-out;\r\n transition: all .4s ease-in-out;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul li img:hover {\r\n -webkit-transform: scale(0.90);\r\n -moz-transform: scale(0.90);\r\n -o-transform: scale(0.90);\r\n transform: scale(2);\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-img {\r\n width: 49%;\r\n float: left;\r\n padding-top: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description {\r\n width: 50%;\r\n text-align: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description a {\r\n text-decoration: none;\r\n color: #525252;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description ul li {\r\n display: list-item;\r\n font-size: 15px;\r\n color: #585858;\r\n direction: rtl;\r\n line-height: 1.5;\r\n}\r\n\r\n.card-category-5 .all-pr-cards {\r\n padding: 0;\r\n}\r\n\r\n.card-category-5 .per-card-1 {\r\n text-align: center;\r\n width: 250px;\r\n background-image: linear-gradient(#315386, #ffffff);\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-image {\r\n padding: 20px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-image img {\r\n height: 200px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-title {\r\n font-size: 20px;\r\n padding-bottom: 6px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .per-position {\r\n color: #002255;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .social-icons i {\r\n font-size: 30px;\r\n padding: 5px;\r\n\r\n -webkit-transition: all .2s ease-in;\r\n -moz-transition: all .2s ease-in;\r\n -o-transition: all .2s ease-in;\r\n transition: all .2s ease-in;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .social-icons i:hover {\r\n color: #383838;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-btn button {\r\n margin-top: 15px;\r\n width: 100%;\r\n padding: 15px;\r\n background: black;\r\n color: #fff;\r\n border: none;\r\n font-size: 18px;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .2s ease-in;\r\n -moz-transition: all .2s ease-in;\r\n -o-transition: all .2s ease-in;\r\n transition: all .2s ease-in;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-btn button:hover {\r\n background: #383838;\r\n}\r\n\r\n\r\n.card-category-5 .per-card-2 {\r\n width: 300px;\r\n padding: 30px 0 0 0;\r\n margin: 0 40px;\r\n /*You may have remove this CSS. I used this CSS for apply some margin from the card before*/\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image {\r\n padding: 10px 15px;\r\n background-image: linear-gradient(#3F51B5, #673AB7);\r\n width: 319px;\r\n position: relative;\r\n right: 25px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image::before {\r\n content: '';\r\n position: absolute;\r\n width: 0px;\r\n height: 0px;\r\n border: 12px solid #430ca5;\r\n top: -24px;\r\n left: 0px;\r\n border-left-color: transparent;\r\n border-top-color: transparent;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image::after {\r\n content: '';\r\n position: absolute;\r\n width: 0px;\r\n height: 0px;\r\n border: 12px solid #430ca5;\r\n top: 104px;\r\n right: 0;\r\n border-right-color: transparent;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image img {\r\n border-radius: 40px;\r\n height: 80px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .per-name {\r\n font-size: 23px;\r\n color: #fff;\r\n margin: 5px 0px 0px 10px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .per-position {\r\n font-size: 18px;\r\n color: #fff;\r\n margin: 15px 0px 0px 15px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn {\r\n position: absolute;\r\n width: 40px;\r\n height: 40px;\r\n top: 80px;\r\n right: 40px;\r\n border: 4px solid #fff;\r\n border-radius: 30px;\r\n background: #653cb7;\r\n cursor: pointer;\r\n\r\n -webkit-transform: rotate(0deg);\r\n -moz-transform: rotate(0deg);\r\n -o-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n\r\n -webkit-transition: all .3s ease-in-out;\r\n -moz-transition: all .3s ease-in-out;\r\n -o-transition: all .3s ease-in-out;\r\n transition: all .3s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn:hover {\r\n -webkit-transform: rotate(90deg);\r\n -moz-transform: rotate(90deg);\r\n -o-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn span,\r\n.card-category-5 .per-card-2 .card-image .card-btn span::after {\r\n content: '';\r\n width: 23px;\r\n height: 3px;\r\n background: #fff;\r\n position: absolute;\r\n top: 18px;\r\n left: 8px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn span::after {\r\n left: 0;\r\n top: 0;\r\n\r\n -webkit-transform: rotate(90deg);\r\n -moz-transform: rotate(90deg);\r\n -o-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content {\r\n padding: 40px 30px 20px;\r\n text-align: justify;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .card-text {\r\n line-height: 1.5;\r\n color: #585858;\r\n font-size: 15px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons {\r\n text-align: center;\r\n padding-top: 20px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons i {\r\n padding: 10px;\r\n font-size: 30px;\r\n color: #430ca5;\r\n cursor: pointer\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons i:hover {\r\n color: black;\r\n}\r\n\r\n.card-category-5 .per-card-3 {\r\n width: 400px;\r\n height: 240px;\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-3:hover .card-content .social-icons {\r\n opacity: 1;\r\n height: 100%;\r\n}\r\n\r\n.card-category-5 .per-card-3:hover .social-icons .card-btn {\r\n bottom: 0px !important;\r\n\r\n -webkit-animation: down-btn 1.5s;\r\n -moz-animation: down-btn 1.5s;\r\n -o-animation: down-btn 1.5s;\r\n animation: down-btn 1.5s;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image {\r\n position: relative;\r\n background: #009688;\r\n padding-left: 20px;\r\n text-align: left;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image img {\r\n height: 90px;\r\n border-radius: 50px;\r\n padding: 5px;\r\n margin-right: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image .per-name {\r\n position: absolute;\r\n top: 40%;\r\n text-transform: uppercase;\r\n letter-spacing: 7px;\r\n font-size: 20px;\r\n color: #fff;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content {\r\n text-align: center;\r\n padding: 20px;\r\n position: relative;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .per-position {\r\n font-size: 22px;\r\n text-transform: uppercase;\r\n letter-spacing: 4px;\r\n color: #009688;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .card-text {\r\n padding: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .card-text span {\r\n font-size: 13px;\r\n color: #007368;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n left: 0;\r\n opacity: 0;\r\n height: 0%;\r\n background: #009688;\r\n border-top: 1px solid #5eada5;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .5s ease-in-out;\r\n -moz-transition: all .5s ease-in-out;\r\n -o-transition: all .5s ease-in-out;\r\n transition: all .5s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons i {\r\n margin: 15px;\r\n font-size: 30px;\r\n color: #fff;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .3s ease-in-out;\r\n -moz-transition: all .3s ease-in-out;\r\n -o-transition: all .3s ease-in-out;\r\n transition: all .3s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons i:hover {\r\n -webkit-transform: scale(2);\r\n -moz-transform: scale(2);\r\n -o-transform: scale(2);\r\n transform: scale(2);\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons .card-btn {\r\n position: absolute;\r\n bottom: 10px;\r\n text-align: center;\r\n width: 100%;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons .card-btn button {\r\n cursor: pointer;\r\n width: 100%;\r\n padding: 15px;\r\n font-size: 18px;\r\n color: #fff;\r\n background: #03695f;\r\n border: none;\r\n}\r\n\r\n\r\n@media only screen and (max-width: 480px) {\r\n .io-card-1 .card-content .card-text {\r\n display: none;\r\n }\r\n\r\n .io-card-1 .card-link {\r\n top: 85px;\r\n }\r\n\r\n .card-category-4 .sp-card-1 {\r\n height: 100%;\r\n width: 100%;\r\n text-align: center;\r\n padding: 0 0px 30px 0;\r\n margin: 30px 0;\r\n }\r\n\r\n .card-category-4 .sp-card-1 .shop-button {\r\n padding: 0;\r\n }\r\n\r\n .card-category-4 .sp-card-1 ul li:nth-child(1) {\r\n padding: 20px;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-1 ul li:nth-child(2) {\r\n text-align: center;\r\n padding: 0 0 30px 0;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-2 {\r\n width: 300px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 {\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .card-title {\r\n text-align: center;\r\n width: 100%;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-img {\r\n width: 100%;\r\n float: none;\r\n padding-top: 10px;\r\n display: block;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-img img {\r\n height: auto;\r\n width: 90%;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description {\r\n width: 100%;\r\n padding: 20px 0px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul {\r\n text-align: center;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul li {\r\n font-size: 25px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul li:last-child {\r\n text-decoration: underline;\r\n padding-top: 20px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card p {\r\n font-size: 20px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card li:nth-child(1) {\r\n padding-top: 5px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card li:nth-child(2) {\r\n width: 100%;\r\n padding: 30px 0;\r\n text-align: center;\r\n }\r\n\r\n .card-category-4 ul li:nth-child(3) {\r\n margin-top: 25px;\r\n padding: 0 15px;\r\n }\r\n\r\n .card-category-5 .per-card-2 {\r\n margin: 20px 40px;\r\n }\r\n\r\n .card-category-5 .per-card-3 {\r\n width: 350px;\r\n }\r\n\r\n .card-category-5 .per-card-3 .card-image .per-name {\r\n letter-spacing: 4px;\r\n }\r\n}\r\n\r\n@media only screen and (max-width: 360px) {\r\n .ioverlay-card .card-content {\r\n top: 10px;\r\n }\r\n\r\n .io-card-1 .card-link {\r\n top: 70px;\r\n }\r\n\r\n .card-category-5 .per-card-2 {\r\n width: 275px;\r\n }\r\n\r\n .card-category-5 .per-card-2 .card-image {\r\n width: 295px;\r\n }\r\n\r\n .card-category-5 .per-card-3 {\r\n width: 320px;\r\n height: 254px;\r\n }\r\n}";
var css = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}";
n(css,{});
var Button = function Button(_ref) {
var onHandler = _ref.onHandler;
return /*#__PURE__*/React__default['default'].createElement("div", {
className: "card-link"
}, /*#__PURE__*/React__default['default'].createElement("a", {
title: "Read Full"
}, /*#__PURE__*/React__default['default'].createElement("span", {
onClick: function onClick() {
onHandler("Lorem Ipsum");
}
}, "Read Full")));
};
var DygnifyCard = function DygnifyCard(_ref) {
var _ref$user = _ref.user,
user = _ref$user === void 0 ? "krishan" : _ref$user,
onHandler = _ref.onHandler;
return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
className: "category-name"
}, user, " Cards"), " ", /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
className: "card-category-1"
var firstModale = _ref.firstModale,
onHandler = _ref.onHandler,
firstModaleHandler = _ref.firstModaleHandler,
_ref$id = _ref.id,
id = _ref$id === void 0 ? "- - " : _ref$id;
return /*#__PURE__*/React__default['default'].createElement(Fragment, null, firstModale && /*#__PURE__*/React__default['default'].createElement("div", {
className: "main"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "basic-card basic-card-aqua"
className: "dygnify-backdrop",
onClick: firstModaleHandler
}), /*#__PURE__*/React__default['default'].createElement("div", {
className: "dygnify-modal"
}, /*#__PURE__*/React__default['default'].createElement("h3", null, "Boundle in Progress"), /*#__PURE__*/React__default['default'].createElement("div", {
className: "field-1-box"
}, /*#__PURE__*/React__default['default'].createElement("p", {
className: "myCredit"
}, "My Credit Score")), /*#__PURE__*/React__default['default'].createElement("div", {
className: "dygnify-wallet-box"
}, /*#__PURE__*/React__default['default'].createElement("h3", null, "Wallets"), /*#__PURE__*/React__default['default'].createElement("div", {
className: "wallet"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "card-content"
}, /*#__PURE__*/React__default['default'].createElement("span", {
className: "card-title"
}, "Card Title"), /*#__PURE__*/React__default['default'].createElement("p", {
className: "card-text"
}, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.")), /*#__PURE__*/React__default['default'].createElement(Button, {
onHandler: onHandler
}))));
className: "card-img"
}, /*#__PURE__*/React__default['default'].createElement("img", {
src: "https://picsum.photos/200/300",
alt: ""
})), /*#__PURE__*/React__default['default'].createElement("div", {
className: "wallet-text"
}, /*#__PURE__*/React__default['default'].createElement("h4", null, id), /*#__PURE__*/React__default['default'].createElement("p", {
className: "p"
}, "Primary Wallet"))), /*#__PURE__*/React__default['default'].createElement("div", {
className: "wallet"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "card-img"
}, /*#__PURE__*/React__default['default'].createElement("img", {
src: "https://picsum.photos/200/300",
alt: ""
})), /*#__PURE__*/React__default['default'].createElement("div", {
className: "wallet-text"
}, /*#__PURE__*/React__default['default'].createElement("h4", null, id), /*#__PURE__*/React__default['default'].createElement("p", {
className: "p"
}, "Secondray Wallet")))), /*#__PURE__*/React__default['default'].createElement("div", {
className: "btn-box"
}, /*#__PURE__*/React__default['default'].createElement("button", {
className: "btn",
onClick: function onClick() {
onHandler("button is clicked");
}
}, /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement("svg", {
width: "15",
height: "15",
viewBox: "0 0 20 21",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React__default['default'].createElement("path", {
d: "M9.41406 3.46875L10.5859 3.46875C10.6901 3.46875 10.7422 3.52083 10.7422 3.625L10.7422 17.375C10.7422 17.4792 10.6901 17.5312 10.5859 17.5312H9.41406C9.3099 17.5312 9.25781 17.4792 9.25781 17.375L9.25781 3.625C9.25781 3.52083 9.3099 3.46875 9.41406 3.46875Z",
fill: "black"
}), /*#__PURE__*/React__default['default'].createElement("path", {
d: "M3.4375 9.75781L16.5625 9.75781C16.6667 9.75781 16.7188 9.8099 16.7188 9.91406V11.0859C16.7188 11.1901 16.6667 11.2422 16.5625 11.2422L3.4375 11.2422C3.33333 11.2422 3.28125 11.1901 3.28125 11.0859L3.28125 9.91406C3.28125 9.8099 3.33333 9.75781 3.4375 9.75781Z",
fill: "black"
}))), "Add more wallet")), /*#__PURE__*/React__default['default'].createElement("div", {
className: "btn-preview-box"
}, /*#__PURE__*/React__default['default'].createElement("button", {
className: "btnPreview"
}, "Preview NFC")))));
};
module.exports = DygnifyCard;

93

dist/index.esm.js

@@ -5,39 +5,72 @@ import React from 'react';

var css = ".category-name {\r\n font-family: sans-serif;\r\n width: -webkit-fill-available;\r\n text-align: center;\r\n font-size: 40px;\r\n}\r\n\r\n.card-category-2 ul,\r\n.card-category-3 ul,\r\n.card-category-4 ul,\r\n.card-category-5 ul .card-category-6 ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-2 ul li,\r\n.card-category-3 ul li,\r\n.card-category-4 ul li,\r\n.card-category-5 ul li,\r\n.card-category-6 ul li {\r\n list-style-type: none;\r\n display: inline-block;\r\n vertical-align: top;\r\n}\r\n\r\n.card-category-2 ul li,\r\n.card-category-3 ul li {\r\n margin: 10px 5px;\r\n}\r\n\r\n.card-category-1,\r\n.card-category-2,\r\n.card-category-3,\r\n.card-category-4,\r\n.card-category-5,\r\n.card-category-6 {\r\n font-family: sans-serif;\r\n margin-bottom: 45px;\r\n text-align: center;\r\n}\r\n\r\n.card-category-1 div,\r\n.card-category-2 div {\r\n display: inline-block;\r\n}\r\n\r\n.card-category-1>div,\r\n.card-category-2>div:not(:last-child) {\r\n margin: 10px 5px;\r\n text-align: left;\r\n}\r\n\r\n/* Basic Card */\r\n.basic-card {\r\n width: 300px;\r\n position: relative;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.basic-card .card-content {\r\n padding: 30px;\r\n}\r\n\r\n.basic-card .card-title {\r\n font-size: 25px;\r\n font-family: 'Open Sans', sans-serif;\r\n}\r\n\r\n.basic-card .card-text {\r\n line-height: 1.6;\r\n}\r\n\r\n.basic-card .card-link {\r\n padding: 25px;\r\n width: -webkit-fill-available;\r\n}\r\n\r\n.basic-card .card-link a {\r\n text-decoration: none;\r\n position: relative;\r\n padding: 10px 0px;\r\n}\r\n\r\n.basic-card .card-link a:after {\r\n top: 30px;\r\n content: \"\";\r\n display: block;\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n width: 0;\r\n\r\n -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -moz-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -o-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n}\r\n\r\n.basic-card .card-link a:hover:after {\r\n width: 100%;\r\n left: 0;\r\n}\r\n\r\n\r\n.basic-card-aqua {\r\n background-image: linear-gradient(to bottom right, #00bfad, #99a3d4);\r\n}\r\n\r\n.basic-card-aqua .card-content,\r\n.basic-card .card-link a {\r\n color: #fff;\r\n}\r\n\r\n.basic-card-aqua .card-link {\r\n border-top: 1px solid #82c1bb;\r\n}\r\n\r\n.basic-card-aqua .card-link a:after {\r\n background: #fff;\r\n}\r\n\r\n.basic-card-lips {\r\n background-image: linear-gradient(to bottom right, #ec407b, #ff7d94);\r\n}\r\n\r\n.basic-card-lips .card-content {\r\n color: #fff;\r\n}\r\n\r\n.basic-card-lips .card-link {\r\n border-top: 1px solid #ff97ba;\r\n}\r\n\r\n.basic-card-lips .card-link a:after {\r\n background: #fff;\r\n}\r\n\r\n.basic-card-light {\r\n border: 1px solid #eee;\r\n}\r\n\r\n.basic-card-light .card-title,\r\n.basic-card-light .card-link a {\r\n color: #636363;\r\n}\r\n\r\n.basic-card-light .card-text {\r\n color: #7b7b7b;\r\n}\r\n\r\n.basic-card-light .card-link {\r\n border-top: 1px solid #eee;\r\n}\r\n\r\n.basic-card-light .card-link a:after {\r\n background: #636363;\r\n}\r\n\r\n.basic-card-dark {\r\n background-image: linear-gradient(to bottom right, #252525, #4a4a4a);\r\n}\r\n\r\n.basic-card-dark .card-title,\r\n.basic-card-dark .card-link a {\r\n color: #eee;\r\n}\r\n\r\n.basic-card-dark .card-text {\r\n color: #dcdcdcdd;\r\n}\r\n\r\n.basic-card-dark .card-link {\r\n border-top: 1px solid #636363;\r\n}\r\n\r\n.basic-card-dark .card-link a:after {\r\n background: #eee;\r\n}\r\n\r\n\r\n/* Image Card */\r\n.img-card {\r\n width: 300px;\r\n position: relative;\r\n border-radius: 5px;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.img-card .card-image {\r\n position: relative;\r\n margin: auto;\r\n overflow: hidden;\r\n border-radius: 5px 5px 0px 0px;\r\n height: 200px;\r\n}\r\n\r\n.img-card .card-image img {\r\n width: 100%;\r\n border-radius: 5px 5px 0px 0px;\r\n\r\n -webkit-transition: all 0.8s;\r\n -moz-transition: all 0.8s;\r\n -o-transition: all 0.8s;\r\n transition: all 0.8s;\r\n}\r\n\r\n.img-card .card-image:hover img {\r\n -webkit-transform: scale(1.1);\r\n -moz-transform: scale(1.1);\r\n -o-transform: scale(1.1);\r\n transform: scale(1.1);\r\n}\r\n\r\n.img-card .card-text {\r\n padding: 0 15px 15px;\r\n line-height: 1.5;\r\n}\r\n\r\n.img-card .card-link {\r\n padding: 20px 15px 30px;\r\n width: -webkit-fill-available;\r\n}\r\n\r\n.img-card .card-link a {\r\n text-decoration: none;\r\n position: relative;\r\n padding: 10px 0;\r\n}\r\n\r\n.img-card .card-link a:after {\r\n top: 30px;\r\n content: \"\";\r\n display: block;\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n width: 0;\r\n\r\n -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -moz-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -o-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n}\r\n\r\n.img-card .card-link a:hover:after {\r\n width: 100%;\r\n left: 0;\r\n}\r\n\r\n.img-card.iCard-style1 .card-title {\r\n position: absolute;\r\n font-family: 'Open Sans', sans-serif;\r\n z-index: 1;\r\n top: 10px;\r\n left: 10px;\r\n font-size: 30px;\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style1 .card-text {\r\n color: #795548;\r\n}\r\n\r\n.img-card.iCard-style1 .card-link a {\r\n color: #FF9800;\r\n}\r\n\r\n.img-card.iCard-style1 .card-link a:after {\r\n background: #FF9800;\r\n}\r\n\r\n.img-card.iCard-style2 .card-title {\r\n padding: 15px;\r\n font-size: 25px;\r\n font-family: 'Roboto', sans-serif;\r\n}\r\n\r\n.img-card.iCard-style2 .card-image {\r\n margin-bottom: 15px;\r\n}\r\n\r\n.img-card.iCard-style2 .card-caption {\r\n text-align: center;\r\n top: 80%;\r\n font-size: 17px;\r\n color: #fff;\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Roboto', sans-serif;\r\n z-index: 1;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a {\r\n border: 1px solid;\r\n padding: 8px;\r\n border-radius: 3px;\r\n color: black;\r\n font-size: 13px;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a:hover {\r\n background: black;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a:hover span {\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style3 {\r\n text-align: center;\r\n}\r\n\r\n.img-card.iCard-style3 .card-title {\r\n top: 80%;\r\n font-size: 30px;\r\n color: #fff;\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Roboto', sans-serif;\r\n z-index: 1;\r\n}\r\n\r\n.img-card.iCard-style3 .card-text {\r\n color: #636060;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link {\r\n border-top: 1px solid #e8e8e8;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link a {\r\n color: #585858;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link a:after {\r\n background: #585858;\r\n}\r\n\r\n.img-card.iCard-style4 {\r\n text-align: right;\r\n}\r\n\r\n.img-card.iCard-style4 .card-caption {\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Open Sans', sans-serif;\r\n z-index: 1;\r\n top: 10px;\r\n right: 10px;\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style4 .card-title {\r\n width: 100%;\r\n padding: 20px 0px 12px 0;\r\n color: #E91E63;\r\n}\r\n\r\n.img-card.iCard-style4 .card-title span {\r\n font-size: 25px;\r\n margin-right: 12px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle {\r\n cursor: pointer;\r\n padding: 8px 0px 13px 0px;\r\n width: 55px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span,\r\n.img-card.iCard-style4 .toggle span:nth-child(2),\r\n.img-card.iCard-style4 .toggle span:nth-child(3) {\r\n position: absolute;\r\n width: 8px;\r\n height: 8px;\r\n background: #E91E63;\r\n cursor: pointer;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(1) {\r\n right: 15px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(2) {\r\n right: 27px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(3) {\r\n right: 39px;\r\n}\r\n\r\n.img-card.iCard-style4 .card-text {\r\n opacity: 0;\r\n line-height: 0;\r\n padding-bottom: 0;\r\n color: #4c4c4c;\r\n\r\n -webkit-transition: ease-in-out 0.5s;\r\n -moz-transition: ease-in-out 0.5s;\r\n -o-transition: ease-in-out 0.5s;\r\n transition: ease-in-out 0.5s;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle.active~.card-text {\r\n opacity: 1;\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link {\r\n border-top: 1px solid #e8e8e8;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link a {\r\n color: #E91E63;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link a:after {\r\n background: #E91E63;\r\n}\r\n\r\n\r\n/* Overlay Image Card */\r\n\r\n.ioverlay-card {\r\n position: relative;\r\n text-align: left;\r\n}\r\n\r\n.ioverlay-card img {\r\n height: auto;\r\n width: 100%;\r\n border-radius: 4px;\r\n}\r\n\r\n.ioverlay-card .card-content {\r\n position: absolute;\r\n top: 25px;\r\n left: 20px;\r\n}\r\n\r\n.ioverlay-card .card-content .card-title {\r\n font-size: 25px;\r\n}\r\n\r\n.io-card-1 {\r\n color: #fff;\r\n}\r\n\r\n.io-card-1 .card-content .card-text {\r\n width: 95%;\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.io-card-1 .card-link {\r\n position: absolute;\r\n top: 140px;\r\n left: 20px;\r\n}\r\n\r\n.io-card-1 .card-link a {\r\n color: #fff;\r\n text-decoration: none;\r\n padding: 10px;\r\n border: 1px solid;\r\n border-radius: 4px;\r\n background: #3F51B5;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.io-card-1 .card-link a:hover {\r\n color: #3F51B5;\r\n background: #fff;\r\n border-color: #fff;\r\n}\r\n\r\n.io-card-2 .card-content {\r\n color: #fff;\r\n}\r\n\r\n.io-card-2 .card-link {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 20px;\r\n}\r\n\r\n.io-card-2 .card-link a {\r\n color: #fff;\r\n text-decoration: none;\r\n padding: 10px;\r\n border: 1px solid #fff;\r\n border-radius: 4px;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.io-card-2 .card-link a:hover {\r\n color: black;\r\n background-color: #fff;\r\n}\r\n\r\n.io-card-2 .card-content .card-text {\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n\r\n/* Product & Shop Cards */\r\n.card-category-4 .sp-card-1 {\r\n background-image: linear-gradient(#f74545, #673AB7);\r\n height: 245px;\r\n width: 535px;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button {\r\n padding-left: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li {\r\n list-style-type: none;\r\n display: inline-block;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) {\r\n padding: 20px 20px;\r\n float: left;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) .off-label {\r\n border: 1px solid #fff;\r\n background: #fff;\r\n font-size: 11px;\r\n padding: 7px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) .return-line {\r\n font-size: 13px;\r\n padding: 20px 0 15px 0;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button a {\r\n text-decoration: none;\r\n color: #fff;\r\n border: 1px solid;\r\n padding: 10px 15px;\r\n background: #1f3c3d;\r\n\r\n -webkit-transition: ease-in-out .2s;\r\n -moz-transition: ease-in-out .2s;\r\n -o-transition: ease-in-out .2s;\r\n transition: ease-in-out .2s;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button a:hover {\r\n background: transparent;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) {\r\n text-align: right;\r\n padding: 0;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) img {\r\n height: 170px;\r\n padding: 15px 0 0;\r\n\r\n -webkit-transition: all .3s ease-in;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n transition: all .3s ease-in;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) img:hover {\r\n -webkit-transform: scale(0.90);\r\n -moz-transform: scale(0.90);\r\n -o-transform: scale(0.90);\r\n transform: scale(0.90);\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) .price-start {\r\n text-align: center;\r\n font-size: 18px;\r\n color: #fff;\r\n padding: 18px 0px 0px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .card-title {\r\n color: #fff;\r\n font-size: 23px;\r\n font-weight: 550;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .sub-line {\r\n padding: 8px 0px 15px 0px;\r\n color: #fff;\r\n font-size: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 {\r\n width: 230px;\r\n border: 1px solid #f9f9f9;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-2 .overlap {\r\n background: #3f51b57a;\r\n width: inherit;\r\n height: 0;\r\n position: absolute;\r\n text-align: center;\r\n opacity: 0;\r\n\r\n -webkit-transition: all .5s ease-in-out;\r\n -moz-transition: all .5s ease-in-out;\r\n -o-transition: all .5s ease-in-out;\r\n transition: all .5s ease-in-out;\r\n}\r\n\r\n.card-category-4 .sp-card-2:hover .overlap {\r\n opacity: 1;\r\n height: 204px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .overlap a {\r\n position: relative;\r\n top: 50%;\r\n text-decoration: none;\r\n color: #673AB7;\r\n padding: 10px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n background: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-image {\r\n text-align: center;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-image img {\r\n height: 200px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .card-title {\r\n font-weight: 600;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .price-start {\r\n font-weight: 600;\r\n color: #673AB7;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .card-caption {\r\n font-size: 14px;\r\n color: #717171;\r\n padding: 15px 0px 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-size,\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors {\r\n padding: 10px 0;\r\n font-size: 13px;\r\n color: #545454;\r\n text-transform: uppercase;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors span:not(:nth-child(1)) {\r\n position: absolute;\r\n width: 15px;\r\n height: 15px;\r\n border-radius: 40px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color1 {\r\n background: red;\r\n border: 1px solid black;\r\n margin-left: 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color2 {\r\n background: blue;\r\n border: 1px solid black;\r\n margin-left: 35px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color3 {\r\n background: Orange;\r\n border: 1px solid black;\r\n margin-left: 60px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color4 {\r\n background: black;\r\n border: 1px solid black;\r\n margin-left: 85px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 {\r\n width: 550px;\r\n height: 345px;\r\n border: 1px solid #efefef;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-3 .card-title {\r\n color: #525252;\r\n font-weight: 600;\r\n font-size: 25px;\r\n padding: 15px 20px;\r\n text-align: right;\r\n width: 40%;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card {\r\n padding: 0;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card p {\r\n font-size: 15px;\r\n color: #505050;\r\n line-height: 1.5;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .buy-btn {\r\n padding: 0px 0px 35px 0;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .buy-btn a {\r\n text-decoration: none;\r\n padding: 12px 65px;\r\n border: 1px solid;\r\n background-color: #ff4f1d;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .cart-btn a {\r\n text-decoration: none;\r\n padding: 12px 53px;\r\n border: 1px solid;\r\n background-color: #ff4f1d;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(1) {\r\n display: inline-block;\r\n padding-top: 30px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(2) {\r\n display: inline-block;\r\n width: 55%;\r\n text-align: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(2) span {\r\n font-weight: 600;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul {\r\n padding: 0px 10px 10px 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul li img {\r\n height: 180px;\r\n\r\n -webkit-transition: all .4s ease-in-out;\r\n -moz-transition: all .4s ease-in-out;\r\n -o-transition: all .4s ease-in-out;\r\n transition: all .4s ease-in-out;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul li img:hover {\r\n -webkit-transform: scale(0.90);\r\n -moz-transform: scale(0.90);\r\n -o-transform: scale(0.90);\r\n transform: scale(2);\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-img {\r\n width: 49%;\r\n float: left;\r\n padding-top: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description {\r\n width: 50%;\r\n text-align: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description a {\r\n text-decoration: none;\r\n color: #525252;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description ul li {\r\n display: list-item;\r\n font-size: 15px;\r\n color: #585858;\r\n direction: rtl;\r\n line-height: 1.5;\r\n}\r\n\r\n.card-category-5 .all-pr-cards {\r\n padding: 0;\r\n}\r\n\r\n.card-category-5 .per-card-1 {\r\n text-align: center;\r\n width: 250px;\r\n background-image: linear-gradient(#315386, #ffffff);\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-image {\r\n padding: 20px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-image img {\r\n height: 200px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-title {\r\n font-size: 20px;\r\n padding-bottom: 6px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .per-position {\r\n color: #002255;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .social-icons i {\r\n font-size: 30px;\r\n padding: 5px;\r\n\r\n -webkit-transition: all .2s ease-in;\r\n -moz-transition: all .2s ease-in;\r\n -o-transition: all .2s ease-in;\r\n transition: all .2s ease-in;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .social-icons i:hover {\r\n color: #383838;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-btn button {\r\n margin-top: 15px;\r\n width: 100%;\r\n padding: 15px;\r\n background: black;\r\n color: #fff;\r\n border: none;\r\n font-size: 18px;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .2s ease-in;\r\n -moz-transition: all .2s ease-in;\r\n -o-transition: all .2s ease-in;\r\n transition: all .2s ease-in;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-btn button:hover {\r\n background: #383838;\r\n}\r\n\r\n\r\n.card-category-5 .per-card-2 {\r\n width: 300px;\r\n padding: 30px 0 0 0;\r\n margin: 0 40px;\r\n /*You may have remove this CSS. I used this CSS for apply some margin from the card before*/\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image {\r\n padding: 10px 15px;\r\n background-image: linear-gradient(#3F51B5, #673AB7);\r\n width: 319px;\r\n position: relative;\r\n right: 25px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image::before {\r\n content: '';\r\n position: absolute;\r\n width: 0px;\r\n height: 0px;\r\n border: 12px solid #430ca5;\r\n top: -24px;\r\n left: 0px;\r\n border-left-color: transparent;\r\n border-top-color: transparent;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image::after {\r\n content: '';\r\n position: absolute;\r\n width: 0px;\r\n height: 0px;\r\n border: 12px solid #430ca5;\r\n top: 104px;\r\n right: 0;\r\n border-right-color: transparent;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image img {\r\n border-radius: 40px;\r\n height: 80px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .per-name {\r\n font-size: 23px;\r\n color: #fff;\r\n margin: 5px 0px 0px 10px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .per-position {\r\n font-size: 18px;\r\n color: #fff;\r\n margin: 15px 0px 0px 15px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn {\r\n position: absolute;\r\n width: 40px;\r\n height: 40px;\r\n top: 80px;\r\n right: 40px;\r\n border: 4px solid #fff;\r\n border-radius: 30px;\r\n background: #653cb7;\r\n cursor: pointer;\r\n\r\n -webkit-transform: rotate(0deg);\r\n -moz-transform: rotate(0deg);\r\n -o-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n\r\n -webkit-transition: all .3s ease-in-out;\r\n -moz-transition: all .3s ease-in-out;\r\n -o-transition: all .3s ease-in-out;\r\n transition: all .3s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn:hover {\r\n -webkit-transform: rotate(90deg);\r\n -moz-transform: rotate(90deg);\r\n -o-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn span,\r\n.card-category-5 .per-card-2 .card-image .card-btn span::after {\r\n content: '';\r\n width: 23px;\r\n height: 3px;\r\n background: #fff;\r\n position: absolute;\r\n top: 18px;\r\n left: 8px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn span::after {\r\n left: 0;\r\n top: 0;\r\n\r\n -webkit-transform: rotate(90deg);\r\n -moz-transform: rotate(90deg);\r\n -o-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content {\r\n padding: 40px 30px 20px;\r\n text-align: justify;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .card-text {\r\n line-height: 1.5;\r\n color: #585858;\r\n font-size: 15px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons {\r\n text-align: center;\r\n padding-top: 20px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons i {\r\n padding: 10px;\r\n font-size: 30px;\r\n color: #430ca5;\r\n cursor: pointer\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons i:hover {\r\n color: black;\r\n}\r\n\r\n.card-category-5 .per-card-3 {\r\n width: 400px;\r\n height: 240px;\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-3:hover .card-content .social-icons {\r\n opacity: 1;\r\n height: 100%;\r\n}\r\n\r\n.card-category-5 .per-card-3:hover .social-icons .card-btn {\r\n bottom: 0px !important;\r\n\r\n -webkit-animation: down-btn 1.5s;\r\n -moz-animation: down-btn 1.5s;\r\n -o-animation: down-btn 1.5s;\r\n animation: down-btn 1.5s;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image {\r\n position: relative;\r\n background: #009688;\r\n padding-left: 20px;\r\n text-align: left;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image img {\r\n height: 90px;\r\n border-radius: 50px;\r\n padding: 5px;\r\n margin-right: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image .per-name {\r\n position: absolute;\r\n top: 40%;\r\n text-transform: uppercase;\r\n letter-spacing: 7px;\r\n font-size: 20px;\r\n color: #fff;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content {\r\n text-align: center;\r\n padding: 20px;\r\n position: relative;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .per-position {\r\n font-size: 22px;\r\n text-transform: uppercase;\r\n letter-spacing: 4px;\r\n color: #009688;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .card-text {\r\n padding: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .card-text span {\r\n font-size: 13px;\r\n color: #007368;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n left: 0;\r\n opacity: 0;\r\n height: 0%;\r\n background: #009688;\r\n border-top: 1px solid #5eada5;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .5s ease-in-out;\r\n -moz-transition: all .5s ease-in-out;\r\n -o-transition: all .5s ease-in-out;\r\n transition: all .5s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons i {\r\n margin: 15px;\r\n font-size: 30px;\r\n color: #fff;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .3s ease-in-out;\r\n -moz-transition: all .3s ease-in-out;\r\n -o-transition: all .3s ease-in-out;\r\n transition: all .3s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons i:hover {\r\n -webkit-transform: scale(2);\r\n -moz-transform: scale(2);\r\n -o-transform: scale(2);\r\n transform: scale(2);\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons .card-btn {\r\n position: absolute;\r\n bottom: 10px;\r\n text-align: center;\r\n width: 100%;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons .card-btn button {\r\n cursor: pointer;\r\n width: 100%;\r\n padding: 15px;\r\n font-size: 18px;\r\n color: #fff;\r\n background: #03695f;\r\n border: none;\r\n}\r\n\r\n\r\n@media only screen and (max-width: 480px) {\r\n .io-card-1 .card-content .card-text {\r\n display: none;\r\n }\r\n\r\n .io-card-1 .card-link {\r\n top: 85px;\r\n }\r\n\r\n .card-category-4 .sp-card-1 {\r\n height: 100%;\r\n width: 100%;\r\n text-align: center;\r\n padding: 0 0px 30px 0;\r\n margin: 30px 0;\r\n }\r\n\r\n .card-category-4 .sp-card-1 .shop-button {\r\n padding: 0;\r\n }\r\n\r\n .card-category-4 .sp-card-1 ul li:nth-child(1) {\r\n padding: 20px;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-1 ul li:nth-child(2) {\r\n text-align: center;\r\n padding: 0 0 30px 0;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-2 {\r\n width: 300px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 {\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .card-title {\r\n text-align: center;\r\n width: 100%;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-img {\r\n width: 100%;\r\n float: none;\r\n padding-top: 10px;\r\n display: block;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-img img {\r\n height: auto;\r\n width: 90%;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description {\r\n width: 100%;\r\n padding: 20px 0px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul {\r\n text-align: center;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul li {\r\n font-size: 25px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul li:last-child {\r\n text-decoration: underline;\r\n padding-top: 20px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card p {\r\n font-size: 20px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card li:nth-child(1) {\r\n padding-top: 5px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card li:nth-child(2) {\r\n width: 100%;\r\n padding: 30px 0;\r\n text-align: center;\r\n }\r\n\r\n .card-category-4 ul li:nth-child(3) {\r\n margin-top: 25px;\r\n padding: 0 15px;\r\n }\r\n\r\n .card-category-5 .per-card-2 {\r\n margin: 20px 40px;\r\n }\r\n\r\n .card-category-5 .per-card-3 {\r\n width: 350px;\r\n }\r\n\r\n .card-category-5 .per-card-3 .card-image .per-name {\r\n letter-spacing: 4px;\r\n }\r\n}\r\n\r\n@media only screen and (max-width: 360px) {\r\n .ioverlay-card .card-content {\r\n top: 10px;\r\n }\r\n\r\n .io-card-1 .card-link {\r\n top: 70px;\r\n }\r\n\r\n .card-category-5 .per-card-2 {\r\n width: 275px;\r\n }\r\n\r\n .card-category-5 .per-card-2 .card-image {\r\n width: 295px;\r\n }\r\n\r\n .card-category-5 .per-card-3 {\r\n width: 320px;\r\n height: 254px;\r\n }\r\n}";
var css = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}";
n(css,{});
var Button = function Button(_ref) {
var onHandler = _ref.onHandler;
return /*#__PURE__*/React.createElement("div", {
className: "card-link"
}, /*#__PURE__*/React.createElement("a", {
title: "Read Full"
}, /*#__PURE__*/React.createElement("span", {
onClick: function onClick() {
onHandler("Lorem Ipsum");
}
}, "Read Full")));
};
var DygnifyCard = function DygnifyCard(_ref) {
var _ref$user = _ref.user,
user = _ref$user === void 0 ? "krishan" : _ref$user,
onHandler = _ref.onHandler;
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: "category-name"
}, user, " Cards"), " ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
className: "card-category-1"
var firstModale = _ref.firstModale,
onHandler = _ref.onHandler,
firstModaleHandler = _ref.firstModaleHandler,
_ref$id = _ref.id,
id = _ref$id === void 0 ? "- - " : _ref$id;
return /*#__PURE__*/React.createElement(Fragment, null, firstModale && /*#__PURE__*/React.createElement("div", {
className: "main"
}, /*#__PURE__*/React.createElement("div", {
className: "basic-card basic-card-aqua"
className: "dygnify-backdrop",
onClick: firstModaleHandler
}), /*#__PURE__*/React.createElement("div", {
className: "dygnify-modal"
}, /*#__PURE__*/React.createElement("h3", null, "Boundle in Progress"), /*#__PURE__*/React.createElement("div", {
className: "field-1-box"
}, /*#__PURE__*/React.createElement("p", {
className: "myCredit"
}, "My Credit Score")), /*#__PURE__*/React.createElement("div", {
className: "dygnify-wallet-box"
}, /*#__PURE__*/React.createElement("h3", null, "Wallets"), /*#__PURE__*/React.createElement("div", {
className: "wallet"
}, /*#__PURE__*/React.createElement("div", {
className: "card-content"
}, /*#__PURE__*/React.createElement("span", {
className: "card-title"
}, "Card Title"), /*#__PURE__*/React.createElement("p", {
className: "card-text"
}, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.")), /*#__PURE__*/React.createElement(Button, {
onHandler: onHandler
}))));
className: "card-img"
}, /*#__PURE__*/React.createElement("img", {
src: "https://picsum.photos/200/300",
alt: ""
})), /*#__PURE__*/React.createElement("div", {
className: "wallet-text"
}, /*#__PURE__*/React.createElement("h4", null, id), /*#__PURE__*/React.createElement("p", {
className: "p"
}, "Primary Wallet"))), /*#__PURE__*/React.createElement("div", {
className: "wallet"
}, /*#__PURE__*/React.createElement("div", {
className: "card-img"
}, /*#__PURE__*/React.createElement("img", {
src: "https://picsum.photos/200/300",
alt: ""
})), /*#__PURE__*/React.createElement("div", {
className: "wallet-text"
}, /*#__PURE__*/React.createElement("h4", null, id), /*#__PURE__*/React.createElement("p", {
className: "p"
}, "Secondray Wallet")))), /*#__PURE__*/React.createElement("div", {
className: "btn-box"
}, /*#__PURE__*/React.createElement("button", {
className: "btn",
onClick: function onClick() {
onHandler("button is clicked");
}
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("svg", {
width: "15",
height: "15",
viewBox: "0 0 20 21",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
d: "M9.41406 3.46875L10.5859 3.46875C10.6901 3.46875 10.7422 3.52083 10.7422 3.625L10.7422 17.375C10.7422 17.4792 10.6901 17.5312 10.5859 17.5312H9.41406C9.3099 17.5312 9.25781 17.4792 9.25781 17.375L9.25781 3.625C9.25781 3.52083 9.3099 3.46875 9.41406 3.46875Z",
fill: "black"
}), /*#__PURE__*/React.createElement("path", {
d: "M3.4375 9.75781L16.5625 9.75781C16.6667 9.75781 16.7188 9.8099 16.7188 9.91406V11.0859C16.7188 11.1901 16.6667 11.2422 16.5625 11.2422L3.4375 11.2422C3.33333 11.2422 3.28125 11.1901 3.28125 11.0859L3.28125 9.91406C3.28125 9.8099 3.33333 9.75781 3.4375 9.75781Z",
fill: "black"
}))), "Add more wallet")), /*#__PURE__*/React.createElement("div", {
className: "btn-preview-box"
}, /*#__PURE__*/React.createElement("button", {
className: "btnPreview"
}, "Preview NFC")))));
};
export default DygnifyCard;

93

dist/index.umd.js

@@ -13,37 +13,70 @@ (function (global, factory) {

var css = ".category-name {\r\n font-family: sans-serif;\r\n width: -webkit-fill-available;\r\n text-align: center;\r\n font-size: 40px;\r\n}\r\n\r\n.card-category-2 ul,\r\n.card-category-3 ul,\r\n.card-category-4 ul,\r\n.card-category-5 ul .card-category-6 ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-2 ul li,\r\n.card-category-3 ul li,\r\n.card-category-4 ul li,\r\n.card-category-5 ul li,\r\n.card-category-6 ul li {\r\n list-style-type: none;\r\n display: inline-block;\r\n vertical-align: top;\r\n}\r\n\r\n.card-category-2 ul li,\r\n.card-category-3 ul li {\r\n margin: 10px 5px;\r\n}\r\n\r\n.card-category-1,\r\n.card-category-2,\r\n.card-category-3,\r\n.card-category-4,\r\n.card-category-5,\r\n.card-category-6 {\r\n font-family: sans-serif;\r\n margin-bottom: 45px;\r\n text-align: center;\r\n}\r\n\r\n.card-category-1 div,\r\n.card-category-2 div {\r\n display: inline-block;\r\n}\r\n\r\n.card-category-1>div,\r\n.card-category-2>div:not(:last-child) {\r\n margin: 10px 5px;\r\n text-align: left;\r\n}\r\n\r\n/* Basic Card */\r\n.basic-card {\r\n width: 300px;\r\n position: relative;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.basic-card .card-content {\r\n padding: 30px;\r\n}\r\n\r\n.basic-card .card-title {\r\n font-size: 25px;\r\n font-family: 'Open Sans', sans-serif;\r\n}\r\n\r\n.basic-card .card-text {\r\n line-height: 1.6;\r\n}\r\n\r\n.basic-card .card-link {\r\n padding: 25px;\r\n width: -webkit-fill-available;\r\n}\r\n\r\n.basic-card .card-link a {\r\n text-decoration: none;\r\n position: relative;\r\n padding: 10px 0px;\r\n}\r\n\r\n.basic-card .card-link a:after {\r\n top: 30px;\r\n content: \"\";\r\n display: block;\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n width: 0;\r\n\r\n -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -moz-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -o-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n}\r\n\r\n.basic-card .card-link a:hover:after {\r\n width: 100%;\r\n left: 0;\r\n}\r\n\r\n\r\n.basic-card-aqua {\r\n background-image: linear-gradient(to bottom right, #00bfad, #99a3d4);\r\n}\r\n\r\n.basic-card-aqua .card-content,\r\n.basic-card .card-link a {\r\n color: #fff;\r\n}\r\n\r\n.basic-card-aqua .card-link {\r\n border-top: 1px solid #82c1bb;\r\n}\r\n\r\n.basic-card-aqua .card-link a:after {\r\n background: #fff;\r\n}\r\n\r\n.basic-card-lips {\r\n background-image: linear-gradient(to bottom right, #ec407b, #ff7d94);\r\n}\r\n\r\n.basic-card-lips .card-content {\r\n color: #fff;\r\n}\r\n\r\n.basic-card-lips .card-link {\r\n border-top: 1px solid #ff97ba;\r\n}\r\n\r\n.basic-card-lips .card-link a:after {\r\n background: #fff;\r\n}\r\n\r\n.basic-card-light {\r\n border: 1px solid #eee;\r\n}\r\n\r\n.basic-card-light .card-title,\r\n.basic-card-light .card-link a {\r\n color: #636363;\r\n}\r\n\r\n.basic-card-light .card-text {\r\n color: #7b7b7b;\r\n}\r\n\r\n.basic-card-light .card-link {\r\n border-top: 1px solid #eee;\r\n}\r\n\r\n.basic-card-light .card-link a:after {\r\n background: #636363;\r\n}\r\n\r\n.basic-card-dark {\r\n background-image: linear-gradient(to bottom right, #252525, #4a4a4a);\r\n}\r\n\r\n.basic-card-dark .card-title,\r\n.basic-card-dark .card-link a {\r\n color: #eee;\r\n}\r\n\r\n.basic-card-dark .card-text {\r\n color: #dcdcdcdd;\r\n}\r\n\r\n.basic-card-dark .card-link {\r\n border-top: 1px solid #636363;\r\n}\r\n\r\n.basic-card-dark .card-link a:after {\r\n background: #eee;\r\n}\r\n\r\n\r\n/* Image Card */\r\n.img-card {\r\n width: 300px;\r\n position: relative;\r\n border-radius: 5px;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.img-card .card-image {\r\n position: relative;\r\n margin: auto;\r\n overflow: hidden;\r\n border-radius: 5px 5px 0px 0px;\r\n height: 200px;\r\n}\r\n\r\n.img-card .card-image img {\r\n width: 100%;\r\n border-radius: 5px 5px 0px 0px;\r\n\r\n -webkit-transition: all 0.8s;\r\n -moz-transition: all 0.8s;\r\n -o-transition: all 0.8s;\r\n transition: all 0.8s;\r\n}\r\n\r\n.img-card .card-image:hover img {\r\n -webkit-transform: scale(1.1);\r\n -moz-transform: scale(1.1);\r\n -o-transform: scale(1.1);\r\n transform: scale(1.1);\r\n}\r\n\r\n.img-card .card-text {\r\n padding: 0 15px 15px;\r\n line-height: 1.5;\r\n}\r\n\r\n.img-card .card-link {\r\n padding: 20px 15px 30px;\r\n width: -webkit-fill-available;\r\n}\r\n\r\n.img-card .card-link a {\r\n text-decoration: none;\r\n position: relative;\r\n padding: 10px 0;\r\n}\r\n\r\n.img-card .card-link a:after {\r\n top: 30px;\r\n content: \"\";\r\n display: block;\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n width: 0;\r\n\r\n -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -moz-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n -o-transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n transition: width 0.3s ease 0s, left 0.3s ease 0s;\r\n}\r\n\r\n.img-card .card-link a:hover:after {\r\n width: 100%;\r\n left: 0;\r\n}\r\n\r\n.img-card.iCard-style1 .card-title {\r\n position: absolute;\r\n font-family: 'Open Sans', sans-serif;\r\n z-index: 1;\r\n top: 10px;\r\n left: 10px;\r\n font-size: 30px;\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style1 .card-text {\r\n color: #795548;\r\n}\r\n\r\n.img-card.iCard-style1 .card-link a {\r\n color: #FF9800;\r\n}\r\n\r\n.img-card.iCard-style1 .card-link a:after {\r\n background: #FF9800;\r\n}\r\n\r\n.img-card.iCard-style2 .card-title {\r\n padding: 15px;\r\n font-size: 25px;\r\n font-family: 'Roboto', sans-serif;\r\n}\r\n\r\n.img-card.iCard-style2 .card-image {\r\n margin-bottom: 15px;\r\n}\r\n\r\n.img-card.iCard-style2 .card-caption {\r\n text-align: center;\r\n top: 80%;\r\n font-size: 17px;\r\n color: #fff;\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Roboto', sans-serif;\r\n z-index: 1;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a {\r\n border: 1px solid;\r\n padding: 8px;\r\n border-radius: 3px;\r\n color: black;\r\n font-size: 13px;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a:hover {\r\n background: black;\r\n}\r\n\r\n.img-card.iCard-style2 .card-link a:hover span {\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style3 {\r\n text-align: center;\r\n}\r\n\r\n.img-card.iCard-style3 .card-title {\r\n top: 80%;\r\n font-size: 30px;\r\n color: #fff;\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Roboto', sans-serif;\r\n z-index: 1;\r\n}\r\n\r\n.img-card.iCard-style3 .card-text {\r\n color: #636060;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link {\r\n border-top: 1px solid #e8e8e8;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link a {\r\n color: #585858;\r\n}\r\n\r\n.img-card.iCard-style3 .card-link a:after {\r\n background: #585858;\r\n}\r\n\r\n.img-card.iCard-style4 {\r\n text-align: right;\r\n}\r\n\r\n.img-card.iCard-style4 .card-caption {\r\n position: absolute;\r\n width: 100%;\r\n font-family: 'Open Sans', sans-serif;\r\n z-index: 1;\r\n top: 10px;\r\n right: 10px;\r\n color: #fff;\r\n}\r\n\r\n.img-card.iCard-style4 .card-title {\r\n width: 100%;\r\n padding: 20px 0px 12px 0;\r\n color: #E91E63;\r\n}\r\n\r\n.img-card.iCard-style4 .card-title span {\r\n font-size: 25px;\r\n margin-right: 12px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle {\r\n cursor: pointer;\r\n padding: 8px 0px 13px 0px;\r\n width: 55px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span,\r\n.img-card.iCard-style4 .toggle span:nth-child(2),\r\n.img-card.iCard-style4 .toggle span:nth-child(3) {\r\n position: absolute;\r\n width: 8px;\r\n height: 8px;\r\n background: #E91E63;\r\n cursor: pointer;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(1) {\r\n right: 15px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(2) {\r\n right: 27px;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle span:nth-child(3) {\r\n right: 39px;\r\n}\r\n\r\n.img-card.iCard-style4 .card-text {\r\n opacity: 0;\r\n line-height: 0;\r\n padding-bottom: 0;\r\n color: #4c4c4c;\r\n\r\n -webkit-transition: ease-in-out 0.5s;\r\n -moz-transition: ease-in-out 0.5s;\r\n -o-transition: ease-in-out 0.5s;\r\n transition: ease-in-out 0.5s;\r\n}\r\n\r\n.img-card.iCard-style4 .toggle.active~.card-text {\r\n opacity: 1;\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link {\r\n border-top: 1px solid #e8e8e8;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link a {\r\n color: #E91E63;\r\n}\r\n\r\n.img-card.iCard-style4 .card-link a:after {\r\n background: #E91E63;\r\n}\r\n\r\n\r\n/* Overlay Image Card */\r\n\r\n.ioverlay-card {\r\n position: relative;\r\n text-align: left;\r\n}\r\n\r\n.ioverlay-card img {\r\n height: auto;\r\n width: 100%;\r\n border-radius: 4px;\r\n}\r\n\r\n.ioverlay-card .card-content {\r\n position: absolute;\r\n top: 25px;\r\n left: 20px;\r\n}\r\n\r\n.ioverlay-card .card-content .card-title {\r\n font-size: 25px;\r\n}\r\n\r\n.io-card-1 {\r\n color: #fff;\r\n}\r\n\r\n.io-card-1 .card-content .card-text {\r\n width: 95%;\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.io-card-1 .card-link {\r\n position: absolute;\r\n top: 140px;\r\n left: 20px;\r\n}\r\n\r\n.io-card-1 .card-link a {\r\n color: #fff;\r\n text-decoration: none;\r\n padding: 10px;\r\n border: 1px solid;\r\n border-radius: 4px;\r\n background: #3F51B5;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.io-card-1 .card-link a:hover {\r\n color: #3F51B5;\r\n background: #fff;\r\n border-color: #fff;\r\n}\r\n\r\n.io-card-2 .card-content {\r\n color: #fff;\r\n}\r\n\r\n.io-card-2 .card-link {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 20px;\r\n}\r\n\r\n.io-card-2 .card-link a {\r\n color: #fff;\r\n text-decoration: none;\r\n padding: 10px;\r\n border: 1px solid #fff;\r\n border-radius: 4px;\r\n\r\n -webkit-transition: all 0.4s;\r\n -moz-transition: all 0.4s;\r\n -o-transition: all 0.4s;\r\n transition: all 0.4s;\r\n}\r\n\r\n.io-card-2 .card-link a:hover {\r\n color: black;\r\n background-color: #fff;\r\n}\r\n\r\n.io-card-2 .card-content .card-text {\r\n line-height: 1.5;\r\n padding-bottom: 10px;\r\n}\r\n\r\n\r\n/* Product & Shop Cards */\r\n.card-category-4 .sp-card-1 {\r\n background-image: linear-gradient(#f74545, #673AB7);\r\n height: 245px;\r\n width: 535px;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button {\r\n padding-left: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li {\r\n list-style-type: none;\r\n display: inline-block;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) {\r\n padding: 20px 20px;\r\n float: left;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) .off-label {\r\n border: 1px solid #fff;\r\n background: #fff;\r\n font-size: 11px;\r\n padding: 7px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(1) .return-line {\r\n font-size: 13px;\r\n padding: 20px 0 15px 0;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button a {\r\n text-decoration: none;\r\n color: #fff;\r\n border: 1px solid;\r\n padding: 10px 15px;\r\n background: #1f3c3d;\r\n\r\n -webkit-transition: ease-in-out .2s;\r\n -moz-transition: ease-in-out .2s;\r\n -o-transition: ease-in-out .2s;\r\n transition: ease-in-out .2s;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .shop-button a:hover {\r\n background: transparent;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) {\r\n text-align: right;\r\n padding: 0;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) img {\r\n height: 170px;\r\n padding: 15px 0 0;\r\n\r\n -webkit-transition: all .3s ease-in;\r\n -moz-transition: all .3s ease-in;\r\n -o-transition: all .3s ease-in;\r\n transition: all .3s ease-in;\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) img:hover {\r\n -webkit-transform: scale(0.90);\r\n -moz-transform: scale(0.90);\r\n -o-transform: scale(0.90);\r\n transform: scale(0.90);\r\n}\r\n\r\n.card-category-4 .sp-card-1 ul li:nth-child(2) .price-start {\r\n text-align: center;\r\n font-size: 18px;\r\n color: #fff;\r\n padding: 18px 0px 0px;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .card-title {\r\n color: #fff;\r\n font-size: 23px;\r\n font-weight: 550;\r\n}\r\n\r\n.card-category-4 .sp-card-1 .sub-line {\r\n padding: 8px 0px 15px 0px;\r\n color: #fff;\r\n font-size: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 {\r\n width: 230px;\r\n border: 1px solid #f9f9f9;\r\n text-align: left;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-2 .overlap {\r\n background: #3f51b57a;\r\n width: inherit;\r\n height: 0;\r\n position: absolute;\r\n text-align: center;\r\n opacity: 0;\r\n\r\n -webkit-transition: all .5s ease-in-out;\r\n -moz-transition: all .5s ease-in-out;\r\n -o-transition: all .5s ease-in-out;\r\n transition: all .5s ease-in-out;\r\n}\r\n\r\n.card-category-4 .sp-card-2:hover .overlap {\r\n opacity: 1;\r\n height: 204px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .overlap a {\r\n position: relative;\r\n top: 50%;\r\n text-decoration: none;\r\n color: #673AB7;\r\n padding: 10px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n background: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-image {\r\n text-align: center;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-image img {\r\n height: 200px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .card-title {\r\n font-weight: 600;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .price-start {\r\n font-weight: 600;\r\n color: #673AB7;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .card-caption {\r\n font-size: 14px;\r\n color: #717171;\r\n padding: 15px 0px 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-size,\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors {\r\n padding: 10px 0;\r\n font-size: 13px;\r\n color: #545454;\r\n text-transform: uppercase;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors span:not(:nth-child(1)) {\r\n position: absolute;\r\n width: 15px;\r\n height: 15px;\r\n border-radius: 40px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color1 {\r\n background: red;\r\n border: 1px solid black;\r\n margin-left: 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color2 {\r\n background: blue;\r\n border: 1px solid black;\r\n margin-left: 35px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color3 {\r\n background: Orange;\r\n border: 1px solid black;\r\n margin-left: 60px;\r\n}\r\n\r\n.card-category-4 .sp-card-2 .card-content .cloth-colors .color4 {\r\n background: black;\r\n border: 1px solid black;\r\n margin-left: 85px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 {\r\n width: 550px;\r\n height: 345px;\r\n border: 1px solid #efefef;\r\n\r\n -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.card-category-4 .sp-card-3 .card-title {\r\n color: #525252;\r\n font-weight: 600;\r\n font-size: 25px;\r\n padding: 15px 20px;\r\n text-align: right;\r\n width: 40%;\r\n float: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card {\r\n padding: 0;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card p {\r\n font-size: 15px;\r\n color: #505050;\r\n line-height: 1.5;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .buy-btn {\r\n padding: 0px 0px 35px 0;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .buy-btn a {\r\n text-decoration: none;\r\n padding: 12px 65px;\r\n border: 1px solid;\r\n background-color: #ff4f1d;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .cart-btn a {\r\n text-decoration: none;\r\n padding: 12px 53px;\r\n border: 1px solid;\r\n background-color: #ff4f1d;\r\n color: #fff;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(1) {\r\n display: inline-block;\r\n padding-top: 30px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(2) {\r\n display: inline-block;\r\n width: 55%;\r\n text-align: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .footer-card li:nth-child(2) span {\r\n font-weight: 600;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul {\r\n padding: 0px 10px 10px 10px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul li img {\r\n height: 180px;\r\n\r\n -webkit-transition: all .4s ease-in-out;\r\n -moz-transition: all .4s ease-in-out;\r\n -o-transition: all .4s ease-in-out;\r\n transition: all .4s ease-in-out;\r\n}\r\n\r\n.card-category-4 .sp-card-3 ul li img:hover {\r\n -webkit-transform: scale(0.90);\r\n -moz-transform: scale(0.90);\r\n -o-transform: scale(0.90);\r\n transform: scale(2);\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-img {\r\n width: 49%;\r\n float: left;\r\n padding-top: 20px;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description {\r\n width: 50%;\r\n text-align: right;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description a {\r\n text-decoration: none;\r\n color: #525252;\r\n}\r\n\r\n.card-category-4 .sp-card-3 .product-details .product-description ul li {\r\n display: list-item;\r\n font-size: 15px;\r\n color: #585858;\r\n direction: rtl;\r\n line-height: 1.5;\r\n}\r\n\r\n.card-category-5 .all-pr-cards {\r\n padding: 0;\r\n}\r\n\r\n.card-category-5 .per-card-1 {\r\n text-align: center;\r\n width: 250px;\r\n background-image: linear-gradient(#315386, #ffffff);\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-image {\r\n padding: 20px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-image img {\r\n height: 200px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-title {\r\n font-size: 20px;\r\n padding-bottom: 6px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .per-position {\r\n color: #002255;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .social-icons i {\r\n font-size: 30px;\r\n padding: 5px;\r\n\r\n -webkit-transition: all .2s ease-in;\r\n -moz-transition: all .2s ease-in;\r\n -o-transition: all .2s ease-in;\r\n transition: all .2s ease-in;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .social-icons i:hover {\r\n color: #383838;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-btn button {\r\n margin-top: 15px;\r\n width: 100%;\r\n padding: 15px;\r\n background: black;\r\n color: #fff;\r\n border: none;\r\n font-size: 18px;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .2s ease-in;\r\n -moz-transition: all .2s ease-in;\r\n -o-transition: all .2s ease-in;\r\n transition: all .2s ease-in;\r\n}\r\n\r\n.card-category-5 .per-card-1 .card-content .card-btn button:hover {\r\n background: #383838;\r\n}\r\n\r\n\r\n.card-category-5 .per-card-2 {\r\n width: 300px;\r\n padding: 30px 0 0 0;\r\n margin: 0 40px;\r\n /*You may have remove this CSS. I used this CSS for apply some margin from the card before*/\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image {\r\n padding: 10px 15px;\r\n background-image: linear-gradient(#3F51B5, #673AB7);\r\n width: 319px;\r\n position: relative;\r\n right: 25px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image::before {\r\n content: '';\r\n position: absolute;\r\n width: 0px;\r\n height: 0px;\r\n border: 12px solid #430ca5;\r\n top: -24px;\r\n left: 0px;\r\n border-left-color: transparent;\r\n border-top-color: transparent;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image::after {\r\n content: '';\r\n position: absolute;\r\n width: 0px;\r\n height: 0px;\r\n border: 12px solid #430ca5;\r\n top: 104px;\r\n right: 0;\r\n border-right-color: transparent;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image img {\r\n border-radius: 40px;\r\n height: 80px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image ul {\r\n padding: 0;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .per-name {\r\n font-size: 23px;\r\n color: #fff;\r\n margin: 5px 0px 0px 10px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .per-position {\r\n font-size: 18px;\r\n color: #fff;\r\n margin: 15px 0px 0px 15px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn {\r\n position: absolute;\r\n width: 40px;\r\n height: 40px;\r\n top: 80px;\r\n right: 40px;\r\n border: 4px solid #fff;\r\n border-radius: 30px;\r\n background: #653cb7;\r\n cursor: pointer;\r\n\r\n -webkit-transform: rotate(0deg);\r\n -moz-transform: rotate(0deg);\r\n -o-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n\r\n -webkit-transition: all .3s ease-in-out;\r\n -moz-transition: all .3s ease-in-out;\r\n -o-transition: all .3s ease-in-out;\r\n transition: all .3s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn:hover {\r\n -webkit-transform: rotate(90deg);\r\n -moz-transform: rotate(90deg);\r\n -o-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn span,\r\n.card-category-5 .per-card-2 .card-image .card-btn span::after {\r\n content: '';\r\n width: 23px;\r\n height: 3px;\r\n background: #fff;\r\n position: absolute;\r\n top: 18px;\r\n left: 8px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-image .card-btn span::after {\r\n left: 0;\r\n top: 0;\r\n\r\n -webkit-transform: rotate(90deg);\r\n -moz-transform: rotate(90deg);\r\n -o-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content {\r\n padding: 40px 30px 20px;\r\n text-align: justify;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .card-text {\r\n line-height: 1.5;\r\n color: #585858;\r\n font-size: 15px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons {\r\n text-align: center;\r\n padding-top: 20px;\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons i {\r\n padding: 10px;\r\n font-size: 30px;\r\n color: #430ca5;\r\n cursor: pointer\r\n}\r\n\r\n.card-category-5 .per-card-2 .card-content .social-icons i:hover {\r\n color: black;\r\n}\r\n\r\n.card-category-5 .per-card-3 {\r\n width: 400px;\r\n height: 240px;\r\n\r\n -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n -o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.card-category-5 .per-card-3:hover .card-content .social-icons {\r\n opacity: 1;\r\n height: 100%;\r\n}\r\n\r\n.card-category-5 .per-card-3:hover .social-icons .card-btn {\r\n bottom: 0px !important;\r\n\r\n -webkit-animation: down-btn 1.5s;\r\n -moz-animation: down-btn 1.5s;\r\n -o-animation: down-btn 1.5s;\r\n animation: down-btn 1.5s;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image {\r\n position: relative;\r\n background: #009688;\r\n padding-left: 20px;\r\n text-align: left;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image img {\r\n height: 90px;\r\n border-radius: 50px;\r\n padding: 5px;\r\n margin-right: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-image .per-name {\r\n position: absolute;\r\n top: 40%;\r\n text-transform: uppercase;\r\n letter-spacing: 7px;\r\n font-size: 20px;\r\n color: #fff;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content {\r\n text-align: center;\r\n padding: 20px;\r\n position: relative;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .per-position {\r\n font-size: 22px;\r\n text-transform: uppercase;\r\n letter-spacing: 4px;\r\n color: #009688;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .card-text {\r\n padding: 10px;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .card-text span {\r\n font-size: 13px;\r\n color: #007368;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n left: 0;\r\n opacity: 0;\r\n height: 0%;\r\n background: #009688;\r\n border-top: 1px solid #5eada5;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .5s ease-in-out;\r\n -moz-transition: all .5s ease-in-out;\r\n -o-transition: all .5s ease-in-out;\r\n transition: all .5s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons i {\r\n margin: 15px;\r\n font-size: 30px;\r\n color: #fff;\r\n cursor: pointer;\r\n\r\n -webkit-transition: all .3s ease-in-out;\r\n -moz-transition: all .3s ease-in-out;\r\n -o-transition: all .3s ease-in-out;\r\n transition: all .3s ease-in-out;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons i:hover {\r\n -webkit-transform: scale(2);\r\n -moz-transform: scale(2);\r\n -o-transform: scale(2);\r\n transform: scale(2);\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons .card-btn {\r\n position: absolute;\r\n bottom: 10px;\r\n text-align: center;\r\n width: 100%;\r\n}\r\n\r\n.card-category-5 .per-card-3 .card-content .social-icons .card-btn button {\r\n cursor: pointer;\r\n width: 100%;\r\n padding: 15px;\r\n font-size: 18px;\r\n color: #fff;\r\n background: #03695f;\r\n border: none;\r\n}\r\n\r\n\r\n@media only screen and (max-width: 480px) {\r\n .io-card-1 .card-content .card-text {\r\n display: none;\r\n }\r\n\r\n .io-card-1 .card-link {\r\n top: 85px;\r\n }\r\n\r\n .card-category-4 .sp-card-1 {\r\n height: 100%;\r\n width: 100%;\r\n text-align: center;\r\n padding: 0 0px 30px 0;\r\n margin: 30px 0;\r\n }\r\n\r\n .card-category-4 .sp-card-1 .shop-button {\r\n padding: 0;\r\n }\r\n\r\n .card-category-4 .sp-card-1 ul li:nth-child(1) {\r\n padding: 20px;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-1 ul li:nth-child(2) {\r\n text-align: center;\r\n padding: 0 0 30px 0;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-2 {\r\n width: 300px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 {\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .card-title {\r\n text-align: center;\r\n width: 100%;\r\n float: none;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-img {\r\n width: 100%;\r\n float: none;\r\n padding-top: 10px;\r\n display: block;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-img img {\r\n height: auto;\r\n width: 90%;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description {\r\n width: 100%;\r\n padding: 20px 0px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul {\r\n text-align: center;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul li {\r\n font-size: 25px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .product-details .product-description ul li:last-child {\r\n text-decoration: underline;\r\n padding-top: 20px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card p {\r\n font-size: 20px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card li:nth-child(1) {\r\n padding-top: 5px;\r\n }\r\n\r\n .card-category-4 .sp-card-3 .footer-card li:nth-child(2) {\r\n width: 100%;\r\n padding: 30px 0;\r\n text-align: center;\r\n }\r\n\r\n .card-category-4 ul li:nth-child(3) {\r\n margin-top: 25px;\r\n padding: 0 15px;\r\n }\r\n\r\n .card-category-5 .per-card-2 {\r\n margin: 20px 40px;\r\n }\r\n\r\n .card-category-5 .per-card-3 {\r\n width: 350px;\r\n }\r\n\r\n .card-category-5 .per-card-3 .card-image .per-name {\r\n letter-spacing: 4px;\r\n }\r\n}\r\n\r\n@media only screen and (max-width: 360px) {\r\n .ioverlay-card .card-content {\r\n top: 10px;\r\n }\r\n\r\n .io-card-1 .card-link {\r\n top: 70px;\r\n }\r\n\r\n .card-category-5 .per-card-2 {\r\n width: 275px;\r\n }\r\n\r\n .card-category-5 .per-card-2 .card-image {\r\n width: 295px;\r\n }\r\n\r\n .card-category-5 .per-card-3 {\r\n width: 320px;\r\n height: 254px;\r\n }\r\n}";
var css = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}";
n(css,{});
var Button = function Button(_ref) {
var onHandler = _ref.onHandler;
return /*#__PURE__*/React__default['default'].createElement("div", {
className: "card-link"
}, /*#__PURE__*/React__default['default'].createElement("a", {
title: "Read Full"
}, /*#__PURE__*/React__default['default'].createElement("span", {
onClick: function onClick() {
onHandler("Lorem Ipsum");
}
}, "Read Full")));
};
var DygnifyCard = function DygnifyCard(_ref) {
var _ref$user = _ref.user,
user = _ref$user === void 0 ? "krishan" : _ref$user,
onHandler = _ref.onHandler;
return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
className: "category-name"
}, user, " Cards"), " ", /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
className: "card-category-1"
var firstModale = _ref.firstModale,
onHandler = _ref.onHandler,
firstModaleHandler = _ref.firstModaleHandler,
_ref$id = _ref.id,
id = _ref$id === void 0 ? "- - " : _ref$id;
return /*#__PURE__*/React__default['default'].createElement(Fragment, null, firstModale && /*#__PURE__*/React__default['default'].createElement("div", {
className: "main"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "basic-card basic-card-aqua"
className: "dygnify-backdrop",
onClick: firstModaleHandler
}), /*#__PURE__*/React__default['default'].createElement("div", {
className: "dygnify-modal"
}, /*#__PURE__*/React__default['default'].createElement("h3", null, "Boundle in Progress"), /*#__PURE__*/React__default['default'].createElement("div", {
className: "field-1-box"
}, /*#__PURE__*/React__default['default'].createElement("p", {
className: "myCredit"
}, "My Credit Score")), /*#__PURE__*/React__default['default'].createElement("div", {
className: "dygnify-wallet-box"
}, /*#__PURE__*/React__default['default'].createElement("h3", null, "Wallets"), /*#__PURE__*/React__default['default'].createElement("div", {
className: "wallet"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "card-content"
}, /*#__PURE__*/React__default['default'].createElement("span", {
className: "card-title"
}, "Card Title"), /*#__PURE__*/React__default['default'].createElement("p", {
className: "card-text"
}, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.")), /*#__PURE__*/React__default['default'].createElement(Button, {
onHandler: onHandler
}))));
className: "card-img"
}, /*#__PURE__*/React__default['default'].createElement("img", {
src: "https://picsum.photos/200/300",
alt: ""
})), /*#__PURE__*/React__default['default'].createElement("div", {
className: "wallet-text"
}, /*#__PURE__*/React__default['default'].createElement("h4", null, id), /*#__PURE__*/React__default['default'].createElement("p", {
className: "p"
}, "Primary Wallet"))), /*#__PURE__*/React__default['default'].createElement("div", {
className: "wallet"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "card-img"
}, /*#__PURE__*/React__default['default'].createElement("img", {
src: "https://picsum.photos/200/300",
alt: ""
})), /*#__PURE__*/React__default['default'].createElement("div", {
className: "wallet-text"
}, /*#__PURE__*/React__default['default'].createElement("h4", null, id), /*#__PURE__*/React__default['default'].createElement("p", {
className: "p"
}, "Secondray Wallet")))), /*#__PURE__*/React__default['default'].createElement("div", {
className: "btn-box"
}, /*#__PURE__*/React__default['default'].createElement("button", {
className: "btn",
onClick: function onClick() {
onHandler("button is clicked");
}
}, /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement("svg", {
width: "15",
height: "15",
viewBox: "0 0 20 21",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React__default['default'].createElement("path", {
d: "M9.41406 3.46875L10.5859 3.46875C10.6901 3.46875 10.7422 3.52083 10.7422 3.625L10.7422 17.375C10.7422 17.4792 10.6901 17.5312 10.5859 17.5312H9.41406C9.3099 17.5312 9.25781 17.4792 9.25781 17.375L9.25781 3.625C9.25781 3.52083 9.3099 3.46875 9.41406 3.46875Z",
fill: "black"
}), /*#__PURE__*/React__default['default'].createElement("path", {
d: "M3.4375 9.75781L16.5625 9.75781C16.6667 9.75781 16.7188 9.8099 16.7188 9.91406V11.0859C16.7188 11.1901 16.6667 11.2422 16.5625 11.2422L3.4375 11.2422C3.33333 11.2422 3.28125 11.1901 3.28125 11.0859L3.28125 9.91406C3.28125 9.8099 3.33333 9.75781 3.4375 9.75781Z",
fill: "black"
}))), "Add more wallet")), /*#__PURE__*/React__default['default'].createElement("div", {
className: "btn-preview-box"
}, /*#__PURE__*/React__default['default'].createElement("button", {
className: "btnPreview"
}, "Preview NFC")))));
};

@@ -50,0 +83,0 @@

5

package.json
{
"name": "krishan21-react-demo5",
"version": "1.0.0",
"description": "React Component for adding Pagination support to Rails or any other MVC Framework",
"version": "1.0.1",
"description": "React Component for adding DygnifyCard support to Rails or any other MVC Framework",
"main": "src/index.js",

@@ -62,3 +62,2 @@ "module": "dist/index.esm.js",

"autoprefixer": "^10.2.5",
"node-sass": "^6.0.0",
"rollup": "^2.48.0",

@@ -65,0 +64,0 @@ "rollup-plugin-sourcemaps": "^0.6.3",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc