├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .stylelintrc ├── LICENSE.md ├── README.md ├── admin-bar.scss ├── admin.scss ├── assets ├── scripts │ ├── components │ │ └── datetime.js │ ├── main.js │ ├── routes │ │ └── common.js │ └── util │ │ ├── Router.js │ │ └── camelCase.js └── styles │ ├── admin │ ├── admin-bar.scss │ ├── admin.scss │ └── partials │ │ ├── acf.scss │ │ ├── admin-bar.scss │ │ ├── admin-menu.scss │ │ ├── core.scss │ │ ├── custom.scss │ │ ├── customizer.scss │ │ ├── forms.scss │ │ ├── helpers.scss │ │ ├── links.scss │ │ ├── media.scss │ │ ├── meta.scss │ │ ├── misc.scss │ │ ├── pointers.scss │ │ ├── tables.scss │ │ ├── themes.scss │ │ ├── tsf.scss │ │ └── widgets.scss │ ├── config │ ├── functions.scss │ ├── mixins.scss │ └── variables.scss │ ├── login │ ├── login.scss │ └── partials │ │ └── core.scss │ └── wp-classes.scss ├── login.scss ├── package.json ├── webpack.mix.js ├── wp-classes.scss └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: "eslint:recommended", 4 | globals: { 5 | wp: true, 6 | app: true 7 | }, 8 | env: { 9 | node: true, 10 | es6: true, 11 | amd: true, 12 | browser: true, 13 | jquery: true 14 | }, 15 | parserOptions: { 16 | ecmaFeatures: { 17 | globalReturn: true, 18 | generators: false, 19 | objectLiteralDuplicateProperties: false 20 | }, 21 | ecmaVersion: 2017, 22 | sourceType: "module" 23 | }, 24 | plugins: ["import"], 25 | settings: { 26 | "import/core-modules": [], 27 | "import/ignore": ["node_modules", "\\.(coffee|scss|css|less|hbs|svg|json)$"] 28 | }, 29 | rules: { 30 | "no-console": 0, 31 | "comma-dangle": [ 32 | "error", 33 | { 34 | arrays: "always-multiline", 35 | objects: "always-multiline", 36 | imports: "always-multiline", 37 | exports: "always-multiline", 38 | functions: "ignore" 39 | } 40 | ] 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Application 2 | dist 3 | cache 4 | .cache-loader 5 | 6 | # WP-CLI 7 | db-sync 8 | *.sql 9 | 10 | # Vendor 11 | vendor 12 | node_modules 13 | 14 | # Debug 15 | npm-debug.log 16 | yarn-error.log 17 | 18 | # Environment 19 | .vscode 20 | .DS_Store 21 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "declaration-colon-newline-after": null, 5 | "value-list-comma-newline-after": null, 6 | "no-empty-source": null, 7 | "no-descending-specificity": null, 8 | "at-rule-no-unknown": [ 9 | true, 10 | { 11 | "ignoreAtRules": [ 12 | "extend", 13 | "at-root", 14 | "debug", 15 | "warn", 16 | "error", 17 | "if", 18 | "else", 19 | "for", 20 | "each", 21 | "while", 22 | "mixin", 23 | "include", 24 | "content", 25 | "return", 26 | "tailwind", 27 | "apply", 28 | "responsive", 29 | "variants", 30 | "screen", 31 | "function" 32 | ] 33 | } 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /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 | # WordPress UI 2 | 3 | Here lives a modernized approach to the WordPress Admin UI. It is extremely opinionated, but what I find much better than WordPress defaults. It also includes styling for ACF, SEO Framework, WordPress SEO, and various other plugins. If you have seen various screenshots I have floating around, specifically of my ACF tabs/theme options– this is it. 4 | 5 | The SCSS is admittedly not the prettiest to read/look at. Styling the backend of WordPress is a disaster– but that isn't to say there aren't redundent styles or that it couldn't of been done more efficiently, I simply just do not have the willpower to test every little change and over-optimize everything. 6 | 7 | This was originally closed source, but I figured I might as well open it up in case anyone wants to contribute. 8 | 9 | All colors used are variables and can be found in `assets/styles/config` – simply just set your own variables before importing as you would any other SCSS project. 10 | 11 | ## Dependencies 12 | 13 | * [Node.js] 14 | * [Yarn] 15 | 16 | ## Installation 17 | 18 | ```sh 19 | $ yarn add wordpress-ui 20 | ``` 21 | 22 | ## Example Usage 23 | 24 | ### CSS 25 | 26 | ```scss 27 | // Configuration 28 | @import '../config/functions'; 29 | @import '../config/mixins'; 30 | @import '../config/variables'; 31 | 32 | // Admin styles 33 | @import '~wordpress-ui/admin'; 34 | 35 | // Login styles 36 | @import '~wordpress-ui/login'; 37 | 38 | // WordPress classes 39 | @import '~wordpress-ui/wp-classes'; 40 | @import '~wordpress-ui/admin-bar'; 41 | ``` 42 | 43 | ### Javascript 44 | 45 | ```js 46 | /** import local components */ 47 | import datetime from 'wordpress-ui/assets/scripts/components/datetime'; 48 | 49 | export default { 50 | init() { 51 | datetime.init(); 52 | }, 53 | 54 | finalize() {}, 55 | }; 56 | ``` 57 | 58 | ## Development 59 | 60 | ```sh 61 | $ git clone https://github.com/log1x/wordpress-ui && cd wordpress-ui 62 | $ yarn install && yarn run build 63 | ``` 64 | 65 | ## License 66 | 67 | WordPress UI is provided under the [MIT License](https://github.com/log1x/wordpress-ui/blob/master/LICENSE). 68 | 69 | 70 | [Yarn]: 71 | [Node.js]: 72 | -------------------------------------------------------------------------------- /admin-bar.scss: -------------------------------------------------------------------------------- 1 | // Admin Bar styles 2 | @import 'assets/styles/admin/admin-bar'; 3 | -------------------------------------------------------------------------------- /admin.scss: -------------------------------------------------------------------------------- 1 | // Admin styles 2 | @import 'assets/styles/admin/admin'; 3 | -------------------------------------------------------------------------------- /assets/scripts/components/datetime.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Date Time Now 3 | */ 4 | import dayjs from 'dayjs'; 5 | 6 | function init() { 7 | if ($('#timestampdiv').length > 0) { 8 | $('#timestampdiv').find('p') 9 | .prepend($('') 10 | .attr('class', 'date-now button') 11 | .append('Now') 12 | ) 13 | .css('margin-right', '0.5em') 14 | } 15 | 16 | if ($('.inline-edit-date').length > 0) { 17 | $('.inline-edit-date').find('div') 18 | .prepend($('') 19 | .attr('class', 'date-now button') 20 | .append('Now') 21 | .css('margin-right', '0.5em') 22 | ) 23 | } 24 | 25 | $('.date-now').bind('click', function () { 26 | let time = dayjs(); 27 | 28 | if ($('select[name="mm"]').length > 0) { 29 | $('select[name="mm"]').val(time.format('MM')); 30 | } 31 | 32 | if ($('input[name="jj"]').length > 0) { 33 | $('input[name="jj"]').val(time.format('DD')); 34 | } 35 | 36 | if ($('input[name="aa"]').length > 0) { 37 | $('input[name="aa"]').val(time.format('YYYY')); 38 | } 39 | 40 | if ($('input[name="hh"]').length > 0) { 41 | $('input[name="hh"]').val(time.format('HH')); 42 | } 43 | 44 | if ($('input[name="mn"]').length > 0) { 45 | $('input[name="mn"]').val(time.format('mm')); 46 | } 47 | }); 48 | } 49 | 50 | export default { 51 | init 52 | }; 53 | -------------------------------------------------------------------------------- /assets/scripts/main.js: -------------------------------------------------------------------------------- 1 | /** import local dependencies */ 2 | import Router from './util/Router'; 3 | import common from './routes/common'; 4 | 5 | /** 6 | * Populate Router instance with DOM routes 7 | * @type {Router} routes - An instance of our router 8 | */ 9 | const routes = new Router({ 10 | common, 11 | }); 12 | 13 | /** Load Events */ 14 | jQuery(document).ready(() => routes.loadEvents()); 15 | -------------------------------------------------------------------------------- /assets/scripts/routes/common.js: -------------------------------------------------------------------------------- 1 | /** import local components */ 2 | import datetime from '../components/datetime'; 3 | 4 | export default { 5 | init() { 6 | datetime.init(); 7 | }, 8 | 9 | finalize() {}, 10 | }; 11 | -------------------------------------------------------------------------------- /assets/scripts/util/Router.js: -------------------------------------------------------------------------------- 1 | import camelCase from './camelCase'; 2 | 3 | /** 4 | * DOM-based Routing 5 | * 6 | * Based on {@link http://goo.gl/EUTi53|Markup-based Unobtrusive Comprehensive DOM-ready Execution} by Paul Irish 7 | * 8 | * The routing fires all common scripts, followed by the page specific scripts. 9 | * Add additional events for more control over timing e.g. a finalize event 10 | */ 11 | class Router { 12 | 13 | /** 14 | * Create a new Router 15 | * @param {Object} routes 16 | */ 17 | constructor(routes) { 18 | this.routes = routes; 19 | } 20 | 21 | /** 22 | * Fire Router events 23 | * @param {string} route DOM-based route derived from body classes (``) 24 | * @param {string} [event] Events on the route. By default, `init` and `finalize` events are called. 25 | * @param {string} [arg] Any custom argument to be passed to the event. 26 | */ 27 | fire(route, event = 'init', arg) { 28 | const fire = route !== '' && this.routes[route] && typeof this.routes[route][event] === 'function'; 29 | if (fire) { 30 | this.routes[route][event](arg); 31 | } 32 | } 33 | 34 | /** 35 | * Automatically load and fire Router events 36 | * 37 | * Events are fired in the following order: 38 | * * common init 39 | * * page-specific init 40 | * * page-specific finalize 41 | * * common finalize 42 | */ 43 | loadEvents() { 44 | // Fire common init JS 45 | this.fire('common'); 46 | 47 | // Fire page-specific init JS, and then finalize JS 48 | document.body.className 49 | .toLowerCase() 50 | .replace(/-/g, '_') 51 | .split(/\s+/) 52 | .map(camelCase) 53 | .forEach((className) => { 54 | this.fire(className); 55 | this.fire(className, 'finalize'); 56 | }); 57 | 58 | // Fire common finalize JS 59 | this.fire('common', 'finalize'); 60 | } 61 | } 62 | 63 | export default Router 64 | -------------------------------------------------------------------------------- /assets/scripts/util/camelCase.js: -------------------------------------------------------------------------------- 1 | /** 2 | * the most terrible camelizer on the internet, guaranteed! 3 | * @param {string} str String that isn't camel-case, e.g., CAMeL_CaSEiS-harD 4 | * @return {string} String converted to camel-case, e.g., camelCaseIsHard 5 | */ 6 | export default str => `${str.charAt(0).toLowerCase()}${str.replace(/[\W_]/g, '|').split('|') 7 | .map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`) 8 | .join('') 9 | .slice(1)}`; 10 | -------------------------------------------------------------------------------- /assets/styles/admin/admin-bar.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #WORDPRESS ADMIN BAR 3 | ========================================================================== */ 4 | 5 | // Configuration 6 | @import '../config/functions'; 7 | @import '../config/variables'; 8 | @import '../config/mixins'; 9 | 10 | // Admin bar styles 11 | @import 'partials/admin-bar'; 12 | -------------------------------------------------------------------------------- /assets/styles/admin/admin.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #WORDPRESS ADMIN 3 | ========================================================================== */ 4 | 5 | // Configuration 6 | @import '../config/functions'; 7 | @import '../config/variables'; 8 | @import '../config/mixins'; 9 | 10 | // Admin styles 11 | @import 'partials/acf'; 12 | @import 'partials/admin-bar'; 13 | @import 'partials/admin-menu'; 14 | @import 'partials/core'; 15 | @import 'partials/custom'; 16 | @import 'partials/customizer'; 17 | @import 'partials/forms'; 18 | @import 'partials/helpers'; 19 | @import 'partials/links'; 20 | @import 'partials/media'; 21 | @import 'partials/meta'; 22 | @import 'partials/misc'; 23 | @import 'partials/pointers'; 24 | @import 'partials/tables'; 25 | @import 'partials/themes'; 26 | @import 'partials/tsf'; 27 | @import 'partials/widgets'; 28 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/acf.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #ACF 3 | ========================================================================== */ 4 | 5 | .acf-postbox .acf-fields, 6 | .widget-inside .widget-content { 7 | /* ACF Icon 8 | ========================================================================== */ 9 | 10 | a.acf-icon { 11 | &:hover { 12 | background: $primary !important; 13 | } 14 | 15 | &:focus { 16 | color: $white !important; 17 | } 18 | } 19 | 20 | /* ACF Field 21 | ========================================================================== */ 22 | 23 | .acf-field { 24 | min-height: 0 !important; 25 | 26 | @include mobile() { 27 | width: 100% !important; 28 | } 29 | 30 | &[data-width] { 31 | float: none; 32 | } 33 | 34 | /* ACF Input 35 | ========================================================================== */ 36 | 37 | .acf-field input[type="text"], 38 | .acf-field input[type="password"], 39 | .acf-field input[type="number"], 40 | .acf-field input[type="search"], 41 | .acf-field input[type="email"], 42 | .acf-field input[type="url"], 43 | .acf-field textarea, 44 | .acf-field select { 45 | font-size: 14px; 46 | height: unset; 47 | } 48 | 49 | /* ACF Range 50 | ========================================================================== */ 51 | 52 | .acf-range-wrap input[type="number"] { 53 | min-width: 4em !important; 54 | text-align: center; 55 | } 56 | 57 | /* ACF Tooltip 58 | ========================================================================== */ 59 | 60 | .acf__tooltip { 61 | color: $primary; 62 | size: 1rem; 63 | margin: 0 0 0 3px; 64 | font-size: 1rem; 65 | cursor: help; 66 | } 67 | 68 | /* ACF Related Posts for WordPress 69 | ========================================================================== */ 70 | 71 | .rp4wp_mb_manage { 72 | display: flex; 73 | flex-flow: wrap; 74 | 75 | .rp4wp_button_holder { 76 | display: flex; 77 | float: none; 78 | order: 1; 79 | margin-left: auto; 80 | 81 | span { 82 | float: none; 83 | margin-left: 0; 84 | } 85 | } 86 | } 87 | 88 | /* ACF Image Uploader 89 | ========================================================================== */ 90 | 91 | .acf-image-uploader { 92 | .acf-button { 93 | display: block; 94 | margin-top: 1em; 95 | max-width: 6.5em; 96 | text-align: center; 97 | } 98 | } 99 | 100 | /* ACF Table Editor 101 | ========================================================================== */ 102 | 103 | .acf-table-cell-editor { 104 | border-color: $primary; 105 | 106 | &::before, 107 | &::after { 108 | border-top-color: $primary; 109 | } 110 | 111 | .acf-table-cell-editor-textarea { 112 | background-color: $dark; 113 | color: $white; 114 | } 115 | } 116 | 117 | /* Select2 118 | ========================================================================== */ 119 | 120 | .select2 { 121 | .select2-selection__clear { 122 | font-weight: normal; 123 | margin-top: -4px; 124 | right: 20px; 125 | font-size: 26px; 126 | } 127 | } 128 | 129 | /* ACF Switch 130 | ========================================================================== */ 131 | 132 | .acf-switch { 133 | &.-on { 134 | background: $primary; 135 | border-color: $primary; 136 | 137 | .acf-switch-on { 138 | text-shadow: $primary 0 1px 0; 139 | } 140 | 141 | .acf-switch-slider { 142 | border-color: $primary; 143 | } 144 | } 145 | } 146 | 147 | .acf-fc-popup { 148 | a:hover { 149 | background: $primary; 150 | } 151 | } 152 | 153 | /* ACF Relationship Field 154 | ========================================================================== */ 155 | 156 | .acf-relationship .list .acf-rel-item { 157 | &:hover { 158 | background: $primary; 159 | } 160 | } 161 | 162 | /* ACF Accordion Field 163 | ========================================================================== */ 164 | 165 | &.acf-accordion { 166 | background: transparent; 167 | border: 0 !important; 168 | margin-bottom: 15px; 169 | 170 | .acf-accordion-title { 171 | color: $white; 172 | background: $trim-dark; 173 | border: 1px solid $trim; 174 | padding: 25px 15px; 175 | 176 | label { 177 | margin-bottom: 0 !important; 178 | } 179 | } 180 | 181 | .acf-accordion-content { 182 | background: #f7f7f7; 183 | border: 1px solid #f5f5f5; 184 | 185 | .acf-fields { 186 | &:not(.-border):first-child { 187 | border-top: 0; 188 | } 189 | } 190 | } 191 | 192 | &:hover, 193 | &.-open { 194 | .acf-accordion-title { 195 | color: $white; 196 | background: $primary; 197 | border-color: $primary; 198 | } 199 | } 200 | } 201 | 202 | /* WP Content Editor 203 | ========================================================================== */ 204 | 205 | #wp-content-editor-tools { 206 | background: transparent; 207 | padding-top: 0; 208 | } 209 | } 210 | } 211 | 212 | /* ACF Settings 213 | ========================================================================== */ 214 | 215 | .acf-settings-wrap { 216 | /* ACF Settings Header 217 | ========================================================================== */ 218 | 219 | h1 { 220 | background: $primary; 221 | color: $white; 222 | font-size: 28px; 223 | font-weight: 500; 224 | padding: 75px 50px; 225 | 226 | &::after { 227 | content: 'Theme Options'; 228 | display: block; 229 | font-size: 16px; 230 | font-weight: 300; 231 | color: darken($white, 10%); 232 | } 233 | } 234 | 235 | /* ACF Settings Notices 236 | ========================================================================== */ 237 | 238 | .notice { 239 | margin: 0 !important; 240 | } 241 | 242 | /* ACF Postbox 243 | ========================================================================== */ 244 | 245 | .acf-postbox.seamless { 246 | margin: 0; 247 | 248 | > .inside { 249 | margin: 0 !important; 250 | padding: 10px 10px 10px 0 !important; 251 | } 252 | } 253 | 254 | #poststuff { 255 | padding-top: 0; 256 | } 257 | 258 | #post-body { 259 | margin-right: 0 !important; 260 | display: flex; 261 | flex-direction: column; 262 | align-items: flex-start; 263 | flex-wrap: wrap; 264 | } 265 | 266 | .postbox-container { 267 | width: 100% !important; 268 | float: none !important; 269 | margin: 0 !important; 270 | } 271 | 272 | #post-body #postbox-container-1 { 273 | order: 2; 274 | 275 | .meta-box-sortables { 276 | width: 100% !important; 277 | min-height: 0; 278 | 279 | .postbox { 280 | min-width: 0; 281 | max-width: 100%; 282 | background: $trim-darker; 283 | border: none; 284 | 285 | .inside { 286 | #major-publishing-actions { 287 | background: transparent; 288 | border: none; 289 | } 290 | 291 | #publishing-action { 292 | @keyframes spin { 293 | 0% { 294 | transform: rotate(0deg); 295 | } 296 | 297 | 100% { 298 | transform: rotate(360deg); 299 | } 300 | } 301 | 302 | .spinner { 303 | background: none; 304 | 305 | &.is-active { 306 | border-radius: 50%; 307 | width: 18px; 308 | height: 18px; 309 | margin-right: 15px; 310 | border: 0.25rem solid rgba($white, 0.2); 311 | border-top-color: $white; 312 | animation: spin 1s infinite linear; 313 | } 314 | } 315 | } 316 | } 317 | } 318 | } 319 | } 320 | 321 | /* Handlediv 322 | ========================================================================== */ 323 | 324 | .handlediv, 325 | .hndle { 326 | display: none !important; 327 | } 328 | } 329 | 330 | /* ACF Seamless Display 331 | ========================================================================== */ 332 | 333 | .acf-postbox.seamless, 334 | .acf-postbox.stuffbox { 335 | background: $white; 336 | margin: 25px 0 50px 0; 337 | position: relative; 338 | 339 | .handlediv, 340 | .hndle { 341 | display: none; 342 | } 343 | 344 | .acf-fields.-sidebar { 345 | margin: 0 !important; 346 | padding: 10px 10px 10px 160px !important; 347 | 348 | .acf-field-group { 349 | .acf-field .acf-label label { 350 | font-weight: 500; 351 | margin-bottom: 0; 352 | } 353 | } 354 | 355 | /* ACF Swatch List 356 | ========================================================================== */ 357 | 358 | .acf-swatch-list { 359 | > li { 360 | display: inline-block; 361 | width: 25%; 362 | 363 | @include until($desktop) { 364 | width: 50%; 365 | } 366 | 367 | input[type="radio"]:checked ~ .swatch-toggle .swatch-color { 368 | border: 2px solid $trim-darker; 369 | } 370 | 371 | label { 372 | font-weight: 500; 373 | 374 | &:hover .swatch-toggle { 375 | border-color: $trim-dark; 376 | } 377 | } 378 | } 379 | } 380 | 381 | /* ACF Field 382 | ========================================================================== */ 383 | 384 | > .acf-field, 385 | > .acf-accordion-group .acf-field { 386 | min-height: 0 !important; 387 | 388 | @include mobile() { 389 | width: 100% !important; 390 | } 391 | 392 | > .acf-label label { 393 | font-weight: 500; 394 | font-size: 1.1em; 395 | margin-bottom: 8px; 396 | } 397 | } 398 | 399 | &::before { 400 | background: $trim-darker; 401 | border-right: $trim-dark; 402 | width: 150px; 403 | } 404 | 405 | /* ACF Tabs 406 | ========================================================================== */ 407 | 408 | /* .acf-tab-wrap.-top { 409 | background: $trim-darker; 410 | color: $white; 411 | 412 | .acf-tab-group { 413 | li { 414 | a { 415 | background: $trim-dark; 416 | color: $white; 417 | border-color: $trim; 418 | } 419 | 420 | &.active, 421 | &:hover { 422 | a { 423 | background: $primary; 424 | border-color: $primary; 425 | border-bottom: 0; 426 | } 427 | } 428 | } 429 | } 430 | } */ 431 | 432 | .acf-tab-wrap.-left { 433 | .acf-tab-group { 434 | width: 150px !important; 435 | border: none; 436 | margin-top: 0; 437 | 438 | &::before { 439 | display: block; 440 | background: str-replace(url($logo), '#', '%23') center center no-repeat; 441 | background-size: contain; 442 | width: 56px; 443 | height: auto; 444 | padding: 35px 0; 445 | margin: 25px auto; 446 | } 447 | 448 | li { 449 | margin: 0; 450 | 451 | a { 452 | padding: 20px; 453 | margin-right: 0; 454 | border-radius: 0; 455 | color: $white; 456 | transition: color $speed, background-color $speed; 457 | background: $trim-darker; 458 | border: none; 459 | } 460 | 461 | &.active, 462 | &:hover { 463 | a { 464 | color: $white; 465 | background: $primary; 466 | } 467 | } 468 | } 469 | } 470 | } 471 | } 472 | } 473 | 474 | /* ACF Popup 475 | ========================================================================== */ 476 | 477 | .acf-fc-popup { 478 | a:hover { 479 | background: $primary; 480 | } 481 | } 482 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/admin-bar.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #ADMIN BAR 3 | ========================================================================== */ 4 | 5 | #wpadminbar { 6 | color: $white; 7 | background: $trim-darker; 8 | } 9 | 10 | #wpadminbar .ab-item, 11 | #wpadminbar a.ab-item, 12 | #wpadminbar > #wp-toolbar span.ab-label, 13 | #wpadminbar > #wp-toolbar span.noticon { 14 | color: $white; 15 | } 16 | 17 | #wpadminbar .ab-icon, 18 | #wpadminbar .ab-icon::before, 19 | #wpadminbar .ab-item::before, 20 | #wpadminbar .ab-item::after { 21 | color: $white; 22 | } 23 | 24 | #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, 25 | #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, 26 | #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, 27 | #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, 28 | #wpadminbar .ab-top-menu > li.hover > .ab-item, 29 | #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { 30 | color: $primary; 31 | background: darken($trim-darker, 25%); 32 | } 33 | 34 | #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, 35 | #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, 36 | #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { 37 | color: $primary; 38 | } 39 | 40 | #wpadminbar:not(.mobile) li:hover .ab-icon::before, 41 | #wpadminbar:not(.mobile) li:hover .ab-item::before, 42 | #wpadminbar:not(.mobile) li:hover .ab-item::after, 43 | #wpadminbar:not(.mobile) li:hover #adminbarsearch::before { 44 | color: $primary; 45 | } 46 | 47 | #wpadminbar .menupop .ab-sub-wrapper { 48 | background: darken($trim-darker, 25%); 49 | } 50 | 51 | #wpadminbar .quicklinks .menupop ul.ab-sub-secondary, 52 | #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { 53 | background: desaturate(darken($trim-darker, 7%), 7%); 54 | } 55 | 56 | #wpadminbar .ab-submenu .ab-item, 57 | #wpadminbar .quicklinks .menupop ul li a, 58 | #wpadminbar .quicklinks .menupop.hover ul li a, 59 | #wpadminbar.nojs .quicklinks .menupop:hover ul li a { 60 | color: mix($trim-darker, $white, 20%); 61 | } 62 | 63 | #wpadminbar .quicklinks li .blavatar, 64 | #wpadminbar .menupop .menupop > .ab-item::before { 65 | color: $white; 66 | } 67 | 68 | #wpadminbar .quicklinks .menupop ul li a:hover, 69 | #wpadminbar .quicklinks .menupop ul li a:focus, 70 | #wpadminbar .quicklinks .menupop ul li a:hover strong, 71 | #wpadminbar .quicklinks .menupop ul li a:focus strong, 72 | #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, 73 | #wpadminbar .quicklinks .menupop.hover ul li a:hover, 74 | #wpadminbar .quicklinks .menupop.hover ul li a:focus, 75 | #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, 76 | #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, 77 | #wpadminbar li:hover .ab-icon::before, 78 | #wpadminbar li:hover .ab-item::before, 79 | #wpadminbar li a:focus .ab-icon::before, 80 | #wpadminbar li .ab-item:focus::before, 81 | #wpadminbar li .ab-item:focus .ab-icon::before, 82 | #wpadminbar li.hover .ab-icon::before, 83 | #wpadminbar li.hover .ab-item::before, 84 | #wpadminbar li:hover #adminbarsearch::before, 85 | #wpadminbar li #adminbarsearch.adminbar-focused::before { 86 | color: $primary; 87 | } 88 | 89 | #wpadminbar .quicklinks li a:hover .blavatar, 90 | #wpadminbar .quicklinks li a:focus .blavatar, 91 | #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, 92 | #wpadminbar .menupop .menupop > .ab-item:hover::before, 93 | #wpadminbar.mobile .quicklinks .ab-icon::before, 94 | #wpadminbar.mobile .quicklinks .ab-item::before { 95 | color: $primary; 96 | } 97 | 98 | #wpadminbar.mobile .quicklinks .hover .ab-icon::before, 99 | #wpadminbar.mobile .quicklinks .hover .ab-item::before { 100 | color: $white; 101 | } 102 | 103 | #wpadminbar #adminbarsearch::before { 104 | color: $white; 105 | } 106 | 107 | #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { 108 | color: $white; 109 | background: $trim-dark; 110 | } 111 | 112 | #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { 113 | border-color: darken($trim-darker, 7%); 114 | background-color: darken($trim-darker, 7%); 115 | } 116 | 117 | #wpadminbar #wp-admin-bar-user-info .display-name { 118 | color: mix($trim-darker, $white, 20%); 119 | } 120 | 121 | #wpadminbar #wp-admin-bar-user-info a:hover .display-name { 122 | color: $primary; 123 | } 124 | 125 | #wpadminbar #wp-admin-bar-user-info .username { 126 | color: mix($trim-darker, $white, 20%); 127 | } 128 | 129 | #wpadminbar #wp-admin-bar-site-name > .ab-item, 130 | .admin #wpadminbar #wp-admin-bar-site-name > .ab-item { 131 | @media screen and (max-width: 782px) { 132 | padding: 0 12px; 133 | } 134 | 135 | &::before { 136 | background: str-replace(url($admin-bar-logo), '#', '%23') center center no-repeat !important; 137 | background-size: contain; 138 | width: $admin-bar-logo-width; 139 | height: $admin-bar-logo-height; 140 | display: block; 141 | content: '' !important; 142 | 143 | @media screen and (max-width: 782px) { 144 | height: 28px; 145 | width: 100%; 146 | padding-top: 5px; 147 | } 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/admin-menu.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #ADMIN MENU 3 | ========================================================================== */ 4 | 5 | #adminmenuback, 6 | #adminmenuwrap, 7 | #adminmenu { 8 | background: $trim-darker; 9 | } 10 | 11 | #adminmenu a { 12 | color: $white; 13 | } 14 | 15 | #adminmenu div.wp-menu-image::before { 16 | color: $white; 17 | } 18 | 19 | #adminmenu a:hover, 20 | #adminmenu li.menu-top:hover, 21 | #adminmenu li.opensub > a.menu-top, 22 | #adminmenu li > a.menu-top:focus { 23 | color: $white; 24 | background-color: $primary; 25 | } 26 | 27 | #adminmenu li.menu-top:hover div.wp-menu-image::before, 28 | #adminmenu li.opensub > a.menu-top div.wp-menu-image::before { 29 | color: $white; 30 | } 31 | 32 | #adminmenu li.menu-top .toplevel_page_acf-options-theme-options .wp-menu-image { 33 | &::before { 34 | background: str-replace(url($logo), '#', '%23') center center no-repeat; 35 | background-size: contain; 36 | width: 16px; 37 | height: 16px; 38 | display: block; 39 | } 40 | } 41 | 42 | /* Admin Menu Submenu 43 | ========================================================================== */ 44 | 45 | #adminmenu .wp-submenu, 46 | #adminmenu .wp-has-current-submenu .wp-submenu, 47 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu, 48 | .folded #adminmenu .wp-has-current-submenu .wp-submenu, 49 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu { 50 | background: darken($trim-darker, 25%); 51 | } 52 | 53 | #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover::after { 54 | border-right-color: darken($trim-darker, 25%); 55 | } 56 | 57 | #adminmenu .wp-submenu .wp-submenu-head { 58 | color: mix($trim-darker, $white, 20%); 59 | } 60 | 61 | #adminmenu .wp-submenu a, 62 | #adminmenu .wp-has-current-submenu .wp-submenu a, 63 | .folded #adminmenu .wp-has-current-submenu .wp-submenu a, 64 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, 65 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu a { 66 | color: mix($trim-darker, $white, 20%); 67 | 68 | &:focus, 69 | &:hover { 70 | color: $primary; 71 | } 72 | } 73 | 74 | /* Admin Menu Current 75 | ========================================================================== */ 76 | 77 | #adminmenu .wp-submenu li.current a, 78 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, 79 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { 80 | color: $primary; 81 | 82 | &:hover, 83 | &:focus { 84 | color: $primary; 85 | } 86 | } 87 | 88 | ul#adminmenu a.wp-has-current-submenu::after, 89 | ul#adminmenu > li.current > a.current::after { 90 | border-right-color: $white-ter; 91 | } 92 | 93 | #adminmenu li.current a.menu-top, 94 | #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, 95 | #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, 96 | .folded #adminmenu li.current.menu-top { 97 | color: $white; 98 | background: $primary; 99 | } 100 | 101 | #adminmenu li.wp-has-current-submenu div.wp-menu-image::before, 102 | #adminmenu a.current:hover div.wp-menu-image::before, 103 | #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image::before, 104 | #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image::before, 105 | #adminmenu li:hover div.wp-menu-image::before, 106 | #adminmenu li a:focus div.wp-menu-image::before, 107 | #adminmenu li.opensub div.wp-menu-image::before, 108 | .ie8 #adminmenu li.opensub div.wp-menu-image::before { 109 | color: $white; 110 | } 111 | 112 | /* Admin Menu Bubble 113 | ========================================================================== */ 114 | 115 | #adminmenu .awaiting-mod, 116 | #adminmenu .update-plugins { 117 | color: $white; 118 | background: $primary; 119 | } 120 | 121 | #adminmenu li.current a .awaiting-mod, 122 | #adminmenu li a.wp-has-current-submenu .update-plugins, 123 | #adminmenu li:hover a .awaiting-mod, 124 | #adminmenu li.menu-top:hover > a .update-plugins { 125 | color: $white; 126 | background: $primary; 127 | } 128 | 129 | /* Admin Menu Collapse Button 130 | ========================================================================== */ 131 | 132 | #collapse-button { 133 | color: $white; 134 | } 135 | 136 | #collapse-button:hover, 137 | #collapse-button:focus { 138 | color: $primary; 139 | } 140 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/core.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #CORE 3 | ========================================================================== */ 4 | 5 | body { 6 | background: $white-ter; 7 | font-family: $family-primary; 8 | } 9 | 10 | .wp-core-ui { 11 | .button-primary { 12 | background: $primary; 13 | border-color: darken($primary, 10%) darken($primary, 15%) darken($primary, 15%); 14 | color: $white; 15 | box-shadow: 0 1px 0 rgba($black, 0.15); 16 | text-shadow: none; 17 | 18 | &:hover, 19 | &:focus { 20 | background: lighten($primary, 3%); 21 | border-color: darken($primary, 15%); 22 | color: $white; 23 | box-shadow: 0 1px 0 rgba($black, 0.15); 24 | } 25 | 26 | &:focus { 27 | box-shadow: 0 1px 0 rgba($black, 0.15); 28 | } 29 | 30 | &:active { 31 | background: darken($primary, 10%); 32 | border-color: darken($primary, 15%); 33 | box-shadow: inset 0 2px 0 rgba($black, 0.15) !important; 34 | } 35 | 36 | &[disabled], 37 | &:disabled, 38 | &.button-primary-disabled, 39 | &.disabled { 40 | color: hsl(hue($primary), 10%, 80%) !important; 41 | background: darken($primary, 8%) !important; 42 | border-color: darken($primary, 15%) !important; 43 | text-shadow: none !important; 44 | } 45 | 46 | &.button-hero { 47 | box-shadow: 0 2px 0 rgba($black, 0.15) !important; 48 | } 49 | } 50 | 51 | .wp-ui-primary { 52 | color: $white; 53 | background-color: $trim-darker; 54 | } 55 | 56 | .wp-ui-text-primary { 57 | color: $trim-darker; 58 | } 59 | 60 | .wp-ui-highlight { 61 | color: $white; 62 | background-color: $primary; 63 | } 64 | 65 | .wp-ui-text-highlight, 66 | .color { 67 | color: $primary; 68 | } 69 | 70 | .wp-ui-notification { 71 | color: $white; 72 | background-color: $primary; 73 | } 74 | 75 | .wp-ui-text-notification { 76 | color: $primary; 77 | } 78 | 79 | .wp-ui-text-icon { 80 | color: $white; 81 | } 82 | 83 | .wp-full-overlay { 84 | .collapse-sidebar { 85 | &:hover, 86 | &:focus { 87 | color: $primary; 88 | 89 | .collapse-sidebar-arrow { 90 | box-shadow: none; 91 | } 92 | } 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/custom.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #CUSTOM 3 | ========================================================================== */ 4 | 5 | /* User Admin Color 6 | ========================================================================== */ 7 | 8 | .user-admin-color-wrap { 9 | > td { 10 | position: relative; 11 | 12 | &::before { 13 | content: 'Not available.'; 14 | display: block; 15 | size: 100%; 16 | } 17 | } 18 | 19 | fieldset { 20 | display: none; 21 | } 22 | } 23 | 24 | /* WordPress SEO 25 | ========================================================================== */ 26 | 27 | .wpseo-make-primary-term { 28 | text-decoration: none; 29 | font-size: 12px; 30 | color: $primary; 31 | 32 | &:hover { 33 | color: $primary; 34 | } 35 | } 36 | 37 | /* Top 10 38 | ========================================================================== */ 39 | 40 | #tptn_pop_dashboard { 41 | #tptn_popular_posts { 42 | p:last-child { 43 | display: none; 44 | } 45 | } 46 | } 47 | 48 | #tptn_pop_daily_dashboard { 49 | #tptn_popular_posts_daily { 50 | p:last-child { 51 | display: none; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/customizer.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #CUSTOMIZER 3 | ========================================================================== */ 4 | 5 | /* Customize Controls 6 | ========================================================================== */ 7 | 8 | #customize-controls { 9 | /* Customize Controls Help 10 | ========================================================================== */ 11 | 12 | .customize-info .customize-help-toggle { 13 | &:hover, 14 | &:focus { 15 | color: $primary; 16 | 17 | &::before { 18 | box-shadow: none !important; 19 | } 20 | } 21 | } 22 | 23 | /* Customize Controls Close 24 | ========================================================================== */ 25 | 26 | .customize-controls-close { 27 | &:hover, 28 | &:focus { 29 | color: $primary; 30 | border-top-color: $primary; 31 | } 32 | } 33 | 34 | /* Customize Controls Section / Accordions 35 | ========================================================================== */ 36 | 37 | .control-section:hover > .accordion-section-title, 38 | .control-section:focus > .accordion-section-title, 39 | .control-section .accordion-section-title:focus, 40 | .control-section .accordion-section:hover, 41 | .control-section .accordion-section:focus, 42 | .customize-section-back:hover, 43 | .customize-section-back:focus { 44 | color: $primary; 45 | border-left-color: $primary; 46 | 47 | &::after { 48 | color: $primary; 49 | } 50 | } 51 | } 52 | 53 | /* Customize Footer Actions 54 | ========================================================================== */ 55 | 56 | #customize-footer-actions { 57 | .devices button { 58 | &.active, 59 | &:focus { 60 | border-bottom-color: $primary; 61 | 62 | &:hover, 63 | &:focus { 64 | border-bottom-color: $primary; 65 | 66 | &::before { 67 | color: $primary; 68 | } 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/forms.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #FORMS 3 | ========================================================================== */ 4 | 5 | input[type="text"]:focus, 6 | input[type="password"]:focus, 7 | input[type="color"]:focus, 8 | input[type="date"]:focus, 9 | input[type="datetime"]:focus, 10 | input[type="datetime-local"]:focus, 11 | input[type="email"]:focus, 12 | input[type="month"]:focus, 13 | input[type="number"]:focus, 14 | input[type="search"]:focus, 15 | input[type="tel"]:focus, 16 | input[type="time"]:focus, 17 | input[type="url"]:focus, 18 | input[type="week"]:focus, 19 | input[type="checkbox"]:focus, 20 | input[type="radio"]:focus, 21 | select:focus, 22 | textarea:focus { 23 | border-color: $primary; 24 | box-shadow: 0 0 2px rgba($primary, 0.8); 25 | } 26 | 27 | input[type=checkbox]:checked::before { 28 | color: $primary; 29 | } 30 | 31 | input[type=radio]:checked::before { 32 | background: $primary; 33 | } 34 | 35 | .wp-core-ui input[type="reset"]:hover, 36 | .wp-core-ui input[type="reset"]:active { 37 | color: $primary; 38 | } 39 | 40 | /* Select2 41 | ========================================================================== */ 42 | 43 | .select2-results .select2-highlighted { 44 | background: $primary; 45 | } 46 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/helpers.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #HELPERS 3 | ========================================================================== */ 4 | 5 | /* Display 6 | ========================================================================== */ 7 | 8 | .is-block { 9 | display: block; 10 | } 11 | 12 | @include mobile() { 13 | .is-block-mobile { 14 | display: block; 15 | } 16 | } 17 | 18 | @include tablet() { 19 | .is-block-tablet { 20 | display: block; 21 | } 22 | } 23 | 24 | @include desktop() { 25 | .is-block-desktop { 26 | display: block; 27 | } 28 | } 29 | 30 | .is-inline-block { 31 | display: inline-block; 32 | } 33 | 34 | @include mobile() { 35 | .is-inline-block-mobile { 36 | display: inline-block; 37 | } 38 | } 39 | 40 | @include tablet() { 41 | .is-inline-block-tablet { 42 | display: inline-block; 43 | } 44 | } 45 | 46 | @include desktop() { 47 | .is-inline-block-desktop { 48 | display: inline-block; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/links.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #LINKS 3 | ========================================================================== */ 4 | 5 | a { 6 | color: $primary; 7 | 8 | &:hover, 9 | &:active, 10 | &:focus { 11 | color: $primary; 12 | box-shadow: none; 13 | } 14 | } 15 | 16 | /* Filter Links 17 | ========================================================================== */ 18 | 19 | .filter-links li a { 20 | &:hover { 21 | color: $primary; 22 | } 23 | 24 | &.current { 25 | border-bottom: 4px solid $primary; 26 | } 27 | } 28 | 29 | /* Media Upload / Widgets 30 | ========================================================================== */ 31 | 32 | #media-upload a.del-link:hover, 33 | div.dashboard-widget-submit input:hover, 34 | .subsubsub a:hover, 35 | .subsubsub a.current:hover { 36 | color: $primary; 37 | } 38 | 39 | /* Page Title Links 40 | ========================================================================== */ 41 | 42 | #wpbody-content .wrap > a.page-title-action { 43 | display: inline-block !important; 44 | background-color: $primary; 45 | border-color: $primary; 46 | color: $white; 47 | 48 | &:hover, 49 | &:active, 50 | &:focus { 51 | background-color: $primary; 52 | border-color: $primary; 53 | color: $white; 54 | box-shadow: 0 0 2px rgba($primary, 0.4); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/media.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #MEDIA 3 | ========================================================================== */ 4 | 5 | /* Media Item / Media Progress Bar 6 | ========================================================================== */ 7 | 8 | .media-item .bar, 9 | .media-progress-bar div { 10 | background-color: $primary; 11 | } 12 | 13 | /* Media Attachment 14 | ========================================================================== */ 15 | 16 | .details.attachment { 17 | box-shadow: inset 0 0 0 3px white, inset 0 0 0 7px $primary; 18 | } 19 | 20 | .attachment.details .check { 21 | background-color: $primary; 22 | box-shadow: 0 0 0 1px white, 0 0 0 2px $primary; 23 | } 24 | 25 | /* Media Selection 26 | ========================================================================== */ 27 | 28 | .media-selection .attachment.selection.details .thumbnail { 29 | box-shadow: 0 0 0 1px white, 0 0 0 3px $primary; 30 | } 31 | 32 | /* Media Modal 33 | ========================================================================== */ 34 | 35 | .media-modal-close { 36 | &:hover, 37 | &:focus { 38 | color: $primary; 39 | border-color: $primary; 40 | } 41 | } 42 | 43 | .media-frame a { 44 | color: $primary; 45 | 46 | &:hover, 47 | &:focus { 48 | color: $primary; 49 | box-shadow: none; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/meta.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #SCREEN META 3 | ========================================================================== */ 4 | 5 | /* Contextual Help 6 | ========================================================================== */ 7 | 8 | #contextual-help-wrap, 9 | #screen-options-wrap { 10 | background: $trim-darker; 11 | color: $white; 12 | 13 | #adv-settings fieldset legend { 14 | color: $primary; 15 | } 16 | 17 | #contextual-help-back { 18 | border-left: 1px solid $primary; 19 | border-right: 1px solid $primary; 20 | background: $trim-darker; 21 | } 22 | 23 | .contextual-help-tabs ul { 24 | background: $trim-darker; 25 | 26 | li { 27 | &.active, 28 | &:hover { 29 | border-left: 2px solid $primary; 30 | background: $primary; 31 | box-shadow: none; 32 | } 33 | 34 | a { 35 | border: none; 36 | color: $white; 37 | 38 | &:focus { 39 | box-shadow: none; 40 | } 41 | } 42 | } 43 | } 44 | } 45 | 46 | /* Contextual Help Link 47 | ========================================================================== */ 48 | 49 | #contextual-help-link-wrap, 50 | #screen-options-link-wrap { 51 | border: 1px solid $primary; 52 | border-top: none; 53 | background: $primary; 54 | 55 | .show-settings { 56 | color: $white; 57 | box-shadow: none; 58 | 59 | &:hover, 60 | &:focus { 61 | color: $white; 62 | } 63 | 64 | &::after { 65 | color: $white; 66 | } 67 | } 68 | } 69 | 70 | /* Handlediv 71 | ========================================================================== */ 72 | 73 | .handlediv:focus { 74 | .toggle-indicator::before { 75 | box-shadow: none !important; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/misc.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #Miscellaneous 3 | ========================================================================== */ 4 | 5 | /* Nav Tabs 6 | ========================================================================== */ 7 | 8 | .about-wrap h2 .nav-tab-active, 9 | .nav-tab-active, 10 | .nav-tab-active:hover { 11 | background-color: $white-ter; 12 | border-bottom-color: $white-ter; 13 | } 14 | 15 | /* Responsive Admin Menu Toggle 16 | ========================================================================== */ 17 | 18 | div#wp-responsive-toggle a::before { 19 | color: $white; 20 | } 21 | 22 | .wp-responsive-open div#wp-responsive-toggle a { 23 | border-color: transparent; 24 | background: $primary; 25 | } 26 | 27 | .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { 28 | background: darken($trim-darker, 25%); 29 | } 30 | 31 | .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before { 32 | color: $white; 33 | } 34 | 35 | /* TinyMCE 36 | ========================================================================== */ 37 | 38 | .mce-container.mce-menu .mce-menu-item:hover, 39 | .mce-container.mce-menu .mce-menu-item.mce-selected, 40 | .mce-container.mce-menu .mce-menu-item:focus, 41 | .mce-container.mce-menu .mce-menu-item-normal.mce-active, 42 | .mce-container.mce-menu .mce-menu-item-preview.mce-active { 43 | background: $primary; 44 | } 45 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/pointers.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #POINTERS 3 | ========================================================================== */ 4 | 5 | .wp-pointer .wp-pointer-content h3 { 6 | background-color: $primary; 7 | border-color: darken($primary, 5%); 8 | } 9 | 10 | .wp-pointer .wp-pointer-content h3::before { 11 | color: $primary; 12 | } 13 | 14 | .wp-pointer.wp-pointer-top .wp-pointer-arrow, 15 | .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, 16 | .wp-pointer.wp-pointer-undefined .wp-pointer-arrow, 17 | .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { 18 | border-bottom-color: $primary; 19 | } 20 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/tables.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #TABLES 3 | ========================================================================== */ 4 | 5 | .wrap .add-new-h2:hover, 6 | .wrap .page-title-action:hover, 7 | .tablenav .tablenav-pages a:hover, 8 | .tablenav .tablenav-pages a:focus { 9 | color: $white; 10 | background-color: $trim-darker; 11 | } 12 | 13 | .view-switch a.current::before { 14 | color: $trim-darker; 15 | } 16 | 17 | .view-switch a:hover::before { 18 | color: $primary; 19 | } 20 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/themes.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #THEMES 3 | ========================================================================== */ 4 | 5 | 6 | /* Theme Browser 7 | ========================================================================== */ 8 | 9 | .theme-browser .theme.active .theme-name, 10 | .theme-browser .theme.add-new-theme a:hover:after, 11 | .theme-browser .theme.add-new-theme a:focus:after { 12 | background: $primary; 13 | } 14 | 15 | .theme-browser .theme.add-new-theme a:hover span:after, 16 | .theme-browser .theme.add-new-theme a:focus span:after { 17 | color: $primary; 18 | } 19 | 20 | 21 | /* Theme Filter 22 | ========================================================================== */ 23 | 24 | .theme-section.current, 25 | .theme-filter.current { 26 | border-bottom-color: $trim-darker; 27 | } 28 | 29 | body.more-filters-opened .more-filters { 30 | color: $white; 31 | background-color: $trim-darker 32 | } 33 | 34 | body.more-filters-opened .more-filters:before { 35 | color: $white; 36 | } 37 | 38 | body.more-filters-opened .more-filters:hover, 39 | body.more-filters-opened .more-filters:focus { 40 | background-color: $primary; 41 | color: $white; 42 | } 43 | 44 | body.more-filters-opened .more-filters:hover:before, 45 | body.more-filters-opened .more-filters:focus:before { 46 | color: $white; 47 | } 48 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/tsf.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #SEO FRAMEWORK 3 | ========================================================================== */ 4 | 5 | #tsf-inpost-box { 6 | .handlediv, 7 | .hndle { 8 | display: none; 9 | } 10 | 11 | .tsf-flex { 12 | .tsf-flex-setting { 13 | .tsf-flex-setting-label { 14 | background: $trim-darker; 15 | color: $white; 16 | box-shadow: none; 17 | flex: 1 1 75px; 18 | 19 | .tsf-counter { 20 | color: #999; 21 | } 22 | 23 | strong { 24 | font-weight: 500; 25 | } 26 | } 27 | } 28 | 29 | .tsf-flex-nav-tab-wrapper { 30 | border: 0; 31 | 32 | .tsf-flex-nav-tab-inner { 33 | background: $trim-darker; 34 | color: $white; 35 | 36 | .tsf-flex-nav-tab { 37 | .tsf-flex-nav-tab-radio:checked + .tsf-flex-nav-tab-label { 38 | box-shadow: none; 39 | background: $primary; 40 | } 41 | } 42 | } 43 | } 44 | } 45 | } 46 | 47 | /* SEO Framework Extension Bloat 48 | ========================================================================== */ 49 | 50 | #tsfem-actions-pane, 51 | #tsfem-feed-pane, 52 | .tsfem-top-account, 53 | .tsfem-top-about, 54 | .tsfem-footer-wrap, 55 | .tsfem-panes-row:first-child { 56 | display: none !important; 57 | } 58 | -------------------------------------------------------------------------------- /assets/styles/admin/partials/widgets.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #WIDGETS 3 | ========================================================================== */ 4 | 5 | .widgets-chooser li.widgets-chooser-selected { 6 | background-color: $primary; 7 | color: $white; 8 | } 9 | 10 | .widgets-chooser li.widgets-chooser-selected::before, 11 | .widgets-chooser li.widgets-chooser-selected:focus::before { 12 | color: $white; 13 | } 14 | -------------------------------------------------------------------------------- /assets/styles/config/functions.scss: -------------------------------------------------------------------------------- 1 | ///* ========================================================================== 2 | // Functions 3 | // ========================================================================== */ 4 | 5 | /// Replace `$search` with `$replace` in `$string` 6 | /// Used on our SVG icon backgrounds for custom forms. 7 | /// @param {String} $string 8 | /// @param {String} $search 9 | /// @param {String} $replace 10 | /// @return {String} 11 | 12 | @function str-replace($string, $search, $replace: '') { 13 | $index: str-index($string, $search); 14 | 15 | @if $index { 16 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 17 | } 18 | 19 | @return $string; 20 | } 21 | -------------------------------------------------------------------------------- /assets/styles/config/mixins.scss: -------------------------------------------------------------------------------- 1 | ///* ========================================================================== 2 | // #MIXINS 3 | // ========================================================================== */ 4 | 5 | @mixin from($device) { 6 | @media screen and (min-width: $device) { 7 | @content; 8 | } 9 | } 10 | 11 | @mixin until($device) { 12 | @media screen and (max-width: $device - 1px) { 13 | @content; 14 | } 15 | } 16 | 17 | @mixin mobile() { 18 | @media screen and (max-width: $tablet - 1px) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin tablet() { 24 | @media screen and (min-width: $tablet), print { 25 | @content; 26 | } 27 | } 28 | 29 | @mixin tablet-only() { 30 | @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) { 31 | @content; 32 | } 33 | } 34 | 35 | @mixin touch() { 36 | @media screen and (max-width: $desktop - 1px) { 37 | @content; 38 | } 39 | } 40 | 41 | @mixin desktop() { 42 | @media screen and (min-width: $desktop) { 43 | @content; 44 | } 45 | } 46 | 47 | @mixin desktop-only() { 48 | @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) { 49 | @content; 50 | } 51 | } 52 | 53 | @mixin widescreen() { 54 | @media screen and (min-width: $widescreen) { 55 | @content; 56 | } 57 | } 58 | 59 | @mixin widescreen-only() { 60 | @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) { 61 | @content; 62 | } 63 | } 64 | 65 | @mixin fullhd() { 66 | @media screen and (min-width: $fullhd) { 67 | @content; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /assets/styles/config/variables.scss: -------------------------------------------------------------------------------- 1 | ///* ========================================================================== 2 | // #VARIABLES 3 | // ========================================================================== */ 4 | 5 | // Colors 6 | $black: hsl(0, 0%, 4%) !default; 7 | $black-bis: hsl(0, 0%, 7%) !default; 8 | $black-ter: hsl(0, 0%, 14%) !default; 9 | 10 | $grey-darker: hsl(0, 0%, 21%) !default; 11 | $grey-dark: hsl(0, 0%, 29%) !default; 12 | $grey: hsl(0, 0%, 48%) !default; 13 | $grey-light: hsl(0, 0%, 71%) !default; 14 | $grey-lighter: hsl(0, 0%, 86%) !default; 15 | 16 | $white-ter: hsl(0, 0%, 96%) !default; 17 | $white-bis: hsl(0, 0%, 98%) !default; 18 | $white: hsl(0, 0%, 100%) !default; 19 | 20 | $trim-darker: hsl(0, 0%, 15%) !default; 21 | $trim-dark: hsl(0, 0%, 20%) !default; 22 | $trim: hsl(0, 0%, 27%) !default; 23 | $trim-light: hsl(0, 0%, 30%) !default; 24 | $trim-lighter: hsl(0, 0%, 35%) !default; 25 | 26 | $blue: hsl(217, 71%, 53%) !default; 27 | $green: hsl(141, 71%, 48%) !default; 28 | $red: hsl(348, 100%, 61%) !default; 29 | $yellow: hsl(54, 100%, 62%) !default; 30 | 31 | $primary: $blue !default; 32 | $info: $blue !default; 33 | $success: $green !default; 34 | $warning: $yellow !default; 35 | $danger: $red !default; 36 | 37 | $light: $white-ter !default; 38 | $dark: $grey-darker !default; 39 | 40 | // Typography 41 | $family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; 42 | 43 | // Logo 44 | $logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111 72'%3E%3Cpath fill='#{$primary}' fill-rule='evenodd' d='M87.12 0h23.04L87.12 72H66.96L55.44 33.552 43.92 72H23.76L.72 0h23.04l10.368 38.592L45.36 0h20.16l11.232 38.592z'/%3E%3C/svg%3E" !default; 45 | 46 | // Admin Bar 47 | $admin-bar: 2em !default; 48 | $admin-bar-mobile: 2.875em !default; 49 | 50 | $admin-bar-logo: $logo !default; 51 | $admin-bar-logo-width: 16px !default; 52 | $admin-bar-logo-height: 20px !default; 53 | 54 | // Grid 55 | $gap: 64px !default; 56 | 57 | // Breakpoints 58 | $tablet: 769px !default; 59 | $desktop: 960px + (2 * $gap) !default; 60 | $widescreen: 1152px + (2 * $gap) !default; 61 | $fullhd: 1344px + (2 * $gap) !default; 62 | 63 | // Miscellaneous 64 | $speed: 86ms !default; 65 | -------------------------------------------------------------------------------- /assets/styles/login/login.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #WORDPRESS LOGIN 3 | ========================================================================== */ 4 | 5 | // Configuration 6 | @import '../config/functions'; 7 | @import '../config/variables'; 8 | @import '../config/mixins'; 9 | 10 | // Login styles 11 | @import 'partials/core'; 12 | -------------------------------------------------------------------------------- /assets/styles/login/partials/core.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #WORDPRESS LOGIN 3 | ========================================================================== */ 4 | 5 | /* Body 6 | ========================================================================== */ 7 | 8 | body.login { 9 | display: flex; 10 | align-content: center; 11 | color: $white; 12 | background-color: $primary; 13 | font-weight: 500; 14 | 15 | a { 16 | &:focus { 17 | color: $primary; 18 | box-shadow: 0 0 0 1px $primary, 0 0 2px 1px rgba($primary, 0.8); 19 | } 20 | } 21 | } 22 | 23 | /* Auth Check 24 | ========================================================================== */ 25 | 26 | #wp-auth-check-wrap #wp-auth-check { 27 | background-color: $primary; 28 | } 29 | 30 | /* Navigiation 31 | ========================================================================== */ 32 | 33 | .login { 34 | #nav, 35 | #backtoblog { 36 | display: none; 37 | padding: 0 10px 0; 38 | } 39 | 40 | label { 41 | color: darken($white, 15%); 42 | font-weight: 300; 43 | text-transform: uppercase; 44 | } 45 | } 46 | 47 | /* Login Box 48 | ========================================================================== */ 49 | 50 | #login { 51 | padding: 0; 52 | 53 | h1 { 54 | width: 100%; 55 | margin: 0 auto; 56 | 57 | a { 58 | background: $trim-darker; 59 | border-radius: 50%; 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | width: 84px; 64 | font-size: 0 !important; 65 | 66 | &::after { 67 | background: str-replace(url($logo), '#', '%23') center center no-repeat; 68 | background-size: contain; 69 | width: 48px; 70 | height: 48px; 71 | display: block; 72 | content: ''; 73 | } 74 | } 75 | } 76 | } 77 | 78 | /* Login Message / Error 79 | ========================================================================== */ 80 | 81 | .login .message, 82 | .login #login_error { 83 | background-color: $trim-darker; 84 | color: $white; 85 | border-left-color: $success; 86 | font-size: 0.75rem; 87 | 88 | a { 89 | color: $primary; 90 | } 91 | } 92 | 93 | .login .message { 94 | border-left-color: $success; 95 | } 96 | 97 | .login #login_error { 98 | border-left-color: $danger; 99 | } 100 | 101 | /* Login Button 102 | ========================================================================== */ 103 | 104 | .login .button-primary { 105 | padding: 4px 8px; 106 | } 107 | 108 | /* Login Submit 109 | ========================================================================== */ 110 | 111 | #wp-submit { 112 | background: $primary; 113 | border-color: darken($primary, 10%) darken($primary, 15%) darken($primary, 15%); 114 | color: $white; 115 | box-shadow: 0 1px 0 rgba($black, 0.15); 116 | text-shadow: none; 117 | border: none; 118 | outline: none; 119 | cursor: pointer; 120 | 121 | &:hover, 122 | &:focus { 123 | background: lighten($primary, 3%); 124 | border-color: darken($primary, 15%); 125 | color: $white; 126 | box-shadow: 0 1px 0 rgba($black, 0.15); 127 | } 128 | 129 | &:active { 130 | background: darken($primary, 10%); 131 | border-color: darken($primary, 15%); 132 | box-shadow: inset 0 2px 0 rgba($black, 0.15) !important; 133 | } 134 | 135 | &[disabled], 136 | &:disabled, 137 | &.button-primary-disabled, 138 | &.disabled { 139 | color: hsl(hue($primary), 10%, 80%) !important; 140 | background: darken($primary, 8%) !important; 141 | border-color: darken($primary, 15%) !important; 142 | text-shadow: none !important; 143 | } 144 | 145 | &.button-hero { 146 | box-shadow: 0 2px 0 rgba($black, 0.15) !important; 147 | } 148 | } 149 | 150 | /* Login Form 151 | ========================================================================== */ 152 | 153 | #loginform, 154 | #resetpassform, 155 | #lostpasswordform { 156 | border-radius: 4px; 157 | background-color: $trim-darker; 158 | box-shadow: 0 1px 3px rgba($trim-darker, 0.13); 159 | padding: 25px; 160 | } 161 | 162 | /* Login Inputs 163 | ========================================================================== */ 164 | 165 | .login form input { 166 | &[type="text"], 167 | &[type="password"] { 168 | background-color: $trim-darker; 169 | color: $white; 170 | border-color: $trim-dark; 171 | padding: 4px 8px; 172 | margin-top: 5px; 173 | } 174 | 175 | &[type="checkbox"] { 176 | background-color: $trim-darker; 177 | box-shadow: inset 0 0 2px rgba($black, 0.15); 178 | border-color: $trim-dark; 179 | 180 | &:checked::before { 181 | color: $white; 182 | } 183 | } 184 | 185 | &:focus { 186 | box-shadow: inset 0 0 2px rgba($black, 0.15); 187 | border-color: $primary; 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /assets/styles/wp-classes.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #WORDPRESS 3 | ========================================================================== */ 4 | 5 | /* TinyMCE Alignment 6 | ========================================================================== */ 7 | 8 | .alignnone { 9 | margin-left: 0; 10 | margin-right: 0; 11 | max-width: 100%; 12 | height: auto; 13 | display: block; 14 | } 15 | 16 | .aligncenter { 17 | display: block; 18 | margin-left: auto; 19 | margin-right: auto; 20 | text-align: center; 21 | } 22 | 23 | .alignleft, 24 | .content-image .alignleft.wp-caption { 25 | float: left; 26 | margin-right: 25px; 27 | } 28 | 29 | .alignright, 30 | .content-image .alignright.wp-caption { 31 | float: right; 32 | margin-left: 25px; 33 | text-align: right; 34 | } 35 | 36 | /* Captions 37 | ========================================================================== */ 38 | 39 | .wp-caption { 40 | max-width: 100%; 41 | text-align: center; 42 | 43 | br { 44 | display: none; 45 | } 46 | } 47 | 48 | .wp-caption-text { 49 | margin: rem(10px) rem(30px) 0; 50 | font-size: rem(16px); 51 | } 52 | -------------------------------------------------------------------------------- /login.scss: -------------------------------------------------------------------------------- 1 | // Login styles 2 | @import 'assets/styles/login/login'; 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wordpress-ui", 3 | "version": "1.1.1", 4 | "author": "Brandon Nifong ", 5 | "homepage": "https://github.com/log1x/wordpress-ui", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/log1x/wordpress-ui.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/log1x/wordpress-ui/issues" 12 | }, 13 | "main": "assets/scripts/main.js", 14 | "scripts": { 15 | "build": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 16 | "build:production": "npm run -s clean && NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 17 | "start": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 18 | "clean": "npm run -s clean:dist", 19 | "clean:dist": "rimraf dist" 20 | }, 21 | "engines": { 22 | "node": ">= 6.9.4" 23 | }, 24 | "devDependencies": { 25 | "laravel-mix": "^4.0.15", 26 | "rimraf": "^2.6.3", 27 | "sass": "^1.17.3", 28 | "sass-loader": "^7.1.0", 29 | "stylelint": "^9.10.1", 30 | "stylelint-scss": "^3.5.4", 31 | "stylelint-webpack-plugin": "^0.10.5", 32 | "vue-template-compiler": "^2.6.9" 33 | }, 34 | "dependencies": { 35 | "dayjs": "^1.8.10", 36 | "jquery": "^3.3.1", 37 | "stylelint-config-standard": "^18.2.0" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /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 Laravel application. By default, we are compiling the Sass 10 | | file for the application as well as bundling up all the JS files. 11 | | 12 | */ 13 | 14 | const assets = 'assets'; 15 | const dist = 'dist'; 16 | 17 | mix.setPublicPath(dist); 18 | 19 | // Sass 20 | mix.sass(`${assets}/styles/admin/admin.scss`, `${dist}/styles/admin.css`) 21 | .sass(`${assets}/styles/login/login.scss`, `${dist}/styles/login.css`) 22 | .sass(`${assets}/styles/wp-classes.scss`, `${dist}/styles/wp-classes.css`); 23 | 24 | // Javascript 25 | mix.js(`${assets}/scripts/main.js`, `${dist}/scripts`); 26 | 27 | // Autoload 28 | mix.autoload({ 29 | jquery: ['$', 'window.jQuery'] 30 | }); 31 | 32 | // Options 33 | mix.options({ 34 | processCssUrls: false, 35 | }); 36 | 37 | // Source maps when not in production. 38 | if (!mix.inProduction()) { 39 | mix.sourceMaps(); 40 | } 41 | 42 | // Hash and version files in production. 43 | if (mix.inProduction()) { 44 | mix.version() 45 | .then(() => { 46 | const manifest = File.find(`${dist}/mix-manifest.json`); 47 | const json = JSON.parse(manifest.read()); 48 | Object.keys(json).forEach(key => { 49 | const hashed = json[key]; 50 | delete json[key]; 51 | json[key.replace(/^\/+/g, '')] = hashed.replace(/^\/+/g, ''); 52 | }); 53 | manifest.write(JSON.stringify(json, null, 2)); 54 | }); 55 | } 56 | -------------------------------------------------------------------------------- /wp-classes.scss: -------------------------------------------------------------------------------- 1 | // Wordpress Styles 2 | @import 'assets/styles/wp-classes'; 3 | --------------------------------------------------------------------------------