More CSS separation #2785

admin/settings/settings-frontend-styles.php

@@ -20,7 +20,6 @@ function woocommerce_frontend_styles_setting() {
 	global $woocommerce;
 	?><tr valign="top" class="woocommerce_frontend_css_colors">
 		<th scope="row" class="titledesc">
-			<label><?php _e( 'Styles', 'woocommerce' ); ?></label>
 		</th>
 	    <td class="forminp"><?php
 

admin/settings/settings-init.php

@@ -201,17 +201,18 @@ $woocommerce_settings['general'] = apply_filters('woocommerce_general_settings',
 	array(	'title' => __( 'Styles and Scripts', 'woocommerce' ), 'type' => 'title', 'id' => 'script_styling_options' ),
 
 	array(
-		'title' => __( 'Appearance', 'woocommerce' ),
-		'desc' 		=> __( 'Enable WooCommerce Appearance CSS', 'woocommerce' ),
-		'id' 		=> 'woocommerce_frontend_css',
+		'title' => __( 'Styles', 'woocommerce' ),
+		'desc' 		=> __( 'Enable WooCommerce Layout CSS', 'woocommerce' ),
+		'id' 		=> 'woocommerce_frontend_css_layout',
+		'desc_tip'	=> __( 'Applies layout to forms, product grids etc.', 'woocommerce' ),
 		'default'	=> 'yes',
 		'type' 		=> 'checkbox'
 	),
 
 	array(
-		'title' => __( 'Layout', 'woocommerce' ),
-		'desc' 		=> __( 'Enable WooCommerce Layout CSS', 'woocommerce' ),
-		'id' 		=> 'woocommerce_frontend_css_layout',
+		'desc' 		=> __( 'Enable WooCommerce Appearance CSS', 'woocommerce' ),
+		'id' 		=> 'woocommerce_frontend_css',
+		'desc_tip'	=> __( 'Applies style/color to buttons, tabs, ratings etc.', 'woocommerce' ),
 		'default'	=> 'yes',
 		'type' 		=> 'checkbox'
 	),

assets/css/woocommerce-layout.less

@@ -178,6 +178,22 @@
 	-------------------------------------------------------------- */
 
 	form {
+		.form-row {
+			.clearfix;
+			label {
+				display:block;
+				&.checkbox {
+					display: inline;
+				}
+			}
+			select {
+				width: 100%;
+			}
+			.input-text {
+				.borderbox;
+				width:100%;
+			}
+		}
 		.form-row-first, .form-row-last {
 			float:left;
 			width: 47%;
@@ -190,5 +206,13 @@
 			clear: both;
 		}
 	}
+
+	#payment {
+		.form-row {
+			select {
+				width:auto;
+			}
+		}
+	}
 }
 

assets/css/woocommerce.less

@@ -1178,7 +1178,6 @@ p.demo_store {
 
 	form {
 		.form-row {
-			.clearfix;
 			padding: 3px;
 			margin: 0 0 6px;
 
@@ -1188,15 +1187,10 @@ p.demo_store {
 				transition: opacity 0.5s 0.5s ease;
 				opacity: 0;
 			}
-
-			label {
-				display:block;
-			}
 			label.hidden {
 				visibility:hidden;
 			}
 			select {
-				width: 100%;
 				cursor: pointer;
 				margin: 0;
 			}
@@ -1211,13 +1205,8 @@ p.demo_store {
 				text-align: center;
 				vertical-align: middle;
 			}
-			label.checkbox {
-				display: inline;
-			}
 			input.input-text, textarea {
-				-webkit-box-sizing:border-box;
-				-moz-box-sizing:border-box;
-				box-sizing:border-box;
+				.borderbox;
 				width: 100%;
 				margin: 0;
 				outline: 0;

woocommerce.php

@@ -1231,16 +1231,15 @@ class Woocommerce {
 		if ( ! defined( 'WOOCOMMERCE_USE_CSS_LAYOUT' ) )
 			define( 'WOOCOMMERCE_USE_CSS_LAYOUT', get_option( 'woocommerce_frontend_css_layout' ) == 'yes' ? true : false );
 
-		if ( WOOCOMMERCE_USE_CSS_APPEARANCE && ! defined( 'WOOCOMMERCE_USE_CSS' ) ) {
-			$css = file_exists( get_stylesheet_directory() . '/woocommerce/style.css' ) ? get_stylesheet_directory_uri() . '/woocommerce/style.css' : $this->plugin_url() . '/assets/css/woocommerce.css';
-			wp_enqueue_style( 'woocommerce_frontend_styles', $css );
-		}
-
 		if ( WOOCOMMERCE_USE_CSS_LAYOUT && ! defined( 'WOOCOMMERCE_USE_CSS' ) ) {
 			$css_layout = file_exists( get_stylesheet_directory() . '/woocommerce/style-layout.css' ) ? get_stylesheet_directory_uri() . '/woocommerce/style-layout.css' : $this->plugin_url() . '/assets/css/woocommerce-layout.css';
 			wp_enqueue_style( 'woocommerce_frontend_styles_layout', $css_layout );
 		}
 
+		if ( WOOCOMMERCE_USE_CSS_APPEARANCE && ! defined( 'WOOCOMMERCE_USE_CSS' ) ) {
+			$css = file_exists( get_stylesheet_directory() . '/woocommerce/style.css' ) ? get_stylesheet_directory_uri() . '/woocommerce/style.css' : $this->plugin_url() . '/assets/css/woocommerce.css';
+			wp_enqueue_style( 'woocommerce_frontend_styles', $css );
+		}
 	}
 
 	/**