@concretecms/bedrock 1.1.1 → 1.1.5

package/assets/bedrock/scss/_frontend.scss

@@ -5,6 +5,7 @@
 @import '@fortawesome/fontawesome-free/scss/variables';
 
 // Import Theme Foundation items
+@import 'theme-context-root';
 @import 'mixins';
 @import 'utilities';
 @import 'theme-grid';

package/assets/bedrock/scss/_theme-context-root.scss

@@ -0,0 +1,17 @@
+// What is the purpose of this file, you ask?
+// In our theme color input selector, we use CSS variables to display colors.
+// e.g. var(--bs-primary)
+// However, since .ccm-ui has the CMS variables attached to it, and the ::root has the
+// theme bootstrap variables attached to it, the primary color shown in the color input
+// Will come from .ccm-ui instead of ::root, since .ccm-ui is inside ::root.
+// So instead, let's ALSO define the theme colors against the .ccm-context-theme
+// class, and then wrap any controls that need to have access to theme specific variables
+// within the .ccm-context-theme class.
+
+.ccm-context-theme {
+
+  @each $color, $value in $theme-colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+}

package/assets/bedrock/scss/_theme-grid.scss

@@ -1,5 +1,7 @@
 // This file ensures that the layout tools work with this theme grid
+div#ccm-theme-grid-temp,
 div#ccm-theme-grid-edit-mode-row-wrapper {
-  display: flex;
-  width: 100%;
+  div.row {
+    position: relative; // This is necessary in order for the javascript to correctly use jquery position() calls
+  }
 }

package/assets/cms/components/customizer/FontFamilyPageCustomizerWidget.vue

@@ -1,7 +1,7 @@
 <template>
     <select @change="componentUpdated" class="selectpicker" v-model="selectedFont">
         <option value="" :data-content="'<span>Default</span>'">Default</option>
-        <option v-for="font in webFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
+        <option v-for="font in customFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
         <option v-for="font in standardFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
     </select>
 </template>
@@ -42,13 +42,13 @@ export default {
         }
     },
     computed: {
-        webFonts: function() {
+        customFonts: function() {
             var fonts = []
             var my = this
             this.styleValue.style.fonts.forEach(function(font) {
                 fonts.push(font.name)
             })
-            if (fonts.indexOf(my.selectedFont) === -1) {
+            if (fonts.indexOf(my.selectedFont) === -1 && my.standardFonts.indexOf(my.selectedFont) === -1) {
                 fonts.push(my.selectedFont)
             }
             return fonts

package/assets/cms/components/customizer/ThemeCustomizer.vue

@@ -178,7 +178,7 @@ export default {
                     url: my.createNewSkinAction,
                     data: {
                         skinName: my.newSkinName,
-                        styles: my.customizerStyles,
+                        styles: JSON.stringify(my.customizerStyles),
                         customCss: my.customizerCustomCss,
                         ccm_token: CCM_SECURITY_TOKEN
                     },
@@ -301,7 +301,7 @@ export default {
             new ConcreteAjaxRequest({
                 url: my.saveSkinAction,
                 data: {
-                    styles: my.customizerStyles,
+                    styles: JSON.stringify(my.customizerStyles),
                     customCss: my.customizerCustomCss,
                     ccm_token: CCM_SECURITY_TOKEN
                 },

package/assets/cms/components/form/ConcreteThemeColorInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="mb-3">
+    <div class="mb-3 ccm-context-theme">
         <select :name="inputName" data-select="theme-colors" data-width="100%">
             <option v-for="color in colorCollection.colors" :selected="selectedColor == color.variable" :data-content="dataContentAttribute(color)" :value="color.variable">{{ color.name }}</option>
         </select>

package/assets/cms/js/edit-mode/layouts.js

@@ -173,8 +173,8 @@ ConcreteLayout.prototype._setupFormEvents = function () {
 ConcreteLayout.prototype.buildThemeGridGrid = function () {
     this.$element.html('')
 
-    var row = this.options.rowstart
-    row += '<div id="ccm-theme-grid-edit-mode-row-wrapper">'
+    var row = '<div id="ccm-theme-grid-edit-mode-row-wrapper">'
+    row += this.options.rowstart
 
     var columnSpans = this._getThemeGridColumnSpan(this.columns)
     $.each(columnSpans, function (i, spanInfo) {
@@ -213,8 +213,8 @@ ConcreteLayout.prototype._updateThemeGridView = function (presetLoad) {
 
 ConcreteLayout.prototype._buildThemeGridGridFromPresetColumns = function (arLayoutColumns) {
     this.$element.html('')
-    var row = this.options.rowstart
-    row += '<div id="ccm-theme-grid-edit-mode-row-wrapper">'
+    var row = '<div id="ccm-theme-grid-edit-mode-row-wrapper">'
+    row += this.options.rowstart
     $.each(arLayoutColumns, function (i, column) {
         var columnHTML = '<div id="ccm-edit-layout-column-' + i + '" class="ccm-theme-grid-column" ' +
             'data-offset="' + column.arLayoutColumnOffset + '" data-span="' + column.arLayoutColumnSpan + '"><div class="ccm-layout-column-highlight">' +

package/assets/cms/scss/_toolbar.scss

@@ -201,6 +201,7 @@ div#ccm-toolbar {
     li.ccm-toolbar-page-edit-mode-active {
       > a {
         background-color: $green;
+        color: #fff;
 
         svg {
           fill: white;
@@ -517,3 +518,11 @@ ul.ccm-mobile-menu {
     }
   }
 }
+
+html.ccm-toolbar-visible {
+  .ccm-page {
+    // This used to be dynamically included in the theme. Now we're moving it here.
+    // The purpose of this code is to push the content of the page down if the toolbar appears at the top.
+    margin-top: 48px;
+  }
+}

package/assets/cms/scss/bootstrap/_reboot.scss

@@ -20,35 +20,6 @@
 }
 
 
-// Root
-//
-// Ability to the value of the root font sizes, affecting the value of `rem`.
-// null by default, thus nothing is generated.
-
-:root {
-  font-size: $font-size-root;
-
-  @if $enable-smooth-scroll {
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-}
-
-
-// Body
-//
-// 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Prevent adjustments of font size after orientation changes in iOS.
-// 4. Change the default tap highlight to be completely transparent in iOS.
-
-html.ccm-toolbar-visible {
-  // We _could_ set this by setting font-size-root, but we don't really want to screw with the theme loading this
-  // unless we know the toolbar is visible.
-  font-size: 16px; // By setting this here, rem declarations in BS5 work off of 16px, and the base theme can do whatever it wants at body
-}
-
 .ccm-ui {
   margin: 0; // 1
   font-family: $font-family-base;

package/assets/imagery/scss/frontend/_hero-image.scss

@@ -12,6 +12,13 @@ div.ccm-block-hero-image {
     width: 100%;
   }
 
+  div.ccm-block-hero-image-text {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
   div.ccm-block-hero-image-cover {
     z-index: 2;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.1.1",
+  "version": "1.1.5",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",
@@ -21,7 +21,7 @@
     "bootstrap": "^5.0.1",
     "bootstrap-select": "^1.14.0-beta2",
     "bootstrap-tourist": "git+https://git@github.com/concrete5/bootstrap-tourist.git",
-    "ckeditor4": "^4.16.2",
+    "ckeditor4": "^4.17.1",
     "ckeditor4-vue": "^1.3.2",
     "dropzone": "^5.7.2",
     "fullcalendar": "^3.10.2",