Merge pull request #748 from aristath/develop

2.2.4

README.md

@@ -4,7 +4,7 @@
 **Donate link:** http://kirki.org/  
 **Requires at least:** 4.4  
 **Tested up to:** 4.5  
-**Stable tag:** 2.2.3  
+**Stable tag:** 2.2.4  
 **License:** GPLv2 or later  
 **License URI:** http://www.gnu.org/licenses/gpl-2.0.html  
 
@@ -37,6 +37,16 @@ If you want to integrate Kirki in your theme or plugin, please read the instruct
 
 ## Changelog ##
 
+### 2.2.4 ###
+
+March 20, 2016, dev time: 6 hours
+
+* FIX: Removed unnecessary CSS echoed by the `typography` control
+* FIX: Color Calculation class improvements
+* FIX: CSS improvement for `toggle` controls
+* NEW: Added `dashicons` field
+* NEW: Added the ability to limit the number of rows in `repeater` controls (props @fovoc)
+
 ### 2.2.3 ###
 
 March 19, 2016

assets/js/controls/dashicons.js

@@ -0,0 +1,11 @@
+/**
+ * KIRKI CONTROL: RADIO-IMAGE
+ */
+wp.customize.controlConstructor['dashicons'] = wp.customize.Control.extend( {
+	ready: function() {
+		var control = this;
+		this.container.on( 'click', 'input', function() {
+			control.setting.set( jQuery( this ).val() );
+		});
+	}
+});

assets/js/customizer.js

@@ -109,6 +109,17 @@ wp.customize.controlConstructor['color-alpha'] = wp.customize.Control.extend( {
 		});
 	}
 });
+/**
+ * KIRKI CONTROL: RADIO-IMAGE
+ */
+wp.customize.controlConstructor['dashicons'] = wp.customize.Control.extend( {
+	ready: function() {
+		var control = this;
+		this.container.on( 'click', 'input', function() {
+			control.setting.set( jQuery( this ).val() );
+		});
+	}
+});
 /**
  * KIRKI CONTROL: DIMENSION
  */

assets/scss/controls/dashicons.scss

@@ -0,0 +1,35 @@
+/////////////////////
+// dashicons controls
+/////////////////////
+.customize-control-dashicons {
+	label {
+		position: relative;
+		display: inline-block;
+	}
+	.icons-wrapper {
+		max-height: 300px;
+		overflow-y: scroll;
+		h4 {
+			font-weight: 300;
+			margin: .7em 0;
+		}
+		.dashicons {
+			padding: 3px;
+			font-size: 25px;
+			width: 25px;
+			height: 25px;
+			border: 1px solid transparent;
+		}
+		input {
+			display: none;
+			&:checked {
+				+ label {
+					.dashicons {
+						border: 1px solid #3498DB;
+						color: #000;
+					}
+				}
+			}
+		}
+	}
+}

assets/scss/controls/toggle.scss

@@ -2,6 +2,20 @@
 // toggle controls
 /////////////////////
 .customize-control-toggle {
+
+	label {
+		display: flex;
+		flex-wrap: wrap;
+
+		.customize-control-title {
+			width: calc(100% - 55px);
+		}
+
+		.description {
+			order: 99;
+		}
+
+	}
 	input[type="checkbox"] {
 		display: none;
 	}
@@ -62,9 +76,4 @@
 			}
 		}
 	}
-
-	.no-description .customize-control-title {
-		width: calc(100% - 50px);
-		float: left;
-	}
 }

assets/scss/customizer.scss

@@ -7,6 +7,7 @@
 
 @import "controls/checkbox";
 @import "controls/code";
+@import "controls/dashicons";
 @import "controls/dimension";
 @import "controls/number";
 @import "controls/palette";

includes/class-kirki-control.php

@@ -89,6 +89,7 @@ final private function set_control_types() {
 				'code'             => 'Kirki_Controls_Code_Control',
 				'color-alpha'      => 'Kirki_Controls_Color_Alpha_Control',
 				'custom'           => 'Kirki_Controls_Custom_Control',
+				'dashicons'        => 'Kirki_Controls_Dashicons_Control',
 				'dimension'        => 'Kirki_Controls_Dimension_Control',
 				'editor'           => 'Kirki_Controls_Editor_Control',
 				'multicheck'       => 'Kirki_Controls_MultiCheck_Control',