Started to add in Less CSS support

gulpfile.js

@@ -1,12 +1,21 @@
 const { src, dest, series } = require('gulp');
 const gulp = require('gulp');
+const less = require('gulp-less');
 const cleanCSS = require('gulp-clean-css');
 const minify = require('gulp-minify');
 const rename = require('gulp-rename');
 
-function less(){
+function lessCss(){
     return gulp.src('public/stylesheets/less/**/*.less')
-      .pipe(less())
+        .pipe(less({
+            paths: [
+                'public/stylesheets/less'
+            ]
+        }))
+        .pipe(rename({
+            dirname: 'public/stylesheets',
+            extname: '.css'
+        }))
         .pipe(gulp.dest('./'));
 };
 
@@ -64,4 +73,4 @@ function compressThemeJS(){
 };
 
 // run the tasks
-gulp.task('default', series(less, compressJS, compressCss, compressThemeCss, compressThemeJS));
+gulp.task('default', series(lessCss, compressJS, compressCss, compressThemeCss, compressThemeJS));

public/stylesheets/admin.css

@@ -1,69 +1,73 @@
-.btn-outline-danger, .btn-warning, .btn-outline-primary {
+.btn-warning,
+.btn-outline-primary {
   color: #ffffff !important;
   background-color: #000000;
   border-color: #000000;
 }
-
+.btn-outline-danger {
-.search-bar-input, #frm_search, .search-bar-input .btn{
+  color: #ffffff !important;
+  background-color: #cc4135;
+  border-color: #cc4135;
+}
+.has-error input,
+.has-error textarea,
+.has-error div {
+  border-color: #cc4135;
+}
+.search-bar-input,
+#frm_search,
+.search-bar-input .btn {
   padding-top: 10px;
   height: 45px;
 }
-
 .searchMenuLocation-side {
   padding-right: 0;
 }
-
 .productsWrapper {
   padding-right: 10px;
   padding-left: 10px;
 }
-
 .searchBarWrapper {
   padding-right: 0;
   padding-left: 0;
 }
-
 .footer {
   padding-top: 20px;
 }
-
 .product-price {
   padding-bottom: 0;
 }
-
 .navbarMenuWrapper {
   background-color: #f5f5f5;
 }
-
 .navbarMenu > ul > li > a:hover {
   color: #cc4135 !important;
 }
-
 .navbarMenu {
   padding-right: 0;
   padding-left: 0;
 }
-
 .product-wrapper > a:hover {
   color: #cc4135 !important;
 }
-
+.navbar-static-top,
-.navbar-static-top, #navbar, .navbar-header, #navbar>.navbar-nav, #navbar>.navbar-nav>li>a{
+#navbar,
+.navbar-header,
+#navbar > .navbar-nav,
+#navbar > .navbar-nav > li > a {
   margin-bottom: 0;
   height: 100px !important;
 }
-
 #navbar > .navbar-nav > li > a {
   padding-top: 35px;
 }
-
 .pagination > li > a {
   background-color: #cc4135 !important;
 }
-
 /* Fixes summernote editor issue: https://github.com/summernote/summernote/issues/2516 */
-body .popover{display:none !important; }
+body .popover {
-
+  display: none !important;
+}
 .navbar-brand {
   color: #cc4135 !important;
   letter-spacing: 4px;
@@ -72,81 +76,72 @@ body .popover{display:none !important; }
   height: 80px !important;
   font-size: 55px !important;
 }
-
+.navbar-brand-image,
-.navbar-brand-image, .navbar-brand{
+.navbar-brand {
   height: 80px;
   padding-left: 10px;
   padding-top: 10px;
 }
-
 .navbar-default .badge {
   background-color: #cc4135;
 }
-
+.pushy-link:hover,
-.pushy-link, #empty-cart{
+.pushy-link:focus,
-    border-color: #E74C3C;
+.pushy-link:active,
-    background-color: #E74C3C;
+.pushy-link:active:hover,
-}
+#empty-cart:hover,
-
+#empty-cart:focus,
-.pushy-link:hover, .pushy-link:focus, .pushy-link:active, .pushy-link:active:hover,
+#empty-cart:active,
-#empty-cart:hover, #empty-cart:focus, #empty-cart:active, #empty-cart:active:hover{
+#empty-cart:active:hover {
   border-color: #cc4135;
   background-color: #cc4135;
 }
-
 .navActive > a {
   margin-bottom: 0px;
   padding-top: 15px;
-    border-bottom: 5px solid #E74C3C;
+  border-bottom: 5px solid #cc4135;
 }
-
+.navbar-static-top,
-.navbar-static-top, #navbar, .navbar-header, #navbar>.navbar-nav, #navbar>.navbar-nav>li>a {
+#navbar,
+.navbar-header,
+#navbar > .navbar-nav,
+#navbar > .navbar-nav > li > a {
   background-color: #fff;
 }
-
 .navbar-default .navbar-nav > li > a {
   color: #838b8f;
   font-size: 20px;
 }
