├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE.md ├── README.md ├── assets └── css │ └── acf.css ├── composer.json ├── composer.lock ├── package.json ├── plugin.php ├── public ├── css │ └── acf.css └── mix-manifest.json ├── tailwind.config.js ├── webpack.mix.js └── yarn.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: Log1x 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /vendor 3 | npm-debug.log 4 | yarn-error.log 5 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Brandon Nifong 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Modern ACF Options 2 | 3 | ![Latest Stable Version](https://img.shields.io/packagist/v/log1x/modern-acf-options?style=flat-square) 4 | ![Total Downloads](https://img.shields.io/packagist/dt/log1x/modern-acf-options?style=flat-square) 5 | 6 | Here lives a simple `mu-plugin` to modernize and brand theme options created with ACF. No admin panels, no bloat – just a simple filter to optionally customize the CSS properties with your color palette. 7 | 8 | ![Screenshot](https://i.imgur.com/2ULki9H.png) 9 | 10 | ## Requirements 11 | 12 | - [PHP](https://secure.php.net/manual/en/install.php) >= 7.1.3 13 | - [Composer](https://getcomposer.org/download/) 14 | 15 | ## Installation 16 | 17 | ### Bedrock 18 | 19 | Install via Composer: 20 | 21 | ```bash 22 | $ composer require log1x/modern-acf-options 23 | ``` 24 | 25 | ### Manual 26 | 27 | Download the release `.zip` and install into `wp-content/plugins`. 28 | 29 | ## Usage 30 | 31 | The styling for Modern ACF Options requires the usage of `seamless` mode and tabs with their placement set to `left`. 32 | 33 | ### Example using ACF Builder 34 | 35 | ```php 36 | use StoutLogic\AcfBuilder\FieldsBuilder; 37 | 38 | acf_add_options_page([ 39 | 'page_title' => get_bloginfo('name'), 40 | 'menu_title' => 'Theme Options', 41 | 'menu_slug' => 'theme-options', 42 | 'update_button' => 'Update Options', 43 | 'capability' => 'edit_theme_options', 44 | 'position' => '999', 45 | 'autoload' => true, 46 | ]); 47 | 48 | $options = new FieldsBuilder('theme_options', [ 49 | 'style' => 'seamless', 50 | ]); 51 | 52 | $options 53 | ->setLocation('options_page', '==', 'theme-options'); 54 | 55 | $options 56 | ->addTab('general') 57 | ->setConfig('placement', 'left') 58 | 59 | ->addAccordion('customization') 60 | ->addImage('logo') 61 | 62 | ->addAccordion('tracking') 63 | ->addText('gtm') 64 | ->setConfig('label', 'Google Tag Manager') 65 | ->addAccordion('tracking_end')->endpoint() 66 | 67 | ->addTab('advanced') 68 | ->setConfig('placement', 'left') 69 | 70 | ->addTrueFalse('debug') 71 | ->setConfig('ui', '1'); 72 | 73 | acf_add_local_field_group($options->build()); 74 | ``` 75 | 76 | ## Customization 77 | 78 | To customize the color palette, simply pass an array containing one or more of the colors you would like to change to the `acf_color_palette` filter: 79 | 80 | ```php 81 | add_filter('acf_color_palette', function () { 82 | return [ 83 | 'brand' => '#0073aa', 84 | 'trim' => '#181818', 85 | ]; 86 | }); 87 | ``` 88 | 89 | ### Disabling Screen Options Tab 90 | 91 | ```php 92 | use Illuminate\Support\Str; 93 | 94 | /** 95 | * Disable Screen Options on the theme options page. 96 | * 97 | * @param bool $show 98 | * @param \WP_Screen $screen 99 | * @return bool 100 | */ 101 | add_filter('screen_options_show_screen', function ($show, $screen) { 102 | if (is_a($screen, 'WP_Screen') && Str::contains($screen->base, 'theme-options')) { 103 | return false; 104 | } 105 | }, 1, 2); 106 | ``` 107 | 108 | ### Remove Admin Footer Text 109 | 110 | ```php 111 | /** 112 | * Remove admin footer text. 113 | * 114 | * @return bool 115 | */ 116 | add_filter('admin_footer_text', '__return_false', 100); 117 | ``` 118 | 119 | ## Development 120 | 121 | Modern ACF Options is built using TailwindCSS and compiled with Laravel Mix. 122 | 123 | ```bash 124 | $ yarn install 125 | $ yarn run start 126 | ``` 127 | 128 | ### Todo 129 | 130 | - Continue optimizing/cleaning up existing styles. 131 | - Add styles for ACF switches, input fields (focus, hover), buttons, etc. 132 | 133 | ## Bug Reports 134 | 135 | If you discover a bug in Modern ACF Options, please [open an issue](https://github.com/log1x/modern-acf-options/issues). 136 | 137 | ## Contributing 138 | 139 | Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated. 140 | 141 | ## License 142 | 143 | Modern ACF Options is provided under the [MIT License](https://github.com/log1x/modern-acf-options/blob/master/LICENSE.md). 144 | -------------------------------------------------------------------------------- /assets/css/acf.css: -------------------------------------------------------------------------------- 1 | .acf-settings-wrap { 2 | @apply .shadow .border-black .border-2; 3 | 4 | h1 { 5 | @apply .bg-brand .text-white .text-2xl .font-semibold .p-20; 6 | 7 | &::after { 8 | @apply .block .text-base .font-thin .opacity-50 .subtitle; 9 | } 10 | } 11 | 12 | .notice { 13 | @apply .m-0; 14 | } 15 | 16 | br.clear { 17 | @apply .hidden; 18 | } 19 | 20 | #poststuff { 21 | @apply .p-0; 22 | 23 | #post-body { 24 | @apply .flex .flex-col .flex-wrap .items-start .m-0 .w-full; 25 | 26 | .postbox-container { 27 | @apply .w-full .float-none .m-0; 28 | 29 | .postbox-header { 30 | @apply .hidden; 31 | } 32 | 33 | .meta-box-sortables { 34 | @apply .min-h-0 .h-full .min-w-full; 35 | 36 | .handlediv, 37 | .hndle { 38 | @apply .hidden; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | 45 | #postbox-container-2 { 46 | .acf-postbox.seamless { 47 | @apply .bg-white .m-0 .relative; 48 | 49 | .inside { 50 | @apply .m-0 .p-4 .pl-0; 51 | 52 | &.acf-fields.-sidebar { 53 | @apply .pt-5 .pb-20 .pr-5 .pl-40 .-mb-4 !important; 54 | 55 | &::before { 56 | @apply .bg-trim .border-none .py-4 .w-38; 57 | } 58 | 59 | .acf-tab-wrap.-left { 60 | @apply .p-0 .m-0; 61 | 62 | .acf-tab-group { 63 | @apply .border-none .mt-0 .w-38; 64 | 65 | li { 66 | @apply .m-0; 67 | 68 | a { 69 | @apply .text-white .bg-trim .px-6 .py-5 .mr-0 .rounded-none .border-none; 70 | } 71 | 72 | &.active a, 73 | &:hover a, 74 | &:focus a { 75 | @apply .text-white .bg-brand; 76 | } 77 | } 78 | } 79 | } 80 | 81 | > .acf-field { 82 | @apply .shadow .py-5 .px-3 .bg-white .border .border-solid .border-gray-300 .mb-4 .mr-4 .min-h-0 .w-full; 83 | 84 | &:last-of-type { 85 | @apply .mb-0; 86 | } 87 | 88 | .acf-label label { 89 | @apply .font-semibold .mb-0; 90 | } 91 | } 92 | 93 | .acf-field-accordion { 94 | @apply .shadow .ml-0 .border-gray-300; 95 | } 96 | } 97 | } 98 | } 99 | } 100 | 101 | #postbox-container-1 { 102 | @apply .order-2; 103 | 104 | .postbox { 105 | @apply .border-none .max-w-full .min-w-0 .bg-trim .mt-4 .mb-0; 106 | 107 | #major-publishing-actions { 108 | @apply .bg-transparent .border-none; 109 | 110 | #publishing-action { 111 | .spinner { 112 | @apply .relative .pointer-events-none .text-brand .bg-none .mr-6 .opacity-100 !important; 113 | 114 | &::after { 115 | @apply .empty .animation-spin .animation-1s .animation-infinite .animation-linear .absolute .block .w-5 .h-5 .border-solid .border-2 .border-current .text-brand .rounded-full .border-r-transparent .border-t-transparent !important; 116 | 117 | @keyframes spin { 118 | from { 119 | transform: rotate(0deg); 120 | } 121 | to { 122 | transform: rotate(360deg); 123 | } 124 | } 125 | 126 | top: calc(50% - (config('theme.spacing.4') / 2)); 127 | left: calc(50% - (config('theme.spacing.4') / 2)); 128 | } 129 | } 130 | 131 | .button { 132 | @apply .bg-brand .border-none .shadow-none .text-shadow-none .outline-none; 133 | 134 | &:hover, 135 | &:focus, 136 | &.disabled { 137 | @apply .bg-brand .text-shadow-none .text-white !important; 138 | } 139 | } 140 | } 141 | } 142 | } 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "log1x/modern-acf-options", 3 | "type": "wordpress-muplugin", 4 | "license": "MIT", 5 | "description": "A modern take on ACF Theme Options", 6 | "keywords": [ 7 | "wordpress", 8 | "wp-admin", 9 | "acf", 10 | "theme-options" 11 | ], 12 | "require": { 13 | "php": ">=7.1.3" 14 | }, 15 | "require-dev": { 16 | "squizlabs/php_codesniffer": "^3.5" 17 | }, 18 | "scripts": { 19 | "lint": [ 20 | "phpcs --ignore=vendor --extensions=php --standard=PSR12 ." 21 | ] 22 | }, 23 | "config": { 24 | "optimize-autoloader": true, 25 | "preferred-install": "dist", 26 | "sort-packages": true 27 | }, 28 | "minimum-stability": "dev", 29 | "prefer-stable": true 30 | } 31 | -------------------------------------------------------------------------------- /composer.lock: -------------------------------------------------------------------------------- 1 | { 2 | "_readme": [ 3 | "This file locks the dependencies of your project to a known state", 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", 5 | "This file is @generated automatically" 6 | ], 7 | "content-hash": "3afb7d4a357b32c9bc604679688eeb99", 8 | "packages": [], 9 | "packages-dev": [ 10 | { 11 | "name": "squizlabs/php_codesniffer", 12 | "version": "3.5.3", 13 | "source": { 14 | "type": "git", 15 | "url": "https://github.com/squizlabs/PHP_CodeSniffer.git", 16 | "reference": "557a1fc7ac702c66b0bbfe16ab3d55839ef724cb" 17 | }, 18 | "dist": { 19 | "type": "zip", 20 | "url": "https://api.github.com/repos/squizlabs/PHP_CodeSniffer/zipball/557a1fc7ac702c66b0bbfe16ab3d55839ef724cb", 21 | "reference": "557a1fc7ac702c66b0bbfe16ab3d55839ef724cb", 22 | "shasum": "" 23 | }, 24 | "require": { 25 | "ext-simplexml": "*", 26 | "ext-tokenizer": "*", 27 | "ext-xmlwriter": "*", 28 | "php": ">=5.4.0" 29 | }, 30 | "require-dev": { 31 | "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0" 32 | }, 33 | "bin": [ 34 | "bin/phpcs", 35 | "bin/phpcbf" 36 | ], 37 | "type": "library", 38 | "extra": { 39 | "branch-alias": { 40 | "dev-master": "3.x-dev" 41 | } 42 | }, 43 | "notification-url": "https://packagist.org/downloads/", 44 | "license": [ 45 | "BSD-3-Clause" 46 | ], 47 | "authors": [ 48 | { 49 | "name": "Greg Sherwood", 50 | "role": "lead" 51 | } 52 | ], 53 | "description": "PHP_CodeSniffer tokenizes PHP, JavaScript and CSS files and detects violations of a defined set of coding standards.", 54 | "homepage": "https://github.com/squizlabs/PHP_CodeSniffer", 55 | "keywords": [ 56 | "phpcs", 57 | "standards" 58 | ], 59 | "time": "2019-12-04T04:46:47+00:00" 60 | } 61 | ], 62 | "aliases": [], 63 | "minimum-stability": "dev", 64 | "stability-flags": [], 65 | "prefer-stable": true, 66 | "prefer-lowest": false, 67 | "platform": { 68 | "php": ">=7.1.3" 69 | }, 70 | "platform-dev": [] 71 | } 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "devDependencies": { 4 | "cross-env": "^6.0.3", 5 | "laravel-mix": "^5.0.0", 6 | "precss": "^4.0.0", 7 | "tailwindcss": "^1.1.4", 8 | "tailwindcss-animations": "^1.0.0", 9 | "tailwindcss-border-styles": "^1.0.1", 10 | "tailwindcss-spinner": "^1.0.0", 11 | "tailwindcss-typography": "^2.2.0" 12 | }, 13 | "scripts": { 14 | "build": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 15 | "build:production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 16 | "start": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /plugin.php: -------------------------------------------------------------------------------- 1 | '#0073aa', 36 | 'trim' => '#181818', 37 | ]; 38 | 39 | /** 40 | * Invoke the plugin. 41 | * 42 | * @return void 43 | */ 44 | public function __invoke() 45 | { 46 | $this->uri = plugin_dir_url(__FILE__) . 'public'; 47 | $this->path = plugin_dir_path(__FILE__) . 'public'; 48 | 49 | $this->colors = array_merge( 50 | $this->colors, 51 | apply_filters('acf_color_palette', $this->colors) 52 | ); 53 | 54 | if (! function_exists('acf')) { 55 | return; 56 | } 57 | 58 | $this->injectColors(); 59 | $this->enqueue(); 60 | } 61 | 62 | /** 63 | * Enqueue the admin scripts. 64 | * 65 | * @return void 66 | */ 67 | public function enqueue() 68 | { 69 | add_action('admin_enqueue_scripts', function () { 70 | wp_enqueue_style('modern-acf/acf.css', $this->asset('/css/acf.css'), false, null); 71 | }, 100); 72 | } 73 | 74 | /** 75 | * Resolve the URI for an asset using the manifest. 76 | * 77 | * @param string $asset 78 | * @param string $manifest 79 | * @return string 80 | */ 81 | public function asset($asset = '', $manifest = 'mix-manifest.json') 82 | { 83 | if (! file_exists($manifest = $this->path . $manifest)) { 84 | return $this->uri . $asset; 85 | } 86 | 87 | $manifest = json_decode(file_get_contents($manifest), true); 88 | 89 | return $this->uri . ($manifest[$asset] ?? $asset); 90 | } 91 | 92 | /** 93 | * Inject the color properties into the admin head. 94 | * 95 | * @param array $colors 96 | * @return void 97 | */ 98 | public function injectColors($colors = []) 99 | { 100 | if (! is_array($this->colors)) { 101 | return; 102 | } 103 | 104 | foreach ($this->colors as $label => $value) { 105 | $colors[] = "--acf-{$label}: {$value};"; 106 | } 107 | 108 | $this->colors = implode(' ', $colors); 109 | 110 | add_filter('admin_head', function () { 111 | echo "", PHP_EOL; 112 | }); 113 | } 114 | }); 115 | -------------------------------------------------------------------------------- /public/css/acf.css: -------------------------------------------------------------------------------- 1 | .acf-settings-wrap{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);border-color:#000;border-width:2px}.acf-settings-wrap h1{background-color:#0073aa;background-color:var(--acf-brand,#0073aa);color:#fff;font-size:1.5rem;font-weight:600;padding:5rem}.acf-settings-wrap h1:after{display:block;font-size:1rem;font-weight:200;opacity:.5;content:"Theme Options";content:var(--acf-subtitle,"Theme Options")}.acf-settings-wrap .notice{margin:0}.acf-settings-wrap br.clear{display:none}.acf-settings-wrap #poststuff{padding:0}.acf-settings-wrap #poststuff #post-body{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;flex-wrap:wrap;-webkit-box-align:start;align-items:flex-start;margin:0;width:100%}.acf-settings-wrap #poststuff #post-body .postbox-container{width:100%;float:none;margin:0}.acf-settings-wrap #poststuff #post-body .postbox-container .postbox-header{display:none}.acf-settings-wrap #poststuff #post-body .postbox-container .meta-box-sortables{min-height:0;height:100%;min-width:100%}.acf-settings-wrap #poststuff #post-body .postbox-container .meta-box-sortables .handlediv,.acf-settings-wrap #poststuff #post-body .postbox-container .meta-box-sortables .hndle{display:none}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless{background-color:#fff;margin:0;position:relative}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside{margin:0;padding:1rem 1rem 1rem 0}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar{padding:1.25rem 1.25rem 5rem 10rem!important;margin-bottom:-1rem!important}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar:before{background-color:#191919;background-color:var(--acf-trim,#191919);border-style:none;padding-top:1rem;padding-bottom:1rem;width:9.5rem}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar .acf-tab-wrap.-left{padding:0;margin:0}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar .acf-tab-wrap.-left .acf-tab-group{border-style:none;margin-top:0;width:9.5rem}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar .acf-tab-wrap.-left .acf-tab-group li{margin:0}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar .acf-tab-wrap.-left .acf-tab-group li a{color:#fff;background-color:#191919;background-color:var(--acf-trim,#191919);padding:1.25rem 1.5rem;margin-right:0;border-radius:0;border-style:none}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar .acf-tab-wrap.-left .acf-tab-group li.active a,.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar .acf-tab-wrap.-left .acf-tab-group li:focus a,.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar .acf-tab-wrap.-left .acf-tab-group li:hover a{color:#fff;background-color:#0073aa;background-color:var(--acf-brand,#0073aa)}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar>.acf-field{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);padding:1.25rem .75rem;background-color:#fff;border:1px solid #e2e8f0;margin-bottom:1rem;margin-right:1rem;min-height:0;width:100%}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar>.acf-field:last-of-type{margin-bottom:0}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar>.acf-field .acf-label label{font-weight:600;margin-bottom:0}.acf-settings-wrap #postbox-container-2 .acf-postbox.seamless .inside.acf-fields.-sidebar .acf-field-accordion{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);margin-left:0;border-color:#e2e8f0}.acf-settings-wrap #postbox-container-1{-webkit-box-ordinal-group:3;order:2}.acf-settings-wrap #postbox-container-1 .postbox{border-style:none;max-width:100%;min-width:0;background-color:#191919;background-color:var(--acf-trim,#191919);margin-top:1rem;margin-bottom:0}.acf-settings-wrap #postbox-container-1 .postbox #major-publishing-actions{background-color:transparent;border-style:none}.acf-settings-wrap #postbox-container-1 .postbox #major-publishing-actions #publishing-action .spinner{position:relative!important;pointer-events:none!important;color:#0073aa!important;color:var(--acf-brand,#0073aa)!important;background-image:none!important;margin-right:1.5rem!important;opacity:1!important}.acf-settings-wrap #postbox-container-1 .postbox #major-publishing-actions #publishing-action .spinner:after{content:""!important;-webkit-animation-name:spin!important;animation-name:spin!important;-webkit-animation-duration:1s!important;-webkit-animation-duration:var(--animation-duration)!important;-webkit-animation-iteration-count:infinite!important;-webkit-animation-iteration-count:var(--animation-iteration-count)!important;--animation-duration:1s!important;animation-duration:1s!important;animation-duration:var(--animation-duration)!important;--animation-iteration-count:infinite!important;animation-iteration-count:infinite!important;animation-iteration-count:var(--animation-iteration-count)!important;-webkit-animation-timing-function:linear!important;animation-timing-function:linear!important;position:absolute!important;display:block!important;width:1.25rem!important;height:1.25rem!important;color:#0073aa!important;color:var(--acf-brand,#0073aa)!important;border-radius:9999px!important;border-color:transparent transparent currentcolor currentcolor!important;border-style:solid!important;border-width:2px!important;top:calc(50% - config("theme.spacing.4")/2);left:calc(50% - config("theme.spacing.4")/2)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.acf-settings-wrap #postbox-container-1 .postbox #major-publishing-actions #publishing-action .button{background-color:#0073aa;background-color:var(--acf-brand,#0073aa);border-style:none;box-shadow:none;text-shadow:none;outline:0}.acf-settings-wrap #postbox-container-1 .postbox #major-publishing-actions #publishing-action .button.disabled,.acf-settings-wrap #postbox-container-1 .postbox #major-publishing-actions #publishing-action .button:focus,.acf-settings-wrap #postbox-container-1 .postbox #major-publishing-actions #publishing-action .button:hover{background-color:#0073aa!important;background-color:var(--acf-brand,#0073aa)!important;text-shadow:none!important;color:#fff!important} -------------------------------------------------------------------------------- /public/mix-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "/css/acf.css": "/css/acf.css?id=e50895ede84f40ab49fc" 3 | } 4 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: { 4 | colors: { 5 | brand: 'var(--acf-brand, #0073aa)', 6 | trim: 'var(--acf-trim, #191919)', 7 | current: 'currentColor', 8 | }, 9 | 10 | spacing: { 11 | '38': '9.5rem' 12 | }, 13 | 14 | textShadow: { 15 | default: '0 2px 5px rgba(0, 0, 0, 0.5)', 16 | none: 'none' 17 | }, 18 | 19 | borderStyles: { 20 | colors: true, 21 | }, 22 | 23 | animations: { 24 | 'spin': { 25 | from: { transform: 'rotate(0deg)' }, 26 | to: { transform: 'rotate(360deg)' }, 27 | }, 28 | }, 29 | 30 | spinner: theme => ({ 31 | default: { 32 | color: theme('colors.gray.300'), 33 | size: '1.5rem', 34 | border: '0.15rem', 35 | speed: '750ms' 36 | } 37 | }) 38 | } 39 | }, 40 | variants: {}, 41 | plugins: [ 42 | require('tailwindcss-spinner')(), 43 | require('tailwindcss-typography')(), 44 | require('tailwindcss-animations')(), 45 | require('tailwindcss-border-styles')(), 46 | 47 | ({ addUtilities }) => { 48 | addUtilities({ 49 | '.bg-none': { 50 | 'background-image': 'none', 51 | }, 52 | '.empty': { 53 | 'content': `''`, 54 | }, 55 | '.subtitle': { 56 | 'content': 'var(--acf-subtitle, \'Theme Options\')', 57 | }, 58 | }); 59 | }, 60 | ] 61 | }; 62 | -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | const mix = require('laravel-mix'); 2 | 3 | /* 4 | |-------------------------------------------------------------------------- 5 | | Mix Asset Management 6 | |-------------------------------------------------------------------------- 7 | | 8 | | Mix provides a clean, fluent API for defining some Webpack build steps 9 | | for your Sage application. By default, we are compiling the Sass file 10 | | for your application, as well as bundling up your JS files. 11 | | 12 | */ 13 | 14 | mix.setPublicPath('./public'); 15 | 16 | mix.postCss('assets/css/acf.css', 'public/css', [ 17 | require('tailwindcss')('./tailwind.config.js'), 18 | require('precss')(), 19 | ]).version(); 20 | --------------------------------------------------------------------------------