WIP #3678 @7

diff --git a/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php b/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php
index 5be858536a52f3d9c4f4a65390eff389447e5970..a113b0cf49bacd69c3a2f6bc68a29e9895e06c3c 100644 (file)
--- a/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php
@@ -35,7 +35,11 @@ class Setup {
     public function woocommerce_cart_menu($menu, $args) {
 
         // Only continue if woocommerce mini cart is available and we're on the primary_navigation menu
-        if (!function_exists('woocommerce_mini_cart') || $args->theme_location !== 'primary_navigation') return $menu;
+        if (!function_exists('woocommerce_mini_cart')
+            //|| WC()->cart->cart_contents_count < 1
+            || $args->theme_location !== 'primary_navigation') {
+            return $menu;
+        }
 
         $menu .= template('woocommerce/mini-cart');
 

diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce-mini-cart.styl b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce-mini-cart.styl
index 1cbcbd622c7d536e8b0049c098e4a42f5e924e78..1af3df5562445a006782cfec56f87e57e596ac58 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce-mini-cart.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce-mini-cart.styl
@@ -1,4 +1,5 @@
 .menu-cart
+  padding: 0
 
   &-icon
     display: block
@@ -11,20 +12,23 @@
   &-link
     position: relative
     display: block
-    padding-bottom: 0
+    padding-bottom: 0.2em;
+    margin-bottom: 0.8em;
+    margin-top: 0.9em;
 
     // Create a larger hover zone for the cart icon to make
     // it easier to touch and keep over when viewing the dropdown
     &:before
       content: ''
       position: absolute
-      height: 100%
-      left: -1em
-      right: @left
+      top: -1em
+      right: @top
+      bottom: @top
+      left: @top
 
 
 .sub-menu-mini-cart
-  padding: 1em 2em 2em 2em
+  padding: 0
   left: unset
   right: -1.7em
   transform: none
@@ -33,26 +37,36 @@
   color: #fff
 
 .woocommerce-mini-cart
-  padding: 0
+  padding: 1em 2em !important
+  max-height: calc(100vh - 54px - 160px) // Screen height - header height + slight overlap - mini-cart footer height
+  overflow-y: auto
+  height: 100%
 
   &__empty-message
-    font-size: 80%
+    padding: 1em 2em
     font-weight: normal
     opacity: 0.5
 
   &__total
     white-space: nowrap
-    margin-top: 1em
+    padding: 1em 2em
+    margin-bottom: 0 !important
+    border-top: 1px solid rgba(#fff, 0.2)
 
   &__buttons
+    padding: 0 2em 1.5em
+
     .button
       border: none
-      display: block
+      display: block !important
       border-radius: 99em
       background-color: $colors.blue
-      padding: 0.7em 1.8em
+      padding: 0.7em 1.8em !important
       white-space: nowrap
       transition: background-color 0.2s
+      line-height: 1
+      font-size: inherit
+      font-weight: 700
 
       &:hover
         background-color: $colors.light-blue !important
@@ -89,7 +103,12 @@
         border-radius: 50%
 
     a
+      display: inline !important
       white-space: nowrap
+      font-weight: inherit !important
+
+      &:hover
+        color: $colors.light-blue
 
     img
       display: none

diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl
index 629313bab3b37e884533eba2b059910823177917..f10fe750394c3c95c22ac8c9f020e09a9e880045 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl
@@ -34,6 +34,11 @@
         margin-bottom: 0.5em
 
   // Button overrides
+  .button
+    &:focus
+      outline: none !important
+      box-shadow: 0 0 0 2px $colors.dark-blue
+
   #respond input#submit,
   a.button, 
   button.button, 
@@ -82,12 +87,15 @@
 
   a.added_to_cart
     padding-top: 0
-    margin-left: 1em
+    margin: 1em
     color: $colors.dark-blue
 
     &:hover
       color: $colors.blue
 
+  .single_add_to_cart_button
+    margin-left: 1.5em !important
+
   // Product grid
   ul.products
     li.product
@@ -96,6 +104,13 @@
       h3
         text-transform: uppercase
 
+      .woocommerce-loop-product__link
+        display: block
+
+        &:focus
+          outline-offset: 0.5em
+          outline: 1px dotted $colors.blue
+
   // Single Product
   div.product
     form.cart
@@ -103,7 +118,21 @@
         margin-right: 0.5em
 
     p.price, span.price
-      margin-bottom: 1.5em
+      margin-bottom: 0.5em
+
+  .woocommerce-product-details__short-description
+    margin-bottom: 1.5em
+
+  // Cart
+  &-cart
+    table.cart
+      td.actions
+        .coupon
+          display: flex
+
+          .input-text
+            width: 10em
+            margin-right: 1em
 
   // Order details
   .woocommerce-order-details
@@ -117,21 +146,57 @@
         margin-top: 0.25em
 
 
+  // Checkout
+  &-checkout
+    #payment
+      background-color: $colors.light-grey
+
+      div.payment_box
+        background-color: darken($colors.light-grey, 5%)
+
+        &:before
+          border-bottom-color: darken($colors.light-grey, 5%)
+
+  form.checkout
+    h3
+      color: $colors.headings
+      font-size: $font-size-medium
+
+  #ship-to-different-address
+    font-size: inherit
+    color: inherit
+
 //=============
 
 // Quantity input -/+ buttons
 .qib-button
+  position: relative
   text-align: center
-
-// Checkout
-form.checkout
-  h3
-    color: $colors.headings
-    font-size: $font-size-medium
-
-#ship-to-different-address
-  font-size: inherit
-  color: inherit
+  color: transparent !important // Hide +/- characters so they can be replaced by better versions
+  user-select: none
+
+  &:before, &:after
+    content: ''
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+    background-color: #444
+
+  &:before
+    height: 1px
+    width: 0.75em
+
+  &:after
+    height: 0.75em
+    width: 1px
+
+  &.minus:after
+    display: none
+
+  &:hover
+    &:before, &:after
+      background-color: #000
 
 
 //=============