-
 @media only screen and (max-width: 768px) {
   .navbar-default .navbar-brand {
     padding-top: 10px;
   }
-
   .navbar-default .navbar-nav > li > a {
     font-size: 16px;
   }
-
   .searchBarWrapper {
     padding-top: 10px;
   }
-
   .navbarMenuWrapper {
     padding-left: 0px;
     padding-right: 0px;
   }
-
   .navbarMenuOuter {
     padding-left: 0;
     padding-right: 0;
   }
-
   .navActive > a {
     color: #fff !important;
   }
-
   .navbarMenu {
     padding-right: 7.5px;
     padding-left: 7.5px;
   }
-
   .navActive > a {
     color: white !important;
-        background-color: #E74C3C;
+    background-color: #cc4135;
     border-bottom: none;
   }
-
   .footer {
     padding-top: 10px;
   }

public/stylesheets/admin.min.css

@@ -1 +1 @@
-#frm_search,.search-bar-input,.search-bar-input .btn{padding-top:10px;height:45px}.searchMenuLocation-side{padding-right:0}.productsWrapper{padding-right:10px;padding-left:10px}.searchBarWrapper{padding-right:0;padding-left:0}.footer{padding-top:20px}.product-price{padding-bottom:0}.navbarMenuWrapper{background-color:#f5f5f5}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product_wrapper>a:hover{color:#cc4135!important}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.pagination>li>a{background-color:#cc4135!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:20px!important;height:100px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart,.pushy-link{border-color:#e74c3c;background-color:#e74c3c}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #e74c3c}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#e74c3c;border-bottom:none}.footer{padding-top:10px}}
+.btn-outline-primary,.btn-warning{color:#fff!important;background-color:#000;border-color:#000}.btn-outline-danger{color:#fff!important;background-color:#cc4135;border-color:#cc4135}.has-error div,.has-error input,.has-error textarea{border-color:#cc4135}#frm_search,.search-bar-input,.search-bar-input .btn{padding-top:10px;height:45px}.searchMenuLocation-side{padding-right:0}.productsWrapper{padding-right:10px;padding-left:10px}.searchBarWrapper{padding-right:0;padding-left:0}.footer{padding-top:20px}.product-price{padding-bottom:0}.navbarMenuWrapper{background-color:#f5f5f5}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product-wrapper>a:hover{color:#cc4135!important}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.pagination>li>a{background-color:#cc4135!important}body .popover{display:none!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:0!important;height:80px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #cc4135}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#cc4135;border-bottom:none}.footer{padding-top:10px}}

public/stylesheets/less/admin.less

@@ -0,0 +1,164 @@
+@accent-color: #cc4135;
+@nav-menu-bg: #f5f5f5;
+@btn-danger-color-txt: #ffffff;
+@btn-danger-color-bg: #000000;
+@btn-danger-color-border: #000000;
+
+.btn-warning, .btn-outline-primary {
+    color: @btn-danger-color-txt !important;
+    background-color:@btn-danger-color-bg;
+    border-color: @btn-danger-color-border;
+}
+
+.btn-outline-danger {
+    color: @btn-danger-color-txt !important;
+    background-color: @accent-color;
+    border-color: @accent-color;
+}
+
+.has-error input, .has-error textarea, .has-error div {
+    border-color: @accent-color;
+}
+
+.search-bar-input, #frm_search, .search-bar-input .btn {
+    padding-top: 10px;
+    height: 45px;
+}
+
+.searchMenuLocation-side {
+    padding-right: 0;
+}
+
+.productsWrapper{
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.searchBarWrapper{
+    padding-right: 0;
+    padding-left: 0;
+}
+
+.footer{
+    padding-top: 20px;
+}
+
+.product-price {
+    padding-bottom: 0;
+}
+
+.navbarMenuWrapper{
+    background-color: @nav-menu-bg;
+}
+
+.navbarMenu>ul>li>a:hover{
+    color: @accent-color !important;
+}
+
+.navbarMenu{
+    padding-right: 0;
+    padding-left: 0;
+}
+
+.product-wrapper>a:hover{
+    color: @accent-color !important;
+}
+
+.navbar-static-top, #navbar, .navbar-header, #navbar>.navbar-nav, #navbar>.navbar-nav>li>a{
+    margin-bottom: 0;
+    height: 100px !important;
+}
+
+#navbar>.navbar-nav>li>a{
+    padding-top: 35px;
+}
+
+.pagination>li>a{
+    background-color: @accent-color !important;
+}
+
+/* Fixes summernote editor issue: https://github.com/summernote/summernote/issues/2516 */
+body .popover{display:none !important; }
+
+.navbar-brand{
+    color: @accent-color !important;
+    letter-spacing: 4px;
+    padding-left: 20px !important;
+    padding-top: 0 !important;
+    height: 80px !important;
+    font-size: 55px !important;
+}
+
+.navbar-brand-image, .navbar-brand{
+    height: 80px;
+    padding-left: 10px;
+    padding-top: 10px;
+}
+
+.navbar-default .badge {
+    background-color: @accent-color;
+}
+
+.pushy-link:hover, .pushy-link:focus, .pushy-link:active, .pushy-link:active:hover,
+#empty-cart:hover, #empty-cart:focus, #empty-cart:active, #empty-cart:active:hover{
+    border-color: @accent-color;
+    background-color: @accent-color;
+}
+
+.navActive>a{
+    margin-bottom: 0px;
+    padding-top: 15px;
+    border-bottom: 5px solid @accent-color;
+}
+
+.navbar-static-top, #navbar, .navbar-header, #navbar>.navbar-nav, #navbar>.navbar-nav>li>a {
+    background-color: #fff;
+}
+
+.navbar-default .navbar-nav>li>a {
+    color: #838b8f;
+    font-size: 20px;
+}
+
+@media only screen and (max-width: 768px){
+    .navbar-default .navbar-brand {
+        padding-top: 10px;
+    }
+
+    .navbar-default .navbar-nav>li>a{
+        font-size: 16px;
+    }
+
+    .searchBarWrapper{
+        padding-top: 10px;
+    }
+
+    .navbarMenuWrapper{
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    .navbarMenuOuter{
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .navActive>a {
+        color: #fff !important;
+    }
+
+    .navbarMenu {
+        padding-right: 7.5px;
+        padding-left: 7.5px;
+    }
+
+    .navActive>a{
+        color: white !important;
+        background-color: @accent-color;
+        border-bottom: none;
+    }
+
+    .footer {
+        padding-top: 10px;
+    }
+}

public/stylesheets/less/style.less

@@ -0,0 +1,642 @@
+@footer-height: 100px;
+@primary-btn-color: #000000;
+@secondary-btn-color: #cc3a2c;
+@link-color: #000000;
+@text-danger-color: #cc3a2c;
+@text-gray-color: #aaaaaa;
+@separator-color: #eeeeee;
+@breadcrumb-bg: #f8f9fa;
+
+html {
+    position: relative;
+    min-height: 100%;
+}
+body {
+    margin-bottom: 140px;
+}
+
+html, body {
+    font-size: 16px;
+}
+
+.content-body{
+    margin-bottom: 40px;
+}
+
+.menu-top{
+    margin-top: 15px;
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.menu-side, .product-layout{
+    padding-top: 35px;
+}
+
+.menu-side-mobile{
+    background-color: transparent !important;
+    color: inherit !important;
+    text-align: center;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.dragable_item{
+	cursor: move;
+}
+
+.page-header{
+    padding-bottom: 5px;
+}
+
+.cart-contents-title{
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.cart-row{
+    padding-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.cart-item-row{
+    margin-top: 5px;
+}
+
+.cart-link{
+    padding-left: 7px;
+}
+
+a.text-danger:hover, a.text-danger:focus {
+    color: @text-danger-color;
+}
+
+.cart-update-button{
+    cursor: pointer;
+}
+
+.thumbnail-image{
+    cursor: pointer;
+}
+
+#product-images{
+    margin-bottom: 30px;
+}
+
+.product-layout{
+    padding-top: 30px;
+}
+
+.product-title-image{
+    margin: auto;
+    max-height: 400px;
+    width: auto;
+}
+
+.thumbnail-image-container .img-fluid {
+    display: block;
+    width: auto;
+    max-height: 100%;
+    margin: auto;
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none; 
+    margin: 0; 
+}
+
+.navbar-brand>img {
+    width: auto;
+    height: 100%;
+}
+
+.thumbnail{
+    min-height: 415px;
+}
+
+.vertical-center {
+    display: flex;
+    align-items: center;
+}
+
+.title-image-container .img-fluid {
+    display: block;
+    width: auto;
+    max-height: 100%;
+    margin: auto;
+}
+
+.title-image-container{
+    height: 400px;
+}
+
+.thumbnail-image-container {
+    height: 350px;
+}
+
+.product-title{
+    font-size: 24px;
+    margin-top: 0px;
+}
+
+.product-title-home{
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.product-price{
+    padding-bottom: 10px;
+    font-size: 20px;
+    color: @text-gray-color;
+}
+
+.productOptions{
+    padding-bottom: 15px;
+}
+
+.product-option{
+    font-size: 18px;
+}
+
+.btnAddToCart, .body_text{
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+
+.product-option-text{
+    font-size: 16px;
+    color: @text-gray-color;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+
+.seporator{
+    padding-top: 5px;
+    border-bottom: 1px solid @separator-color;
+    padding-bottom: 6px;
+}
+
+.list-group-input-pad select{
+    margin-top: -7px;
+}
+
+.no-pad-left{
+    padding-left: 0px;
+}
+
+.no-pad-right{
+    padding-right: 0px;
+}
+
+.top-marg-10{
+    margin-top: 10px;
+}
+
+.top-marg-15{
+    margin-top: 15px;
+}
+
+.top-marg-20{
+    margin-top: 20px;
+}
+
+.top-pad-5{
+    padding-top: 10px;
+}
+
+.top-pad-8{
+    padding-top: 8px;
+}
+
+.top-pad-10{
+    padding-top: 10px;
+}
+
+.top-pad-20{
+    padding-top: 20px;
+}
+
+.top-pad-50{
+    padding-top: 50px;
+}
+
+.top-pad-100{
+    padding-top: 100px;
+}
+
+.bottom-pad-10{
+    padding-bottom: 10px;
+}
+
+.bottom-pad-15{
+    padding-bottom: 15px;
+}
+
+.bottom-pad-20{
+    padding-bottom: 20px;
+}
+
+.bottom-marg-10{
+    margin-bottom: 10px;
+}
+
+.bottom-marg-15{
+    margin-bottom: 15px;
+}
+
+.bottom-marg-20{
+    margin-bottom: 20px;
+}
+
+.left-pad-10{
+    padding-left: 10px;
+}
+
+.left-pad-30{
+    padding-left: 30px;
+}
+
+.right-pad-10{
+    padding-right: 10px;
+}
+
+.shipping-form input{
+    margin-bottom: 15px;
+}
+
+#header {        
+    height: 50px;
+}
+
+.search-bar{
+    margin-top: 10px;
+}
+
+.searchMenuLocation-side{
+    padding-left: 25px;
+    padding-right: 25px;
+}
+.searchMenuLocation-top{
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.breadcrumb{
+    background-color: @breadcrumb-bg;
+    margin-top: 10px;
+}
+
+.breadcrumbProPerRow-3{
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.searchProPerRow-3, .searchProPerRow-4{
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.dropup-button{
+    height: 34px;
+    padding: 0px;
+    color: white !important;
+}
+
+.dropdown-menu>li>a{
+    padding-top: 5px !important;
+    
+}
+
+.pad-bottom{
+    padding-bottom: 25px;
+}
+
+.keywords{
+    padding-bottom: 30px;
+    padding-top: 20px;
+    font-size: 19px;
+}
+
+.file-form{
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.editor_btn_action{
+    border-top-left-radius: 4px !important; 
+    border-bottom-left-radius: 4px !important;
+}
+
+.dropup-list{
+    padding-bottom: 5px;
+    margin-right: 10px;
+    margin-left: 10px;
+    margin-top: 10px;
+}
+
+#notify_message{
+    position: fixed;
+    display: none;
+    z-index: 9999;
+    padding-top: 10px;
+    height: 50px;
+    bottom: 0px; 
+    width: 100%; 
+    text-align: center;
+    font-size: 22px;
+}
+
+.input-group .form-control {
+    z-index: 1;
+}
+
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}
+.btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 100px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    outline: none;
+    background: white;
+    cursor: inherit;
+    display: block;
+}
+
+.offcanvas-element{
+    z-index: 100;
+    background-color: #ffffff;
+}
+
+.product-item{
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+input:focus {
+    outline: none;
+    background: #fbfbe9;
+}
+
+input + label {
+    display: block;
+    cursor: text;
+    transition: .15s ease-out all;
+    position: absolute;
+    top: .9em;
+    left: 1.3em;
+}
+
+.floatLabel{
+    top: .1em;
+    left: 32px;
+    font-size: .7em;
+    color: #999999;
+    font-weight: normal;
+    transition: .15s ease-out all;
+}
+
+input.form-control.customerDetails{
+    padding-bottom: 5px;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: @footer-height;
+    padding-top: 25px;
+    background-color: #f5f5f5;
+}
+
+.admin{
+    margin-bottom: 0;
+}
+
+.image-next{
+    position: absolute;
+    top: 180px; 
+    right: 0px;
+}
+
+.image-prev{
+    position: absolute;
+    top: 180px; 
+    left: 0px;
+}
+
+.image-button{
+    cursor: pointer;
+    opacity: 0.7;
+}
+
+.image-button-show{
+    cursor: pointer;
+    opacity: 0.7 !important;
+}
+
+.navbar-default {
+    background-color: #ffffff;
+}
+
+.navbar-default .navbar-nav>li>a {
+    color: @primary-btn-color;
+}
+
+.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
+    color: @primary-btn-color;
+}
+
+.btn-warning, .btn-outline-primary {
+    color: #ffffff;
+    background-color: @primary-btn-color;
+    border-color: @primary-btn-color;
+}
+
+.btn-warning:hover, .btn-outline-primary:hover {
+    color: #ffffff !important;
+    background-color: @primary-btn-color !important;
+    border-color: @primary-btn-color !important;
+    opacity: 0.65;
+}
+
+.btn-outline-danger{
+    color: #ffffff;
+    background-color: @secondary-btn-color;
+    border-color: @secondary-btn-color;
+}
+
+.btn-outline-danger:hover{
+    color: #ffffff !important;
+    background-color: @secondary-btn-color !important;
+    border-color: @secondary-btn-color !important;
+    opacity: 0.65;
+}
+
+a:hover, a:focus {
+    color: @link-color;
+}
+a {
+    color: @primary-btn-color;
+}
+
+.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
+    background-color: @primary-btn-color;
+    border-color: @primary-btn-color;
+}
+
+.navbar-default .navbar-brand {
+    color: #000000; 
+    font-size: 40px;
+    font-weight: 700;
+}
+
+.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
+    color: #000000;
+}
+
+.navbar-brand-image {
+    padding: 0px;
+    height: 70px;
+}
+
+.page-item.disabled .page-link{
+    color:#b7b7b7;
+}
+
+.page-link {
+    color: white;
+    border: 0;
+}
+
+.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+    background-color: #000000;
+}
+
+.thumbnail {
+    border: none;
+}
+
+.help-block{
+    color: #95a5a6;
+}
+
+.list-group-item:first-child, .list-group-item:last-child {
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
+}
+
+@media only screen and (min-width: 768px){
+    .pushy {
+        width: 700px;
+    }
+    .pushy-right {
+        -webkit-transform: translate3d(700px, 0, 0);
+        -ms-transform: translate3d(700px, 0, 0);
+        transform: translate3d(700px, 0, 0);
+    }
+
+    .pushy-open-right #container,
+    .pushy-open-right .push {
+        -webkit-transform: translate3d(-700px, 0, 0);
+        -ms-transform: translate3d(-700px, 0, 0);
+        transform: translate3d(-700px, 0, 0);
+    }
+}
+
+@media only screen and (max-width: 768px){
+    .pushy {
+        width: calc(100%);
+    }
+    .pushy-right {
+        -webkit-transform: translate3d(calc(100%), 0, 0);
+        -ms-transform: translate3d(calc(100%), 0, 0);
+        transform: translate3d(calc(100%), 0, 0);
+    }
+
+    .pushy-open-right #container,
+    .pushy-open-right .push {
+        -webkit-transform: translate3d(-calc(100%), 0, 0);
+        -ms-transform: translate3d(-calc(100%), 0, 0);
+        transform: translate3d(-calc(100%), 0, 0);
+    }
+
+    .product-item{
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    .showFooter{
+        margin-bottom: 220px;
+    }
+
+    .title-image-container{
+        height: auto;
+    }
+
+    .product-title{
+        font-size: 18px;
+        padding-top: 18px;
+        min-height: auto;
+    }
+
+    .search-bar-input{
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .menu-side {
+        padding-top: 15px;
+    }
+
+    .product-layout{
+        padding-top: 0px;
+        padding-bottom: 30px;
+    }
+
+    #btn_search{
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+
+    .cart-row{
+        padding-top: 10px;
+        border-bottom: 1px solid #ecf0f1;
+        display: block;
+    }
+
+    .cart-body{
+        padding-top: 0px;
+    }
+
+    .cart-contents-shipping{
+        padding-top: 10px;
+    }
+
+    #cart{
+        padding-bottom: 15px;
+    }
+
+    .footer {
+        height: @footer-height;
+    }
+
+    body{
+        margin-bottom: @footer-height;
+    }
+}

public/stylesheets/style.css

@@ -5,25 +5,22 @@ html {
 body {
   margin-bottom: 140px;
 }
-
+html,
-html, body {
+body {
   font-size: 16px;
 }
-
 .content-body {
   margin-bottom: 40px;
 }
-
 .menu-top {
   margin-top: 15px;
   margin-left: 15px;
   margin-right: 15px;
 }
-
+.menu-side,
-.menu-side, .product-layout{
+.product-layout {
   padding-top: 35px;
 }
-
 .menu-side-mobile {
   background-color: transparent !important;
   color: inherit !important;
@@ -31,113 +28,86 @@ html, body {
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
-
 .dragable_item {
   cursor: move;
 }
-
 .page-header {
   padding-bottom: 5px;
 }
-
 .cart-contents-title {
   font-size: 18px;
   font-weight: 700;
 }
-
 .cart-row {
   padding-bottom: 10px;
   display: flex;
   align-items: center;
 }
-
 .cart-item-row {
   margin-top: 5px;
 }
-
 .cart-link {
   padding-left: 7px;
 }
-
+a.text-danger:hover,
-.cart-delete-button{
+a.text-danger:focus {
-    color: #d9534f;
-    cursor: pointer;
-    padding-left: 5px;
-}
-
-a.text-danger:hover, a.text-danger:focus {
   color: #cc3a2c;
 }
-
 .cart-update-button {
   cursor: pointer;
 }
-
 .thumbnail-image {
   cursor: pointer;
 }
-
 #product-images {
   margin-bottom: 30px;
 }
-
 .product-layout {
   padding-top: 30px;
 }
-
 .product-title-image {
   margin: auto;
   max-height: 400px;
   width: auto;
 }
-
 .thumbnail-image-container .img-fluid {
   display: block;
   width: auto;
   max-height: 100%;
   margin: auto;
 }
-
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
 .navbar-brand > img {
   width: auto;
   height: 100%;
 }
-
 .thumbnail {
   min-height: 415px;
 }
-
 .vertical-center {
   display: flex;
   align-items: center;
 }
-
 .title-image-container .img-fluid {
   display: block;
   width: auto;
   max-height: 100%;
   margin: auto;
 }
-
 .title-image-container {
   height: 400px;
 }
-
 .thumbnail-image-container {
   height: 350px;
 }
-
 .product-title {
   font-size: 24px;
   margin-top: 0px;
 }
-
 .product-title-home {
   display: -webkit-box;
   display: -moz-box;
@@ -148,119 +118,105 @@ input[type=number]::-webkit-outer-spin-button {
   justify-content: center;
   text-align: center;
 }
-
 .product-price {
   padding-bottom: 10px;
   font-size: 20px;
-    color: #AAAAAA;
+  color: #aaaaaa;
 }
-
 .productOptions {
   padding-bottom: 15px;
 }
-
 .product-option {
   font-size: 18px;
 }
-
+.btnAddToCart,
-.btnAddToCart, .body_text{
+.body_text {
   padding-top: 15px;
   padding-bottom: 15px;
 }
-
 .product-option-text {
   font-size: 16px;
-    color: #AAAAAA;
+  color: #aaaaaa;
   padding-bottom: 10px;
   padding-top: 10px;
 }
-
 .seporator {
   padding-top: 5px;
-    border-bottom: 1px solid #EEEEEE;
+  border-bottom: 1px solid #eeeeee;
   padding-bottom: 6px;
 }
-
 .list-group-input-pad select {
   margin-top: -7px;
 }
-
 .no-pad-left {
   padding-left: 0px;
 }
-
 .no-pad-right {
   padding-right: 0px;
 }
-
 .top-marg-10 {
   margin-top: 10px;
 }
-
 .top-marg-15 {
   margin-top: 15px;
 }
-
 .top-marg-20 {
   margin-top: 20px;
 }
-
+.top-pad-5 {
+  padding-top: 10px;
+}
+.top-pad-8 {
+  padding-top: 8px;
+}
 .top-pad-10 {
   padding-top: 10px;
 }
-
 .top-pad-20 {
   padding-top: 20px;
 }
-
 .top-pad-50 {
   padding-top: 50px;
 }
-
 .top-pad-100 {
   padding-top: 100px;
 }
-
 .bottom-pad-10 {
   padding-bottom: 10px;
 }
-
 .bottom-pad-15 {
   padding-bottom: 15px;
 }
-
 .bottom-pad-20 {
   padding-bottom: 20px;
 }
-
 .bottom-marg-10 {
   margin-bottom: 10px;
 }
-
 .bottom-marg-15 {
   margin-bottom: 15px;
 }
-
 .bottom-marg-20 {
   margin-bottom: 20px;
 }
-
+.left-pad-10 {
+  padding-left: 10px;
+}
 .left-pad-30 {
   padding-left: 30px;
 }
-
+.right-pad-10 {
+  padding-right: 10px;
+}
 .shipping-form input {
   margin-bottom: 15px;
 }
-
 #header {
   height: 50px;
 }
-
 .search-bar {
   margin-top: 10px;
 }
-
 .searchMenuLocation-side {
   padding-left: 25px;
   padding-right: 25px;
@@ -269,60 +225,49 @@ input[type=number]::-webkit-outer-spin-button {
   padding-left: 5px;
   padding-right: 5px;
 }
-
 .breadcrumb {
   background-color: #f8f9fa;
   margin-top: 10px;
 }
-
 .breadcrumbProPerRow-3 {
   margin-left: 10px;
   margin-right: 10px;
 }
-
+.searchProPerRow-3,
-.searchProPerRow-3, .searchProPerRow-4{
+.searchProPerRow-4 {
   padding-left: 0;
   padding-right: 0;
 }
-
 .dropup-button {
   height: 34px;
   padding: 0px;
   color: white !important;
 }
-
 .dropdown-menu > li > a {
   padding-top: 5px !important;
-    
 }
-
 .pad-bottom {
   padding-bottom: 25px;
 }
-
 .keywords {
   padding-bottom: 30px;
   padding-top: 20px;
   font-size: 19px;
 }
-
 .file-form {
   padding-left: 15px;
   padding-right: 15px;
 }
-
 .editor_btn_action {
   border-top-left-radius: 4px !important;
   border-bottom-left-radius: 4px !important;
 }
-
 .dropup-list {
   padding-bottom: 5px;
   margin-right: 10px;
   margin-left: 10px;
   margin-top: 10px;
 }
-
 #notify_message {
   position: fixed;
   display: none;
@@ -334,11 +279,9 @@ input[type=number]::-webkit-outer-spin-button {
   text-align: center;
   font-size: 22px;
 }
-
 .input-group .form-control {
   z-index: 1;
 }
-
 .btn-file {
   position: relative;
   overflow: hidden;
@@ -358,44 +301,37 @@ input[type=number]::-webkit-outer-spin-button {
   cursor: inherit;
   display: block;
 }
-
 .offcanvas-element {
   z-index: 100;
   background-color: #ffffff;
 }
-
 .product-item {
   padding-left: 0px;
   padding-right: 0px;
 }
-
 input:focus {
   outline: none;
   background: #fbfbe9;
 }
-
 input + label {
   display: block;
   cursor: text;
-    transition: .15s ease-out all;
+  transition: 0.15s ease-out all;
   position: absolute;
-    top: .9em;
+  top: 0.9em;
   left: 1.3em;
 }
-
 .floatLabel {
-    top: .1em;
+  top: 0.1em;
   left: 32px;
-    font-size: .7em;
+  font-size: 0.7em;
   color: #999999;
   font-weight: normal;
-    transition: .15s ease-out all;
+  transition: 0.15s ease-out all;
 }
-
 input.form-control.customerDetails {
   padding-bottom: 5px;
 }
-
 .footer {
   position: absolute;
   bottom: 0;
@@ -404,121 +340,109 @@ input.form-control.customerDetails{
   padding-top: 25px;
   background-color: #f5f5f5;
 }
-
 .admin {
   margin-bottom: 0;
 }
-
 .image-next {
   position: absolute;
   top: 180px;
   right: 0px;
 }
-
 .image-prev {
   position: absolute;
   top: 180px;
   left: 0px;
 }
-
 .image-button {
   cursor: pointer;
   opacity: 0.7;
 }
-
 .image-button-show {
   cursor: pointer;
   opacity: 0.7 !important;
 }
-
 .navbar-default {
   background-color: #ffffff;
 }
-
 .navbar-default .navbar-nav > li > a {
   color: #000000;
 }
-
+.navbar-default .navbar-nav > li > a:hover,
-.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
+.navbar-default .navbar-nav > li > a:focus {
   color: #000000;
 }
-
+.btn-warning,
-.btn-outline-danger, .btn-warning, .btn-outline-primary {
+.btn-outline-primary {
   color: #ffffff;
   background-color: #000000;
   border-color: #000000;
 }
-
+.btn-warning:hover,
-.btn-warning:hover, .btn-outline-danger:hover {
+.btn-outline-primary:hover {
-    color: #ffffff;
+  color: #ffffff !important;
-    background-color: #000000;
+  background-color: #000000 !important;
-    border-color: #000000;
+  border-color: #000000 !important;
   opacity: 0.65;
 }
-
+.btn-outline-danger {
-a:hover, a:focus {
+  color: #ffffff;
+  background-color: #cc3a2c;
+  border-color: #cc3a2c;
+}
+.btn-outline-danger:hover {
+  color: #ffffff !important;
+  background-color: #cc3a2c !important;
+  border-color: #cc3a2c !important;
+  opacity: 0.65;
+}
+a:hover,
+a:focus {
   color: #000000;
 }
 a {
   color: #000000;
 }
-
+.list-group-item.active,
-.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
+.list-group-item.active:hover,
+.list-group-item.active:focus {
   background-color: #000000;
   border-color: #000000;
 }
-
 .navbar-default .navbar-brand {
   color: #000000;
   font-size: 40px;
   font-weight: 700;
 }
-
+.navbar-default .navbar-brand:hover,
-.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
+.navbar-default .navbar-brand:focus {
   color: #000000;
 }
-
 .navbar-brand-image {
   padding: 0px;
   height: 70px;
 }
-
-.navbar-default .badge {
-    background-color: #000000;
-    color: #fff;
-}
-
-.navbar-default .navbar-toggle {
-    background-color: #000000;
-    border-color: #000000;
-}
-
 .page-item.disabled .page-link {
   color: #b7b7b7;
 }
-
 .page-link {
   color: white;
   border: 0;
 }
-
+.navbar-default .navbar-toggle:hover,
-.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+.navbar-default .navbar-toggle:focus {
   background-color: #000000;
 }
-
 .thumbnail {
   border: none;
 }
-
 .help-block {
   color: #95a5a6;
 }
-
+.list-group-item:first-child,
-.list-group-item:first-child, .list-group-item:last-child {
+.list-group-item:last-child {
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
 }
-
 @media only screen and (min-width: 768px) {
   .pushy {
     width: 700px;
@@ -528,7 +452,6 @@ a {
     -ms-transform: translate3d(700px, 0, 0);
     transform: translate3d(700px, 0, 0);
   }
-
   .pushy-open-right #container,
   .pushy-open-right .push {
     -webkit-transform: translate3d(-700px, 0, 0);
@@ -536,7 +459,6 @@ a {
     transform: translate3d(-700px, 0, 0);
   }
 }
-
 @media only screen and (max-width: 768px) {
   .pushy {
     width: calc(100%);
@@ -546,74 +468,59 @@ a {
     -ms-transform: translate3d(calc(100%), 0, 0);
     transform: translate3d(calc(100%), 0, 0);
   }
-
   .pushy-open-right #container,
   .pushy-open-right .push {
     -webkit-transform: translate3d(-calc(100%), 0, 0);
     -ms-transform: translate3d(-calc(100%), 0, 0);
     transform: translate3d(-calc(100%), 0, 0);
   }
-
   .product-item {
     padding-left: 0px;
     padding-right: 0px;
   }
-
   .showFooter {
     margin-bottom: 220px;
   }
-
   .title-image-container {
     height: auto;
   }
-
   .product-title {
     font-size: 18px;
     padding-top: 18px;
     min-height: auto;
   }
-
   .search-bar-input {
     padding-left: 0;
     padding-right: 0;
   }
-
   .menu-side {
     padding-top: 15px;
   }
-
   .product-layout {
     padding-top: 0px;
     padding-bottom: 30px;
   }
-
   #btn_search {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
-
   .cart-row {
     padding-top: 10px;
     border-bottom: 1px solid #ecf0f1;
     display: block;
   }
-
   .cart-body {
     padding-top: 0px;
   }
-
   .cart-contents-shipping {
     padding-top: 10px;
   }
-
   #cart {
     padding-bottom: 15px;
   }
-
   .footer {
     height: 100px;
   }
-
   body {
     margin-bottom: 100px;
   }

style.css

@@ -0,0 +1,513 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  margin-bottom: 140px;
+}
+html,
+body {
+  font-size: 16px;
+}
+.content-body {
+  margin-bottom: 40px;
+}
+.menu-top {
+  margin-top: 15px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+.menu-side,
+.product-layout {
+  padding-top: 35px;
+}
+.menu-side-mobile {
+  background-color: transparent !important;
+  color: inherit !important;
+  text-align: center;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.dragable_item {
+  cursor: move;
+}
+.page-header {
+  padding-bottom: 5px;
+}
+.cart-contents-title {
+  font-size: 18px;
+  font-weight: 700;
+}
+.cart-row {
+  padding-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+.cart-item-row {
+  margin-top: 5px;
+}
+.cart-link {
+  padding-left: 7px;
+}
+a.text-danger:hover,
+a.text-danger:focus {
+  color: #cc3a2c;
+}
+.cart-update-button {
+  cursor: pointer;
+}
+.thumbnail-image {
+  cursor: pointer;
+}
+#product-images {
+  margin-bottom: 30px;
+}
+.product-layout {
+  padding-top: 30px;
+}
+.product-title-image {
+  margin: auto;
+  max-height: 400px;
+  width: auto;
+}
+.thumbnail-image-container .img-fluid {
+  display: block;
+  width: auto;
+  max-height: 100%;
+  margin: auto;
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.navbar-brand > img {
+  width: auto;
+  height: 100%;
+}
+.thumbnail {
+  min-height: 415px;
+}
+.vertical-center {
+  display: flex;
+  align-items: center;
+}
+.title-image-container .img-fluid {
+  display: block;
+  width: auto;
+  max-height: 100%;
+  margin: auto;
+}
+.title-image-container {
+  height: 400px;
+}
+.thumbnail-image-container {
+  height: 350px;
+}
+.product-title {
+  font-size: 24px;
+  margin-top: 0px;
+}
+.product-title-home {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.product-price {
+  padding-bottom: 10px;
+  font-size: 20px;
+  color: #AAAAAA;
+}
+.productOptions {
+  padding-bottom: 15px;
+}
+.product-option {
+  font-size: 18px;
+}
+.btnAddToCart,
+.body_text {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.product-option-text {
+  font-size: 16px;
+  color: #AAAAAA;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+.seporator {
+  padding-top: 5px;
+  border-bottom: 1px solid #EEEEEE;
+  padding-bottom: 6px;
+}
+.list-group-input-pad select {
+  margin-top: -7px;
+}
+.no-pad-left {
+  padding-left: 0px;
+}
+.no-pad-right {
+  padding-right: 0px;
+}
+.top-marg-10 {
+  margin-top: 10px;
+}
+.top-marg-15 {
+  margin-top: 15px;
+}
+.top-marg-20 {
+  margin-top: 20px;
+}
+.top-pad-10 {
+  padding-top: 10px;
+}
+.top-pad-20 {
+  padding-top: 20px;
+}
+.top-pad-50 {
+  padding-top: 50px;
+}
+.top-pad-100 {
+  padding-top: 100px;
+}
+.bottom-pad-10 {
+  padding-bottom: 10px;
+}
+.bottom-pad-15 {
+  padding-bottom: 15px;
+}
+.bottom-pad-20 {
+  padding-bottom: 20px;
+}
+.bottom-marg-10 {
+  margin-bottom: 10px;
+}
+.bottom-marg-15 {
+  margin-bottom: 15px;
+}
+.bottom-marg-20 {
+  margin-bottom: 20px;
+}
+.left-pad-30 {
+  padding-left: 30px;
+}
+.shipping-form input {
+  margin-bottom: 15px;
+}
+#header {
+  height: 50px;
+}
+.search-bar {
+  margin-top: 10px;
+}
+.searchMenuLocation-side {
+  padding-left: 25px;
+  padding-right: 25px;
+}
+.searchMenuLocation-top {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.breadcrumb {
+  background-color: #f8f9fa;
+  margin-top: 10px;
+}
+.breadcrumbProPerRow-3 {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.searchProPerRow-3,
+.searchProPerRow-4 {
+  padding-left: 0;
+  padding-right: 0;
+}
+.dropup-button {
+  height: 34px;
+  padding: 0px;
+  color: white !important;
+}
+.dropdown-menu > li > a {
+  padding-top: 5px !important;
+}
+.pad-bottom {
+  padding-bottom: 25px;
+}
+.keywords {
+  padding-bottom: 30px;
+  padding-top: 20px;
+  font-size: 19px;
+}
+.file-form {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.editor_btn_action {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+}
+.dropup-list {
+  padding-bottom: 5px;
+  margin-right: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+#notify_message {
+  position: fixed;
+  display: none;
+  z-index: 9999;
+  padding-top: 10px;
+  height: 50px;
+  bottom: 0px;
+  width: 100%;
+  text-align: center;
+  font-size: 22px;
+}
+.input-group .form-control {
+  z-index: 1;
+}
+.btn-file {
+  position: relative;
+  overflow: hidden;
+}
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 100px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  outline: none;
+  background: white;
+  cursor: inherit;
+  display: block;
+}
+.offcanvas-element {
+  z-index: 100;
+  background-color: #ffffff;
+}
+.product-item {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+input:focus {
+  outline: none;
+  background: #fbfbe9;
+}
+input + label {
+  display: block;
+  cursor: text;
+  transition: 0.15s ease-out all;
+  position: absolute;
+  top: 0.9em;
+  left: 1.3em;
+}
+.floatLabel {
+  top: 0.1em;
+  left: 32px;
+  font-size: 0.7em;
+  color: #999999;
+  font-weight: normal;
+  transition: 0.15s ease-out all;
+}
+input.form-control.customerDetails {
+  padding-bottom: 5px;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100px;
+  padding-top: 25px;
+  background-color: #f5f5f5;
+}
+.admin {
+  margin-bottom: 0;
+}
+.image-next {
+  position: absolute;
+  top: 180px;
+  right: 0px;
+}
+.image-prev {
+  position: absolute;
+  top: 180px;
+  left: 0px;
+}
+.image-button {
+  cursor: pointer;
+  opacity: 0.7;
+}
+.image-button-show {
+  cursor: pointer;
+  opacity: 0.7 !important;
+}
+.navbar-default {
+  background-color: #ffffff;
+}
+.navbar-default .navbar-nav > li > a {
+  color: #000000;
+}
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+  color: #000000;
+}
+.btn-outline-danger,
+.btn-warning,
+.btn-outline-primary {
+  color: #ffffff;
+  background-color: #000000;
+  border-color: #000000;
+}
+.btn-warning:hover,
+.btn-outline-danger:hover {
+  color: #ffffff;
+  background-color: #000000;
+  border-color: #000000;
+  opacity: 0.65;
+}
+a:hover,
+a:focus {
+  color: #000000;
+}
+a {
+  color: #000000;
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  background-color: #000000;
+  border-color: #000000;
+}
+.navbar-default .navbar-brand {
+  color: #000000;
+  font-size: 40px;
+  font-weight: 700;
+}
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+  color: #000000;
+}
+.navbar-brand-image {
+  padding: 0px;
+  height: 70px;
+}
+.navbar-default .badge {
+  background-color: #000000;
+  color: #fff;
+}
+.navbar-default .navbar-toggle {
+  background-color: #000000;
+  border-color: #000000;
+}
+.page-item.disabled .page-link {
+  color: #b7b7b7;
+}
+.page-link {
+  color: white;
+  border: 0;
+}
+.navbar-default .navbar-toggle:hover,
+.navbar-default .navbar-toggle:focus {
+  background-color: #000000;
+}
+.thumbnail {
+  border: none;
+}
+.help-block {
+  color: #95a5a6;
+}
+.list-group-item:first-child,
+.list-group-item:last-child {
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+}
+@media only screen and (min-width: 768px) {
+  .pushy {
+    width: 700px;
+  }
+  .pushy-right {
+    -webkit-transform: translate3d(700px, 0, 0);
+    -ms-transform: translate3d(700px, 0, 0);
+    transform: translate3d(700px, 0, 0);
+  }
+  .pushy-open-right #container,
+  .pushy-open-right .push {
+    -webkit-transform: translate3d(-700px, 0, 0);
+    -ms-transform: translate3d(-700px, 0, 0);
+    transform: translate3d(-700px, 0, 0);
+  }
+}
+@media only screen and (max-width: 768px) {
+  .pushy {
+    width: calc(100%);
+  }
+  .pushy-right {
+    -webkit-transform: translate3d(calc(100%), 0, 0);
+    -ms-transform: translate3d(calc(100%), 0, 0);
+    transform: translate3d(calc(100%), 0, 0);
+  }
+  .pushy-open-right #container,
+  .pushy-open-right .push {
+    -webkit-transform: translate3d(-calc(100%), 0, 0);
+    -ms-transform: translate3d(-calc(100%), 0, 0);
+    transform: translate3d(-calc(100%), 0, 0);
+  }
+  .product-item {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+  .showFooter {
+    margin-bottom: 220px;
+  }
+  .title-image-container {
+    height: auto;
+  }
+  .product-title {
+    font-size: 18px;
+    padding-top: 18px;
+    min-height: auto;
+  }
+  .search-bar-input {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .menu-side {
+    padding-top: 15px;
+  }
+  .product-layout {
+    padding-top: 0px;
+    padding-bottom: 30px;
+  }
+  #btn_search {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .cart-row {
+    padding-top: 10px;
+    border-bottom: 1px solid #ecf0f1;
+    display: block;
+  }
+  .cart-body {
+    padding-top: 0px;
+  }
+  .cart-contents-shipping {
+    padding-top: 10px;
+  }
+  #cart {
+    padding-bottom: 15px;
+  }
+  .footer {
+    height: 100px;
+  }
+  body {
+    margin-bottom: 100px;
+  }
+}

views/customers.hbs

@@ -27,33 +27,31 @@
                 <li class="list-group-item">
                     <div class="row">
                         <div class="col-sm-6">
-                            <h6 class="text-info"><strong>{{ @root.__ "Email address" }}</strong></h6>
+                            <div class="text-info"><strong>{{ @root.__ "Email address" }}</strong></div>
                         </div>
                         <div class="col-sm-3">
-                            <h6 class="text-info"><strong>{{ @root.__ "Name" }}</strong></h6>
+                            <div class="text-info"><strong>{{ @root.__ "Name" }}</strong></div>
                         </div>
                         <div class="col-sm-3">
-                            <h6 class="text-info"><strong>{{ @root.__ "Phone number" }}</strong></h6>
+                            <div class="text-info"><strong>{{ @root.__ "Phone number" }}</strong></div>
                         </div>
                     </div>
                 </li>
                 {{#each customers}}
                     <li class="list-group-item">
-                        
                         <a href="/admin/customer/view/{{this._id}}">
                             <div class="row">
                                 <div class="col-sm-6">
-                                    <h6 class="">{{this.email}}</h6>
+                                    <div class="">{{this.email}}</div>
                                 </div>
                                 <div class="col-sm-3">
-                                    <h6 class="">{{this.firstName}} {{this.lastName}}</h6>
+                                    <div class="">{{this.firstName}} {{this.lastName}}</div>
                                 </div>
                                 <div class="col-sm-3">
-                                    <h6 class="">{{this.phone}}</h6>
+                                    <div class="">{{this.phone}}</div>
                                 </div>
                             </div>
                         </a>  
-                        
                     </li>
                 {{/each}}
             </ul>

views/layouts/layout.hbs

@@ -19,7 +19,7 @@
         {{/if}}
 		<meta name="keywords" content="{{config.cartTitle}}">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
-        <link rel="stylesheet" href="/stylesheets/pushy.css">
+        <link rel="stylesheet" href="/stylesheets/pushy{{config.env}}.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css" />
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
@@ -84,7 +84,7 @@
     <body>
     {{/if}}
 		<!-- Static navbar -->
-        <nav class="navbar navbar-expand-lg navbar-light bg-light mainNavBar">
+        <nav class="navbar navbar-expand-lg mainNavBar">
             <a class="navbar-brand" href="/">CLOTH</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>

views/order.hbs

@@ -14,7 +14,7 @@
             <li class="list-group-item list-group-input-pad">
                 <strong> Order status: </strong><span class="text-{{getStatusColor result.orderStatus}} pull-right">{{result.orderStatus}}</span>
                 <div class="pull-right col-md-2">
-                    <select class="form-control input-sm" id="orderStatus">
+                    <select class="form-control" id="orderStatus">
                         <option>{{ @root.__ "Completed" }}</option>
                         <option>{{ @root.__ "Paid" }}</option>
                         <option>{{ @root.__ "Pending" }}</option>

views/orders.hbs

@@ -15,11 +15,10 @@
         <div class="orderFilter">
             <div class="row">
                 <div class="text-warning top-pad-10 col-sm-8">{{ @root.__ "Orders can be filtered by: surname, email address or postcode/zipcode" }}</div>
-                <div class="col-sm-4">
+                <div class="col-sm-4 top-pad-10">
-                    <div class="form-group">
+                    <form class="form-inline float-sm-right">
-                        <label for="orderStatusFilter" class="col-sm-2 control-label formLabel">Status</label>
+                        <label for="orderStatusFilter" class="control-label formLabel right-pad-10">Status</label>
-                        <div class="no-pad-right">
+                        <select class="form-control" id="orderStatusFilter">
-                            <select class="form-control input-sm" id="orderStatusFilter">
                             <option>{{ @root.__ "Completed" }}</option>
                             <option>{{ @root.__ "Paid" }}</option>
                             <option>{{ @root.__ "Created" }}</option>
@@ -28,8 +27,7 @@
                             <option>{{ @root.__ "Shipped" }}</option>
                             <option>{{ @root.__ "Pending" }}</option>
                         </select>
-                        </div>
+                    </form>
-                    </div>
                 </div>
             </div>
         </div>
@@ -46,20 +44,20 @@
             {{#if orders}}
             {{#each orders}}
                 <li class="list-group-item">
-                    <h6 class="pull-right top-pad-5">
+                    <div class="pull-right top-pad-5">
                         {{ @root.__ "Status" }}: <span class="text-{{getStatusColor this.orderStatus}}">{{this.orderStatus}}</span>
                         <a class="text-danger" href="/admin/order/delete/{{this._id}}" onclick="return confirm('Are you sure you want to delete this order?');"> <i class="fa fa-trash-o"></i></a>
-                    </h6>
+                    </div>
-                    <h6>
+                    <div class="top-pad-5">
                         <a href="/admin/order/view/{{this._id}}" class="text-success">View order</a> - <span class="text-info">Date: </span>{{formatDate this.orderDate "DD/MM/YYYY hh:mm"}} | <span class="text-info">Email:</span> {{this.orderEmail}} | <span class="text-info">{{ @root.__ "Last name" }}:</span> {{this.orderLastname}}
-                    </h6>
+                    </div>
                 </li>
             {{/each}}
             {{else}}
                 <li class="list-group-item">
-                    <h4 class="text-center">
+                    <h5 class="text-center">
                         {{ @root.__ "No orders found" }}
-                    </h4>
+                    </h5>
                 </li>
             {{/if}}
         </ul>

views/product_edit.hbs

@@ -1,5 +1,5 @@
 {{> partials/menu}}
-<div class="col-sm-9 top-pad-10">
+<div class="col-sm-9 top-pad-5">
     <form class="form-horizontal" id="productEditForm" data-toggle="validator">
             <div class="col-sm-12">
                 <div class="page-header">

views/product_new.hbs

@@ -1,5 +1,4 @@
 {{> partials/menu}}
-<div class="col-sm-9 top-pad-10">
 <form class="form-horizontal" id="productNewForm" data-toggle="validator">
         <div class="col-sm-12">
             <div class="page-header">
@@ -138,7 +137,6 @@
         </div>
     </div>
 </form>
-</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.min.js"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
 <script>

views/products.hbs

@@ -27,7 +27,7 @@
                 <li class="list-group-item">
                     <button class="pull-right btn text-danger btn-delete-product" data-id="{{this._id}}"> <i class="fa fa-trash-o"></i></button>
                     <h4 class="pull-right"><input id="{{this._id}}" class="published_state" type="checkbox" {{checkedState this.productPublished}}></h4>
-                    <h6><a href="/admin/product/edit/{{this._id}}">{{this.productTitle}}</a></h6>
+                    <div class="top-pad-8"><a href="/admin/product/edit/{{this._id}}">{{this.productTitle}}</a></div>
                 </li>
             {{/each}}
         </ul>

views/settings_menu.hbs

@@ -32,10 +32,10 @@
                 </div>
                 <div class="row">
                     <div class="col-sm-2 offset-sm-1">
-                        <input type="text" class="form-control input-sm" id="newNavMenu" placeholder="Contact Us">
+                        <input type="text" class="form-control" id="newNavMenu" placeholder="Contact Us">
                     </div>
                     <div class="col-sm-6">
-                        <input type="text" class="form-control input-sm" id="newNavLink" placeholder="/contact">
+                        <input type="text" class="form-control" id="newNavLink" placeholder="/contact">
                     </div>
                     <div class="col-sm-3">
                         <button type="submit" id="settings-menu-new" class="btn btn-outline-success">

views/settings_pages.hbs

@@ -12,7 +12,7 @@
                         <li class="list-group-item">
                             <div class="row">
                                 <div class="col-sm-8">
-                                    <h6><strong>{{ @root.__ "Name" }}:</strong>&nbsp; {{pageName}}</h6>
+                                    <div class="top-pad-5"><strong>{{ @root.__ "Name" }}:</strong>&nbsp; {{pageName}}</div>
                                 </div>
                                 <div class="col-sm-4 text-right">
                                     <a class="btn btn-outline-success" href="/admin/settings/pages/edit/{{_id}}">{{ @root.__ "Edit" }}</a>

views/themes/Cloth/cart.hbs

@@ -29,7 +29,7 @@
                             <div class="input-group-prepend">
                                 <button class="btn btn-outline-primary btn-qty-minus" type="button">-</button>
                             </div>
-                            <input type="number" class="form-control cart-product-quantity input-sm text-center" data-id="{{../this.productId}}" data-index="{{@key}}"
+                            <input type="number" class="form-control cart-product-quantity text-center" data-id="{{../this.productId}}" data-index="{{@key}}"
                                 maxlength="2" value="{{../this.quantity}}">
                             <div class="input-group-append">
                                 <button class="btn btn-outline-primary btn-qty-add" type="button">+</button>

views/themes/Cloth/style.css

@@ -24,12 +24,8 @@
     padding-bottom: 0;
 }
 
-.navbarMenuWrapper, .mainNavBar{
-    background-color: #f5f5f5;
-}
-
 .navbarMenuWrapper{
-    padding-top: 0px;
+    padding-top: 10px;
     margin-bottom: 5px;
 }
 

views/themes/Cloth/style.min.css

@@ -1 +1 @@
-#frm_search,.search-bar-input,.search-bar-input .btn{padding-top:10px;height:45px}.searchMenuLocation-side{padding-right:0}.productsWrapper{padding-right:10px;padding-left:10px}.searchBarWrapper{padding-right:0;padding-left:0}.footer{padding-top:20px}.product-price{padding-bottom:0}.navbarMenuWrapper{background-color:#f5f5f5}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product_wrapper>a:hover{color:#cc4135!important}#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.pagination>li>a{background-color:#cc4135!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:20px!important;height:100px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart,.pushy-link{border-color:#e74c3c;background-color:#e74c3c}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #e74c3c}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#e74c3c;border-bottom:none}.footer{padding-top:10px}}
+.add-to-cart{color:#fff!important}.searchMenuLocation-side{padding-right:0}.productsWrapper{padding-right:10px;padding-left:10px}.searchBarWrapper{padding-right:0;padding-left:0}.footer{padding-top:30px}.product-price{padding-bottom:0}.navbarMenuWrapper{padding-top:10px;margin-bottom:5px}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product-wrapper>a:hover{color:#cc4135!important}#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.img-thumbnail{border:0}.pagination .page-link{background-color:#cc4135!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:0!important;height:80px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart,.pushy-link{border-color:#e74c3c;background-color:#e74c3c}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #e74c3c}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}.has-error input{border-color:#dc3545}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#e74c3c;border-bottom:none}.footer{padding-top:10px}}