Clean-up _wc_cart.scss

bootscore · Jul 30, 2023 · ff1be80 · ff1be80
1 parent 1a51736
commit ff1be80
Showing 1 changed file with 59 additions and 90 deletions.
diff --git a/scss/bootscore_woocommerce/_wc_cart.scss b/scss/bootscore_woocommerce/_wc_cart.scss
@@ -2,11 +2,38 @@
 WooCommerce Cart
 --------------------------------------------------------------*/
 
-// Cart totals
-.woocommerce .cart-collaterals .cart_totals,
-.woocommerce-page .cart-collaterals .cart_totals {
-  //float: none;
-  //width: 100%;
+// Remove btn
+.woocommerce {
+
+  // Hide the "x"
+  a.remove {
+    position: relative;
+    text-indent: -9999px;
+    border: 0;
+
+    &:hover {
+      background: none;
+    }
+
+    // Add a Fontawesome trash icon instead
+    &::before {
+      content: ' ';
+      text-indent: 0;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translate(0, -50%);
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons%2c Inc. --%3e%3cpath d='M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3e%3c/svg%3e");
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons%2c Inc. --%3e%3cpath d='M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3e%3c/svg%3e");
+      width: $font-size-base;
+      height: $font-size-base;
+      background-color: var(--bscore-remove-invalid, var(--#{$prefix}danger));
+    }
+  }
 }
 
 
@@ -36,7 +63,6 @@ WooCommerce Cart
     ul#shipping_method {
       clear: both;
       text-align: left;
-      //margin: 2rem 0 0 0 !important;
       margin-top: $spacer *2;
     }
 
@@ -51,107 +77,50 @@ WooCommerce Cart
 }
 
 
-// Proceed to checkout btn
-.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
-  @extend .btn-lg;
-  display: block;
-}
-
-
-
-
-
-
-
-
-
+// Coupon
+.woocommerce-cart {
+  table.cart td.actions .coupon .input-text {
 
+    // Override WooCommerce form CSS
+    margin: 0;
+    padding: $input-padding-y $input-padding-x;
+    border: $input-border-width solid $input-border-color;
 
+    // Add border-radius to form because first hidden item inside the input-group is the label
+    border-top-left-radius: $input-border-radius !important;
+    border-bottom-left-radius: $input-border-radius !important;
+  }
 
-// Remove btn
-.woocommerce {
+  .coupon {
+    @extend .input-group;
 
-  // Hide the "x"
-  a.remove {
-    position: relative;
-    text-indent: -9999px;
-    border: 0;
-
-    &:hover {
-      background: none;
+    input {
+      @extend .form-control;
     }
 
-    // Add a Fontawesome trash icon instead
-    &::before {
-      content: ' ';
-      text-indent: 0;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      transform: translate(0, -50%);
-
-      mask-position: center;
-      mask-repeat: no-repeat;
-      mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons%2c Inc. --%3e%3cpath d='M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3e%3c/svg%3e");
-
-      -webkit-mask-position: center;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons%2c Inc. --%3e%3cpath d='M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3e%3c/svg%3e");
-
-      width: $font-size-base;
-      height: $font-size-base;
-      background-color: var(--bscore-remove-invalid, var(--#{$prefix}danger));
+    button {
+      @extend .input-group-text;
     }
   }
-}
-
-
-@media (min-width: 769px) {
-  .woocommerce-cart .coupon {
-    width: 300px;
-  }
-}
-
-// Coupon
-.woocommerce-cart table.cart td.actions .coupon .input-text {
-
-  // Override WooCommerce CSS
-  margin: 0;
-  padding: $input-padding-y $input-padding-x;
-  border: $input-border-width solid $input-border-color;
-
-  // Add border-radius to form because first hidden item inside the input-group is the label
-  border-top-left-radius: $input-border-radius !important;
-  border-bottom-left-radius: $input-border-radius !important;
-}
 
-
-.woocommerce-cart .coupon {
-  @extend .input-group;
-
-
-
-  input {
-    @extend .form-control;
+  // WooCommerce breakpoints are at 769px
+  @media (min-width: 769px) {
+    .coupon {
+      width: 400px;
+    }
   }
-
-
-
-  button {
-    @extend .input-group-text;
-    //background: green;
-
+
+  // Proceed to checkout btn
+  .wc-proceed-to-checkout a.checkout-button {
+    @extend .btn-lg;
+    display: block;
   }
-
 }
 
 
 // Update cart button
-//button[name="update_cart"]
-
 :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:disabled,
 :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:disabled[disabled] {
   padding: #{$btn-padding-y} #{$btn-padding-x};
-  //color: var(--#{$prefix}-primary) !important;
   color: var(--#{$prefix}primary);
 }