version 0.4.0

lib/classes/class-customizer.php

@@ -343,6 +343,8 @@ public function prepare_setting( $i ) {
           'section' => false,
           'control' => false, // values: 'background-image', 'color', 'background-color', 'border-color', 'image'
           'selector' => false,
+          'min_width' => '',
+          'max_width' => '',
           'extra_controls' => false
         ) );
 
@@ -373,6 +375,8 @@ public function prepare_setting( $i ) {
             foreach( $i[ 'extra_controls' ] as $control => $selector ){
               $to_add[ 'control' ] = $control;
               $to_add[ 'selector' ] = $selector;
+              $to_add[ 'min_width' ] = $i[ 'min_width' ];
+              $to_add[ 'max_width' ] = $i[ 'max_width' ];
               $to_parse[] = $to_add;
             }
           }
@@ -382,12 +386,24 @@ public function prepare_setting( $i ) {
 
           foreach( $to_parse as $i ){
             //** Add CSS rules */
+            $media_query = '';
+            if ( ! empty( $i['min_width'] ) || ! empty( $i['max_width'] ) ) {
+              $media_query .= 'only screen and';
+              if ( ! empty( $i['min_width'] ) ) {
+                $media_query .= ' (min-width: ' . $i['min_width'] . ')';
+              }
+              if ( ! empty( $i['max_width'] ) ) {
+                $media_query .= ' (max-width: ' . $i['max_width'] . ')';
+              }
+            }
+
             $rule = array(
               'mod_name' => $i[ 'key' ],
               'selector' => $i[ 'selector' ],
               'style' => false,
               'prefix' => '',
               'postfix' => '',
+              'media_query' => $media_query,
               'type' => 'style', // style, image
               'important' => true, // must default to true for backwards compatibility
             );
@@ -470,7 +486,8 @@ public function generate_css( $args ) {
           'style' => '',
           'mod_name' => '',
           'prefix' => '',
-          'postfix' => ''
+          'postfix' => '',
+          'media_query' => '',
         ) ) );
         $return = '';
         $mod = get_theme_mod( $mod_name );
@@ -483,12 +500,16 @@ public function generate_css( $args ) {
 
 
         if ( ! empty( $mod ) ) {
-           $return = sprintf( '%s { %s: %s%s; }' . "\r\n",
-              $selector,
-              $style,
-              $prefix.$mod.$postfix,
-              $important ? ' !important' : ''
-           );
+          $return = sprintf( '%s { %s: %s%s; }' . "\r\n",
+            $selector,
+            $style,
+            $prefix.$mod.$postfix,
+            $important ? ' !important' : ''
+          );
+
+          if ( is_string( $media_query ) && ! empty( trim( $media_query ) ) ) {
+            $return = '@media ' . $media_query . ' { ' . $return . ' } ';
+          }
         }
         return $return;
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-wp-theme",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "private": true,
   "repository": {
     "type": "git",

scripts/src/udx.wp.customizer.js

@@ -35,6 +35,9 @@
         for ( var i in c ) {
           v += c[ i ].selector + ' { ' + c[ i ].style + ':' + c[ i ].prefix + style + c[ i ].postfix + ' !important; } ';
         }
+        if ( typeof c[0].media_query === 'string' && c[0].media_query.trim() !== '' ) {
+          v = '@media ' + c[0].media_query + ' { ' + v + ' } ';
+        }
       }
       $( 'head #lib_wp_theme_customizer_' + mod_name ).text( v );
     }