diff --git a/packages/Webkul/Admin/publishable/assets/css/admin.css b/packages/Webkul/Admin/publishable/assets/css/admin.css
index 539402f87..15ee1f42b 100755
--- a/packages/Webkul/Admin/publishable/assets/css/admin.css
+++ b/packages/Webkul/Admin/publishable/assets/css/admin.css
@@ -1 +1 @@
-@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500);body{margin:0;color:#3a3a3a;font-family:Montserrat,sans-serif;font-size:14px;font-weight:500;position:static;min-height:100%;width:100%}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px hsla(0,0%,100%,.3);border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)}.navbar-top{height:60px;background:#fff;font-size:0;-webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.05);box-shadow:0 3px 6px 0 rgba(0,0,0,.05);border-bottom:1px solid hsla(0,0%,64%,.2);position:fixed;left:0;right:0;z-index:5}.navbar-top .navbar-top-left{width:50%;height:60px;display:inline-block;vertical-align:middle}.navbar-top .navbar-top-left .brand-logo{padding:10px}.navbar-top .navbar-top-right{width:50%;height:60px;text-align:right;display:inline-block;vertical-align:middle}.navbar-top .navbar-top-right .profile-info{display:inline-block;vertical-align:middle;text-align:left;min-width:50px;padding:12px 0;margin:0 25px 0 30px;font-size:15px;cursor:pointer;position:relative}.navbar-top .navbar-top-right .profile-info .dropdown-list{top:63px}.navbar-top .navbar-top-right .profile-info .name{color:#000311;display:block;text-align:left}.navbar-top .navbar-top-right .profile-info .role{font-size:14px;color:#8e8e8e;display:block;text-align:left}.navbar-top .navbar-top-right .profile-info i.icon{margin-left:10px}.navbar-left{position:fixed;left:0;top:60px;width:90px;padding-top:20px;border-right:1px solid hsla(0,0%,64%,.2);height:auto;bottom:0;z-index:2}.navbar-left ul.menubar li.menu-item{padding:10px 5px;font-size:11px;text-align:center;text-transform:uppercase}.navbar-left ul.menubar li.menu-item a{color:#a2a2a2}.navbar-left ul.menubar li.menu-item.active a{color:#0041ff}.navbar-left ul.menubar li.menu-item span{display:block;margin:auto}.content-container{padding-left:90px;position:absolute;margin-top:60px;top:0;right:0;left:0;bottom:0;height:calc(100% - 60px);width:100%}.content-container .inner-section{height:100%}.content-container .aside-nav{width:280px;position:fixed;top:60px;bottom:0;border-right:1px solid hsla(0,0%,64%,.2);background:#f8f9fa;padding-top:10px;padding-bottom:10px;z-index:4}.content-container .aside-nav ul{overflow-y:auto;height:90%}.content-container .aside-nav a{padding:15px;display:block;color:#000311}.content-container .aside-nav .active a{background:#fff;border-top:1px solid hsla(0,0%,64%,.2);border-bottom:1px solid hsla(0,0%,64%,.2)}.content-container .aside-nav .active i{float:right}.content-container .content-wrapper{padding:25px;margin-left:305px}.content-container .content{margin-top:25px}.content-container .content.full-page{padding:25px}.content-container .content .page-header{display:inline-block;width:100%;padding:15px 0;position:-webkit-sticky;position:sticky;top:60px;background-color:#fff;z-index:3}.content-container .content .page-header .page-title{float:left}.content-container .content .page-header .page-title .back-link{float:left;margin-right:10px;width:24px;height:24px;cursor:pointer;margin-top:5px}.content-container .content .page-header .page-title h1{margin-bottom:0;vertical-align:middle;display:inline-block;line-height:normal}.content-container .content .page-header .page-action{float:right}.content-container .content .page-header .page-action *{display:inline-block}.content-container .content .page-header .page-action a{margin-left:25px}.content-container .content .page-header .control-group{width:180px;display:inline-block;margin-bottom:0;margin-left:20px}.content-container .content .page-header .control{width:100%;margin:0}.content-container .content .page-content{width:100%;display:inline-block}.control-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:750px}.control-container .control{background:#fff;border:2px solid #c7c7c7;border-radius:3px;width:150px;height:36px;display:inline-block;vertical-align:middle;-webkit-transition:.2s cubic-bezier(.4,0,.2,1);transition:.2s cubic-bezier(.4,0,.2,1);padding:0 10px;font-size:15px}.control-container .control:focus{border-color:#0041ff}.control-container .icon:hover{cursor:pointer}.control-container .control-group::last-child{margin-right:0}.boolean-control-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:750px}.boolean-control-container .control-group{width:200px}.control-group label{width:70%}.control-group label .locale{float:right;color:#8e8e8e}.control-group .mce-tinymce{margin-top:10px;margin-bottom:5px}.dashboard .page-header{margin-bottom:0!important;padding-bottom:15px;border-bottom:1px solid hsla(0,0%,64%,.2)}.dashboard .page-content{margin-top:15px}.dashboard .card{height:445px;background:#fff;border:1px solid #e7e7e7;-webkit-box-shadow:0 5px 10px 2px rgba(0,0,0,.08);box-shadow:0 5px 10px 2px rgba(0,0,0,.08);border-radius:2px;padding:20px 0 0 20px;overflow:auto}.dashboard .card .card-title{font-size:14px;color:#a2a2a2;letter-spacing:-.26px;text-transform:uppercase}.dashboard .card .card-info{width:100%;display:inline-block}.dashboard .card .card-info.center{text-align:center}.dashboard .card .card-info ul li{border-bottom:1px solid hsla(0,0%,64%,.2);width:100%;display:inline-block;padding:10px 0;position:relative}.dashboard .card .card-info ul li .image{height:60px;width:60px;float:left;margin-right:15px}.dashboard .card .card-info ul li .image.product{background:#f2f2f2}.dashboard .card .card-info ul li .image img{width:100%}.dashboard .card .card-info ul li .description{margin-top:10px}.dashboard .card .card-info ul li .description .name{color:#0041ff}.dashboard .card .card-info ul li .description .info{color:#3a3a3a;margin-top:5px}.dashboard .card .card-info ul li .icon.angle-right-icon{position:absolute;right:30px;top:50%;margin-top:-8px}.dashboard .card .card-info ul li:last-child{border-bottom:0}.dashboard .card .card-info .no-result-found{margin-top:146px}.dashboard .card .card-info .no-result-found p{margin:0;color:#a2a2a2}.dashboard .dashboard-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-auto-rows:auto;grid-column-gap:30px;grid-row-gap:15px}.dashboard .dashboard-stats .dashboard-card{height:100px;background:#fff;border:1px solid #e7e7e7;-webkit-box-shadow:0 5px 10px 2px rgba(0,0,0,.08);box-shadow:0 5px 10px 2px rgba(0,0,0,.08);border-radius:5px;position:relative;padding:15px}.dashboard .dashboard-stats .dashboard-card .title{font-size:14px;color:#a2a2a2;text-transform:uppercase}.dashboard .dashboard-stats .dashboard-card .data{padding-top:13px;font-size:32px;color:#0041ff}.dashboard .dashboard-stats .dashboard-card .data .progress{font-size:14px;color:#8e8e8e;float:right;margin-top:-2px}.dashboard .dashboard-stats .dashboard-card .data .progress .icon{vertical-align:middle}.dashboard .graph-stats{margin-top:30px;width:100%;display:inline-block}.dashboard .graph-stats .left-card-container{float:left;width:75%;padding-right:9px}.dashboard .graph-stats .right-card-container{float:left;width:25%;padding-left:21px}.dashboard .sale-stock{width:100%;display:inline-block;display:grid;grid-template-columns:repeat(auto-fill,minmax(435px,1fr));grid-auto-rows:auto;grid-column-gap:30px;grid-row-gap:15px;margin-top:30px}.sale-container .sale-section{font-size:16px}.sale-container .sale-section .secton-title{font-size:18px;color:#8e8e8e;padding:15px 0;border-bottom:1px solid hsla(0,0%,64%,.2)}.sale-container .sale-section .section-content{display:block;padding:20px 0}.sale-container .sale-section .section-content .row{display:block;padding:7px 0}.sale-container .sale-section .section-content .row .title{width:200px;color:#3a3a3a;letter-spacing:-.26px;display:inline-block}.sale-container .sale-section .section-content .row .value{color:#3a3a3a;letter-spacing:-.26px;display:inline-block}.sale-container .table .qty-row{display:block;margin-bottom:5px}.sale-container .table .qty-row:last-child{margin-bottom:0}.sale-container .table .radio{margin:0}.sale-container .sale-summary{margin-top:2%;height:130px;float:right}.sale-container .sale-summary tr td{padding:5px 8px}.sale-container .sale-summary tr.bold{font-weight:600;font-size:15px}.sale-container .sale-summary tr.border td{border-bottom:1px solid hsla(0,0%,64%,.2)}.stars{margin-top:5px}.stars .icon{width:16px;height:16px}.export-import{cursor:pointer}.export-import .export-icon,.export-import .import-icon{position:relative;top:10px}.export-import span{margin-left:2px}.configuration-image{position:relative;height:33px;width:33px;top:15px;border-radius:3px;margin-right:5px}.download{position:relative;height:24px!important;width:24px!important;top:12px;margin-right:10px}.aside-nav-toggle{height:48px;width:100%;padding-top:15px;border-top:1px solid hsla(0,0%,64%,.2)}.aside-nav-toggle .close-icon,.aside-nav-toggle .open-icon{position:absolute;cursor:pointer;left:45%}.aside-nav-toggle.open{display:none}.linked-product-search-result{-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.16),0 0 9px 0 rgba(0,0,0,.16);box-shadow:0 2px 4px 0 rgba(0,0,0,.16),0 0 9px 0 rgba(0,0,0,.16);z-index:10;text-align:left;border-radius:3px;background-color:#fff;width:70%;max-height:200px;overflow-y:auto}.linked-product-search-result li{padding:10px;border-bottom:1px solid #e8e8e8;cursor:pointer}.rtl{direction:rtl}.rtl .navbar-top .navbar-top-right{text-align:left}.rtl .navbar-top .navbar-top-right .profile-info{margin:0 30px 0 25px}.rtl .navbar-top .navbar-top-right .profile-info i.icon{margin-left:0;margin-right:10px}.rtl .navbar-left{border-left:1px solid hsla(0,0%,64%,.2);border-right:none;left:calc(100% - 90px)}.rtl .content-container{padding-right:90px;padding-left:0}.rtl .content-container .content .page-header .page-title{float:right}.rtl .content-container .content .page-header .page-action{float:left}.rtl .content-container .content .page-header .page-action a{margin-left:0}.rtl .content-container .content .page-header .control-group{margin-right:20px;margin-left:0}.rtl .content-container .content .page-header .control-group.date:after{margin-top:6px;position:absolute;margin-right:-35px}.rtl .content-container .content .page-header .control-group.date:last-child{margin-left:0}.rtl .content-container .content-wrapper{padding:25px 305px 25px 25px;margin-left:0}.rtl .content-container .aside-nav .active i{float:left;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rtl .dashboard .dashboard-stats .dashboard-card .data span{float:left}.rtl .dashboard .card{padding:20px 20px 0 0}.rtl .dashboard .card .card-info ul li .image{float:right;margin-right:0;margin-left:15px}.rtl .dashboard .card .card-info ul li .icon.angle-right-icon{left:30px;right:auto;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rtl .dashboard .graph-stats .left-card-container{float:right;padding-right:0}.rtl .dashboard .graph-stats .right-card-container{float:right;padding-left:0;padding-right:30px}.rtl .sale-container .sale-summary{float:left}.rtl .grid-container .filter-row-one .search-filter{border:2px solid #c7c7c7;border-radius:2px}.rtl .grid-container .filter-row-one .search-filter .control{border:none;padding-right:10px}.rtl .grid-container .filter-row-one .search-filter .icon-wrapper{border:none;padding-top:2px;padding-right:5px;border-right:2px solid #c7c7c7;border-radius:0}.rtl .grid-container .filter-row-two .filter-tag .icon.cross-icon,.rtl .grid-container .filter-row-two .filter-tag .wrapper{margin-right:10px;margin-left:0}.rtl .grid-container .filter-row-one .dropdown-filters{right:unset;left:25px}.rtl .grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-toggle .dropdown-header span{padding-right:5px}.rtl .grid-container .table tbody td.action a:first-child{margin-left:10px;margin-right:0}.rtl .table table{text-align:right}.rtl .table table .massaction-remove{margin-right:5px!important;margin-left:10px}.rtl .table table .btn.btn-primary{margin-right:10px!important}.rtl .dropdown-list.bottom-right{left:0;right:auto}.rtl .dropdown-list .dropdown-container{text-align:right}.rtl .accordian .accordian-header .icon{float:left}.rtl .tree-container .tree-item{padding-right:30px}.rtl .tree-container .tree-item .expand-icon,.rtl .tree-container .tree-item .folder-icon{margin-left:10px;margin-right:0}.rtl .tree-container>.tree-item{padding-right:0}.rtl .radio .radio-view{margin-left:5px}.rtl .image-wrapper .image-item{margin-right:0;margin-left:20px}.rtl .image-wrapper .image-item .remove-image{margin-right:0}.rtl .control-group label.required:before{content:"*";color:#fc6868;font-weight:700}.rtl .control-group label.required:after{content:none}.rtl .control-group label .locale{float:left}.rtl .control-group.date:after{margin-top:15px;position:absolute;margin-right:-35px}.rtl .pagination .page-item .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fixed-action{top:108px}.fixed-action,.fixed-action-slight{position:fixed;right:32px;z-index:20}.fixed-action-slight{top:94px}.pagination{margin-top:30px}
\ No newline at end of file
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500);body{margin:0;color:#3a3a3a;font-family:Montserrat,sans-serif;font-size:14px;font-weight:500;position:static;height:100%;width:100%;background-color:#fff}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px hsla(0,0%,100%,.3);border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)}.navbar-top{height:60px;background-color:#fff;font-size:0;-webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.05);box-shadow:0 3px 6px 0 rgba(0,0,0,.05);border-bottom:1px solid hsla(0,0%,64%,.2);position:fixed;left:0;right:0;z-index:5}.navbar-top .navbar-top-left{width:50%;height:60px;display:inline-block;vertical-align:middle;background-color:#fff}.navbar-top .navbar-top-left .brand-logo{padding:10px}.navbar-top .navbar-top-right{width:50%;height:60px;text-align:right;display:inline-block;vertical-align:middle}.navbar-top .navbar-top-right .profile-info{display:inline-block;vertical-align:middle;text-align:left;min-width:50px;padding:12px 0;margin:0 25px 0 30px;font-size:15px;cursor:pointer;position:relative}.navbar-top .navbar-top-right .profile-info .dropdown-list{top:63px}.navbar-top .navbar-top-right .profile-info .name{color:#000311;display:block;text-align:left}.navbar-top .navbar-top-right .profile-info .role{font-size:14px;color:#8e8e8e;display:block;text-align:left}.navbar-top .navbar-top-right .profile-info i.icon{margin-left:10px}.navbar-left{position:fixed;left:0;top:60px;width:90px;padding-top:20px;border-right:1px solid hsla(0,0%,64%,.2);height:auto;bottom:0;z-index:2;background-color:#fff}.navbar-left ul.menubar li.menu-item{padding:10px 5px;font-size:11px;text-align:center;text-transform:uppercase}.navbar-left ul.menubar li.menu-item a{color:#a2a2a2}.navbar-left ul.menubar li.menu-item.active a{color:#0041ff}.navbar-left ul.menubar li.menu-item span{display:block;margin:auto}.content-container{padding-left:90px;position:absolute;margin-top:60px;top:0;right:0;left:0;bottom:0;height:calc(100% - 60px);width:100%}.content-container .inner-section{height:100%}.content-container .aside-nav{width:280px;position:fixed;top:60px;bottom:0;border-right:1px solid hsla(0,0%,64%,.2);background-color:#f8f9fa;padding-top:10px;padding-bottom:10px;z-index:4}.content-container .aside-nav ul{overflow-y:auto;height:90%}.content-container .aside-nav a{padding:15px;display:block;color:#000311}.content-container .aside-nav .active a{background:#fff;border-top:1px solid hsla(0,0%,64%,.2);border-bottom:1px solid hsla(0,0%,64%,.2)}.content-container .aside-nav .active i{float:right}.content-container .content-wrapper{padding:25px 25px 25px 15px;margin-left:280px;margin-top:1px;background-color:#fff}.content-container .content{margin-top:25px}.content-container .content.full-page{padding:25px}.content-container .content .page-header{display:inline-block;width:100%;padding:15px 10px 15px 0;position:-webkit-sticky;position:sticky;top:50px;z-index:3;background-color:#fff}.content-container .content .page-header .page-title{float:left}.content-container .content .page-header .page-title .back-link{float:left;margin-right:10px;width:24px;height:24px;cursor:pointer;margin-top:5px}.content-container .content .page-header .page-title h1{margin-bottom:0;vertical-align:middle;display:inline-block;line-height:normal}.content-container .content .page-header .page-action{float:right}.content-container .content .page-header .page-action *{display:inline-block}.content-container .content .page-header .page-action a{margin-left:25px}.content-container .content .page-header .control-group{width:180px;display:inline-block;margin-bottom:0;margin-left:20px}.content-container .content .page-header .control{width:100%;margin:0}.content-container .content .page-content{width:100%;display:inline-block}.control-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:750px}.control-container .control{background:#fff;border:2px solid #c7c7c7;border-radius:3px;width:150px;height:36px;display:inline-block;vertical-align:middle;-webkit-transition:.2s cubic-bezier(.4,0,.2,1);transition:.2s cubic-bezier(.4,0,.2,1);padding:0 10px;font-size:15px}.control-container .control:focus{border-color:#0041ff}.control-container .icon:hover{cursor:pointer}.control-container .control-group::last-child{margin-right:0}.boolean-control-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:750px}.boolean-control-container .control-group{width:200px}.control-group label{width:70%}.control-group label .locale{float:right;color:#8e8e8e}.control-group .mce-tinymce{margin-top:10px;margin-bottom:5px}.dashboard .page-header{margin-bottom:0!important;padding-bottom:15px;border-bottom:1px solid hsla(0,0%,64%,.2)}.dashboard .page-content{margin-top:15px}.dashboard .card{height:445px;background-color:#fff;border:1px solid hsla(0,0%,64%,.2);-webkit-box-shadow:0 5px 10px 2px hsla(0,0%,64%,.2);box-shadow:0 5px 10px 2px hsla(0,0%,64%,.2);border-radius:.25rem;padding:20px 0 0 20px;overflow:auto}.dashboard .card .card-title{font-size:14px;color:#a2a2a2;letter-spacing:-.26px;text-transform:uppercase}.dashboard .card .card-info{width:100%;display:inline-block}.dashboard .card .card-info.center{text-align:center}.dashboard .card .card-info ul li{border-bottom:1px solid hsla(0,0%,64%,.2);width:100%;display:inline-block;padding:10px 0;position:relative}.dashboard .card .card-info ul li .image{height:60px;width:60px;float:left;margin-right:15px}.dashboard .card .card-info ul li .image.product{background:#f2f2f2}.dashboard .card .card-info ul li .image img{width:100%}.dashboard .card .card-info ul li .description{margin-top:10px}.dashboard .card .card-info ul li .description .name{color:#0041ff}.dashboard .card .card-info ul li .description .info{color:#3a3a3a;margin-top:5px}.dashboard .card .card-info ul li .icon.angle-right-icon{position:absolute;right:30px;top:50%;margin-top:-8px}.dashboard .card .card-info ul li:last-child{border-bottom:0}.dashboard .card .card-info .no-result-found{margin-top:146px}.dashboard .card .card-info .no-result-found p{margin:0;color:#a2a2a2}.dashboard .dashboard-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-auto-rows:auto;grid-column-gap:30px;grid-row-gap:15px}.dashboard .dashboard-stats .dashboard-card{height:100px;background:#fff;border:1px solid hsla(0,0%,64%,.2);-webkit-box-shadow:0 5px 10px 2px hsla(0,0%,64%,.2);box-shadow:0 5px 10px 2px hsla(0,0%,64%,.2);border-radius:5px;position:relative;padding:15px}.dashboard .dashboard-stats .dashboard-card .title{font-size:14px;color:#a2a2a2;text-transform:uppercase}.dashboard .dashboard-stats .dashboard-card .data{padding-top:13px;font-size:32px;color:#0041ff}.dashboard .dashboard-stats .dashboard-card .data .progress{font-size:14px;color:#8e8e8e;float:right;margin-top:-2px}.dashboard .dashboard-stats .dashboard-card .data .progress .icon{vertical-align:middle}.dashboard .graph-stats{margin-top:30px;width:100%;display:inline-block}.dashboard .graph-stats .left-card-container{float:left;width:75%;padding-right:9px}.dashboard .graph-stats .right-card-container{float:left;width:25%;padding-left:21px}.dashboard .sale-stock{width:100%;display:inline-block;display:grid;grid-template-columns:repeat(auto-fill,minmax(435px,1fr));grid-auto-rows:auto;grid-column-gap:30px;grid-row-gap:15px;margin-top:30px}.configuration-image{position:relative;height:33px;width:33px;top:15px;border-radius:3px;margin-right:5px}.download{position:relative;height:24px!important;width:24px!important;top:12px;margin-right:10px}.aside-nav-toggle{height:48px;width:100%;padding-top:15px;border-top:1px solid hsla(0,0%,64%,.2)}.aside-nav-toggle .close-icon,.aside-nav-toggle .open-icon{position:absolute;cursor:pointer;left:45%}.aside-nav-toggle.open{display:none}.linked-product-search-result{-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.16),0 0 9px 0 rgba(0,0,0,.16);box-shadow:0 2px 4px 0 rgba(0,0,0,.16),0 0 9px 0 rgba(0,0,0,.16);z-index:10;text-align:left;border-radius:3px;background-color:#fff;width:70%;max-height:200px;overflow-y:auto}.linked-product-search-result li{padding:10px;border-bottom:1px solid #e8e8e8;cursor:pointer}.sale-container .sale-section{font-size:16px}.sale-container .sale-section .secton-title{font-size:18px;color:#8e8e8e;padding:15px 0;border-bottom:1px solid hsla(0,0%,64%,.2)}.sale-container .sale-section .section-content{display:block;padding:20px 0}.sale-container .sale-section .section-content .row{display:block;padding:7px 0}.sale-container .sale-section .section-content .row .title{width:200px;color:#3a3a3a;letter-spacing:-.26px;display:inline-block}.sale-container .sale-section .section-content .row .value{color:#3a3a3a;letter-spacing:-.26px;display:inline-block}.sale-container .table .qty-row{display:block;margin-bottom:5px}.sale-container .table .qty-row:last-child{margin-bottom:0}.sale-container .table .radio{margin:0}.sale-container .sale-summary{margin-top:2%;height:130px;float:right}.sale-container .sale-summary tr td{padding:5px 8px;vertical-align:text-bottom}.sale-container .sale-summary tr.bold{font-weight:600;font-size:15px}.sale-container .sale-summary tr.border td{border-bottom:1px solid hsla(0,0%,64%,.2)}.stars{margin-top:5px}.stars .icon{width:16px;height:16px}.export-import{cursor:pointer}.export-import .export-icon,.export-import .import-icon{position:relative;top:10px}.export-import span{margin-left:2px}.rtl{direction:rtl}.rtl .navbar-top .navbar-top-right{text-align:left}.rtl .navbar-top .navbar-top-right .profile-info{margin:0 30px 0 25px}.rtl .navbar-top .navbar-top-right .profile-info i.icon{margin-left:0;margin-right:10px}.rtl .navbar-left{border-left:1px solid hsla(0,0%,64%,.2);border-right:none;left:calc(100% - 90px);background-color:#fff}.rtl .content-container{padding-right:90px;padding-left:0}.rtl .content-container .content .page-header .page-title{float:right}.rtl .content-container .content .page-header .page-action{float:left}.rtl .content-container .content .page-header .page-action a{margin-left:0}.rtl .content-container .content .page-header .control-group{margin-right:20px;margin-left:0}.rtl .content-container .content .page-header .control-group.date:after{margin-top:6px;position:absolute;margin-right:-35px}.rtl .content-container .content .page-header .control-group.date:last-child{margin-left:0}.rtl .content-container .content-wrapper{padding:25px 305px 25px 25px;margin-left:0}.rtl .content-container .aside-nav .active i{float:left;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rtl .dashboard .dashboard-stats .dashboard-card .data span{float:left}.rtl .dashboard .card{padding:20px 20px 0 0}.rtl .dashboard .card .card-info ul li .image{float:right;margin-right:0;margin-left:15px}.rtl .dashboard .card .card-info ul li .icon.angle-right-icon{left:30px;right:auto;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rtl .dashboard .graph-stats .left-card-container{float:right;padding-right:0}.rtl .dashboard .graph-stats .right-card-container{float:right;padding-left:0;padding-right:30px}.rtl .sale-container .sale-summary{float:left}.rtl .grid-container .filter-row-one .search-filter{border:2px solid #c7c7c7;border-radius:2px}.rtl .grid-container .filter-row-one .search-filter .control{border:none;padding-right:10px}.rtl .grid-container .filter-row-one .search-filter .icon-wrapper{border:none;padding-top:2px;padding-right:5px;border-right:2px solid #c7c7c7;border-radius:0}.rtl .grid-container .filter-row-two .filter-tag .icon.cross-icon,.rtl .grid-container .filter-row-two .filter-tag .wrapper{margin-right:10px;margin-left:0}.rtl .grid-container .filter-row-one .dropdown-filters{right:unset;left:25px}.rtl .grid-container .filter-wrapper .filter-row-one .dropdown-filters .more-filters .dropdown-toggle .dropdown-header span{padding-right:5px}.rtl .grid-container .table tbody td.action a:first-child{margin-left:10px;margin-right:0}.rtl .table table{text-align:right}.rtl .table table .massaction-remove{margin-right:5px!important;margin-left:10px}.rtl .table table .btn.btn-primary{margin-right:10px!important}.rtl .dropdown-list.bottom-right{left:0;right:auto}.rtl .dropdown-list .dropdown-container{text-align:right}.rtl .accordian .accordian-header .icon{float:left}.rtl .tree-container .tree-item{padding-right:30px}.rtl .tree-container .tree-item .expand-icon,.rtl .tree-container .tree-item .folder-icon{margin-left:10px;margin-right:0}.rtl .tree-container>.tree-item{padding-right:0}.rtl .radio .radio-view{margin-left:5px}.rtl .image-wrapper .image-item{margin-right:0;margin-left:20px}.rtl .image-wrapper .image-item .remove-image{margin-right:0}.rtl .control-group label.required:before{content:"*";color:#fc6868;font-weight:700}.rtl .control-group label.required:after{content:none}.rtl .control-group label .locale{float:left}.rtl .control-group.date:after{margin-top:15px;position:absolute;margin-right:-35px}.rtl .pagination .page-item .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.accordian-header{background-color:#fbfbfb}.btn.btn-primary{background:41ff;color:41ff!important}.fixed-action{top:108px}.fixed-action,.fixed-action-slight{position:fixed;right:32px;z-index:20}.fixed-action-slight{top:94px}.pagination{margin-top:30px}.table{overflow-x:hidden!important}
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/_colors.scss b/packages/Webkul/Admin/src/Resources/assets/sass/_colors.scss
new file mode 100644
index 000000000..d6978561d
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/_colors.scss
@@ -0,0 +1,3 @@
+$black: #0000;
+$brand-color: #0041FF;
+$white: #ffffff;
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Admin/src/Resources/assets/sass/_variables.scss
index 194a93e56..aee609d5a 100755
--- a/packages/Webkul/Admin/src/Resources/assets/sass/_variables.scss
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/_variables.scss
@@ -1,9 +1,26 @@
-// Body
-$brand-color: #0041FF;
-$border-color: rgba(162, 162, 162, 0.2);
+$body-background: $white;
$background-color: #f8f9fa;
+$border-color: rgba(162, 162, 162, 0.2);
+$navbar-top-background: $white;
+
+// Accordion
+$accordian-header: #fbfbfb;
+
+// Buttons
+$btn-primary: $white;
+$btn-primary-bg: 0041FF;
+
+// Cards
+$card-title: #a2a2a2;
+$card-background: $white;
+
+// Dashboard
+$dashboard-stats-data: #0041ff;
// Typography
$font-family: 'Montserrat', sans-serif;
$font-size-base: 14px;
-$font-color: #3A3A3A;
\ No newline at end of file
+$font-color: #3A3A3A;
+
+$link-color: #a2a2a2;
+$link-active-color: #a2a2a2;
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/app.scss b/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
index 726d23090..b7c8b7a4c 100755
--- a/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
@@ -2,912 +2,15 @@
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500");
// Variables
+@import "colors";
@import "variables";
@import "mixins";
-body {
- margin: 0;
- color: $font-color;
- font-family: $font-family;
- font-size: $font-size-base;
- font-weight: 500;
- position: static;
- min-height: 100%;
- width: 100%;
-}
+@import "partials/default";
-::-webkit-scrollbar {
- width: 12px;
-}
+@import "partials/dashboard";
+@import "partials/configuration";
+@import "partials/sales";
+@import "partials/rtl";
-::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
- border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
- border-radius: 10px;
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-}
-
-.navbar-top {
- height: 60px;
- background: #ffffff;
- font-size: 0;
- @include box-shadow(0 3px 6px 0 rgba(0, 0, 0, 0.05));
- border-bottom: 1px solid $border-color;
- position: fixed;
- left: 0;
- right: 0;
- z-index: 5;
-
- .navbar-top-left {
- width: 50%;
- height: 60px;
- display: inline-block;
- vertical-align: middle;
-
- .brand-logo {
- padding: 10px;
- }
- }
-
- .navbar-top-right {
- width: 50%;
- height: 60px;
- text-align: right;
- display: inline-block;
- vertical-align: middle;
-
- .profile-info {
- display: inline-block;
- vertical-align: middle;
- text-align: left;
- min-width: 50px;
- position: relative;
- padding: 12px 0px;
- margin: 0px 25px 0px 30px;
- font-size: 15px;
- cursor: pointer;
- position: relative;
-
- .dropdown-list {
- top: 63px;
- }
-
- .name {
- color: #000311;
- display: block;
- text-align: left;
- }
- .role {
- font-size: 14px;
- color: #8e8e8e;
- display: block;
- text-align: left;
- }
-
- i.icon {
- margin-left: 10px;
- }
- }
- }
-}
-
-.navbar-left {
- position: fixed;
- left: 0;
- top: 60px;
- width: 90px;
- padding-top: 20px;
- border-right: 1px solid rgba(162, 162, 162, 0.2);
- height: auto;
- bottom: 0;
- z-index: 2;
-
- ul.menubar {
- // padding-bottom: 60px;
-
- li.menu-item {
- padding: 10px 5px;
- font-size: 11px;
- text-align: center;
- text-transform: uppercase;
-
- a {
- color: #a2a2a2;
- }
-
- &.active {
- a {
- color: #0041ff;
- }
- }
-
- span {
- display: block;
- margin: auto;
- }
- }
- }
-
- // .open-nav-aside {
- // position: fixed;
- // bottom: 0;
- // left: 0;
- // width: 90px;
- // padding: 18px;
- // text-align: center;
- // border: 1px solid $border-color;
-
- // .icon {
- // height: 24px;
- // width: 24px;
- // }
- // }
-}
-
-.content-container {
- padding-left: 90px;
- position: absolute;
- margin-top: 60px;
- top: 0px;
- right: 0;
- left: 0;
- bottom: 0px;
- height: calc(100% - 60px);
- width: 100%;
-
- .inner-section {
- height: 100%;
- }
-
- .aside-nav {
- width: 280px;
- position: fixed;
- top: 60px;
- bottom: 0;
- border-right: 1px solid $border-color;
- background: $background-color;
- padding-top: 10px;
- padding-bottom: 10px;
- z-index: 4;
-
- ul {
- overflow-y: auto;
- height: 90%;
- }
-
- a {
- padding: 15px;
- display: block;
- color: #000311;
- }
-
- .active {
- a {
- background: #ffffff;
- border-top: 1px solid $border-color;
- border-bottom: 1px solid $border-color;
- }
-
- i {
- float: right;
- }
- }
- }
-
- .content-wrapper {
- padding: 25px 25px 25px 25px;
- margin-left: 305px;
- }
-
- .content {
- margin-top: 25px;
-
- &.full-page {
- padding: 25px;
- }
-
- .page-header {
- display: inline-block;
- width: 100%;
- padding: 15px 0px 15px 0px;
- position: sticky;
- top: 60px;
- background-color: #ffffff;
- z-index: 3;
-
- .page-title {
- float: left;
-
- .back-link {
- float: left;
- margin-right: 10px;
- width: 24px;
- height: 24px;
- cursor: pointer;
- margin-top: 5px;
- }
-
- h1 {
- margin-bottom: 0;
- vertical-align: middle;
- display: inline-block;
- line-height: initial;
- }
- }
-
- .page-action {
- float: right;
-
- * {
- display: inline-block;
- }
-
- a {
- margin-left: 25px;
- }
- }
-
- .control-group {
- width: 180px;
- display: inline-block;
- margin-bottom: 0;
- margin-left: 20px;
- }
-
- .control {
- width: 100%;
- margin: 0;
- }
- }
-
- .page-content {
- width: 100%;
- display: inline-block;
- }
- }
-}
-
-.control-container {
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- width: 750px;
-
- .control {
- background: #fff;
- border: 2px solid #c7c7c7;
- @include border-radius(3px);
- width: 150px;
- height: 36px;
- display: inline-block;
- vertical-align: middle;
- transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- padding: 0px 10px;
- font-size: 15px;
-
- &:focus {
- border-color: #0041ff;
- }
- }
-
- .icon:hover {
- cursor: pointer;
- }
-
- .control-group::last-child {
- margin-right: 0px;
- }
-}
-
-.boolean-control-container {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- width: 750px;
-
- .control-group {
- width: 200px;
- }
-}
-
-.control-group {
- label {
- width: 70%;
-
- .locale {
- float: right;
- color: #8e8e8e;
- }
- }
-
- .mce-tinymce {
- margin-top: 10px;
- margin-bottom: 5px;
- }
-}
-
-// admin dashboard css
-.dashboard {
- .page-header {
- margin-bottom: 0 !important;
- padding-bottom: 15px;
- border-bottom: 1px solid $border-color;
- }
-
- .page-content {
- margin-top: 15px;
- }
-
- .card {
- height: 445px;
- background: #ffffff;
- border: 1px solid #e7e7e7;
- box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.08);
- border-radius: 2px;
- padding: 20px 0px 0px 20px;
- overflow: auto;
-
- .card-title {
- font-size: 14px;
- color: #a2a2a2;
- letter-spacing: -0.26px;
- text-transform: uppercase;
- }
-
- .card-info {
- width: 100%;
- display: inline-block;
-
- &.center {
- text-align: center;
- }
-
- ul {
- li {
- border-bottom: 1px solid $border-color;
- width: 100%;
- display: inline-block;
- padding: 10px 0;
- position: relative;
-
- .image {
- height: 60px;
- width: 60px;
- float: left;
- margin-right: 15px;
-
- &.product {
- background: #f2f2f2;
- }
-
- img {
- width: 100%;
- }
- }
-
- .description {
- margin-top: 10px;
-
- .name {
- color: #0041ff;
- }
-
- .info {
- color: #3a3a3a;
- margin-top: 5px;
- }
- }
-
- .icon.angle-right-icon {
- position: absolute;
- right: 30px;
- top: 50%;
- margin-top: -8px;
- }
-
- &:last-child {
- border-bottom: 0;
- }
- }
- }
-
- .no-result-found {
- margin-top: 146px;
-
- p {
- margin: 0;
- color: #a2a2a2;
- }
- }
- }
- }
-
- .dashboard-stats {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
- grid-auto-rows: auto;
- grid-column-gap: 30px;
- grid-row-gap: 15px;
-
- .dashboard-card {
- height: 100px;
- background: #ffffff;
- border: 1px solid #e7e7e7;
- box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.08);
- border-radius: 5px;
- position: relative;
- padding: 15px;
-
- .title {
- font-size: 14px;
- color: #a2a2a2;
- text-transform: uppercase;
- }
-
- .data {
- padding-top: 13px;
- font-size: 32px;
- color: #0041ff;
-
- .progress {
- font-size: 14px;
- color: #8e8e8e;
- float: right;
- margin-top: -2px;
-
- .icon {
- vertical-align: middle;
- }
- }
- }
- }
- }
-
- .graph-stats {
- margin-top: 30px;
- width: 100%;
- display: inline-block;
-
- .left-card-container {
- float: left;
- width: 75%;
- padding-right: 9px;
- }
-
- .right-card-container {
- float: left;
- width: 25%;
- padding-left: 21px;
- }
- }
-
- .sale-stock {
- width: 100%;
- display: inline-block;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(435px, 1fr));
- grid-auto-rows: auto;
- grid-column-gap: 30px;
- grid-row-gap: 15px;
- margin-top: 30px;
- }
-}
-// admin dashboard css ends here
-
-// customer oder css for admin start here
-.sale-container {
- .sale-section {
- font-size: 16px;
-
- .secton-title {
- font-size: 18px;
- color: #8e8e8e;
- padding: 15px 0;
- border-bottom: 1px solid $border-color;
- }
-
- .section-content {
- display: block;
- padding: 20px 0;
-
- .row {
- display: block;
- padding: 7px 0;
-
- .title {
- width: 200px;
- color: $font-color;
- letter-spacing: -0.26px;
- display: inline-block;
- }
-
- .value {
- color: $font-color;
- letter-spacing: -0.26px;
- display: inline-block;
- }
- }
- }
- }
-
- .table {
- .qty-row {
- display: block;
- margin-bottom: 5px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- .radio {
- margin: 0;
- }
- }
-
- .sale-summary {
- margin-top: 2%;
- height: 130px;
- float: right;
-
- tr {
- td {
- padding: 5px 8px;
- vertical-align: text-bottom;
- }
-
- &.bold {
- font-weight: 600;
- font-size: 15px;
- }
-
- &.border {
- td {
- border-bottom: 1px solid $border-color;
- }
- }
- }
- }
-}
-
-.stars {
- margin-top: 5px;
-
- .icon {
- width: 16px;
- height: 16px;
- }
-}
-
-.export-import {
- cursor: pointer;
-
- .export-icon,
- .import-icon {
- position: relative;
- top: 10px;
- }
-
- span {
- margin-left: 2px;
- }
-}
-// customer oder css for admin end here
-
-//configuration css
-.configuration-image {
- position: relative;
- height: 33px;
- width: 33px;
- top: 15px;
- border-radius: 3px;
- margin-right: 5px;
-}
-
-.download {
- position: relative;
- height: 24px !important;
- width: 24px !important;
- top: 12px;
- margin-right: 10px;
-}
-
-.aside-nav-toggle {
- height: 48px;
- width: 100%;
- padding-top: 15px;
- border-top: 1px solid rgba(162, 162, 162, 0.2);
-
- .close-icon,
- .open-icon {
- position: absolute;
- cursor: pointer;
- left: 45%;
- }
-}
-
-.aside-nav-toggle.open {
- display: none;
-}
-
-.linked-product-search-result {
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 0 9px 0 rgba(0, 0, 0, 0.16);
- z-index: 10;
- text-align: left;
- border-radius: 3px;
- background-color: #ffffff;
- width: 70%;
- max-height: 200px;
- overflow-y: auto;
-
- li {
- padding: 10px;
- border-bottom: 1px solid #e8e8e8;
- cursor: pointer;
- }
-}
-
-// css for rtl start here
-.rtl {
- direction: rtl;
-
- .navbar-top {
- .navbar-top-right {
- text-align: left;
-
- .profile-info {
- margin: 0 30px 0 25px;
-
- i.icon {
- margin-left: 0px;
- margin-right: 10px;
- }
- }
- }
- }
-
- .navbar-left {
- border-left: 1px solid rgba(162, 162, 162, 0.2);
- border-right: none;
- left: calc(100% - 90px);
- }
-
- .content-container {
- padding-right: 90px;
- padding-left: 0px;
-
- .content .page-header {
- .page-title {
- float: right;
- }
-
- .page-action {
- float: left;
-
- a {
- margin-left: 0px;
- }
- }
-
- .control-group {
- margin-right: 20px;
- margin-left: 0px;
- }
-
- .control-group.date {
- &::after {
- margin-top: 6px;
- position: absolute;
- margin-right: -35px;
- }
-
- &:last-child {
- margin-left: 0px;
- }
- }
- }
-
- .content-wrapper {
- padding: 25px 305px 25px 25px;
- margin-left: 0px;
- }
-
- .aside-nav .active i {
- float: left;
- transform: rotate(180deg);
- }
- }
-
- .dashboard {
- .dashboard-stats .dashboard-card .data span {
- float: left;
- }
-
- .card {
- padding: 20px 20px 0px 0px;
-
- .card-info ul li {
- .image {
- float: right;
- margin-right: 0px;
- margin-left: 15px;
- }
-
- .icon.angle-right-icon {
- left: 30px;
- right: auto;
- transform: rotate(180deg);
- }
- }
- }
-
- .graph-stats {
- .left-card-container {
- float: right;
- padding-right: 0px;
- }
-
- .right-card-container {
- float: right;
- padding-left: 0px;
- padding-right: 30px;
- }
- }
- }
-
- .sale-container .sale-summary {
- float: left;
- }
-
- // ui
- .grid-container {
- .filter-row-one .search-filter {
- border: 2px solid #c7c7c7;
- border-radius: 2px;
-
- .control {
- border: none;
- padding-right: 10px;
- }
-
- .icon-wrapper {
- border: none;
- padding-top: 2px;
- padding-right: 5px;
- border-right: 2px solid #c7c7c7;
- border-radius: 0px;
- }
- }
-
- .filter-row-two .filter-tag {
- .wrapper,
- .icon.cross-icon {
- margin-right: 10px;
- margin-left: 0px;
- }
- }
-
- .filter-row-one .dropdown-filters {
- right: unset;
- left: 25px;
- }
- }
-
- .grid-container
- .filter-wrapper
- .filter-row-one
- .dropdown-filters
- .more-filters
- .dropdown-toggle
- .dropdown-header
- span {
- padding-right: 5px;
- }
-
- .grid-container .table tbody td.action a:first-child {
- margin-left: 10px;
- margin-right: 0px;
- }
-
- .table table {
- text-align: right;
-
- .massaction-remove {
- margin-right: 5px !important;
- margin-left: 10px;
- }
-
- .btn.btn-primary {
- margin-right: 10px !important;
- }
- }
-
- .dropdown-list.bottom-right {
- left: 0px;
- right: auto;
- }
-
- .dropdown-list .dropdown-container {
- text-align: right;
- }
-
- .accordian .accordian-header .icon {
- float: left;
- }
-
- .tree-container .tree-item {
- padding-right: 30px;
-
- .expand-icon,
- .folder-icon {
- margin-left: 10px;
- margin-right: 0px;
- }
- }
-
- .tree-container > .tree-item {
- padding-right: 0px;
- }
-
- .radio .radio-view {
- margin-left: 5px;
- }
-
- .image-wrapper .image-item {
- margin-right: 0px;
- margin-left: 20px;
-
- .remove-image {
- margin-right: 0px;
- }
- }
-
- .control-group label.required::before {
- content: "*";
- color: #fc6868;
- font-weight: 700;
- }
-
- .control-group label.required::after {
- content: none;
- }
-
- .control-group label .locale {
- float: left;
- }
-
- .control-group.date {
- &::after {
- margin-top: 15px;
- position: absolute;
- margin-right: -35px;
- }
- }
-
- .pagination .page-item .icon {
- transform: rotate(180deg);
- }
-}
-// css for rtl end here
-
-// For fixed and and save button
-.fixed-action {
- position: fixed;
- top: 108px;
- right: 32px;
- z-index: 20;
-}
-
-.fixed-action-slight {
- position: fixed;
- top: 94px;
- right: 32px;
- z-index: 20;
-}
-
-.pagination {
- margin-top: 30px;
-}
+@import "partials/ui/components";
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/partials/_configuration.scss b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_configuration.scss
new file mode 100644
index 000000000..2e2b3258d
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_configuration.scss
@@ -0,0 +1,51 @@
+.configuration-image {
+ position: relative;
+ height: 33px;
+ width: 33px;
+ top: 15px;
+ border-radius: 3px;
+ margin-right: 5px;
+}
+
+.download {
+ position: relative;
+ height: 24px !important;
+ width: 24px !important;
+ top: 12px;
+ margin-right: 10px;
+}
+
+.aside-nav-toggle {
+ height: 48px;
+ width: 100%;
+ padding-top: 15px;
+ border-top: 1px solid rgba(162, 162, 162, 0.2);
+
+ .close-icon,
+ .open-icon {
+ position: absolute;
+ cursor: pointer;
+ left: 45%;
+ }
+}
+
+.aside-nav-toggle.open {
+ display: none;
+}
+
+.linked-product-search-result {
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 0 9px 0 rgba(0, 0, 0, 0.16);
+ z-index: 10;
+ text-align: left;
+ border-radius: 3px;
+ background-color: $white;
+ width: 70%;
+ max-height: 200px;
+ overflow-y: auto;
+
+ li {
+ padding: 10px;
+ border-bottom: 1px solid #e8e8e8;
+ cursor: pointer;
+ }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/partials/_dashboard.scss b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_dashboard.scss
new file mode 100644
index 000000000..43f14d343
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_dashboard.scss
@@ -0,0 +1,165 @@
+.dashboard {
+ .page-header {
+ margin-bottom: 0 !important;
+ padding-bottom: 15px;
+ border-bottom: 1px solid $border-color;
+ }
+
+ .page-content {
+ margin-top: 15px;
+ }
+
+ .card {
+ height: 445px;
+ background-color: $card-background;
+ border: 1px solid $border-color;
+ box-shadow: 0 5px 10px 2px $border-color;
+ border-radius: 0.25rem;
+ padding: 20px 0px 0px 20px;
+ overflow: auto;
+
+ .card-title {
+ font-size: 14px;
+ color: $card-title;
+ letter-spacing: -0.26px;
+ text-transform: uppercase;
+ }
+
+ .card-info {
+ width: 100%;
+ display: inline-block;
+
+ &.center {
+ text-align: center;
+ }
+
+ ul {
+ li {
+ border-bottom: 1px solid $border-color;
+ width: 100%;
+ display: inline-block;
+ padding: 10px 0;
+ position: relative;
+
+ .image {
+ height: 60px;
+ width: 60px;
+ float: left;
+ margin-right: 15px;
+
+ &.product {
+ background: #f2f2f2;
+ }
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .description {
+ margin-top: 10px;
+
+ .name {
+ color: #0041ff;
+ }
+
+ .info {
+ color: #3a3a3a;
+ margin-top: 5px;
+ }
+ }
+
+ .icon.angle-right-icon {
+ position: absolute;
+ right: 30px;
+ top: 50%;
+ margin-top: -8px;
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+ }
+
+ .no-result-found {
+ margin-top: 146px;
+
+ p {
+ margin: 0;
+ color: #a2a2a2;
+ }
+ }
+ }
+ }
+
+ .dashboard-stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ grid-auto-rows: auto;
+ grid-column-gap: 30px;
+ grid-row-gap: 15px;
+
+ .dashboard-card {
+ height: 100px;
+ background: $card-background;
+ border: 1px solid $border-color;
+ box-shadow: 0 5px 10px 2px $border-color;
+ border-radius: 5px;
+ position: relative;
+ padding: 15px;
+
+ .title {
+ font-size: 14px;
+ color: $card-title;
+ text-transform: uppercase;
+ }
+
+ .data {
+ padding-top: 13px;
+ font-size: 32px;
+ color: $dashboard-stats-data;
+
+ .progress {
+ font-size: 14px;
+ color: #8e8e8e;
+ float: right;
+ margin-top: -2px;
+
+ .icon {
+ vertical-align: middle;
+ }
+ }
+ }
+ }
+ }
+
+ .graph-stats {
+ margin-top: 30px;
+ width: 100%;
+ display: inline-block;
+
+ .left-card-container {
+ float: left;
+ width: 75%;
+ padding-right: 9px;
+ }
+
+ .right-card-container {
+ float: left;
+ width: 25%;
+ padding-left: 21px;
+ }
+ }
+
+ .sale-stock {
+ width: 100%;
+ display: inline-block;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(435px, 1fr));
+ grid-auto-rows: auto;
+ grid-column-gap: 30px;
+ grid-row-gap: 15px;
+ margin-top: 30px;
+ }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/partials/_default.scss b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_default.scss
new file mode 100644
index 000000000..ff8c76d06
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_default.scss
@@ -0,0 +1,312 @@
+body {
+ margin: 0;
+ color: $font-color;
+ font-family: $font-family;
+ font-size: $font-size-base;
+ font-weight: 500;
+ position: static;
+ height: 100%;
+ width: 100%;
+ background-color: $body-background;
+}
+
+::-webkit-scrollbar {
+ width: 12px;
+}
+
+::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
+ border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+.navbar-top {
+ height: 60px;
+ background-color: $navbar-top-background;
+ font-size: 0;
+ @include box-shadow(0 3px 6px 0 rgba(0, 0, 0, 0.05));
+ border-bottom: 1px solid $border-color;
+ position: fixed;
+ left: 0;
+ right: 0;
+ z-index: 5;
+
+ .navbar-top-left {
+ width: 50%;
+ height: 60px;
+ display: inline-block;
+ vertical-align: middle;
+ background-color: $white;
+
+ .brand-logo {
+ padding: 10px;
+ }
+ }
+
+ .navbar-top-right {
+ width: 50%;
+ height: 60px;
+ text-align: right;
+ display: inline-block;
+ vertical-align: middle;
+
+ .profile-info {
+ display: inline-block;
+ vertical-align: middle;
+ text-align: left;
+ min-width: 50px;
+ position: relative;
+ padding: 12px 0px;
+ margin: 0px 25px 0px 30px;
+ font-size: 15px;
+ cursor: pointer;
+ position: relative;
+
+ .dropdown-list {
+ top: 63px;
+ }
+
+ .name {
+ color: #000311;
+ display: block;
+ text-align: left;
+ }
+ .role {
+ font-size: 14px;
+ color: #8e8e8e;
+ display: block;
+ text-align: left;
+ }
+
+ i.icon {
+ margin-left: 10px;
+ }
+ }
+ }
+}
+
+.navbar-left {
+ position: fixed;
+ left: 0;
+ top: 60px;
+ width: 90px;
+ padding-top: 20px;
+ border-right: 1px solid rgba(162, 162, 162, 0.2);
+ height: auto;
+ bottom: 0;
+ z-index: 2;
+ background-color: $white;
+
+ ul.menubar {
+ // padding-bottom: 60px;
+ li.menu-item {
+ padding: 10px 5px;
+ font-size: 11px;
+ text-align: center;
+ text-transform: uppercase;
+
+ a {
+ color: $link-color;
+ }
+
+ &.active {
+ a {
+ color: #0041ff;
+ }
+ }
+
+ span {
+ display: block;
+ margin: auto;
+ }
+ }
+ }
+}
+
+.content-container {
+ padding-left: 90px;
+ position: absolute;
+ margin-top: 60px;
+ top: 0px;
+ right: 0;
+ left: 0;
+ bottom: 0px;
+ height: calc(100% - 60px);
+ width: 100%;
+
+ .inner-section {
+ height: 100%;
+ }
+
+ .aside-nav {
+ width: 280px;
+ position: fixed;
+ top: 60px;
+ bottom: 0;
+ border-right: 1px solid $border-color;
+ background-color: $background-color;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ z-index: 4;
+
+ ul {
+ overflow-y: auto;
+ height: 90%;
+ }
+
+ a {
+ padding: 15px;
+ display: block;
+ color: #000311;
+ }
+
+ .active {
+ a {
+ background: $white;
+ border-top: 1px solid $border-color;
+ border-bottom: 1px solid $border-color;
+ }
+
+ i {
+ float: right;
+ }
+ }
+ }
+
+ .content-wrapper {
+ padding: 25px 25px 25px 15px;
+ margin-left: 280px;
+ margin-top:1px;
+ background-color: $white;
+ }
+
+ .content {
+ margin-top: 25px;
+
+ &.full-page {
+ padding: 25px;
+ }
+
+ .page-header {
+ display: inline-block;
+ width: 100%;
+ padding: 15px 10px 15px 0px;
+ position: sticky;
+ top: 50px;
+ z-index: 3;
+ background-color: $white;
+
+ .page-title {
+ float: left;
+
+ .back-link {
+ float: left;
+ margin-right: 10px;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ margin-top: 5px;
+ }
+
+ h1 {
+ margin-bottom: 0;
+ vertical-align: middle;
+ display: inline-block;
+ line-height: initial;
+ }
+ }
+
+ .page-action {
+ float: right;
+
+ * {
+ display: inline-block;
+ }
+
+ a {
+ margin-left: 25px;
+ }
+ }
+
+ .control-group {
+ width: 180px;
+ display: inline-block;
+ margin-bottom: 0;
+ margin-left: 20px;
+ }
+
+ .control {
+ width: 100%;
+ margin: 0;
+ }
+ }
+
+ .page-content {
+ width: 100%;
+ display: inline-block;
+ }
+ }
+}
+
+.control-container {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ width: 750px;
+
+ .control {
+ background: $white;
+ border: 2px solid #c7c7c7;
+ @include border-radius(3px);
+ width: 150px;
+ height: 36px;
+ display: inline-block;
+ vertical-align: middle;
+ transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ padding: 0px 10px;
+ font-size: 15px;
+
+ &:focus {
+ border-color: #0041ff;
+ }
+ }
+
+ .icon:hover {
+ cursor: pointer;
+ }
+
+ .control-group::last-child {
+ margin-right: 0px;
+ }
+}
+
+.boolean-control-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ width: 750px;
+
+ .control-group {
+ width: 200px;
+ }
+}
+
+.control-group {
+ label {
+ width: 70%;
+
+ .locale {
+ float: right;
+ color: #8e8e8e;
+ }
+ }
+
+ .mce-tinymce {
+ margin-top: 10px;
+ margin-bottom: 5px;
+ }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/partials/_rtl.scss b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_rtl.scss
new file mode 100644
index 000000000..91d0b562c
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_rtl.scss
@@ -0,0 +1,241 @@
+.rtl {
+ direction: rtl;
+
+ .navbar-top {
+ .navbar-top-right {
+ text-align: left;
+
+ .profile-info {
+ margin: 0 30px 0 25px;
+
+ i.icon {
+ margin-left: 0px;
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+
+ .navbar-left {
+ border-left: 1px solid rgba(162, 162, 162, 0.2);
+ border-right: none;
+ left: calc(100% - 90px);
+ background-color: $white;
+ }
+
+ .content-container {
+ padding-right: 90px;
+ padding-left: 0px;
+
+ .content .page-header {
+ .page-title {
+ float: right;
+ }
+
+ .page-action {
+ float: left;
+
+ a {
+ margin-left: 0px;
+ }
+ }
+
+ .control-group {
+ margin-right: 20px;
+ margin-left: 0px;
+ }
+
+ .control-group.date {
+ &::after {
+ margin-top: 6px;
+ position: absolute;
+ margin-right: -35px;
+ }
+
+ &:last-child {
+ margin-left: 0px;
+ }
+ }
+ }
+
+ .content-wrapper {
+ padding: 25px 305px 25px 25px;
+ margin-left: 0px;
+ }
+
+ .aside-nav .active i {
+ float: left;
+ transform: rotate(180deg);
+ }
+ }
+
+ .dashboard {
+ .dashboard-stats .dashboard-card .data span {
+ float: left;
+ }
+
+ .card {
+ padding: 20px 20px 0px 0px;
+
+ .card-info ul li {
+ .image {
+ float: right;
+ margin-right: 0px;
+ margin-left: 15px;
+ }
+
+ .icon.angle-right-icon {
+ left: 30px;
+ right: auto;
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .graph-stats {
+ .left-card-container {
+ float: right;
+ padding-right: 0px;
+ }
+
+ .right-card-container {
+ float: right;
+ padding-left: 0px;
+ padding-right: 30px;
+ }
+ }
+ }
+
+ .sale-container .sale-summary {
+ float: left;
+ }
+
+ // ui
+ .grid-container {
+ .filter-row-one .search-filter {
+ border: 2px solid #c7c7c7;
+ border-radius: 2px;
+
+ .control {
+ border: none;
+ padding-right: 10px;
+ }
+
+ .icon-wrapper {
+ border: none;
+ padding-top: 2px;
+ padding-right: 5px;
+ border-right: 2px solid #c7c7c7;
+ border-radius: 0px;
+ }
+ }
+
+ .filter-row-two .filter-tag {
+ .wrapper,
+ .icon.cross-icon {
+ margin-right: 10px;
+ margin-left: 0px;
+ }
+ }
+
+ .filter-row-one .dropdown-filters {
+ right: unset;
+ left: 25px;
+ }
+ }
+
+ .grid-container
+ .filter-wrapper
+ .filter-row-one
+ .dropdown-filters
+ .more-filters
+ .dropdown-toggle
+ .dropdown-header
+ span {
+ padding-right: 5px;
+ }
+
+ .grid-container .table tbody td.action a:first-child {
+ margin-left: 10px;
+ margin-right: 0px;
+ }
+
+ .table table {
+ text-align: right;
+
+ .massaction-remove {
+ margin-right: 5px !important;
+ margin-left: 10px;
+ }
+
+ .btn.btn-primary {
+ margin-right: 10px !important;
+ }
+ }
+
+ .dropdown-list.bottom-right {
+ left: 0px;
+ right: auto;
+ }
+
+ .dropdown-list .dropdown-container {
+ text-align: right;
+ }
+
+ .accordian .accordian-header .icon {
+ float: left;
+ }
+
+ .tree-container .tree-item {
+ padding-right: 30px;
+
+ .expand-icon,
+ .folder-icon {
+ margin-left: 10px;
+ margin-right: 0px;
+ }
+ }
+
+ .tree-container > .tree-item {
+ padding-right: 0px;
+ }
+
+ .radio .radio-view {
+ margin-left: 5px;
+ }
+
+ .image-wrapper .image-item {
+ margin-right: 0px;
+ margin-left: 20px;
+
+ .remove-image {
+ margin-right: 0px;
+ }
+ }
+
+ .control-group label.required::before {
+ content: "*";
+ color: #fc6868;
+ font-weight: 700;
+ }
+
+ .control-group label.required::after {
+ content: none;
+ }
+
+ .control-group label .locale {
+ float: left;
+ }
+
+ .control-group.date {
+ &::after {
+ margin-top: 15px;
+ position: absolute;
+ margin-right: -35px;
+ }
+ }
+
+ .pagination .page-item .icon {
+ transform: rotate(180deg);
+ }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/partials/_sales.scss b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_sales.scss
new file mode 100644
index 000000000..8fff0b4db
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/partials/_sales.scss
@@ -0,0 +1,97 @@
+.sale-container {
+ .sale-section {
+ font-size: 16px;
+
+ .secton-title {
+ font-size: 18px;
+ color: #8e8e8e;
+ padding: 15px 0;
+ border-bottom: 1px solid $border-color;
+ }
+
+ .section-content {
+ display: block;
+ padding: 20px 0;
+
+ .row {
+ display: block;
+ padding: 7px 0;
+
+ .title {
+ width: 200px;
+ color: $font-color;
+ letter-spacing: -0.26px;
+ display: inline-block;
+ }
+
+ .value {
+ color: $font-color;
+ letter-spacing: -0.26px;
+ display: inline-block;
+ }
+ }
+ }
+ }
+
+ .table {
+ .qty-row {
+ display: block;
+ margin-bottom: 5px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .radio {
+ margin: 0;
+ }
+ }
+
+ .sale-summary {
+ margin-top: 2%;
+ height: 130px;
+ float: right;
+
+ tr {
+ td {
+ padding: 5px 8px;
+ vertical-align: text-bottom;
+ }
+
+ &.bold {
+ font-weight: 600;
+ font-size: 15px;
+ }
+
+ &.border {
+ td {
+ border-bottom: 1px solid $border-color;
+ }
+ }
+ }
+ }
+}
+
+.stars {
+ margin-top: 5px;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.export-import {
+ cursor: pointer;
+
+ .export-icon,
+ .import-icon {
+ position: relative;
+ top: 10px;
+ }
+
+ span {
+ margin-left: 2px;
+ }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/partials/ui/_components.scss b/packages/Webkul/Admin/src/Resources/assets/sass/partials/ui/_components.scss
new file mode 100644
index 000000000..3e7a22be5
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/partials/ui/_components.scss
@@ -0,0 +1,34 @@
+// Accordion
+.accordian-header {
+ background-color: $accordian-header;
+}
+
+// buttons
+.btn.btn-primary{
+ background: $btn-primary-bg;
+ color: $btn-primary-bg !important;
+}
+
+.fixed-action {
+ position: fixed;
+ top: 108px;
+ right: 32px;
+ z-index: 20;
+}
+
+.fixed-action-slight {
+ position: fixed;
+ top: 94px;
+ right: 32px;
+ z-index: 20;
+}
+
+.pagination {
+ margin-top: 30px;
+}
+
+// temporary fix untill the cause of the scrolling has been resolved.
+.table {
+ overflow-x: hidden !important;
+}
+
diff --git a/packages/Webkul/Admin/src/Resources/views/layouts/master.blade.php b/packages/Webkul/Admin/src/Resources/views/layouts/master.blade.php
index d61ba724f..436b6855a 100755
--- a/packages/Webkul/Admin/src/Resources/views/layouts/master.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/layouts/master.blade.php
@@ -8,8 +8,8 @@
-
+
@yield('head')