Fixed header spacing.

claroalter/claroalter.info.yml

@@ -4,12 +4,13 @@ base theme: claro
 description: 'DesignHammer Admin Theme Enhancements'
 core_version_requirement: ^9 || ^10
 
-version: '0.1.2'
+version: '0.1.3'
 
 libraries:
   - claro/global-styling
-  - claroalter/claroalter-styling
-# - claroalter/claroalter-overrides
+  - claroalter/claroalter-main
+  # - claroalter/claroalter-style
+  # - claroalter/claroalter-script
 
 # Regions
 regions:

claroalter/claroalter.libraries.yml

@@ -1,12 +1,21 @@
-claroalter-styling:
+claroalter-main:
   version: VERSION
   css:
     theme:
       https://d2l93ubdpzcjcv.cloudfront.net/claroalter/css/style.css: { type: external, minified: true, attributes: { crossorigin: anonymous } }
       https://d2l93ubdpzcjcv.cloudfront.net/claroalter/css/toolbar.css: { type: external, minified: true, attributes: { crossorigin: anonymous } }
 
-claroalter-overrides:
+claroalter-style:
   version: VERSION
   css:
     theme:
-      css/claroalter-override.css: {}
+      css/style-overrides.css: {}
+
+claroalter-script:
+  version: VERSION
+  js:
+    js/script-overrides.js: {}
+  dependencies:
+    - core/drupal
+    - core/jquery
+    - core/once

claroalter/js/script-overrides.js

@@ -0,0 +1 @@
+// claroalter overrides

claroalter_base/bsync-config.js

@@ -0,0 +1,37 @@
+/*
+|--------------------------------------------------------------------------
+| Browser-sync config file
+|--------------------------------------------------------------------------
+|
+| For up-to-date information about the options:
+|   http://www.browsersync.io/docs/options/
+|
+| There are more options than you see here, these are just the ones that are
+| set internally. See the website for more info.
+|
+|
+*/
+module.exports = {
+  port: 3110,
+  proxy: 'local.drupal10.test',
+  open: false,
+  browser: 'google chrome',
+  ghostMode: false,
+  notify: true,
+  ui: false,
+  files: [
+    './css/style.css',
+    './css/toolbar.css',
+    './js/min/script.js'
+  ],
+  snippetOptions: {
+    // Load Browsersync inject code before the closing body tag
+    // in-order to avoid issues with D10's admin toolbar.
+    rule: {
+      match: /<\/body>/i,
+      fn: function (snippet, match) {
+        return snippet + match
+      }
+    }
+  }
+}

claroalter_base/package.json

@@ -10,19 +10,40 @@
   "license": "GPL-2.0 AND MIT",
   "homepage": "https://designhammer.com",
   "scripts": {
-    "style": "node -e \"require('./build').buildCSS()\"",
-    "toolbar": "node -e \"require('./build').buildToolbarCSS()\"",
-    "script": "node -e \"require('./build').minifyJS()\"",
-    "watch": "node -e \"require('./build').watchFiles()\""
+    "serve": "browser-sync start --config './bsync-config.js'",
+
+    "styles": "sass --style=expanded --error-css --source-map ./src/sass/style.scss ./css/style.css",
+    "postcss": "postcss ./css/style.css --use autoprefixer --no-map --replace",
+    "styles:toolbar": "sass --style=expanded --error-css --source-map ./src/sass/toolbar.scss ./css/toolbar.css",
+    "postcss:toolbar": "postcss ./css/toolbar.css --use autoprefixer --no-map --replace",
+    "scripts": "mkdir -p ./js && uglifyjs ./src/js/script.js --source-map --compress --output ./js/script.js",
+
+    "build:styles": "yarn styles && yarn postcss",
+    "build": "yarn build:styles && yarn scripts",
+
+    "styles:onchange": "nodemon --watch ./src/sass/ --ext scss --exec 'yarn styles' --quiet",
+    "scripts:onchange": "nodemon --watch ./src/js/ --ext js --exec 'yarn scripts' --quiet",
+
+    "watch:styles": "concurrently --raw --kill-others 'yarn serve' 'yarn styles:onchange'",
+    "watch:scripts": "concurrently --raw --kill-others 'yarn serve' 'yarn scripts:onchange'",
+    "watch": "concurrently --raw --kill-others 'yarn serve' 'yarn styles:onchange' 'yarn scripts:onchange'"
   },
+  "browserslist": [
+    "> 0.2%",
+    "last 2 version",
+    "Firefox ESR",
+    "not dead"
+  ],
   "devDependencies": {
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
     "browser-sync": "^2.29.3",
-    "postcss": "^8.4.28",
-    "sass": "^1.66.1",
+    "concurrently": "^8.2.2",
+    "nodemon": "^3.0.1",
+    "postcss": "^8.4.31",
+    "sass": "^1.69.5",
     "sass-migrator": "^1.7.3",
     "standard": "^17.1.0",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-order": "^6.0.3",
     "uglify-js": "^3.17.4",

claroalter_base/src/sass/_main.scss

@@ -11,10 +11,6 @@
   --color-absolutezero-active: var(--color-primary-highlight);
 }
 
-.el {
-  backdrop-filter: blur(10px);
-}
-
 a:focus,
 .claro-details__summary::after {
   outline: 0 !important;
@@ -27,6 +23,7 @@ a:focus,
 
   .content-header {
     background-color: var(--color-gray-050);
+    margin: 0;
     padding-right: 3rem;
     padding-left: 3rem;
   }
@@ -41,7 +38,11 @@ a:focus,
 }
 
 .page-content {
+  background-color: #fff;
+  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 10%);
+  margin-top: 0;
   margin-bottom: 0;
+  padding-top: 1rem;
 }
 
 .region-highlighted,
@@ -52,11 +53,12 @@ a:focus,
   padding-left: 3rem;
 }
 
-#block-claroalter-content {
-  background-color: #fff;
-  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 10%);
-  margin-top: 2rem;
-  padding: 1rem 3rem 3rem;
+.region-content {
+
+  #block-claroalter-content {
+    background-color: #fff;
+    padding: 0 3rem 3rem;
+  }
 }
 
 .region-content-bottom {
@@ -91,13 +93,7 @@ a:focus,
 }
 
 .tabs.tabs--secondary::after {
-  content: "";
-  border-bottom: 1px solid #ddd;
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  border-bottom-style: none;
 }
 
 .views-tabs .action-list li,