feat(spinner): Add CSS spinner in place of the default garbage

fix(button): Fix the disabled button style (seen during save) chore(tailwind): Add necessary tailwind plugins to remain xtra hipster
Log1x · Jan 1, 2020 · d18797f · d18797f
1 parent 38e700e
commit d18797f
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 226 deletions.
diff --git a/README.md b/README.md
@@ -129,7 +129,6 @@ $ yarn run start
 
 - Continue optimizing/cleaning up existing styles.
 - Add styles for ACF switches, input fields (focus, hover), buttons, etc.
-- Reimplement saving spinner with CSS.
 
 ## Bug Reports
 

diff --git a/assets/css/acf.css b/assets/css/acf.css
@@ -5,9 +5,7 @@
     @apply .bg-brand .text-white .text-2xl .font-semibold .p-20;
 
     &::after {
-      @apply .block .text-base .font-thin .opacity-50;
-
-      content: var(--acf-subtitle, 'Theme Options');
+      @apply .block .text-base .font-thin .opacity-50 .subtitle;
     }
   }
 
@@ -48,7 +46,7 @@
         @apply .m-0 .p-4 .pl-0;
 
         &.acf-fields.-sidebar {
-          @apply .py-5 .pr-5 .pl-40 .-mb-4 !important;
+          @apply .pt-5 .pb-20 .pr-5 .pl-40 .-mb-4 !important;
 
           &::before {
             @apply .bg-trim .border-none .py-4 .w-38;
@@ -100,17 +98,36 @@
     @apply .order-2;
 
     .postbox {
-      @apply .border-none .max-w-full .min-w-0 .bg-trim .mb-0;
+      @apply .border-none .max-w-full .min-w-0 .bg-trim .mt-4 .mb-0;
 
       #major-publishing-actions {
         @apply .bg-transparent .border-none;
 
-        .button {
-          @apply .bg-brand .border-none .shadow-none .outline-none;
+        #publishing-action {
+          .spinner {
+            @apply .relative .pointer-events-none .text-brand .bg-none .mr-6 .opacity-100 !important;
+
+            &::after {
+              @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;
 
-          &:hover,
-          &:focus {
-            @apply .bg-brand;
+              @keyframes spin {
+                from { transform: rotate(0deg); }
+                to { transform: rotate(360deg); }
+              }
+
+              top: calc(50% - (config('theme.spacing.4') / 2));
+              left: calc(50% - (config('theme.spacing.4') / 2));
+            }
+          }
+
+          .button {
+            @apply .bg-brand .border-none .shadow-none .text-shadow-none .outline-none;
+
+            &:hover,
+            &:focus,
+            &.disabled {
+              @apply .bg-brand .text-shadow-none .text-white !important;
+            }
           }
         }
       }

diff --git a/package.json b/package.json
@@ -4,7 +4,10 @@
     "cross-env": "^6.0.3",
     "laravel-mix": "^5.0.0",
     "precss": "^4.0.0",
-    "tailwindcss": "^1.1.4"
+    "tailwindcss": "^1.1.4",
+    "tailwindcss-animations": "^1.0.0",
+    "tailwindcss-spinner": "^1.0.0",
+    "tailwindcss-typography": "^2.2.0"
   },
   "scripts": {
     "build": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

diff --git a/plugin.php b/plugin.php
@@ -4,7 +4,7 @@
  * Plugin Name: Modern ACF Options
  * Plugin URI:  https://github.com/log1x/modern-acf-options
  * Description: Modern styling for ACF Theme Options.
- * Version:     1.0.0
+ * Version:     1.0.2
  * Author:      Brandon Nifong
  * Author URI:  https://github.com/log1x
  * Licence:     MIT

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,12 +4,58 @@ module.exports = {
       colors: {
         brand: 'var(--acf-brand, #0073aa)',
         trim: 'var(--acf-trim, #191919)',
+        current: 'currentColor',
       },
+
       spacing: {
-        '38': '9.5rem',
-      }
+        '38': '9.5rem'
+      },
+
+      textShadow: {
+        default: '0 2px 5px rgba(0, 0, 0, 0.5)',
+        none: 'none'
+      },
+
+      borderStyles: {
+        colors: true,
+      },
+
+      animations: {
+        'spin': {
+          from: { transform: 'rotate(0deg)' },
+          to: { transform: 'rotate(360deg)' },
+        },
+      },
+
+      spinner: theme => ({
+        default: {
+          color: theme('colors.gray.300'),
+          size: '1.5rem',
+          border: '0.15rem',
+          speed: '750ms'
+        }
+      })
     }
   },
   variants: {},
-  plugins: []
-}
+  plugins: [
+    require('tailwindcss-spinner')(),
+    require('tailwindcss-typography')(),
+    require('tailwindcss-animations')(),
+    require('tailwindcss-border-styles')(),
+
+    ({ addUtilities }) => {
+      addUtilities({
+        '.bg-none': {
+          'background-image': 'none',
+        },
+        '.empty': {
+          'content': `''`,
+        },
+        '.subtitle': {
+          'content': 'var(--acf-subtitle, \'Theme Options\')',
+        },
+      });
+    },
+  ]
+};