Update form action icon color.

Author: rvdsteege

Gruntfile.js

@@ -85,13 +85,19 @@ module.exports = function( grunt ) {
 			]
 		},
 
-		// Compass
-		compass: {
-			build: {
+		// Sass
+		sass: {
+			dist: {
 				options: {
-					sassDir: 'scss',
-					cssDir: 'css'
-				}
+					implementation: require('sass'),
+					sourceMap: true
+				},
+
+				processors: [
+					require('autoprefixer')({ overrideBrowserslist: ['last 2 versions'] })
+				],
+
+				files: { 'css/admin.css': 'scss/admin.scss' }
 			}
 		},
 
@@ -104,7 +110,7 @@ module.exports = function( grunt ) {
 				},
 
 				processors: [
-					require( 'autoprefixer' )( { browsers: 'last 2 versions' } )
+					require('autoprefixer')({ overrideBrowserslist: ['last 2 versions'] })
 				]
 			},
 			dist: {
@@ -124,5 +130,5 @@ module.exports = function( grunt ) {
 
 	// Default task(s).
 	grunt.registerTask( 'default', [ 'jshint', 'phplint', 'phpmd', 'phpcs', 'phpunit' ] );
-	grunt.registerTask( 'assets', [ 'sasslint', 'jshint', 'uglify', 'compass', 'postcss', 'cssmin' ] );
+	grunt.registerTask( 'assets', [ 'sasslint', 'jshint', 'uglify', 'sass', 'postcss', 'cssmin' ] );
 };

css/admin.css

@@ -1,35 +1,29 @@
-/* line 1, ../scss/admin.scss */
 .pronamic-pay-formidable-icon {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU2IDBjMTQxLjM4NSAwIDI1NiAxMTQuNjE1IDI1NiAyNTZTMzk3LjM4NSA1MTIgMjU2IDUxMmMtNDguODUgMC05NC41MDQtMTMuNjgyLTEzMy4zNC0zNy40MjRMMTc0LjU1OCAzODRoOTIuOTg4YzcwLjY5MyAwIDEyOC01Ny4zMDggMTI4LTEyOCAwLTcwLjY5Mi01Ny4zMDctMTI4LTEyOC0xMjhoLTQ2LjY4MmMtMTUuMjQ4IDAtMjcuNjA4IDEyLjM2LTI3LjYwOCAyNy42MDggMCAxNS4yNDcgMTIuMzYgMjcuNjA4IDI3LjYwOCAyNy42MDhoNDYuNjgyYzQwLjE5OCAwIDcyLjc4NCAzMi41ODYgNzIuNzg0IDcyLjc4NCAwIDQwLjE5OC0zMi41ODYgNzIuNzg0LTcyLjc4NCA3Mi43ODRIMTY3LjE1M2MtMTIuODY5IDAtMjMuNjgxIDguODA1LTI2Ljc0MSAyMC43MmEyOCAyOCAwIDAwLS42MDYgMS45NjZsLTMwLjYyMiAxMTQuMjczQzQzLjE2MSA0MTkuNDQzIDAgMzQyLjc2MiAwIDI1NiAwIDExNC42MTUgMTE0LjYxNSAwIDI1NiAwem0xMS41NDUgMjIwLjg2M2gtNjUuNzU3Yy0xOS40MDYgMC0zNS4xMzcgMTUuNzMxLTM1LjEzNyAzNS4xMzdzMTUuNzMxIDM1LjEzNyAzNS4xMzcgMzUuMTM3aDY1Ljc1N2MxOS40MDYgMCAzNS4xMzctMTUuNzMxIDM1LjEzNy0zNS4xMzdzLTE1LjczMS0zNS4xMzctMzUuMTM3LTM1LjEzN3oiIGZpbGw9IiMxQTFCNDYiLz48L3N2Zz4=");
   display: inline-block;
   background-repeat: no-repeat;
   vertical-align: middle;
 }
 
-/* line 11, ../scss/admin.scss */
 .frm_pronamic_pay_action span .frm-inner-circle.frm-inverse {
   background-color: #ffb200;
 }
 
-/* line 22, ../scss/admin.scss */
 .frm_email_settings .frm_single_pronamic_pay_settings .widget-title .frm_form_action_icon .pronamic-pay-formidable-icon {
   width: 24px;
   height: 24px;
-  -webkit-filter: invert(100%) saturate(0%) contrast(85%);
-          filter: invert(100%) saturate(0%) contrast(85%);
+  -webkit-filter: invert(100%) saturate(100%) contrast(40%) hue-rotate(150deg) brightness(95%);
+          filter: invert(100%) saturate(100%) contrast(40%) hue-rotate(150deg) brightness(95%);
 }
-/* line 32, ../scss/admin.scss */
 .frm_email_settings .frm_single_pronamic_pay_settings:hover .frm_form_action_icon .pronamic-pay-formidable-icon {
-  -webkit-filter: invert(100%) saturate(0%) contrast(20%);
-          filter: invert(100%) saturate(0%) contrast(20%);
+  -webkit-filter: invert(100%) saturate(100%) contrast(40%) hue-rotate(150deg) brightness(70%);
+          filter: invert(100%) saturate(100%) contrast(40%) hue-rotate(150deg) brightness(70%);
 }
 
-/* line 42, ../scss/admin.scss */
-.edit_field_type_pronamic_payment_method_select input[type='pronamic_payment_method_select'] {
+.edit_field_type_pronamic_payment_method_select input[type=pronamic_payment_method_select] {
   display: none !important;
 }
-/* line 47, ../scss/admin.scss */
 .edit_field_type_pronamic_payment_method_select .pronamic-pay-formidable-eip-disable {
   color: #aaa;
   cursor: default;
-}
+}

css/admin.css.map

@@ -34,9 +34,8 @@
   "homepage": "http://www.wp-pay.org/extensions/formidable-forms/",
   "devDependencies": {
     "@wordpress/env": "^10.30.0",
-    "autoprefixer": "^10.2.1",
-    "grunt": "^1.3.0",
-    "grunt-contrib-compass": "^1.1.1",
+    "autoprefixer": "^9.8.8",
+    "grunt": "^1.6.1",
     "grunt-contrib-cssmin": "^3.0.0",
     "grunt-contrib-jshint": "^3.0.0",
     "grunt-contrib-uglify": "^5.0.0",
@@ -45,6 +44,7 @@
     "grunt-phpmd": "^0.1.1",
     "grunt-phpunit": "^0.3.6",
     "grunt-postcss": "^0.9.0",
+    "grunt-sass": "^4.0.0",
     "grunt-sass-lint": "^0.2.4",
     "load-grunt-tasks": "^5.1.0"
   },

css/admin.min.css

@@ -22,15 +22,15 @@
 				.pronamic-pay-formidable-icon {
 					width: 24px;
 					height: 24px;
-					filter: invert(100%) saturate(0%) contrast(85%);
+					filter: invert(100%) saturate(100%) contrast(40%) hue-rotate(150deg) brightness(95%);
 				}
 			}
 		}
 
 		&:hover {
 			.frm_form_action_icon {
 				.pronamic-pay-formidable-icon {
-					filter: invert(100%) saturate(0%) contrast(20%);
+					filter: invert(100%) saturate(100%) contrast(40%) hue-rotate(150deg) brightness(70%);
 				}
 			}
 		}