Woocommerce: CSS

nicomollet · Jul 25, 2017 · 6647042 · 6647042
1 parent 92bf24f
commit 6647042
Show file tree

Hide file tree

Showing 12 changed files with 509 additions and 112 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/css/styles.min.css b/css/styles.min.css
diff --git a/scss/application.scss b/scss/application.scss
@@ -82,3 +82,4 @@
 
 
 
+
diff --git a/scss/bootstrap/_alerts.scss b/scss/bootstrap/_alerts.scss
@@ -6,7 +6,7 @@
 // Base styles
 // -------------------------
 
-.alert, .woocommerce-message {
+.alert, .woocommerce-message, .woocommerce-error, .woocommerce-info {
   padding: $alert-padding;
   margin-bottom: $line-height-computed;
   border: 1px solid transparent;
@@ -68,6 +68,7 @@
   @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
 }
 
-.alert-danger {
+.alert-danger, .woocommerce-error {
   @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
 }
+
diff --git a/scss/bootstrap/bootstrap-for-woocommerce.txt b/scss/bootstrap/bootstrap-for-woocommerce.txt
@@ -11,9 +11,7 @@
 .table-hover, .shop_table {}
 
 // forms
-.form-control, #coupon_code{}
 
 // tabs
 .nav, .woocommerce-tabs .tabs {}
-.nav-tabs, .woocommerce-tabs .tabs  {}
-
+.nav-tabs, .woocommerce-tabs .tabs  {}
diff --git a/scss/helpers/_gravityforms.scss b/scss/helpers/_gravityforms.scss
@@ -2,10 +2,6 @@
   @extend .list-unstyled;
 }
 
-.hidden_label > .control-label{
-  display: none;
-}
-
 .form-horizontal{
 
   .control-label{
@@ -34,10 +30,9 @@
 
   &.ginput_container_name{
     span{
-      display: block;
+      display: inline-block;
       vertical-align: top;
       @media (min-width: $screen-sm-min) {
-        display: inline-block;
         padding-right: 16px;
         margin-right: -4px;
       }

diff --git a/scss/helpers/_woocommerce.scss b/scss/helpers/_woocommerce.scss
@@ -16,15 +16,18 @@ Buttons
 /**
 Big buttons
  */
-.wc-proceed-to-checkout, .woocommerce-checkout-payment{
-  .button{
-    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
-    @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
-    display: block;
-    width: 100%;
+.woocommerce{
+  .wc-proceed-to-checkout, .woocommerce-checkout-payment{
+    .button{
+      @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+      @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
+      display: block;
+      width: 100%;
+    }
   }
 }
 
+
 /**
 Alerts / Messages
  */
@@ -35,6 +38,14 @@ Alerts / Messages
   }
 }
 
+.woocommerce-error{
+  list-style: none;
+}
+
+.woocommerce-info{
+  padding: 0;
+}
+
 /**
 Pagination
  */
@@ -50,17 +61,10 @@ Pagination
 
   .page-numbers {
     display: inline; // Remove list-style and block-level defaults
-    @include list-unstyled;
-
-    li{
-      display: inline-block;
-      float: left;
-    }
-
-    a,
-    span {
+     a,
+     span {
       position: relative;
-      //float: left; // Collapse white-space
+      float: left; // Collapse white-space
       padding: $padding-base-vertical $padding-base-horizontal;
       line-height: $line-height-base;
       text-decoration: none;
@@ -70,17 +74,17 @@ Pagination
       margin-left: -1px;
     }
     &:first-child {
-      //margin-left: 0;
+      margin-left: 0;
       @include border-left-radius($border-radius-base);
     }
     &:last-child {
       @include border-right-radius($border-radius-base);
     }
   }
 
-  .page-numbers {
-    a,
-    span {
+  .nav-links {
+     a,
+     span {
       &:hover,
       &:focus {
         color: $pagination-hover-color;
@@ -119,6 +123,9 @@ Forms
   }
 }
 
+#calc_shipping_country, #calc_shipping_postcode{
+  @extend .form-control;
+}
 
 
 

diff --git a/scss/helpers/_woocommerce_checkout.scss b/scss/helpers/_woocommerce_checkout.scss
@@ -17,6 +17,11 @@ All pages
   }
 
 
+  #customer_login{
+    .u-column1, .u-column2{
+      @include make-md-column(6);
+    }
+  }
 }
 
 
@@ -27,6 +32,11 @@ Checkout
 
 .woocommerce-checkout{
 
+
+  .woocommerce-NoticeGroup{
+    @include make-md-column(12);
+  }
+
   #customer_details{
 
   }
@@ -225,12 +235,18 @@ Cart
 
 .woocommerce-cart{
 
+
+  #shipping_method{
+    @include list-unstyled;
+  }
+
   .cart-collaterals{
     @include make-row;
     .cart_totals{
       @include make-sm-column-offset(6);
       @include make-sm-column(6);
     }
+    margin-bottom: $line-height-computed;
   }
 
   table.cart{
@@ -272,6 +288,11 @@ Cart
       width: auto;
     }
   }
+  .checkout_coupon #coupon_code{
+    display: inline-block;
+    width: auto;
+  }
+
   .qty{
     width: 60px;
     @media (min-width: $screen-md-min) {
@@ -302,6 +323,18 @@ Cart
 
 .woocommerce-account {
 
+
+  #customer_login{
+    .control-label, .form-input {
+      @include make-sm-column(6);
+    }
+    .form-actions{
+      //margin-left: 50%;
+      @include make-sm-column(6);
+      @include make-sm-column-offset(6);
+    }
+  }
+
   .edit-account{
     .input-text{
       @extend .form-control;
@@ -334,6 +367,9 @@ Cart
     .woocommerce{
       @include make-row;
     }
+    .woocommerce-error{
+      @include make-sm-column(12);
+    }
     .woocommerce-MyAccount-navigation{
       @include make-sm-column(3);
     }

diff --git a/scss/helpers/_woocommerce_widgets.scss b/scss/helpers/_woocommerce_widgets.scss
@@ -200,7 +200,7 @@ Cart Widget
       &.search {
         .site-search {
           position: absolute;
-          bottom: -4em;
+          bottom: -3em;
           left: 0;
           right: 0;
           @include transition(all,ease,.2s);

diff --git a/woocommerce/global/form-login.php b/woocommerce/global/form-login.php
@@ -0,0 +1,78 @@
+<?php
+/**
+ * Login form
+ *
+ * This template can be overridden by copying it to yourtheme/woocommerce/global/form-login.php.
+ *
+ * HOWEVER, on occasion WooCommerce will need to update template files and you
+ * (the theme developer) will need to copy the new files to your theme to
+ * maintain compatibility. We try to do this as little as possible, but it does
+ * happen. When this occurs the version of the template file will be bumped and
+ * the readme will list any important changes.
+ *
+ * @see           https://docs.woocommerce.com/document/template-structure/
+ * @author        WooThemes
+ * @package       WooCommerce/Templates
+ * @version       3.1.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+if ( is_user_logged_in() ) {
+	return;
+}
+
+?>
+
+<form class="woocomerce-form woocommerce-form-login form form-horizontal login" method="post" <?php echo ( $hidden ) ? 'style="display:none;"' : ''; ?>>
+	<div class="panel panel-primary">
+		<div class="panel-body">
+			<?php do_action( 'woocommerce_login_form_start' ); ?>
+
+			<?php echo ( $message ) ? wpautop( wptexturize( $message ) ) : ''; ?>
+
+			<div class="form-group">
+				<label for="username" class="control-label"><?php _e( 'Username or email', 'woocommerce' ); ?> <span class="required">*</span></label>
+				<div class="form-input">
+				<input type="text" class="form-control" name="username" id="username" />
+
+				</div>
+			</div>
+			<div class="form-group">
+				<label for="password" class="control-label"><?php _e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
+				<div class="form-input">
+					<input class="form-control" type="password" name="password" id="password" />
+				</div>
+			</div>
+
+			<?php do_action( 'woocommerce_login_form' ); ?>
+
+			<div class="form-group">
+				<div class="form-actions">
+					<?php wp_nonce_field( 'woocommerce-login' ); ?>
+					<input type="submit" class="btn btn-primary" name="login" value="<?php esc_attr_e( 'Login', 'woocommerce' ); ?>" />
+					<input type="hidden" name="redirect" value="<?php echo esc_url( $redirect ) ?>" />
+					<label class="woocommerce-form__label woocommerce-form__label-for-checkbox inline">
+						<input class="woocommerce-form__input woocommerce-form__input-checkbox btn btn-primary" name="rememberme" type="checkbox" id="rememberme" value="forever" />
+						<span><?php _e( 'Remember me', 'woocommerce' ); ?></span>
+					</label>
+				</div>
+			</div>
+
+			<div class="form-group">
+				<div class="form-actions">
+					<p class="lost_password">
+						<a class="btn-link" href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?', 'woocommerce' ); ?></a>
+					</p>
+				</div>
+			</div>
+
+
+			<?php do_action( 'woocommerce_login_form_end' ); ?>
+		</div>
+	</div>
+
+</form>
+