├── screenshot-1.png ├── screenshot-2.png ├── license.txt ├── composer.json ├── readme.md ├── readme.txt ├── acf-flexible-content-modal.php ├── acf └── 5.6 │ ├── style.css │ └── script.js ├── script.js └── style.css /screenshot-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edirpedro/acf-flexible-content-modal/HEAD/screenshot-1.png -------------------------------------------------------------------------------- /screenshot-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edirpedro/acf-flexible-content-modal/HEAD/screenshot-2.png -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | ACF Flexible Content Modal is free software: you can redistribute it and/or modify 2 | it under the terms of the GNU General Public License as published by 3 | the Free Software Foundation, either version 2 of the License, or 4 | any later version. 5 | 6 | ACF Flexible Content Modal is distributed in the hope that it will be useful, 7 | but WITHOUT ANY WARRANTY; without even the implied warranty of 8 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 9 | GNU General Public License for more details. 10 | 11 | You should have received a copy of the GNU General Public License 12 | along with ACF Flexible Content Modal. If not, see https://www.gnu.org/licenses/gpl-2.0.html. -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "edirpedro/acf-flexible-content-modal", 3 | "type": "wordpress-plugin", 4 | "license": "MIT", 5 | "description": "Make ACF Flexible Content editing the content of each layout using a Modal window.", 6 | "homepage": "https://github.com/edirpedro/acf-flexible-content-modal", 7 | "support": { 8 | "issues": "https://github.com/edirpedro/acf-flexible-content-modal/issues", 9 | "source": "https://github.com/edirpedro/acf-flexible-content-modal.git" 10 | }, 11 | "authors": [ 12 | { 13 | "name": "Edir Pedro", 14 | "email": "edirps@gmail.com", 15 | "homepage": "https://github.com/edirpedro" 16 | } 17 | ], 18 | "keywords": [ 19 | "acf", 20 | "advanced custom fields", 21 | "flexible content" 22 | ], 23 | "prefer-stable": true, 24 | "require": { 25 | "composer/installers": "^1.0", 26 | "php": ">=5.2.0" 27 | } 28 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # ACF Flexible Content Modal 2 | 3 | [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=S3LJ44E4W8HRJ) 4 | 5 | > Make ACF Flexible Content editing the content of each layout using a Modal window. 6 | 7 | ## Description 8 | 9 | The button to collapse the layout's elements will be changed to a Edit button, the fields will be opened inside a Modal windows. This will let you order the list of layouts easily and to fill the fields separately. 10 | 11 | [Plugin Page](https://wordpress.org/plugins/acf-flexible-content-modal/) 12 | 13 | ## Screenshots 14 | 15 | Free layouts list to order easily. 16 | 17 | ![Screenshot](https://raw.githubusercontent.com/edirpedro/acf-flexible-content-modal/master/screenshot-1.png) 18 | 19 | Modal window to fill the contents. 20 | 21 | ![Screenshot](https://raw.githubusercontent.com/edirpedro/acf-flexible-content-modal/master/screenshot-2.png) 22 | 23 | ## FAQ 24 | 25 | ### How to name each flexible content layout? 26 | 27 | If you want to name each of the flexible content layout, you can use the ACF hook [acf/fields/flexible_content/layout_title](https://www.advancedcustomfields.com/resources/acf-fields-flexible_content-layout_title/). 28 | 29 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | === Plugin Name === 2 | Contributors: edir 3 | Tags: acf, advanced-custom-field, flexible-content 4 | Requires at least: 4.5.2 5 | Tested up to: 5.0.3 6 | Stable tag: 1.2.3 7 | License: GPLv2 or later 8 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 9 | 10 | Make ACF Flexible Content editing the content of each layout using a Modal window. 11 | 12 | == Description == 13 | 14 | Make ACF Flexible Content editing the content of each layout using a Modal window. 15 | 16 | The button to collapse the layout's elements will be replaced to a Edit button, the fields will be opened inside a Modal window. This will let you order the list of layouts easily and to fill the fields separately. 17 | 18 | == Installation == 19 | 20 | 1. Upload the plugin files to the `/wp-content/plugins/acf-fc-modal` directory, or install the plugin through the WordPress plugins screen directly. 21 | 2. Activate the plugin through the 'Plugins' screen in WordPress 22 | 23 | == Frequently Asked Questions == 24 | 25 | = How to name each flexible content layout? = 26 | 27 | If you want to name each of the flexible content layout, you can use the ACF hook [acf/fields/flexible_content/layout_title](https://www.advancedcustomfields.com/resources/acf-fields-flexible_content-layout_title/). 28 | 29 | == Screenshots == 30 | 31 | 1. Free layouts list to order easily. 32 | 2. Modal window to fill the contents. 33 | 34 | == Changelog == 35 | 36 | = 1.2.3 = 37 | * Highlight layout field when modal is closed 38 | * Open modal when layout field is clicked 39 | 40 | = 1.2.2 = 41 | * Fixed bug with cloned FC's. 42 | 43 | = 1.2.1 = 44 | * All Flexible Content fields can open in a modal, even nested fields. 45 | * Fixed action to refresh layout_title hook. 46 | * Pressing ESC makes the modal to close. 47 | * Some CSS changes. 48 | 49 | = 1.2 = 50 | * Rebuild to support ACF 5.7 and organize the code. 51 | * Adding a new layout now pops up the modal from that layout (ACF 5.7+). 52 | 53 | = 1.1.5 = 54 | * Added a feature to indicate which FC layout field have error messages. 55 | 56 | = 1.1.4 = 57 | * Fixed ACF Tooltips and Popups. 58 | * Fixed modal overlay hiding some elements like editor dropdown. 59 | 60 | = 1.1.2 = 61 | * Nested FC bugfix. 62 | * Edit button fix for ACF 5.5. 63 | 64 | = 1.1 = 65 | * Limit width of the modal window to do not create too large fields. 66 | * All layouts starts collapsed when open the page to edit. 67 | 68 | = 1.0 = 69 | * First release 70 | -------------------------------------------------------------------------------- /acf-flexible-content-modal.php: -------------------------------------------------------------------------------- 1 | version, '5.7.0', '<')) 37 | self::$path = '/acf/5.6'; 38 | } 39 | 40 | // Hooks 41 | add_action('init', array(__CLASS__, 'theme_css')); 42 | add_action('init', array(__CLASS__, 'theme_script')); 43 | add_action('admin_init', array(__CLASS__, 'admin_css'), 1, 999); 44 | add_action('admin_init', array(__CLASS__, 'admin_script'),1, 999); 45 | 46 | } 47 | 48 | /* 49 | * Process plugin activation 50 | */ 51 | static public function activate() { 52 | 53 | } 54 | 55 | /* 56 | * Process plugin deactivation 57 | */ 58 | static public function deactivate() { 59 | 60 | } 61 | 62 | /* 63 | * Register Admin Stylesheets 64 | */ 65 | static public function admin_css() { 66 | wp_enqueue_style('acf-fc-modal', plugins_url(self::$path . '/style.css', __FILE__), array('acf-pro-input')); 67 | } 68 | 69 | /* 70 | * Register Admin Scripts 71 | */ 72 | static public function admin_script() { 73 | wp_enqueue_script('acf-fc-modal', plugins_url(self::$path . '/script.js', __FILE__), array('acf-pro-input')); 74 | } 75 | 76 | /* 77 | * Register Theme Stylesheets 78 | */ 79 | static public function theme_css() { 80 | 81 | } 82 | 83 | /* 84 | * Register Theme Scripts 85 | */ 86 | static public function theme_script() { 87 | 88 | } 89 | 90 | } 91 | 92 | // Activating 93 | register_activation_hook(__FILE__, array('ACFFCM', 'activate')); 94 | 95 | // Deactivating 96 | register_deactivation_hook(__FILE__, array('ACFFCM', 'deactivate')); 97 | 98 | // Initialize 99 | add_action('init', array('ACFFCM', 'init')); 100 | -------------------------------------------------------------------------------- /acf/5.6/style.css: -------------------------------------------------------------------------------- 1 | 2 | /* ACF Core 3 | ------------------------------------------------------------*/ 4 | .acf-flexible-content .layout .acf-fc-modal-content > .acf-table { 5 | border: 0 none; 6 | box-shadow: none; 7 | } 8 | .acf-flexible-content .layout .acf-fc-modal-content > .acf-table > tbody > tr { 9 | background: #fff; 10 | } 11 | .acf-flexible-content .layout .acf-fc-modal-content > .acf-table > thead > tr > th { 12 | background: #F9F9F9; 13 | } 14 | .acf-repeater .acf-row.-collapsed .acf-fc-modal-content > .acf-fields > * { 15 | display: none !important; 16 | } 17 | .acf-repeater .acf-row.-collapsed .acf-fc-modal-content > .acf-fields > .acf-field.-collapsed-target { 18 | display: block !important; 19 | } 20 | 21 | .acf-tooltip, 22 | .acf-fc-popup { 23 | z-index: 10002 !important; 24 | } 25 | 26 | /* All collapsed */ 27 | .acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fc-layout-handle { 28 | border-bottom-width: 0; 29 | } 30 | .acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fields, 31 | .acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-table { 32 | display: none; 33 | } 34 | 35 | /* Modal 36 | ------------------------------------------------------------*/ 37 | body.acf-modal-open { 38 | overflow: hidden; 39 | } 40 | 41 | #acf-flexible-content-modal-overlay { 42 | background: #000; 43 | opacity: 0.7; 44 | filter: alpha(opacity=70); 45 | position: fixed; 46 | top: 0; 47 | right: 0; 48 | bottom: 0; 49 | left: 0; 50 | z-index: 10000; 51 | } 52 | 53 | .acf-flexible-content .layout.-modal { 54 | z-index: 10001; 55 | position: fixed !important; 56 | top: 5vh !important; 57 | left: 0 !important; 58 | right: 0 !important; 59 | margin: auto; 60 | width: 90vw; 61 | max-width: 960px; 62 | max-height: 90vh; 63 | box-shadow: 0 5px 15px rgba(0,0,0,0.7); 64 | } 65 | 66 | .acf-flexible-content .layout > .acf-fc-modal-content { 67 | display: none; 68 | } 69 | 70 | .acf-flexible-content .layout.-modal > .acf-fc-modal-content { 71 | display: block; 72 | overflow: auto; 73 | max-height: calc(90vh - 38px); 74 | } 75 | 76 | .acf-flexible-content .layout .acf-fc-modal-title { 77 | display: none; 78 | box-sizing: border-box; 79 | height: 37px; 80 | line-height: 37px; 81 | padding: 0 10px; 82 | background: #eee; 83 | border-bottom: 1px solid #dfdfdf; 84 | } 85 | 86 | .acf-flexible-content .layout .acf-fc-modal-title > .acf-icon { 87 | float: right; 88 | top: 4px; 89 | } 90 | 91 | .acf-flexible-content .layout .acf-fc-modal-title > .acf-fc-layout-order { 92 | background: #ddd; 93 | } 94 | 95 | .acf-flexible-content .layout.-modal .acf-fc-modal-title { 96 | display: block; 97 | } 98 | 99 | .acf-flexible-content .layout.-modal > .acf-fc-layout-controlls, 100 | .acf-flexible-content .layout.-modal > .acf-fc-layout-handle { 101 | display: none; 102 | } 103 | 104 | .acf-flexible-content .layout.fc-modal > .acf-fc-layout-handle { 105 | border: none !important; 106 | } 107 | 108 | .acf-icon.-pencil:before { 109 | font-size: 12px; 110 | } 111 | 112 | .acf-flexible-content .layout.layout-error-messages > .acf-fc-layout-handle .acf-fc-layout-order { 113 | background: #F55E4F; 114 | color: #fff; 115 | } -------------------------------------------------------------------------------- /acf/5.6/script.js: -------------------------------------------------------------------------------- 1 | 2 | jQuery(document).ready(function() { 3 | 4 | try { 5 | 6 | // Add Elements button 7 | var acf_fc_render = acf.fields.flexible_content.render; 8 | acf.fields.flexible_content.render = function() { 9 | acf_fc_modal_init(); 10 | acf_fc_modal_handle_validation(); 11 | return acf_fc_render.apply(this, arguments); 12 | } 13 | 14 | // ACF FC Modal 15 | acf_fc_modal_init(); 16 | 17 | } catch(e) {} 18 | 19 | }); 20 | 21 | // Init Modal 22 | function acf_fc_modal_init() { 23 | 24 | jQuery('.acf-flexible-content .layout:not(.acf-clone)').each(function() { 25 | var layout = jQuery(this); 26 | 27 | // Ignoring if it is a nested FC 28 | if(layout.parents('.acf-fields').length > 1) 29 | return true; 30 | else 31 | layout.addClass('fc-modal'); 32 | 33 | // Remove Toggle button and click event 34 | layout.find('> .acf-fc-layout-handle').off('click'); 35 | layout.find('> .acf-fc-layout-controlls > li:last-child').remove(); // ACF 5.4 36 | layout.find('> .acf-fc-layout-controlls > a:last-child').remove(); // ACF 5.5 37 | 38 | // Edit button 39 | var controls = layout.find('> .acf-fc-layout-controlls'); 40 | if(controls.is('ul')) 41 | controls.append('
    • '); 42 | else 43 | controls.append(''); 44 | layout.find('> .acf-fc-layout-controlls a.-pencil').on('click', acf_fc_modal_open); 45 | 46 | // Add modal elements 47 | if(layout.find('> .acf-fc-modal-title').length == 0) { 48 | layout.prepend('
    '); 49 | layout.find('> .acf-fields, > .acf-table').wrapAll('
    '); 50 | } 51 | 52 | }); 53 | 54 | } 55 | 56 | // Open Modal 57 | function acf_fc_modal_open() { 58 | var layout = jQuery(this).parents('.layout'); 59 | if(!layout.hasClass('-modal')) { 60 | layout.removeClass('-collapsed'); 61 | var caption = layout.find('> .acf-fc-layout-handle').html(); 62 | layout.find('.acf-fc-modal-title').html(caption + ''); 63 | layout.addClass('-modal'); 64 | jQuery("body").append("
    "); 65 | jQuery("#acf-flexible-content-modal-overlay").click(acf_fc_modal_remove); 66 | jQuery('body').addClass('acf-modal-open'); 67 | } 68 | } 69 | 70 | // Close Modal 71 | function acf_fc_modal_remove() { 72 | jQuery('body').removeClass('acf-modal-open'); 73 | jQuery('.acf-flexible-content .layout.-modal > .acf-fc-layout-handle').click(); // To reload layout title 74 | jQuery('.acf-flexible-content .layout').removeClass('-modal'); 75 | jQuery("#acf-flexible-content-modal-overlay").remove(); 76 | } 77 | 78 | // Indicate after validation failures 79 | function acf_fc_modal_handle_validation() { 80 | 81 | acf.add_action('validation_begin', function() { 82 | jQuery('.acf-flexible-content .layout').removeClass('layout-error-messages'); 83 | }); 84 | 85 | acf.add_action('add_field_error', function($field) { 86 | $field.parents('.layout:not(.acf-clone)').addClass('layout-error-messages'); 87 | }); 88 | 89 | acf.add_action('remove_field_error', function($field) { 90 | $field.parents('.layout:not(.acf-clone)').each(function() { 91 | var layout = jQuery(this); 92 | if(layout.find('.acf-error').length == 0) 93 | layout.removeClass('layout-error-messages'); 94 | }); 95 | }); 96 | 97 | } 98 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | var ACFFCM = { 4 | 5 | modals: [], 6 | 7 | init: function() { 8 | 9 | if(typeof acf === 'undefined') { 10 | console.error('ACF JavaScript library not found!'); 11 | return false; 12 | } 13 | 14 | // Add modal to current layouts 15 | 16 | acf.addAction('load_field/type=flexible_content', function(field) { 17 | field.$el.find('.acf-flexible-content:first > .values > .layout:not(.fc-modal)').each(function() { 18 | ACFFCM.addModal($(this)); 19 | }); 20 | }); 21 | 22 | // Add modal to new layouts 23 | 24 | acf.addAction('after_duplicate', function($clone, $el) { 25 | if($el.is('.layout')) 26 | ACFFCM.addModal($el); 27 | }); 28 | 29 | // Automatically open the new layout after append it, to improve usability 30 | 31 | acf.addAction('append', function($el) { 32 | if($el.is('.layout')) 33 | $el.find('> .acf-fc-layout-controls a.-pencil').trigger('click'); 34 | }); 35 | 36 | // Point error messages inside FC 37 | 38 | acf.addAction('invalid_field', function(field) { 39 | ACFFCM.invalidField(field.$el); 40 | }); 41 | 42 | // Remove error messages 43 | 44 | acf.addAction('valid_field', function(field) { 45 | ACFFCM.validField(field.$el); 46 | }); 47 | 48 | // Pressing ESC makes the modal to close 49 | 50 | $(document).keyup(function(e) { 51 | if(e.keyCode == 27 && $('body').hasClass('acf-modal-open')) 52 | ACFFCM.close(); 53 | }); 54 | 55 | }, 56 | 57 | addModal: function($layout) { 58 | 59 | $layout.addClass('fc-modal'); 60 | $layout.removeClass('-collapsed'); 61 | 62 | // Remove collapse button and click event 63 | 64 | $layout.find('> .acf-fc-layout-handle').off('click'); 65 | $layout.find('> .acf-fc-layout-controls > a.-collapse').remove(); 66 | 67 | // Open modal when the collapsed layout is clicked 68 | 69 | $layout.find('> .acf-fc-layout-handle').on('click', ACFFCM.open); 70 | 71 | // Edit button 72 | 73 | var edit = $('    '); 74 | edit.on('click', ACFFCM.open); 75 | $layout.find('> .acf-fc-layout-controls').append(edit); 76 | 77 | // Add modal elements 78 | 79 | $layout.prepend('
    '); 80 | $layout.find('> .acf-fields, > .acf-table').wrapAll('
    '); 81 | 82 | }, 83 | 84 | open: function() { 85 | 86 | var $layout = $(this).parents('.layout:first'); 87 | 88 | var caption = $layout.find('> .acf-fc-layout-handle').html(); 89 | var a = $('').on('click', ACFFCM.close); 90 | 91 | $layout.find('> .acf-fc-modal-title').html(caption).append(a); 92 | $layout.addClass('-modal'); 93 | 94 | ACFFCM.modals.push($layout); 95 | 96 | ACFFCM.overlay(true); 97 | 98 | }, 99 | 100 | close: function() { 101 | 102 | var $layout = ACFFCM.modals.pop(); 103 | 104 | // Refresh layout title 105 | 106 | var fc = $layout.parents('.acf-field-flexible-content:first'); 107 | var field = acf.getInstance(fc); 108 | field.closeLayout(field.$layout($layout.index())); 109 | 110 | // Close 111 | 112 | $layout.find('> .acf-fc-modal-title').html(' '); 113 | $layout.removeClass('-modal').css('visibility', ''); 114 | $layout.addClass('-highlight-closed'); 115 | 116 | setTimeout(function() { 117 | $layout.removeClass('-highlight-closed'); 118 | }, 750); 119 | 120 | ACFFCM.overlay(false); 121 | 122 | }, 123 | 124 | overlay: function(show) { 125 | 126 | if(show === true && !$('body').hasClass('acf-modal-open')) { 127 | 128 | var overlay = $('
    ').on('click', ACFFCM.close); 129 | $('body').addClass('acf-modal-open').append(overlay); 130 | 131 | } else if(show === false && ACFFCM.modals.length == 0) { 132 | 133 | $('#acf-flexible-content-modal-overlay').remove(); 134 | $('body').removeClass('acf-modal-open'); 135 | 136 | } 137 | 138 | ACFFCM.refresh(); 139 | 140 | }, 141 | 142 | refresh: function() { 143 | 144 | $.each(ACFFCM.modals, function() { 145 | $(this).css('visibility', 'hidden').removeClass('-animate'); 146 | }); 147 | 148 | var index = ACFFCM.modals.length - 1; 149 | 150 | if(index in ACFFCM.modals) 151 | ACFFCM.modals[index].css('visibility', 'visible').addClass('-animate'); 152 | 153 | }, 154 | 155 | invalidField: function($el) { 156 | 157 | $el.parents('.layout').addClass('layout-error-messages'); 158 | 159 | }, 160 | 161 | validField: function($el) { 162 | 163 | $el.parents('.layout').each(function() { 164 | var $layout = $(this); 165 | if($layout.find('.acf-error').length == 0) 166 | $layout.removeClass('layout-error-messages'); 167 | }); 168 | 169 | } 170 | 171 | }; 172 | 173 | ACFFCM.init(); 174 | 175 | })(jQuery); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | /* ACF Core 3 | ------------------------------------------------------------*/ 4 | 5 | .acf-flexible-content .layout .acf-fc-modal-content > .acf-table { 6 | border: 0 none; 7 | box-shadow: none; 8 | } 9 | .acf-flexible-content .layout .acf-fc-modal-content > .acf-table > tbody > tr { 10 | background: #fff; 11 | } 12 | .acf-flexible-content .layout .acf-fc-modal-content > .acf-table > thead > tr > th { 13 | background: #F9F9F9; 14 | } 15 | .acf-repeater .acf-row.-collapsed .acf-fc-modal-content > .acf-fields > * { 16 | display: none !important; 17 | } 18 | .acf-repeater .acf-row.-collapsed .acf-fc-modal-content > .acf-fields > .acf-field.-collapsed-target { 19 | display: block !important; 20 | } 21 | 22 | .acf-tooltip, 23 | .acf-fc-popup { 24 | z-index: 10002 !important; 25 | } 26 | 27 | .acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-plus, 28 | .acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-plus, 29 | .acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-minus, 30 | .acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-minus { 31 | visibility: hidden; 32 | } 33 | 34 | .acf-flexible-content > .values > .layout:hover > .acf-fc-layout-controls .acf-icon.-plus, 35 | .acf-flexible-content > .values > .layout.-hover > .acf-fc-layout-controls .acf-icon.-plus, 36 | .acf-flexible-content > .values > .layout:hover > .acf-fc-layout-controls .acf-icon.-minus, 37 | .acf-flexible-content > .values > .layout.-hover > .acf-fc-layout-controls .acf-icon.-minus { 38 | visibility: visible; 39 | } 40 | 41 | /* All collapsed */ 42 | 43 | .acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fc-layout-handle { 44 | border-bottom-width: 0; 45 | } 46 | .acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fields, 47 | .acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-table { 48 | display: none; 49 | } 50 | 51 | 52 | /* Modal 53 | ------------------------------------------------------------*/ 54 | 55 | body.acf-modal-open { 56 | overflow: hidden; /* popup from fc layout selector can't scroll */ 57 | } 58 | 59 | #acf-flexible-content-modal-overlay { 60 | background: #000; 61 | opacity: 0.7; 62 | filter: alpha(opacity=70); 63 | position: fixed; 64 | top: 0; 65 | right: 0; 66 | bottom: 0; 67 | left: 0; 68 | z-index: 10000; 69 | } 70 | 71 | .acf-flexible-content .layout.-modal { 72 | z-index: 10001; 73 | position: fixed !important; 74 | top: 50px !important; 75 | left: 0 !important; 76 | right: 0 !important; 77 | margin: auto; 78 | width: 90vw; 79 | max-width: 960px; 80 | max-height: calc(100vh - 100px); 81 | box-shadow: 0 5px 15px rgba(0,0,0,0.7); 82 | } 83 | 84 | .acf-flexible-content .layout > .acf-fc-modal-content { 85 | display: none; 86 | } 87 | 88 | .acf-flexible-content .layout.-modal > .acf-fc-modal-content { 89 | display: block; 90 | overflow: auto; 91 | max-height: calc(100vh - 138px); 92 | } 93 | 94 | .acf-flexible-content .layout .acf-fc-modal-title { 95 | position: relative; 96 | display: none; 97 | box-sizing: border-box; 98 | height: 37px; 99 | line-height: 37px; 100 | padding: 0 40px 0 10px; 101 | background: #eee; 102 | border-bottom: 1px solid #dfdfdf; 103 | overflow: hidden; 104 | text-overflow: ellipsis; 105 | white-space: nowrap; 106 | } 107 | 108 | .acf-flexible-content .layout .acf-fc-modal-title > .-cancel { 109 | cursor: pointer; 110 | position: absolute; 111 | top: 0; 112 | right: 0; 113 | display: block; 114 | width: 37px; 115 | height: 37px; 116 | color: #666; 117 | line-height: 37px; 118 | text-align: center; 119 | } 120 | 121 | .acf-flexible-content .layout .acf-fc-modal-title > .-cancel:hover { 122 | color: #F55E4F; 123 | } 124 | 125 | .acf-flexible-content .layout .acf-fc-modal-title > .acf-fc-layout-order { 126 | background: #ddd; 127 | } 128 | 129 | .acf-flexible-content .layout.-modal > .acf-fc-modal-title { 130 | display: block; 131 | } 132 | 133 | .acf-flexible-content .layout.-modal > .acf-fc-layout-controls, 134 | .acf-flexible-content .layout.-modal > .acf-fc-layout-handle { 135 | display: none; 136 | } 137 | 138 | .acf-flexible-content .layout.fc-modal > .acf-fc-layout-handle { 139 | border: none !important; 140 | } 141 | 142 | .acf-icon.-pencil::before { 143 | font-size: 12px; 144 | } 145 | 146 | .acf-flexible-content .layout.layout-error-messages > .acf-fc-layout-handle .acf-fc-layout-order { 147 | background: #F55E4F; 148 | color: #fff; 149 | } 150 | 151 | /* Animation */ 152 | 153 | @keyframes fcModalSlide { 154 | from { transform: translateY(-30px); opacity: 0; } 155 | to { transform: translateY(0px); opacity: 1; } 156 | } 157 | 158 | .acf-flexible-content .layout.-modal.-animate { 159 | animation: fcModalSlide .2s ease-out; 160 | } 161 | 162 | @keyframes highlightClosed { 163 | 0% { background: #fff; } 164 | 30% { background: rgba(0, 133, 186, 0.3); } /* WordPress blue, faded */ 165 | 100% { background: #fff; } 166 | } 167 | 168 | .acf-flexible-content .layout.-highlight-closed { 169 | animation: highlightClosed .65s .1s ease-out; 170 | } 171 | --------------------------------------------------------------------------------